{"_id":"@1001tv/manara","_rev":"2-da2e5601c1b9f31f6631bb1972537acb","name":"@1001tv/manara","dist-tags":{"beta":"0.0.3-beta.0","latest":"0.0.1"},"versions":{"0.0.3-beta.0":{"name":"@1001tv/manara","version":"0.0.3-beta.0","license":"UNLICENSED","_id":"@1001tv/manara@0.0.3-beta.0","maintainers":[{"name":"bilalalghazi","email":"bilal@1001.tv"}],"dist":{"shasum":"a747785d08d17f917e3997b6962ab17ca41fa7e0","tarball":"https://registry.npmjs.org/@1001tv/manara/-/manara-0.0.3-beta.0.tgz","fileCount":466,"integrity":"sha512-XIsAUhTGzZiMpioqWRCR1BioO+zuFSQNb+jZ5GnmtKXx5Yk73wQBeWl1xc8TPQBQ7gAdSSd16LM3OFs99LlKDQ==","signatures":[{"sig":"MEYCIQDs8xNGKEyPkJ6wvlL6lL3/2OLQ0W6C68f8euYK3NA90AIhAIzp3wx0btuHS00pyJYLyvjLmpIjyhNM5C4kGA6uI0OL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2839193},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles":"./dist/library.css","./package.json":"./package.json","./tailwind-plugin":{"types":"./dist/tailwind-plugin.d.ts","import":"./dist/tailwind-plugin.js","default":"./dist/tailwind-plugin.js","require":"./dist/tailwind-plugin.cjs"}},"gitHead":"a12e2df842fdc026e02ed0248b333e509fd2ca96","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","format":"prettier --write .","preview":"vite preview","build:lib":"vite build --config vite.lib.config.ts && node scripts/build-css.mjs","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build:lib","build-storybook":"storybook build"},"_npmUser":{"name":"bilalalghazi","email":"bilal@1001.tv"},"_npmVersion":"10.8.2","description":"Manara design system — React + Tailwind component library.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.2","dependencies":{"clsx":"^2.1.1","sonner":"^2.0.7","tailwind-merge":"^3.3.1","react-hook-form":"^7.62.0","@headlessui/react":"^2.2.8","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.2","react":"^19.1.1","eslint":"^9.33.0","vitest":"^3.2.4","globals":"^16.3.0","postcss":"^8.5.6","prettier":"^3.6.2","react-dom":"^19.1.1","storybook":"^9.1.5","@eslint/js":"^9.33.0","playwright":"^1.55.0","typescript":"~5.8.3","@types/node":"^24.5.2","tailwindcss":"^3.4.17","@types/react":"^19.1.10","autoprefixer":"^10.4.21","postcss-import":"^16.1.1","@vitest/browser":"^3.2.4","vite-plugin-dts":"^5.0.0","@types/react-dom":"^19.1.7","typescript-eslint":"^8.39.1","@vitest/coverage-v8":"^3.2.4","@storybook/addon-a11y":"^9.1.5","@storybook/addon-docs":"^9.1.5","@storybook/react-vite":"^9.1.5","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","@storybook/addon-vitest":"^9.1.5","@tailwindcss/typography":"^0.5.16","eslint-plugin-storybook":"^9.1.5","@chromatic-com/storybook":"^4.1.1","@vitejs/plugin-react-swc":"^4.0.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19","tailwindcss":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/manara_0.0.3-beta.0_1785142307215_0.8480502623671302","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"@1001tv/manara","version":"0.0.1","description":"Manara design system — React + Tailwind component library.","license":"UNLICENSED","type":"module","sideEffects":["**/*.css"],"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles":"./dist/library.css","./tailwind-plugin":{"types":"./dist/tailwind-plugin.d.ts","require":"./dist/tailwind-plugin.cjs","import":"./dist/tailwind-plugin.js","default":"./dist/tailwind-plugin.js"},"./package.json":"./package.json"},"publishConfig":{"access":"public"},"scripts":{"format":"prettier --write .","dev":"vite","build":"tsc -b && vite build","build:lib":"vite build --config vite.lib.config.ts && node scripts/build-css.mjs","prepublishOnly":"npm run build:lib","lint":"eslint .","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19","tailwindcss":"^3.4.0"},"dependencies":{"@headlessui/react":"^2.2.8","class-variance-authority":"^0.7.1","clsx":"^2.1.1","react-hook-form":"^7.62.0","sonner":"^2.0.7","tailwind-merge":"^3.3.1"},"devDependencies":{"@chromatic-com/storybook":"^4.1.1","@eslint/js":"^9.33.0","@storybook/addon-a11y":"^9.1.5","@storybook/addon-docs":"^9.1.5","@storybook/addon-vitest":"^9.1.5","@storybook/react-vite":"^9.1.5","@tailwindcss/typography":"^0.5.16","@types/node":"^24.5.2","@types/react":"^19.1.10","@types/react-dom":"^19.1.7","@vitejs/plugin-react-swc":"^4.0.0","@vitest/browser":"^3.2.4","@vitest/coverage-v8":"^3.2.4","autoprefixer":"^10.4.21","eslint":"^9.33.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","eslint-plugin-storybook":"^9.1.5","globals":"^16.3.0","playwright":"^1.55.0","postcss":"^8.5.6","postcss-import":"^16.1.1","prettier":"^3.6.2","react":"^19.1.1","react-dom":"^19.1.1","storybook":"^9.1.5","tailwindcss":"^3.4.17","typescript":"~5.8.3","typescript-eslint":"^8.39.1","vite":"^7.1.2","vite-plugin-dts":"^5.0.0","vitest":"^3.2.4"},"_id":"@1001tv/manara@0.0.1","gitHead":"a12e2df842fdc026e02ed0248b333e509fd2ca96","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-BP6f6mWMkXxcOGJL5L8TbxsItkQkDEtCS/TtMnYpkvvhP1Jhib65Iz/IPFWu8mGkS8ly63g5x8ZOiJ0fOAJL+w==","shasum":"03a5c840e5e33164289484ff209cd13bfda6fee2","tarball":"https://registry.npmjs.org/@1001tv/manara/-/manara-0.0.1.tgz","fileCount":466,"unpackedSize":2839186,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA+JJkTzGIchnKlQKEUZztdkIjHfGT0YB6xJOTO3AVyqAiBvo8YuJqFsPnFjluEa3FkxTwNnfZmzuhDEE77ZMOm6pA=="}]},"_npmUser":{"name":"bilalalghazi","email":"bilal@1001.tv"},"directories":{},"maintainers":[{"name":"bilalalghazi","email":"bilal@1001.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/manara_0.0.1_1785142868849_0.38945308836517567"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-27T08:51:46.395Z","modified":"2026-07-27T09:01:09.233Z","0.0.3-beta.0":"2026-07-27T08:51:47.421Z","0.0.1":"2026-07-27T09:01:09.003Z"},"license":"UNLICENSED","description":"Manara design system — React + Tailwind component library.","maintainers":[{"name":"bilalalghazi","email":"bilal@1001.tv"}],"readme":"# Manara\n\nReact component library — built with TypeScript, Tailwind CSS, and Headless UI. Includes Arabic / Kurdish (Sorani) RTL support out of the box.\n\n## Install\n\n```bash\nnpm install @1001tv/manara\n```\n\nPeer dependencies: `react ^18 || ^19`, `react-dom ^18 || ^19`, `tailwindcss ^3.4.0`. The consumer must already have these installed.\n\n## Setup\n\nThree one-time changes in your app.\n\n### 1. Import the library CSS once\n\nIn your app entry (`main.tsx`, `index.tsx`, `_app.tsx`, etc.):\n\n```ts\nimport '@1001/manara/styles';\n```\n\nThis loads the design tokens (CSS variables), Inter + Noto Kufi Arabic font-face declarations, and a small set of keyframe animations.\n\nThen opt in to the Manara base font by adding `class=\"manara-root\"` to any element that wraps your app tree — most commonly the `<body>` in `index.html`:\n\n```html\n<body class=\"manara-root\">\n```\n\nThe Manara font stack (Inter Display, then Noto Kufi Arabic, then `sans-serif`) cascades to every descendant. Any element outside `.manara-root` keeps its host app's typography. Skip this line entirely if the consumer already owns its own font system and just wants Manara components with the host font.\n\n### 2. Wire the Tailwind plugin\n\nIn your `tailwind.config.{ts,js,mjs}`:\n\n```ts\nimport { manaraPlugin } from '@1001tv/manara/tailwind-plugin';\n\nexport default {\n  content: [\n    './src/**/*.{ts,tsx}',\n    './node_modules/@1001tv/manara/dist/**/*.js',\n  ],\n  plugins: [manaraPlugin({})],\n};\n```\n\nBoth pieces are required. The plugin generates the `manara-*` utilities (e.g. `text-manara-primary`, `bg-manara-brand`, `p-manara-300`); the extra `content` glob lets your Tailwind build see the classes used inside the library so they don't get tree-shaken out.\n\nTailwind v3 is currently required.\n\n### 3. Use components\n\n```tsx\nimport { Card, Episode, Button, NavigationBar } from '@1001tv/manara';\n\nexport function Home() {\n  return (\n    <Card\n      imageSrc=\"/poster.jpg\"\n      imageAlt=\"Show\"\n      isPremium\n      tagLabel=\"Live\"\n      showLogo\n    />\n  );\n}\n```\n\n## Locale and RTL\n\nAll components accept an `isArabic` prop (default: `true`). Setting it to `false` switches to LTR layout and Latin typography. Both Arabic (`ar`) and Kurdish-Sorani (`ckb`) render in Noto Kufi Arabic; pick the appropriate font/direction via the `isRtlLanguage` and `usesArabicFont` helpers also exported from the package:\n\n```ts\nimport { isRtlLanguage, usesArabicFont } from '@1001/manara';\n```\n\n## Available components\n\n`Alert`, `Avatar`, `BottomSheet`, `Button`, `Card`, `Carousel`, `CarouselHeader`, `Chip`, `Episode`, `FeaturedCarousel`, `Footer`, `IconDisplay`, `Link`, `List`, `ListItem`, `Logo`, `Modal`, `NavigationBar`, `PlayerUI`, `ScrollingCard`, `TabButton`, `TabGroup`, `Tag`, `Toast`, `VideoPlayer`, plus form inputs (`Checkbox`, `Dropdown`, `OtpInput`, `Radio`, `Switch`, `TextArea`, `TextField`).\n\nUtility exports alongside the components: `isRtlLanguage`, `usesArabicFont`, `formatPlayerTime`, `usePlayerShortcuts`, and the `DEFAULT_SNAP_POINTS` constant used by `BottomSheet`.\n\nEach component is fully typed; props and variants are visible from your IDE on hover.\n\n## Subpath exports\n\n| Import path | What it gives you |\n| --- | --- |\n| `@1001tv/manara` | All components, types, and locale helpers. |\n| `@1001tv/manara/styles` | The library CSS (variables, font-face, keyframes). |\n| `@1001tv/manara/tailwind-plugin` | The Tailwind plugin that generates `manara-*` utilities. |\n\n## Development\n\nThis package is developed in the [manara repo](.). For architecture, contribution guidelines, and the design-token system, see [`docs/DEVELOPMENT.md`](docs/DEVELOPMENT.md).\n\n## License\n\nProprietary — Copyright © 1001. All rights reserved.\n\nThis package is published to the public npm registry solely for distribution to authorised 1001 projects. It is **not** licensed for public use, modification, redistribution, or derivative work. See [`LICENSE`](LICENSE) at the repo root for the full notice.\n","readmeFilename":"README.md"}