{"_id":"@alsaeedfayed/sa-ui-lib","_rev":"4-92d3bce389a5ad58e8613f18921d0a06","name":"@alsaeedfayed/sa-ui-lib","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@alsaeedfayed/sa-ui-lib","version":"0.1.0","keywords":["walmart","ui","design-system","react","tailwind","shadcn"],"license":"MIT","_id":"@alsaeedfayed/sa-ui-lib@0.1.0","maintainers":[{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"}],"homepage":"https://github.com/alsaeedfayed/SA-UI-LIB#readme","bugs":{"url":"https://github.com/alsaeedfayed/SA-UI-LIB/issues"},"dist":{"shasum":"559e8df598df158d848cbc408c1fc42770c53629","tarball":"https://registry.npmjs.org/@alsaeedfayed/sa-ui-lib/-/sa-ui-lib-0.1.0.tgz","fileCount":17,"integrity":"sha512-OZXC2TmvUb3Y3XIeX7HTexpKng+DnsTXZ5BoznqpZOmFKWtF5Roo8p9/6J/01REbpA4AVnZ+/UF7ZXPzHQzTXQ==","signatures":[{"sig":"MEYCIQDkFzLbFW+6PDN/lVd3OM8ObZNcKwT3CQV1Os3DGkLMRgIhAMjz43AAXlWbPIgcP+4RdC2bDc23rBtSdD7RB+UaPyMM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":143999},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/index.css","./design-system":{"types":"./dist/design-system/index.d.ts","import":"./dist/design-system/index.mjs","require":"./dist/design-system/index.js"}},"gitHead":"270b537142479fc568af13dd957b27d65ddceb91","scripts":{"dev":"tsup --watch","lint":"eslint src/","build":"tsup","clean":"rm -rf dist","playground":"vite --config playground/vite.config.ts","playground:build":"vite build --config playground/vite.config.ts"},"_npmUser":{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"},"repository":{"url":"git+https://github.com/alsaeedfayed/SA-UI-LIB.git","type":"git"},"_npmVersion":"11.10.1","description":"UI Library & Shared Components","directories":{},"_nodeVersion":"20.19.0","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.2.0","@radix-ui/react-slot":"^1.1.0","class-variance-authority":"^0.7.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.70.0","tsup":"^8.0.0","vite":"^7.3.1","react":"^18.2.0","postcss":"^8.4.0","react-dom":"^18.2.0","typescript":"^5.3.0","tailwindcss":"^4.0.0","@types/react":"^18.2.0","autoprefixer":"^10.4.0","@types/react-dom":"^18.2.0","@tailwindcss/vite":"^4.2.1","esbuild-sass-plugin":"^3.3.0","@tailwindcss/postcss":"^4.0.0","@vitejs/plugin-react":"^5.1.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/sa-ui-lib_0.1.0_1773010602912_0.27912015626696784","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@alsaeedfayed/sa-ui-lib","version":"0.1.1","keywords":["walmart","ui","design-system","react","tailwind","shadcn"],"license":"MIT","_id":"@alsaeedfayed/sa-ui-lib@0.1.1","maintainers":[{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"}],"homepage":"https://github.com/alsaeedfayed/SA-UI-LIB#readme","bugs":{"url":"https://github.com/alsaeedfayed/SA-UI-LIB/issues"},"dist":{"shasum":"e75c835907165b0a14aa4e126ef0ae1f17ce6c3e","tarball":"https://registry.npmjs.org/@alsaeedfayed/sa-ui-lib/-/sa-ui-lib-0.1.1.tgz","fileCount":25,"integrity":"sha512-cfcXwOrooX5FMd9ZXN63TBwocpDHstaDtgzoGa322d8nxJVWicIH6s7S2TytIhvtSfTJIZcDOuNlFQnHS7NcIw==","signatures":[{"sig":"MEYCIQC9uR4Jfj6kNIb1U1sZoHIVoKkXPd96ZO05wM82piFxRgIhAKPZ92Wx0CTYL8m/upYS/1JnHgVgzxHCeIPKhvpGODEW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":163651},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":{"import":"./dist/index.css","default":"./dist/index.css","require":"./dist/index.css"},"./design-system":{"types":"./dist/design-system/index.d.ts","import":"./dist/design-system/index.mjs","require":"./dist/design-system/index.js"},"./tailwind.config":{"import":"./tailwind.config.ts","default":"./tailwind.config.ts","require":"./tailwind.config.ts"}},"gitHead":"270b537142479fc568af13dd957b27d65ddceb91","scripts":{"dev":"tsup --watch","lint":"eslint src/","build":"tsup","clean":"rm -rf dist","playground":"vite --config playground/vite.config.ts","playground:build":"vite build --config playground/vite.config.ts"},"_npmUser":{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"},"repository":{"url":"git+https://github.com/alsaeedfayed/SA-UI-LIB.git","type":"git"},"_npmVersion":"11.10.1","description":"UI Library & Shared Components","directories":{},"_nodeVersion":"20.19.0","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.2.0","@radix-ui/react-slot":"^1.1.0","class-variance-authority":"^0.7.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.70.0","tsup":"^8.0.0","vite":"^7.3.1","react":"^18.2.0","postcss":"^8.4.0","react-dom":"^18.2.0","typescript":"^5.3.0","tailwindcss":"^4.0.0","@types/react":"^18.2.0","autoprefixer":"^10.4.0","@types/react-dom":"^18.2.0","@tailwindcss/vite":"^4.2.1","esbuild-sass-plugin":"^3.3.0","@tailwindcss/postcss":"^4.0.0","@vitejs/plugin-react":"^5.1.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/sa-ui-lib_0.1.1_1773013587701_0.20697870429494003","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@alsaeedfayed/sa-ui-lib","version":"0.1.2","keywords":["walmart","ui","design-system","react","tailwind","shadcn"],"license":"MIT","_id":"@alsaeedfayed/sa-ui-lib@0.1.2","maintainers":[{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"}],"homepage":"https://github.com/alsaeedfayed/SA-UI-LIB#readme","bugs":{"url":"https://github.com/alsaeedfayed/SA-UI-LIB/issues"},"dist":{"shasum":"80f8c5b29e0f366cae0e612c16ca3c3dce17120e","tarball":"https://registry.npmjs.org/@alsaeedfayed/sa-ui-lib/-/sa-ui-lib-0.1.2.tgz","fileCount":26,"integrity":"sha512-DuQ5saIasCp6gLRW/qcjReWsfR/V0yHOX6noUcoxnvsQziOokzLZL4R1F+D7vp/cf0R+4rsuJ0QKKCFGXS/OdQ==","signatures":[{"sig":"MEQCIGc8h7ui3/dNjAe/9D7NswmYtcC07fkJqEf4+VzoEI3aAiBqN4eK1fuAMvVIyMyRoN4vvLWvNFLIDzV/kQC1pfMfmw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":163751},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":{"types":"./styles.d.ts","import":"./dist/index.css","default":"./dist/index.css","require":"./dist/index.css"},"./design-system":{"types":"./dist/design-system/index.d.ts","import":"./dist/design-system/index.mjs","require":"./dist/design-system/index.js"},"./tailwind.config":{"import":"./tailwind.config.ts","default":"./tailwind.config.ts","require":"./tailwind.config.ts"}},"gitHead":"270b537142479fc568af13dd957b27d65ddceb91","scripts":{"dev":"tsup --watch","lint":"eslint src/","build":"tsup","clean":"rm -rf dist","playground":"vite --config playground/vite.config.ts","playground:build":"vite build --config playground/vite.config.ts"},"_npmUser":{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"},"repository":{"url":"git+https://github.com/alsaeedfayed/SA-UI-LIB.git","type":"git"},"_npmVersion":"11.10.1","description":"UI Library & Shared Components","directories":{},"_nodeVersion":"20.19.0","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.2.0","@radix-ui/react-slot":"^1.1.0","class-variance-authority":"^0.7.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.70.0","tsup":"^8.0.0","vite":"^7.3.1","react":"^18.2.0","postcss":"^8.4.0","react-dom":"^18.2.0","typescript":"^5.3.0","tailwindcss":"^4.0.0","@types/react":"^18.2.0","autoprefixer":"^10.4.0","@types/react-dom":"^18.2.0","@tailwindcss/vite":"^4.2.1","esbuild-sass-plugin":"^3.3.0","@tailwindcss/postcss":"^4.0.0","@vitejs/plugin-react":"^5.1.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/sa-ui-lib_0.1.2_1773014026613_0.4729049138493089","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@alsaeedfayed/sa-ui-lib","version":"0.1.3","description":"UI Library & Shared Components","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":{"types":"./styles.d.ts","import":"./dist/index.css","require":"./dist/index.css","default":"./dist/index.css"},"./design-system":{"types":"./dist/design-system/index.d.ts","import":"./dist/design-system/index.mjs","require":"./dist/design-system/index.js"},"./tailwind.config":{"import":"./tailwind.config.ts","require":"./tailwind.config.ts","default":"./tailwind.config.ts"}},"scripts":{"build":"tsup","dev":"tsup --watch","playground":"vite --config playground/vite.config.ts","playground:build":"vite build --config playground/vite.config.ts","lint":"eslint src/","clean":"rm -rf dist"},"dependencies":{"@radix-ui/react-select":"^2.2.6","@radix-ui/react-slot":"^1.1.0","class-variance-authority":"^0.7.0","clsx":"^2.1.0","lucide-react":"^0.577.0","tailwind-merge":"^2.2.0"},"devDependencies":{"@tailwindcss/postcss":"^4.0.0","@tailwindcss/vite":"^4.2.1","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^5.1.4","autoprefixer":"^10.4.0","esbuild-sass-plugin":"^3.3.0","postcss":"^8.4.0","react":"^18.2.0","react-dom":"^18.2.0","sass":"^1.70.0","tailwindcss":"^4.0.0","tsup":"^8.0.0","typescript":"^5.3.0","vite":"^7.3.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"keywords":["walmart","ui","design-system","react","tailwind","shadcn"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alsaeedfayed/SA-UI-LIB.git"},"gitHead":"4b283a36771e70c752ec924c6789348ec723a293","_id":"@alsaeedfayed/sa-ui-lib@0.1.3","bugs":{"url":"https://github.com/alsaeedfayed/SA-UI-LIB/issues"},"homepage":"https://github.com/alsaeedfayed/SA-UI-LIB#readme","_nodeVersion":"20.19.0","_npmVersion":"11.10.1","dist":{"integrity":"sha512-niW7vat4MbeDnIZRISHb4ueCvz8A0vbsJIV+HPmCyhWKYXGP09wcjtDB4zYlPVIy4+da8I4lIN5SzjHg9ySpdw==","shasum":"187519902efe88497b53a993a260fe23b45e2809","tarball":"https://registry.npmjs.org/@alsaeedfayed/sa-ui-lib/-/sa-ui-lib-0.1.3.tgz","fileCount":26,"unpackedSize":198356,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCGiNSc8cAWQvr2EwTLhjQOiqBhvfFgN5jqz2QIieGBRQIgXQYqDanYzXfgxRT9Vv86DWJwNiSJzcKoNKSQApUmwGI="}]},"_npmUser":{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"},"directories":{},"maintainers":[{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sa-ui-lib_0.1.3_1773085434771_0.5530642565267223"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-08T22:56:42.806Z","modified":"2026-03-09T19:43:55.081Z","0.1.0":"2026-03-08T22:56:43.056Z","0.1.1":"2026-03-08T23:46:27.893Z","0.1.2":"2026-03-08T23:53:46.809Z","0.1.3":"2026-03-09T19:43:54.923Z"},"bugs":{"url":"https://github.com/alsaeedfayed/SA-UI-LIB/issues"},"license":"MIT","homepage":"https://github.com/alsaeedfayed/SA-UI-LIB#readme","keywords":["walmart","ui","design-system","react","tailwind","shadcn"],"repository":{"type":"git","url":"git+https://github.com/alsaeedfayed/SA-UI-LIB.git"},"description":"UI Library & Shared Components","maintainers":[{"name":"a0s1ryr","email":"alsaeedfayed@gmail.com"}],"readme":"# @alsaeedfayed/ui-lib\n\nDesign System & Shared UI Component Library built with React, Tailwind CSS, shadcn/ui, and SCSS.\n\n---\n\n## Prerequisites\n\n- **Node.js** >= 18\n- **pnpm** (recommended) — install with `npm i -g pnpm`\n\n---\n\n## Getting Started (Local Development)\n\n### 1. Clone the repository\n\n```bash\ngit clone https://github.com/alsaeedfayed/sa-ui-lib.git\ncd sa-ui-lib\n```\n\n### 2. Install dependencies\n\n```bash\npnpm install\n```\n\n### 3. Run the playground (dev server)\n\n```bash\npnpm playground\n```\n\nThis starts a Vite dev server with the playground app where you can test components locally with hot-reload.\n\n### 4. Build in watch mode (optional)\n\nIf you want the library to rebuild automatically on every change:\n\n```bash\npnpm dev\n```\n\n---\n\n## Building for Production\n\n### 1. Clean previous build artifacts\n\n```bash\npnpm clean\n```\n\n### 2. Run the build\n\n```bash\npnpm build\n```\n\nThis uses `tsup` to compile the library and outputs the following to the `dist/` folder:\n\n| Output            | Description                          |\n| ----------------- | ------------------------------------ |\n| `dist/index.js`   | CommonJS bundle                      |\n| `dist/index.mjs`  | ESM bundle                           |\n| `dist/index.d.ts` | TypeScript declarations              |\n| `dist/index.css`  | Compiled styles (SCSS + CSS Modules) |\n\n### 3. Verify the build\n\n```bash\nls dist/\n```\n\n---\n\n## Available Scripts\n\n| Script                  | Command                                         | Description                     |\n| ----------------------- | ----------------------------------------------- | ------------------------------- |\n| `pnpm playground`       | `vite --config playground/vite.config.ts`       | Start the playground dev server |\n| `pnpm dev`              | `tsup --watch`                                  | Build the library in watch mode |\n| `pnpm build`            | `tsup`                                          | Production build                |\n| `pnpm clean`            | `rm -rf dist`                                   | Remove build artifacts          |\n| `pnpm lint`             | `eslint src/`                                   | Lint source files               |\n| `pnpm playground:build` | `vite build --config playground/vite.config.ts` | Build the playground            |\n\n---\n\n## Project Structure\n\n```\nsrc/\n├── components/       # UI components (Button, etc.)\n├── design-system/\n│   ├── scss/         # SCSS variables, mixins, global styles\n│   └── tokens/       # Design tokens (colors, spacing, typography)\n├── lib/              # Utilities (cn, twMerge)\n├── styles/           # Global style entry point\n└── types/            # TypeScript type declarations\n\nplayground/           # Vite app for testing components locally\n```\n\n---\n\n## Installation (for consumers)\n\n```bash\nnpm i @alsaeedfayed/sa-ui-lib\n```\n\n## Usage in Next.js Apps\n\n### 1. Import styles in your layout\n\n```tsx\n// app/layout.tsx\nimport \"@alsaeedfayed/ui-lib/styles\";\n```\n\n### 2. Extend your Tailwind config\n\n```ts\n// tailwind.config.ts\nimport uiLibConfig from \"@alsaeedfayed/ui-lib/tailwind.config\";\n\nconst config = {\n  presets: [uiLibConfig],\n  content: [\n    \"./app/**/*.{ts,tsx}\",\n    \"./node_modules/@alsaeedfayed/ui-lib/dist/**/*.{js,mjs}\",\n  ],\n};\n\nexport default config;\n```\n\n### ---------------------------------------------------------\n\n## usage in next15\n\n### 1-global.css\n\n```css\n@import \"tailwindcss\" prefix(wm);\n\n/_ Load theme (colors, fonts, spacing) from the UI lib's tailwind preset _/\n@config \"../../tailwind.config.ts\";\n\n/_ Scan the UI lib's compiled JS so Tailwind picks up classes like wm:bg-primary _/\n@source \"../../node_modules/@alsaeedfayed/sa-ui-lib/dist\";\n```\n\n### 2-app.tsx\n\n```tsx\nimport \"@/styles/globals.css\";\nimport \"@alsaeedfayed/sa-ui-lib/styles\";\nimport type { AppProps } from \"next/app\";\n\nexport default function App({ Component, pageProps }: AppProps) {\n  return <Component {...pageProps} />;\n}\n```\n\n### 3-tailwind.config.ts\n\n```tsx\nimport type { Config } from \"tailwindcss\";\nimport uiLibConfig from \"@alsaeedfayed/sa-ui-lib/tailwind.config\";\n\nconst config: Config = {\n  presets: [uiLibConfig],\n  content: [\n    \"./src/pages/**/*.{ts,tsx}\",\n    \"./src/components/**/*.{ts,tsx}\",\n    \"./node_modules/@alsaeedfayed/sa-ui-lib/dist/**/*.{js,mjs}\",\n  ],\n};\n\nexport default config;\n```\n\n### 4- start using components and classes\n\n```tsx\nimport { Button } from \"@alsaeedfayed/sa-ui-lib\";\n\nexport default function Home() {\n  return (\n    <div>\n      Home\n      <Button variant=\"primary\" size=\"lg\">\n        Click Me\n      </Button>\n      <Button className=\"wm:w-full\" variant=\"destructive\" size=\"md\">\n        Delete Me\n      </Button>\n      <button className=\"wm:bg-primary wm:text-shadow-add-blue wm:p-2.5 wm:rounded-lg wm:shadow-md wm:shadow-blue-500/50 wm:hover:bg-primary/80 wm:active:bg-primary/90\">\n        Default\n      </button>\n    </div>\n  );\n}\n```\n\n### --------------------------------------------------------\n\n### 3. Use components\n\n```tsx\nimport { Button } from \"@alsaeedfayed/ui-lib\";\n\nexport default function Page() {\n  return (\n    <Button variant=\"primary\" size=\"lg\">\n      Save to Cart\n    </Button>\n  );\n}\n```\n\n### 4. Use design tokens directly\n\n```tsx\nimport { colors, spacing } from \"@alsaeedfayed/ui-lib/design-system\";\n\nconst style = { color: colors.primary.DEFAULT, padding: spacing[4] };\n```\n\n### 5. Use SCSS variables in your app\n\n```scss\n@use \"@alsaeedfayed/ui-lib/src/design-system/scss/variables\" as wm;\n@use \"@alsaeedfayed/ui-lib/src/design-system/scss/mixins\" as wm-mix;\n\n.my-component {\n  color: wm.$color-primary;\n  @include wm-mix.focus-ring(wm.$color-primary);\n}\n```\n","readmeFilename":"README.md"}