{"_id":"@akbarsafari00/ods-ui","_rev":"3-4b5214d148e238d91c61a19815b69757","name":"@akbarsafari00/ods-ui","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@akbarsafari00/ods-ui","version":"0.1.0","keywords":["react","components","component-library","design-system","ui"],"license":"UNLICENSED","_id":"@akbarsafari00/ods-ui@0.1.0","maintainers":[{"name":"akbarsafari00","email":"akbarsafari00@gmail.com"}],"dist":{"shasum":"3420e959493d68f41c11eebd4248517b33e25e77","tarball":"https://registry.npmjs.org/@akbarsafari00/ods-ui/-/ods-ui-0.1.0.tgz","fileCount":110,"integrity":"sha512-gJ4GuV/qw5Kc2q8gHdPqhG+WMnxbAn3dZpSIKGjKQY9IhewYPLTXQ7nJZLQuHyWBBXvjOfFNmKEDTCsJW0FLNA==","signatures":[{"sig":"MEQCIFYr9ujwZlGfAlbqdiMY98U3kvVw5Fq88PjkgJvN/+xSAiAQM9OTENz1IUMkEzZ1siXAASmOWACFZr4MZYwR46GA9g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6247459},"main":"./dist/index.cjs","type":"module","_from":"file:akbarsafari00-ods-ui-0.1.0.tgz","style":"./styles.css","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=20.19"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./styles.css","./styles.scss":"./src/styles/index.scss","./package.json":"./package.json"},"scripts":{"dev":"tsup --config tsup.config.ts --watch","docs":"npm run build:styles && storybook dev -p 6006","build":"npm run build:styles && tsup --config tsup.config.ts","check":"npm run typecheck && npm run build","typecheck":"tsc --noEmit","docs:build":"npm run build:styles && storybook build","build:styles":"sass --no-source-map src/styles/index.scss:styles.css src/styles/guidelines/_tokendoc.scss:guidelines/_tokendoc.css","pack:dry-run":"npm pack --dry-run","prepublishOnly":"npm run check"},"_npmUser":{"name":"akbarsafari00","email":"akbarsafari00@gmail.com"},"_resolved":"D:\\Workspaces\\AkbarAhmadi\\ODS UI System\\akbarsafari00-ods-ui-0.1.0.tgz","_integrity":"sha512-gJ4GuV/qw5Kc2q8gHdPqhG+WMnxbAn3dZpSIKGjKQY9IhewYPLTXQ7nJZLQuHyWBBXvjOfFNmKEDTCsJW0FLNA==","_npmVersion":"11.13.0","description":"A lightweight React component library and design system for enterprise applications.","directories":{},"sideEffects":["*.css","**/*.css","*.scss","**/*.scss"],"_nodeVersion":"24.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.8","tsup":"^8.5.1","vite":"^7.3.6","react":"^19.2.7","vitest":"^4.1.10","react-dom":"^19.2.7","storybook":"^10.5.0","playwright":"^1.61.1","typescript":"^5.9.3","@types/react":"^19.2.17","@vitest/coverage-v8":"^4.1.10","@storybook/addon-a11y":"^10.5.2","@storybook/addon-docs":"^10.5.0","@storybook/react-vite":"^10.5.0","@storybook/addon-vitest":"^10.5.2","@vitest/browser-playwright":"^4.1.10"},"peerDependencies":{"react":">=18.0.0 <20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ods-ui_0.1.0_1784464116719_0.5179900199919116","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@akbarsafari00/ods-ui","version":"0.1.1","keywords":["react","components","component-library","design-system","ui"],"license":"UNLICENSED","_id":"@akbarsafari00/ods-ui@0.1.1","maintainers":[{"name":"akbarsafari00","email":"akbarsafari00@gmail.com"}],"dist":{"shasum":"bb79406f201ef4fa2711f7d6513c6cca8048e21f","tarball":"https://registry.npmjs.org/@akbarsafari00/ods-ui/-/ods-ui-0.1.1.tgz","fileCount":110,"integrity":"sha512-i+FsSCqb+WX99h9Ulb3R+P5cGrxPsMP2iomLgubFECpVxWU3dXudVMPuuKcW/3SfSBpmk/VzrIDYiUjafrhDuQ==","signatures":[{"sig":"MEUCIQDsXkMA3vJwlUlXLgxm9EDO8Lj2VBMcKo8loC3ir1h6PgIgJAvcXvRvQenW4Kv3pdClB0M21CJQtn5HDubhZ4WRZSk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6263213},"main":"./dist/index.cjs","type":"module","_from":"file:akbarsafari00-ods-ui-0.1.1.tgz","style":"./styles.css","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=20.19"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./styles.css","./styles.scss":"./src/styles/index.scss","./package.json":"./package.json"},"scripts":{"dev":"tsup --config tsup.config.ts --watch","docs":"npm run build:styles && storybook dev -p 6006","build":"npm run build:styles && tsup --config tsup.config.ts","check":"npm run typecheck && npm run build","typecheck":"tsc --noEmit","docs:build":"npm run build:styles && storybook build","build:styles":"sass --no-source-map src/styles/index.scss:styles.css src/styles/guidelines/_tokendoc.scss:guidelines/_tokendoc.css","pack:dry-run":"npm pack --dry-run","prepublishOnly":"npm run check"},"_npmUser":{"name":"akbarsafari00","email":"akbarsafari00@gmail.com"},"_resolved":"D:\\Workspaces\\AkbarAhmadi\\ODS UI System\\akbarsafari00-ods-ui-0.1.1.tgz","_integrity":"sha512-i+FsSCqb+WX99h9Ulb3R+P5cGrxPsMP2iomLgubFECpVxWU3dXudVMPuuKcW/3SfSBpmk/VzrIDYiUjafrhDuQ==","_npmVersion":"11.13.0","description":"A lightweight React component library and design system for enterprise applications.","directories":{},"sideEffects":["*.css","**/*.css","*.scss","**/*.scss"],"_nodeVersion":"24.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.8","tsup":"^8.5.1","vite":"^7.3.6","react":"^19.2.7","vitest":"^4.1.10","react-dom":"^19.2.7","storybook":"^10.5.0","playwright":"^1.61.1","typescript":"^5.9.3","@types/react":"^19.2.17","@vitest/coverage-v8":"^4.1.10","@storybook/addon-a11y":"^10.5.2","@storybook/addon-docs":"^10.5.0","@storybook/react-vite":"^10.5.0","@storybook/addon-vitest":"^10.5.2","@vitest/browser-playwright":"^4.1.10"},"peerDependencies":{"react":">=18.0.0 <20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ods-ui_0.1.1_1784977935643_0.13298631769739666","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@akbarsafari00/ods-ui","version":"0.1.2","description":"A native-first enterprise design system with framework adapters.","license":"UNLICENSED","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","style":"./styles.css","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs","default":"./dist/index.js"},"./native":{"types":"./dist/native.d.ts","import":"./dist/native.js","require":"./dist/native.cjs","default":"./dist/native.js"},"./styles.css":"./styles.css","./styles.scss":"./src/styles/index.scss","./package.json":"./package.json"},"sideEffects":["*.css","**/*.css","*.scss","**/*.scss"],"scripts":{"build:styles":"sass --no-source-map src/styles/index.scss:styles.css src/styles/guidelines/_tokendoc.scss:guidelines/_tokendoc.css","build:styles:watch":"sass --no-source-map --watch src/styles/index.scss:styles.css src/styles/guidelines/_tokendoc.scss:guidelines/_tokendoc.css","build":"npm run build:styles && tsup --config tsup.config.ts","dev":"concurrently -k -n styles,bundle -c blue,green \"npm:build:styles:watch\" \"tsup --config tsup.config.ts --watch\"","docs":"storybook dev -p 6006","docs:build":"storybook build","typecheck":"tsc --noEmit","check":"npm run typecheck && npm run build","pack:dry-run":"npm pack --dry-run","prepublishOnly":"npm run check"},"keywords":["react","components","component-library","design-system","ui"],"engines":{"node":">=20.19"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=18.0.0 <20.0.0","react-dom":">=18.0.0 <20.0.0"},"devDependencies":{"@storybook/addon-a11y":"^10.5.2","@storybook/addon-docs":"^10.5.0","@storybook/addon-vitest":"^10.5.2","@storybook/react-vite":"^10.5.0","@tailwindcss/vite":"^4.3.3","@types/react":"^19.2.17","@vitest/browser-playwright":"^4.1.10","@vitest/coverage-v8":"^4.1.10","concurrently":"^9.2.1","playwright":"^1.61.1","react":"^19.2.7","react-dom":"^19.2.7","sass":"^1.77.8","sass-embedded":"^1.77.8","storybook":"^10.5.0","tailwindcss":"^4.3.3","tsup":"^8.5.1","typescript":"^5.9.3","vite":"^7.3.6","vitest":"^4.1.10"},"dependencies":{"@ark-ui/react":"^5.37.2","@akbarsafari00/ods-ui":"^0.1.1","react-icons":"^5.5.0"},"_id":"@akbarsafari00/ods-ui@0.1.2","_integrity":"sha512-N+fLA2/rOURVl33urQlJdMdBwU8Bj4d3ab3RAwnzYQ599z093GTpz8vijDCMuGhYzuPl/9OpuKmHPXZNsgPUPA==","_resolved":"D:\\Workspaces\\AkbarAhmadi\\ODS UI System\\akbarsafari00-ods-ui-0.1.2.tgz","_from":"file:akbarsafari00-ods-ui-0.1.2.tgz","_nodeVersion":"24.17.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-N+fLA2/rOURVl33urQlJdMdBwU8Bj4d3ab3RAwnzYQ599z093GTpz8vijDCMuGhYzuPl/9OpuKmHPXZNsgPUPA==","shasum":"3feded835a4b3b4366245aa88d7ce5f102b6320d","tarball":"https://registry.npmjs.org/@akbarsafari00/ods-ui/-/ods-ui-0.1.2.tgz","fileCount":113,"unpackedSize":3500782,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC0vdSpre3kzSm+ElWcutQjx07akhBvEjhidYKJ3abv4wIgTdz11U874kBrzW8+2ktSTucA1wBEaTzm4oloG8b7dcc="}]},"_npmUser":{"name":"akbarsafari00","email":"akbarsafari00@gmail.com"},"directories":{},"maintainers":[{"name":"akbarsafari00","email":"akbarsafari00@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ods-ui_0.1.2_1785388738217_0.30312667064638754"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-19T12:28:36.532Z","modified":"2026-07-30T05:18:58.523Z","0.1.0":"2026-07-19T12:28:36.957Z","0.1.1":"2026-07-25T11:12:15.839Z","0.1.2":"2026-07-30T05:18:58.397Z"},"license":"UNLICENSED","keywords":["react","components","component-library","design-system","ui"],"description":"A native-first enterprise design system with framework adapters.","maintainers":[{"name":"akbarsafari00","email":"akbarsafari00@gmail.com"}],"readme":"# ODS UI System\n\nA lightweight enterprise design system for dashboards, forms, tables, detail pages, and administrative applications. Border-driven surfaces, restrained color, compact density, and a three-tier token architecture (primitive → semantic → component).\n\n## Install & use (React package)\n\n```bash\nnpm install @akbarsafari00/ods-ui react react-dom\n```\n\n```tsx\nimport {\n  Button,\n  GroupButton,\n  IconButton,\n  MenuButton,\n  ThemeProvider,\n} from \"@akbarsafari00/ods-ui\";\n\nexport function App() {\n  return (\n    <ThemeProvider theme=\"light\" locale=\"en-US\">\n      <Button intent=\"primary\">Save changes</Button>\n    </ThemeProvider>\n  );\n}\n```\n\n`ThemeProvider` loads the compiled ODS stylesheet once and configures Ark UI's\nlocale context. Pass a BCP 47 `locale` such as `en-US`, `fa-IR`, or `ar-SA`;\nArk UI derives the correct writing direction for every connected component,\nincluding portalled dialogs. The compatibility `direction` prop remains\navailable and maps RTL to `fa-IR` and LTR to `en-US` when no compatible locale\nis supplied. The stylesheet contains the token chain, governed component\nrecipes, and base styles. React applications do not need a separate stylesheet\nimport when they use the provider.\n\nBuild, versioning, and repo/npm push commands: see **[PUBLISHING.md](./PUBLISHING.md)**.\n\n## Component and token documentation\n\nThe project includes a Storybook catalogue that renders every exported React\ncomponent and builds a searchable inventory of all `--ods-*` CSS tokens from\nthe real stylesheets. Token documentation is separated into Primitive,\nSemantic, and Component branches, with individual pages for Colors,\nTypography, Spacing, Layout, Motion, and every other available group.\n\n```bash\nnpm run docs        # development server on http://localhost:6006\nnpm run docs:build  # static output in storybook-static/\n```\n\nThe documentation tooling requires Node.js 20.19 or newer. Use the theme\ncontrol in the Storybook toolbar to review components and semantic tokens in\nlight and dark modes.\n\n**Source material** (read-only codebase attached this session, not re-hosted here):\n- `Uiux/` — local mounted folder — a static dashboard UI system (\"OdsUi\", package `dashboard-ui-design-system`) built with Sass, vanilla JS components, and Gulp/Webpack. Key paths referenced: `Uiux/src/scss/tokens/`, `Uiux/src/scss/components/`, `Uiux/src/js/components/`, `Uiux/src/html/pages/`, `Uiux/docs/*.md` (23 numbered guideline docs).\n\nThis project rebuilds that system as portable CSS custom properties + framework-agnostic React components, following the numeric docs (`03_Visual_Guidelines.md`, `05_Component_System_Specification.md`, `14_Content_Microcopy_Guidelines.md`, etc.) as source of truth.\n\n## Content fundamentals\n\n- **Voice**: clear, professional, direct — written for developers and product teams operating enterprise dashboards. Neutral in tone; no marketing flourish.\n- **Casing**: sentence case for titles, labels, and buttons (\"Save changes\", not \"Save Changes\" or \"SAVE CHANGES\").\n- **Button copy**: verbs — Save, Add, Cancel, Delete, Export, Filter, Search, Open, Close.\n- **Empty states**: say what is empty and what to do next (\"No records found\").\n- **Errors**: say what failed and how to recover; never \"click here\" or vague labels.\n- **Perspective**: instructional/neutral — \"Enter your username,\" not \"I need your username.\"\n- **Emoji**: never used.\n- **RTL**: Persian/Arabic copy renders in Vazirmatn; Jalali dates keep English digits for stable masks.\n\n## Visual foundations\n\n- **Palette**: cool neutral base (slate) + a single deep-blue brand scale for primary actions and focus. Semantic status colors (success/warning/danger/info) are muted-background + saturated-text pairs, never solid fills on body copy.\n- **Type**: Poppins for LTR UI, Vazirmatn for RTL, a system-mono stack for code. Minor-second principle (×1.067) normalized to practical sizes — 11/12/13/14/16/18/20/24/28/32px. Role-based, not heading-based: body is **14/22** on desktop (16/24 for long-form/mobile), labels 13/20/600, table headers 12/18/600 sentence case (never uppercase), table cells 13/20 with tabular numbers, buttons 14/20/600, subsection titles 18/26/600, section titles 20/28/600, page titles 24/32/700, display 32/40/700 (rare). Weights limited to 400/500/600/700 — no thin or extra-heavy weights. Neutral letter spacing for Persian/Arabic always.\n- **Spacing**: 4px base scale (4/8/12/16/20/24/32...) expressed as inset/stack/inline/gap semantic roles. Compact density by default — no comfortable/compact toggle in this rebuild.\n- **Control density**: desktop control heights (button/input/select) are compact — 28/32/36px (compact/base/comfortable), not 40/44/48px — so dense tables and forms fit more rows without feeling cramped. Accessibility tap-target size (44/48px) is a separate token (`--ods-size-target-*`) and stays comfortable regardless of visual control height; touch/mobile density modes should use the target tokens for hit areas.\n- **Borders over shadows**: the system is border-driven. Governed components use semantic borders and surface contrast; decorative shadows are not part of component recipes.\n- **Radius**: restrained, 4px on cards/controls, 2px on nested sections/media, 12px on overlays only, full-pill only for badges/avatars/switches. No large decorative rounding anywhere.\n- **Backgrounds**: flat semantic surface tokens only — no gradients, no photography, no illustration, no texture/grain, no blur except the overlay scrim behind modals/drawers.\n- **Animation**: minimal and functional — 120–220ms ease transitions on hover/focus/open-close; a single spinner keyframe for loading buttons/skeletons. No bounce, no decorative looping motion. All animation respects `prefers-reduced-motion`.\n- **Hover/press**: hover = one step darker/lighter surface via token swap (not opacity tricks); press/active = a further step, no scale/shrink transforms.\n- **Focus**: always a visible 2px ring in the brand-500 hue, offset from the control — independent of hover, never removed.\n- **Cards**: 1px default border, small radius, and no shadow. Root carries no padding — header/body/footer own their compact insets.\n- **Light/dark**: every semantic color token has a light and dark value via `[data-theme=\"dark\"]`; components never hardcode either theme.\n- **Imagery**: none supplied — text/icon-only content (see caveats).\n\n## Iconography\n\n- **System**: Phosphor Icons (regular weight), used as an icon font (`.ph .ph-<name>`) exactly as in the source codebase. Copied locally to `assets/fonts/phosphor/` — not CDN-linked, matching the source's local-first approach.\n- **Usage**: icons are always paired with visible text OR an explicit `aria-label` for icon-only buttons. No unicode characters or emoji used as icons anywhere in the source or this rebuild.\n- **No custom SVG icon set** was found in the source beyond Phosphor; no additional icons were drawn for this rebuild.\n\n## Logo / brand mark\n\nNo logo file or brand mark asset was found in the attached codebase — only a small inline favicon glyph (an abstract rounded shape, not a wordmark/logotype). Per instructions, **no logo was invented**. Wherever a mark would go, this system renders the plain wordmark \"ODS\" in a colored square (see Sidebar component) — flagged here for the user to replace with a real logo asset if one exists.\n\n## Components\n\nGrouped under `src/components/<group>/<Name>/`, each with `.jsx`, `.d.ts`, `.prompt.md`, and a `@dsCard`-tagged demo:\n\n- **core/**: Card (+CardHeader/CardBody/CardFooter/CardSection/CardMedia)\n- **forms/**: Field + Input + Textarea, PasswordInput, NumberInput, Select, Checkbox, Radio, Switch\n- **feedback/**: Badge, Alert, Progress\n- **overlays/**: Modal, Drawer, Dropdown (+Trigger/Menu/Item/Label/Separator/Sub)\n- **data/**: Table, Avatar (+AvatarGroup), Tree (+Tree.Item)\n- **navigation/**: Button, IconButton, GroupButton, MenuButton (controlled menu-overlay trigger), Menu (+Menu.Item/Menu.Submenu)\n\n## Styling and layout boundary\n\nODS publishes design tokens, base styles, and governed component recipes. It\ndoes not publish a utility framework. Consuming applications own page layout\nand may use Tailwind CSS, native CSS, CSS Modules, or another application-level\nstyling approach.\n\nStorybook uses Tailwind as a development-only layout layer:\n\n```tsx\n<div className=\"grid grid-cols-1 gap-6 md:grid-cols-3\">\n  <Card.Root>...</Card.Root>\n  <Card.Root>...</Card.Root>\n  <Card.Root>...</Card.Root>\n</div>\n```\n\nTailwind classes may arrange ODS components and Storybook examples. They must\nnot replace component intents, variants, sizes, states, focus behavior,\ntypography, surfaces, borders, or internal anatomy. Those remain governed by\nthe component API and ODS semantic/component tokens.\n\nThis is a curated core subset of the source's implemented-component inventory (`05_Component_System_Specification.md`) — Button, Input/Select, Card, Modal, Table, Drawer — plus Badge/Alert/Checkbox/Radio/Switch, which exist as first-class SCSS components in the source under `src/scss/components/`. Navigation components (Appbar, Sidebar, Tabs, Toolbar, Pagination) and the Product Retail app UI kit were intentionally left out of this rebuild — foundations + core components only.\n\n**Button variants**: the canonical doc (`buttons.html`) states primary/secondary only, but real product screens (`modals.html` delete confirmation, `toolbar.html` row delete) use a third destructive variant. `danger` was added to match that real usage — reserved strictly for confirmed, irreversible actions (Delete/Remove), never for plain emphasis.\n\n**Not yet ported** from the source inventory (flagged, not invented): DatePicker/DateTimePicker (Jalali+Gregorian calendar JS), ProSelect (Select2-style async/searchable select), ProTable (Table + column filters/toggling), StickyArea, and the global Search overlay. Applications own page layout; ODS owns component contracts and styling.\n\n## Index\n\n- `src/index.ts` — public React package entry\n- `src/theme/ThemeProvider.jsx` — application theme scope and stylesheet loader\n- `src/components/` — component source, hand-written types, recipes, and component documentation\n- `src/styles/index.scss` — Sass source entry (tokens → reset → components)\n- `styles.css` — compiled package stylesheet generated by `npm run build:styles`\n- `src/styles/tokens/primitives/` — primitive SCSS and private compile-time breakpoint values\n- `src/styles/tokens/semantic/` — semantic SCSS, including the named breakpoint contract\n- `src/styles/tokens/base.scss` — minimal reset\n- `src/styles/components.scss` — component recipe aggregator using `sass:meta.load-css`\n- `.storybook/tailwind.css` — Storybook-only Tailwind theme bridge and utility entry\n- `src/styles/fonts/` — font-face and icon-font SCSS sources\n- `src/styles/stories/` — Storybook-only SCSS\n- `assets/fonts/` — Poppins, Vazirmatn, Phosphor (all copied from source, all local)\n\n## Caveats & next steps\n\n- **Fonts**: Poppins/Vazirmatn/Phosphor were all present in the source and copied in full — no substitution needed.\n- **Mono font**: the source references \"SF Mono/Cascadia Code\" system fonts for code — no font file exists for these (they're OS-provided), so `--ods-base-font-family-mono` falls back through the stack; nothing to upload.\n- **Scope**: this system intentionally covers only foundations + core components (no navigation family, no app-level UI kit) per current direction.\n- **Ask**: please confirm whether DatePicker/ProSelect/ProTable are worth porting next, and whether a real logo file exists anywhere else so \"ODS\" text-in-square can be replaced.\n","readmeFilename":"readme.md"}