{"_id":"@1inch-extension/talisman-ui","name":"@1inch-extension/talisman-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@1inch-extension/talisman-ui","version":"1.0.0","private":false,"publishConfig":{"access":"public"},"license":"GPL-3.0-or-later","main":"dist/1inch-extension-talisman-ui.cjs.js","module":"dist/1inch-extension-talisman-ui.esm.js","exports":{".":"./src/index.ts","./package.json":"./package.json","./styles.css":"./src/styles/styles.css","./tailwind.config.cjs":"./src/config/tailwind.config.cjs"},"scripts":{"lint":"eslint src --max-warnings 0","clean":"rm -rf dist .turbo node_modules"},"dependencies":{"@1inch-extension/icons":"workspace:*","webfontloader":"^1.6.28"},"devDependencies":{"@floating-ui/react":"0.26.25","@headlessui/react":"2.1.10","@tailwindcss/forms":"^0.5.9","@1inch-extension/eslint-config":"workspace:*","@1inch-extension/tsconfig":"workspace:*","@1inch-extension/util":"workspace:*","@types/react":"18.3.12","@types/react-dom":"18.3.1","@types/webfontloader":"^1.6.38","autoprefixer":"^10.4.20","color":"4.2.3","eslint":"^8.57.1","framer-motion":"11.11.9","lottie-react":"2.4.0","postcss":"^8.4.47","react":"18.3.1","react-dom":"18.3.1","react-router-dom":"6.27.0","react-use":"17.5.1","tailwindcss":"^3.4.14","typescript":"^5.6.3"},"peerDependencies":{"@floating-ui/react":">=0.20.1","@headlessui/react":">=1.7.13","@tailwindcss/container-queries":">=0.1.1","@tailwindcss/forms":">=0.5.3","@1inch-extension/util":"*","autoprefixer":">=10.4.12","color":">=4.2.3","framer-motion":">=10.10.0","lottie-react":">=2.3.1","postcss":"*","react":">=18.2.0","react-dom":">=18.2.0","react-router-dom":">=6.3.0","react-use":">=17.4.0","tailwindcss":">=3.1.8"},"preconstruct":{"exports":{"extra":{".":"./src/index.ts","./styles.css":"./src/styles/styles.css","./tailwind.config.cjs":"./src/config/tailwind.config.cjs"}}},"_id":"@1inch-extension/talisman-ui@1.0.0","gitHead":"0c9b3c770d93acfe15564aed1af0f483afd6a8ba","types":"./dist/1inch-extension-talisman-ui.cjs.d.ts","description":"Shared UI components.","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-k8LlTHC17uNX4swStTANt5G+YWPIZW6JeZPTPYRHpOaWT4t/gqDplWBsYPO9ORUKbJ4jsby/pXXQS3SLXtSS9w==","shasum":"0ddbf5e6f6d407e602d7104b0c37801689c3eb70","tarball":"https://registry.npmjs.org/@1inch-extension/talisman-ui/-/talisman-ui-1.0.0.tgz","fileCount":57,"unpackedSize":1025138,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGhC870EVcYqH501GUvPsziSxeU55uJgja4DH4pE17mhAiAqP2O5x5yk5Sn2Y1Ws7ztXZRWoZA814PLXcw88xlcDjg=="}]},"_npmUser":{"name":"cryptodapps","email":"gextension@cryptodapps.ltd"},"directories":{},"maintainers":[{"name":"cryptodapps","email":"gextension@cryptodapps.ltd"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/talisman-ui_1.0.0_1757201299249_0.47343694687904736"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-06T23:28:19.184Z","1.0.0":"2025-09-06T23:28:19.499Z","modified":"2025-09-06T23:28:19.731Z"},"maintainers":[{"name":"cryptodapps","email":"gextension@cryptodapps.ltd"}],"description":"Shared UI components.","license":"GPL-3.0-or-later","readme":"# talisman-ui\r\n\r\nShared UI components.\r\n\r\nThis library is meant to be used as an internal dependency, which helps consuming it from inside the monorepo without the need to build it.\r\n\r\n## Setup in a dapp (or extension) to use this library\r\n\r\nAdd dependencies :\r\n\r\n```bash\r\npnpm --filter <my-workspace-name> add -D tailwindcss autoprefixer postcss\r\n```\r\n\r\nAt the root of the new project, create a `tailwind.config.cjs` file with the following content :\r\n\r\n```js\r\n/* eslint-env es2021 */\r\nconst TALISMAN_TAILWIND_CONFIG = require(\"talisman-ui/tailwind.config.cjs\")\r\n\r\n/** @type {import('tailwindcss').Config} */\r\nmodule.exports = {\r\n  ...TALISMAN_TAILWIND_CONFIG,\r\n  content: [\r\n    \"./**/*.{html,ts,tsx,svg}\",\r\n    \"./public/*.html\",\r\n    \"../../packages/talisman-ui/**/*.{html,ts,tsx,svg,css}\",\r\n  ],\r\n}\r\n```\r\n\r\nAt the root of the new project, create a `postcss.config.cjs` file with the following content :\r\n\r\n```js\r\n/* eslint-env es2021 */\r\nconst tailwindcss = require(\"tailwindcss\")\r\nconst autoprefixer = require(\"autoprefixer\")\r\n\r\nmodule.exports = {\r\n  plugins: [tailwindcss(\"./tailwind.config.cjs\"), autoprefixer],\r\n}\r\n```\r\n\r\nIn the new project, create a `src/styles/styles.css` with the following content :\r\n\r\n```css\r\n@import \"talisman-ui/styles.css\";\r\n\r\n@layer base {\r\n  /* Your base style (defaults) here */\r\n}\r\n\r\n@layer components {\r\n  /* Your reusable component classes here */\r\n}\r\n\r\n@layer utilities {\r\n  /* Your utility classes here */\r\n}\r\n```\r\n\r\nThen import that file in your website entry point :\r\n\r\n```tsx\r\n// index.tsx\r\nimport \"./styles/styles.css\"\r\n```\r\n\r\nNote : if using webpack, postcss will throw an error when trying to import the css file from talisman-ui.  \r\nAdd `postcss-import` to the beginning of your `plugins` array inside your `postcss.config.cjs`, and change the import to be `import \"@import \"talisman-ui/src/styles/styles.css\";`.\r\n\r\n```js\r\n/* eslint-env es2021 */\r\nconst postcssImport = require(\"postcss-import\")\r\nconst tailwindcss = require(\"tailwindcss\")\r\nconst autoprefixer = require(\"autoprefixer\")\r\n\r\nmodule.exports = {\r\n  plugins: [postcssImport, tailwindcss(\"./tailwind.config.cjs\"), autoprefixer],\r\n}\r\n```\r\n\r\nFinally, import all the fonts from the [fonts](./fonts) folder of this project. Easiest way is to copy paste the folder into the public folder of the app, and add `<link rel=\"stylesheet\" href=\"/fonts/fonts.css\" />` to the `head` section of your index.html.\r\n","readmeFilename":"README.md","_rev":"1-e91a6414735acfc7b6a15b541a98c012"}