{"_id":"@devx-commerce/loyaltyx-ui-kit","_rev":"4-ed38afb2668d7576f328309b7aeacebe","name":"@devx-commerce/loyaltyx-ui-kit","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@devx-commerce/loyaltyx-ui-kit","version":"0.2.0","license":"Apache-2.0","_id":"@devx-commerce/loyaltyx-ui-kit@0.2.0","maintainers":[{"name":"prateekvijay18","email":"prateek.vijay@devxlabs.ai"},{"name":"mokshi","email":"mokshi.mehta@devxlabs.ai"},{"name":"shrutidevx","email":"shruti@devxlabs.ai"},{"name":"md-devx","email":"mdobariya@devxconsultancy.com"},{"name":"vishalx1337","email":"vishal.makwana@devxconsultancy.com"},{"name":"kenil-lakhani","email":"kenil.lakhani@devxlabs.ai"},{"name":"brijesh_at_devx","email":"brijesh.patadiya+1@devxconsultancy.com"},{"name":"brijeshagarwal","email":"brijesh@devxconsultancy.com"},{"name":"vasuchapadia","email":"vasu.chapadia@devxconsultancy.com"}],"homepage":"https://github.com/devx-commerce/loyaltyx/tree/main/packages/ui-kit#readme","bugs":{"url":"https://github.com/devx-commerce/loyaltyx/issues"},"dist":{"shasum":"ea9938fd67c46f8faf4575f709df53a1e85fe2de","tarball":"https://registry.npmjs.org/@devx-commerce/loyaltyx-ui-kit/-/loyaltyx-ui-kit-0.2.0.tgz","fileCount":9,"integrity":"sha512-6wxgFZK/FfpAlYPvp3ZuEaqOzDtlhMrvAKq1sljPrTbUPu3yknTSXwwV6wFliKRMpP1RAJeSq12gNiJO4ZvoXw==","signatures":[{"sig":"MEQCIBYoIKBDJXs7KmnkUkkVWRkL0z+nA9XrVG1J1LrYGskcAiAdLcUzdQJVJx5o/xXXBigPMPgaB437ZETV/x+c4Kca8g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1338129},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"e9181adcc1ef6d8ab72729492d00037545889109","scripts":{"dev":"tsup --watch & tailwindcss -i src/styles.css -o dist/styles.css --postcss --watch","lint":"eslint src/","test":"vitest run","build":"tsup && pnpm build:css","build:css":"tailwindcss -i src/styles.css -o dist/styles.css --postcss --minify","typecheck":"tsc --noEmit"},"_npmUser":{"name":"prateekvijay18","email":"prateek.vijay@devxlabs.ai"},"repository":{"url":"git+https://github.com/devx-commerce/loyaltyx.git","type":"git","directory":"packages/ui-kit"},"_npmVersion":"11.8.0","description":"React component library for the LoyaltyX admin dashboard. Built on @medusajs/ui.","directories":{},"_nodeVersion":"24.13.1","dependencies":{"zod":"^3.25.76","recharts":"^3.8.1","@medusajs/ui":"^4.0.0","@medusajs/icons":"^2.0.0","@devx-commerce/loyaltyx-core":"workspace:*","@devx-commerce/loyaltyx-hooks":"workspace:*","@devx-commerce/loyaltyx-api-client":"workspace:*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^26.0.0","vitest":"^3.0.0","postcss":"^8.0.0","typescript":"^5.7.0","tailwindcss":"^3.0.0","@types/react":"^19.0.0","autoprefixer":"^10.0.0","@types/react-dom":"^19.0.0","@medusajs/ui-preset":"^2.0.0","@testing-library/react":"^16.0.0","postcss-prefix-selector":"^2.1.0","@testing-library/jest-dom":"^6.0.0","eslint-plugin-react-hooks":"^5.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@tanstack/react-query":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/loyaltyx-ui-kit_0.2.0_1778220931208_0.2223474062390538","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@devx-commerce/loyaltyx-ui-kit","version":"0.2.1","license":"Apache-2.0","_id":"@devx-commerce/loyaltyx-ui-kit@0.2.1","maintainers":[{"name":"prateekvijay18","email":"prateek.vijay@devxlabs.ai"},{"name":"mokshi","email":"mokshi.mehta@devxlabs.ai"},{"name":"shrutidevx","email":"shruti@devxlabs.ai"},{"name":"md-devx","email":"mdobariya@devxconsultancy.com"},{"name":"vishalx1337","email":"vishal.makwana@devxconsultancy.com"},{"name":"kenil-lakhani","email":"kenil.lakhani@devxlabs.ai"},{"name":"brijesh_at_devx","email":"brijesh.patadiya+1@devxconsultancy.com"},{"name":"brijeshagarwal","email":"brijesh@devxconsultancy.com"},{"name":"vasuchapadia","email":"vasu.chapadia@devxconsultancy.com"}],"homepage":"https://github.com/devx-commerce/loyaltyx/tree/main/packages/ui-kit#readme","bugs":{"url":"https://github.com/devx-commerce/loyaltyx/issues"},"dist":{"shasum":"c4736c7eac4089a78287a4404ac49a3effb12e61","tarball":"https://registry.npmjs.org/@devx-commerce/loyaltyx-ui-kit/-/loyaltyx-ui-kit-0.2.1.tgz","fileCount":10,"integrity":"sha512-yGUmohM+z5TtGOew5pI8b+uXXkHofpVlllfT7nC38mKicja4aHd7Z65cNppP3Z0OeItS6rdnEM3RONFGo9zRTw==","signatures":[{"sig":"MEYCIQCV1SBlqPEOnJom8+pK9ehMy5U5kb59HO9DeWzF23B+8AIhAJkAhIX1JqFQgt7TMW56AL1jILyENsNa6VHSEx/7zeU/","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1349395},"main":"./dist/index.cjs","type":"module","_from":"file:devx-commerce-loyaltyx-ui-kit-0.2.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"tsup --watch & tailwindcss -i src/styles.css -o dist/styles.css --postcss --watch","lint":"eslint src/","test":"vitest run","build":"tsup && pnpm build:css","build:css":"tailwindcss -i src/styles.css -o dist/styles.css --postcss --minify","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:671b9900-4c8f-4b59-8418-66be2a3adb8e"}},"_resolved":"/tmp/81160290c2ced5d988f7b2fa5f2b9587/devx-commerce-loyaltyx-ui-kit-0.2.1.tgz","_integrity":"sha512-yGUmohM+z5TtGOew5pI8b+uXXkHofpVlllfT7nC38mKicja4aHd7Z65cNppP3Z0OeItS6rdnEM3RONFGo9zRTw==","repository":{"url":"git+https://github.com/devx-commerce/loyaltyx.git","type":"git","directory":"packages/ui-kit"},"_npmVersion":"11.14.0","description":"React component library for the LoyaltyX admin dashboard. Built on @medusajs/ui.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"zod":"^3.25.76","recharts":"^3.8.1","@medusajs/ui":"^4.0.0","@medusajs/icons":"^2.0.0","@devx-commerce/loyaltyx-core":"0.2.1","@devx-commerce/loyaltyx-hooks":"0.2.1","@devx-commerce/loyaltyx-api-client":"0.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^26.0.0","vitest":"^3.0.0","postcss":"^8.0.0","typescript":"^5.7.0","tailwindcss":"^3.0.0","@types/react":"^19.0.0","autoprefixer":"^10.0.0","@types/react-dom":"^19.0.0","@medusajs/ui-preset":"^2.0.0","@testing-library/react":"^16.0.0","postcss-prefix-selector":"^2.1.0","@testing-library/jest-dom":"^6.0.0","eslint-plugin-react-hooks":"^5.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@tanstack/react-query":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/loyaltyx-ui-kit_0.2.1_1778223156913_0.413226315311521","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-05-08T06:15:31.101Z","modified":"2026-09-11T13:10:59.214Z","0.2.0":"2026-05-08T06:15:31.444Z","0.2.1":"2026-05-08T06:52:37.093Z"},"bugs":{"url":"https://github.com/devx-commerce/loyaltyx/issues"},"license":"Apache-2.0","homepage":"https://github.com/devx-commerce/loyaltyx/tree/main/packages/ui-kit#readme","repository":{"url":"git+https://github.com/devx-commerce/loyaltyx.git","type":"git","directory":"packages/ui-kit"},"description":"React component library for the LoyaltyX admin dashboard. Built on @medusajs/ui.","maintainers":[{"email":"prateek.vijay@devxlabs.ai","name":"prateekvijay18"},{"email":"mokshi.mehta@devxlabs.ai","name":"mokshi"},{"email":"shruti@devxlabs.ai","name":"shrutidevx"},{"email":"mdobariya@devxconsultancy.com","name":"md-devx"},{"email":"vishal.makwana@devxconsultancy.com","name":"vishalx1337"},{"email":"aditya.thummar@devxconsultancy.com","name":"aditya.thummar.devx"},{"email":"kenil.lakhani@devxlabs.ai","name":"kenil-lakhani"},{"email":"milan.ghoghari@devxlabs.ai","name":"milanghoghari"},{"email":"brijesh.patadiya+1@devxconsultancy.com","name":"brijesh_at_devx"},{"email":"brijesh@devxlabs.ai","name":"brijeshagarwal"},{"email":"vasu.chapadia@devxconsultancy.com","name":"vasuchapadia"}],"readme":"# @devx-commerce/loyaltyx-ui-kit\n\nDrop-in React component library for the [LoyaltyX](https://github.com/devx-commerce/loyaltyx) admin dashboard. Pre-built pages, forms, tables, charts, and modals that talk to your LoyaltyX API out of the box.\n\nBuilt on [`@medusajs/ui`](https://docs.medusajs.com/ui) + Tailwind CSS. Data flows through `@devx-commerce/loyaltyx-hooks`, so every page handles loading states, errors, optimistic updates, and form validation for you.\n\n## Install\n\n```bash\npnpm add \\\n  @devx-commerce/loyaltyx-ui-kit \\\n  @devx-commerce/loyaltyx-hooks \\\n  @devx-commerce/loyaltyx-api-client \\\n  @devx-commerce/loyaltyx-core\n```\n\nPeer dependencies your app must already have:\n\n```bash\npnpm add react react-dom @tanstack/react-query\n```\n\nRequires `react` ≥ 18 and `@tanstack/react-query` ≥ 5.\n\n> **Note**: this kit forces `@medusajs/ui` as your component primitive. If your dashboard uses a different design system (Mantine, Chakra, shadcn, etc.), use [`@devx-commerce/loyaltyx-hooks`](https://www.npmjs.com/package/@devx-commerce/loyaltyx-hooks) directly and build your own components.\n\n## Setup\n\n```tsx\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { LoyaltyClient } from '@devx-commerce/loyaltyx-api-client';\nimport { LoyaltyProvider } from '@devx-commerce/loyaltyx-hooks';\nimport { DashboardPage, CustomersPage, TiersPage } from '@devx-commerce/loyaltyx-ui-kit';\n\n// Import the compiled stylesheet ONCE at app entry\nimport '@devx-commerce/loyaltyx-ui-kit/styles.css';\n\nconst queryClient = new QueryClient();\nconst loyaltyClient = new LoyaltyClient('https://loyalty.your-brand.com/api/v1');\n\nexport function AdminApp() {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <LoyaltyProvider client={loyaltyClient}>\n        {/* Mount whichever pages you need into your router */}\n        <DashboardPage />\n      </LoyaltyProvider>\n    </QueryClientProvider>\n  );\n}\n```\n\n## Pages\n\n| Page                 | Suggested Route    | What it renders                                                                  |\n| -------------------- | ------------------ | -------------------------------------------------------------------------------- |\n| `DashboardPage`      | `/`                | KPI cards, points-flow chart, tier distribution, enrollments, redemption summary |\n| `CustomersPage`      | `/customers`       | Searchable table with tier filter and pagination                                 |\n| `CustomerDetailPage` | `/customers/:id`   | Wallet, current tier, tier history, manual point adjust, ledger feed             |\n| `TiersPage`          | `/tiers`           | Tier cards with member counts; create/edit modal                                 |\n| `TierDetailPage`     | `/tiers/:id`       | Three tabs: details, earning rules, spending rules                               |\n| `LedgerPage`         | `/ledger`          | Transaction table with date / type / status filters                              |\n| `SettingsPage`       | `/settings`        | Program config, channel mappings, connector settings, change password            |\n| `UsersPage`          | `/users`           | Admin user CRUD with role-based access                                           |\n| `ImportExportPage`   | `/import-export`   | CSV upload, job tracking, error download                                         |\n| `ChangePasswordPage` | `/change-password` | First-login forced password change                                               |\n\n## Shared components\n\n`PageHeader`, `LoadingSpinner`, `ErrorDisplay`, `ErrorBoundary`, `EmptyState`, `SearchBar`, `Pagination`, `TierSelect`, `PointsBadge`, `CustomerLedgerTable`.\n\n## Theming\n\n- Tailwind CSS 3 with the `@medusajs/ui-preset`.\n- Dark mode toggles via the `.dark` class on `<html>` (use any switcher you like — the components react automatically).\n- Brand-tokenize via CSS custom properties prefixed `--loyalty-*` in your own stylesheet.\n\n## Sibling packages\n\n| Package                                                                                                  | Purpose                                           |\n| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |\n| [`@devx-commerce/loyaltyx-core`](https://www.npmjs.com/package/@devx-commerce/loyaltyx-core)             | Shared types + zod schemas                        |\n| [`@devx-commerce/loyaltyx-api-client`](https://www.npmjs.com/package/@devx-commerce/loyaltyx-api-client) | Typed HTTP client                                 |\n| [`@devx-commerce/loyaltyx-hooks`](https://www.npmjs.com/package/@devx-commerce/loyaltyx-hooks)           | React Query hooks (used internally by every page) |\n\n## License\n\nApache-2.0 — see [LICENSE](https://github.com/devx-commerce/loyaltyx/blob/main/LICENSE).\n","readmeFilename":"README.md"}