{"_id":"@dbs-portal/core-ui","name":"@dbs-portal/core-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@dbs-portal/core-ui","version":"1.0.0","description":"Shared UI components and design system for DBS Portal","type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./components":{"import":"./dist/components.js","types":"./dist/components.d.ts"},"./layouts":{"import":"./dist/layouts.js","types":"./dist/layouts.d.ts"},"./forms":{"import":"./dist/forms.js","types":"./dist/forms.d.ts"},"./feedback":{"import":"./dist/feedback.js","types":"./dist/feedback.d.ts"},"./data-display":{"import":"./dist/data-display.js","types":"./dist/data-display.d.ts"},"./hooks":{"import":"./dist/hooks.js","types":"./dist/hooks.d.ts"},"./utils":{"import":"./dist/utils.js","types":"./dist/utils.d.ts"},"./icons":{"import":"./dist/icons.js","types":"./dist/icons.d.ts"},"./animations":{"import":"./dist/animations.js","types":"./dist/animations.d.ts"},"./positioning":{"import":"./dist/positioning.js","types":"./dist/positioning.d.ts"},"./accessibility":{"import":"./dist/accessibility.js","types":"./dist/accessibility.d.ts"}},"scripts":{"build":"tsc && vite build","dev":"tsc --watch","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","lint":"biome lint src","format":"biome format src --write","type-check":"tsc --noEmit","clean":"rm -rf dist","migrate-build-config":"node ../../tools/build/scripts/migrate-package.mjs","verify-build-config":"node ../../tools/build/scripts/verify-build-config.mjs"},"dependencies":{"@ant-design/icons":"^6.0.0","@dbs-portal/core-shared":"1.0.0","@dbs-portal/core-theme":"1.0.0","@dbs-portal/core-module-registry":"1.0.0","@floating-ui/react":"^0.27.14","@headlessui/react":"^2.2.6","antd":"^5.26.6","clsx":"^2.1.1","framer-motion":"^12.23.11","react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@biomejs/biome":"1.9.4","@dbs-portal/tool-build":"1.0.0","@dbs-portal/tool-testing":"1.0.0","@dbs-portal/tool-tsconfig":"1.0.0","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.2.0","@testing-library/user-event":"^14.5.2","@types/node":"^22.10.2","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","jsdom":"^26.0.0","typescript":"^5.7.2","vite":"^6.1.0","vitest":"^3.0.5"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"keywords":["ui","components","design-system","react","antd","dbs-portal"],"author":{"name":"DBS Portal Team"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/your-org/dbs-portal.git","directory":"packages/core/ui"},"bugs":{"url":"https://github.com/your-org/dbs-portal/issues"},"homepage":"https://github.com/your-org/dbs-portal#readme","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_id":"@dbs-portal/core-ui@1.0.0","gitHead":"61a23904a481b624f3e8ed7abb6c944ecfeaca7b","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-ANiqOEzYtIeif8K0w4GDaRFxvtf1+NDVntD5KJ2HbOIP6j0Pn5ug2KehQ7eFiIyacNJbk+Ru1KtaQp8Y87/jLg==","shasum":"3fa74bf165ba3dae235ed4ef5b8b82ab43c846d6","tarball":"https://registry.npmjs.org/@dbs-portal/core-ui/-/core-ui-1.0.0.tgz","fileCount":243,"unpackedSize":15313002,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGtdLo6h3E6FCkGLgH5xhZjX5BNRU5DiAnVxQS4P9qQMAiB2GPZj5WaJSLYASMQtAFLZceqgOKMv9iSnt7KXL84UXw=="}]},"_npmUser":{"name":"longvq","email":"vqlong1604@gmail.com"},"directories":{},"maintainers":[{"name":"longvq","email":"vqlong1604@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/core-ui_1.0.0_1754218658412_0.5207595728391665"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-03T10:57:38.315Z","1.0.0":"2025-08-03T10:57:38.650Z","modified":"2025-08-03T10:57:38.942Z"},"maintainers":[{"name":"longvq","email":"vqlong1604@gmail.com"}],"description":"Shared UI components and design system for DBS Portal","homepage":"https://github.com/your-org/dbs-portal#readme","keywords":["ui","components","design-system","react","antd","dbs-portal"],"repository":{"type":"git","url":"git+https://github.com/your-org/dbs-portal.git","directory":"packages/core/ui"},"author":{"name":"DBS Portal Team"},"bugs":{"url":"https://github.com/your-org/dbs-portal/issues"},"license":"MIT","readme":"# @dbs-portal/core-ui\n\nShared UI components and design system for DBS Portal, built on top of Ant Design with custom theming and enhanced functionality. Now includes advanced integrations with TanStack Form, Framer Motion, Floating UI, and Headless UI for comprehensive UI capabilities.\n\n## Features\n\n- 🎨 **Ant Design Integration** - Built on top of Ant Design with custom theming\n- 🎭 **Enhanced Icons** - Comprehensive icon system with @ant-design/icons\n- 📝 **Advanced Forms** - TanStack Form integration for powerful form management\n- ✨ **Smooth Animations** - Framer Motion components for beautiful animations\n- 🎯 **Smart Positioning** - Floating UI for advanced tooltip and popover positioning\n- ♿ **Accessibility First** - Headless UI components for maximum accessibility\n- 🎨 **Design System** - Consistent design tokens and theming\n- 📱 **Responsive** - Mobile-first responsive design\n- 🔧 **TypeScript** - Full TypeScript support with comprehensive types\n\n## Installation\n\n```bash\nyarn add @dbs-portal/core-ui\n```\n\n### Peer Dependencies\n\nThe package requires these peer dependencies:\n\n```bash\nyarn add react react-dom antd @ant-design/icons @tanstack/react-form framer-motion @floating-ui/react @headlessui/react\n```\n\n## Usage\n\n### Basic Setup\n\n```tsx\nimport React from 'react'\nimport { ThemeProvider, Button, Input, Card } from '@dbs-portal/core-ui'\n\nfunction App() {\n  return (\n    <ThemeProvider>\n      <div>\n        <Button variant=\"primary\">Click me</Button>\n        <Input placeholder=\"Enter text\" />\n        <Card title=\"Example Card\">\n          <p>Card content goes here</p>\n        </Card>\n      </div>\n    </ThemeProvider>\n  )\n}\n```\n\n### Enhanced Features Setup\n\n```tsx\nimport React from 'react'\nimport {\n  ThemeProvider,\n  Button,\n  FadeIn,\n  FloatingTooltip,\n  AccessibleDialog,\n  Form,\n  FormField\n} from '@dbs-portal/core-ui'\n\nfunction EnhancedApp() {\n  return (\n    <ThemeProvider>\n      <FadeIn duration=\"normal\">\n        <FloatingTooltip content=\"This is a tooltip\">\n          <Button variant=\"primary\">Hover me</Button>\n        </FloatingTooltip>\n\n        <Form onSubmit={(data) => console.log(data)}>\n          <FormField\n            name=\"email\"\n            label=\"Email\"\n            component=\"input\"\n            validators={[required(), email()]}\n          />\n          <Button type=\"submit\">Submit</Button>\n        </Form>\n      </FadeIn>\n    </ThemeProvider>\n  )\n}\n```\n\n## Components\n\n### Button\n\nA customizable button component with multiple variants and sizes.\n\n```tsx\nimport { Button } from '@dbs-portal/core-ui'\n\n// Variants\n<Button variant=\"primary\">Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"outline\">Outline</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button variant=\"link\">Link</Button>\n<Button variant=\"danger\">Danger</Button>\n\n// Sizes\n<Button size=\"xs\">Extra Small</Button>\n<Button size=\"sm\">Small</Button>\n<Button size=\"md\">Medium</Button>\n<Button size=\"lg\">Large</Button>\n<Button size=\"xl\">Extra Large</Button>\n\n// With icons\n<Button icon={<Icon />}>With Icon</Button>\n<Button icon={<Icon />} iconPosition=\"end\">Icon at End</Button>\n\n// States\n<Button loading>Loading</Button>\n<Button disabled>Disabled</Button>\n<Button block>Block Button</Button>\n```\n\n### Input\n\nEnhanced input component with support for prefixes, suffixes, and various states.\n\n```tsx\nimport { Input, TextArea } from '@dbs-portal/core-ui'\n\n// Basic input\n<Input placeholder=\"Enter text\" />\n\n// With prefix/suffix\n<Input prefix=\"$\" suffix=\".00\" />\n\n// Different sizes\n<Input size=\"sm\" />\n<Input size=\"md\" />\n<Input size=\"lg\" />\n\n// With status\n<Input status=\"error\" />\n<Input status=\"warning\" />\n\n// TextArea\n<TextArea rows={4} placeholder=\"Enter description\" />\n```\n\n### Card\n\nFlexible card component for displaying content.\n\n```tsx\nimport { Card } from '@dbs-portal/core-ui'\n\n// Basic card\n<Card title=\"Card Title\">\n  <p>Card content</p>\n</Card>\n\n// With extra actions\n<Card \n  title=\"Card Title\" \n  extra={<Button>Action</Button>}\n  actions={[<Button key=\"1\">Edit</Button>, <Button key=\"2\">Delete</Button>]}\n>\n  <p>Card content</p>\n</Card>\n\n// With cover image\n<Card cover={<img src=\"image.jpg\" alt=\"Cover\" />}>\n  <Card.Meta title=\"Title\" description=\"Description\" />\n</Card>\n```\n\n### Modal\n\nAccessible modal component with focus management.\n\n```tsx\nimport { Modal } from '@dbs-portal/core-ui'\n\nfunction MyComponent() {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Modal</Button>\n      <Modal\n        open={open}\n        title=\"Modal Title\"\n        onCancel={() => setOpen(false)}\n        onOk={() => setOpen(false)}\n      >\n        <p>Modal content</p>\n      </Modal>\n    </>\n  )\n}\n```\n\n### Layout\n\nLayout components for structuring your application.\n\n```tsx\nimport { Layout } from '@dbs-portal/core-ui'\n\nconst { Header, Content, Footer, Sider } = Layout\n\nfunction AppLayout() {\n  return (\n    <Layout>\n      <Header>Header content</Header>\n      <Layout hasSider>\n        <Sider>Sidebar content</Sider>\n        <Content>Main content</Content>\n      </Layout>\n      <Footer>Footer content</Footer>\n    </Layout>\n  )\n}\n```\n\n### Form\n\nEnhanced form components with better styling and validation.\n\n```tsx\nimport { Form, Input, Button } from '@dbs-portal/core-ui'\n\nfunction MyForm() {\n  const [form] = Form.useForm()\n\n  return (\n    <Form form={form} layout=\"vertical\">\n      <Form.Item label=\"Name\" name=\"name\" required>\n        <Input placeholder=\"Enter your name\" />\n      </Form.Item>\n      <Form.Item>\n        <Button htmlType=\"submit\">Submit</Button>\n      </Form.Item>\n    </Form>\n  )\n}\n```\n\n## Hooks\n\n### useTheme\n\nAccess theme context and utilities.\n\n```tsx\nimport { useTheme } from '@dbs-portal/core-ui'\n\nfunction MyComponent() {\n  const { mode, setMode, isDark, toggleTheme } = useTheme()\n  \n  return (\n    <Button onClick={toggleTheme}>\n      Switch to {isDark ? 'light' : 'dark'} mode\n    </Button>\n  )\n}\n```\n\n### useResponsive\n\nHandle responsive behavior in components.\n\n```tsx\nimport { useBreakpoint, useIsMobile } from '@dbs-portal/core-ui'\n\nfunction ResponsiveComponent() {\n  const breakpoint = useBreakpoint()\n  const isMobile = useIsMobile()\n  \n  return (\n    <div>\n      Current breakpoint: {breakpoint}\n      {isMobile && <p>Mobile view</p>}\n    </div>\n  )\n}\n```\n\n## Enhanced Modules\n\n### Icons (`@dbs-portal/core-ui/icons`)\n\nEnhanced icon system with theming and animation support:\n\n```tsx\nimport { Icon, IconButton, IconText } from '@dbs-portal/core-ui/icons'\nimport { UserOutlined } from '@ant-design/icons'\n\n// Enhanced icon with theming\n<Icon\n  icon={UserOutlined}\n  size=\"lg\"\n  color=\"primary\"\n  animation=\"spin\"\n/>\n\n// Icon button with tooltip\n<IconButton\n  icon={UserOutlined}\n  tooltip=\"User Profile\"\n  onClick={() => {}}\n/>\n\n// Icon with text\n<IconText icon={UserOutlined} placement=\"start\">\n  User Profile\n</IconText>\n```\n\n### Animations (`@dbs-portal/core-ui/animations`)\n\nFramer Motion integration for smooth animations:\n\n```tsx\nimport { FadeIn, SlideIn, ScaleIn, Stagger } from '@dbs-portal/core-ui/animations'\n\n// Fade in animation\n<FadeIn duration=\"normal\" delay={0.2}>\n  <div>Content</div>\n</FadeIn>\n\n// Slide in from different directions\n<SlideIn direction=\"up\" distance={20}>\n  <Card>Sliding content</Card>\n</SlideIn>\n\n// Stagger children animations\n<Stagger staggerDelay={0.1}>\n  <div>Item 1</div>\n  <div>Item 2</div>\n  <div>Item 3</div>\n</Stagger>\n```\n\n### Positioning (`@dbs-portal/core-ui/positioning`)\n\nAdvanced positioning with Floating UI:\n\n```tsx\nimport {\n  FloatingTooltip,\n  FloatingDropdown,\n  FloatingPopover\n} from '@dbs-portal/core-ui/positioning'\n\n// Advanced tooltip\n<FloatingTooltip\n  content=\"Advanced tooltip\"\n  placement=\"top\"\n  arrow={true}\n>\n  <Button>Hover me</Button>\n</FloatingTooltip>\n\n// Dropdown with smart positioning\n<FloatingDropdown\n  trigger={<Button>Open Menu</Button>}\n  placement=\"bottom-start\"\n>\n  <Menu>\n    <Menu.Item>Option 1</Menu.Item>\n    <Menu.Item>Option 2</Menu.Item>\n  </Menu>\n</FloatingDropdown>\n```\n\n### Accessibility (`@dbs-portal/core-ui/accessibility`)\n\nHeadless UI components for maximum accessibility:\n\n```tsx\nimport {\n  AccessibleDialog,\n  AccessibleSwitch,\n  AccessibleTabs\n} from '@dbs-portal/core-ui/accessibility'\n\n// Accessible dialog\n<AccessibleDialog\n  open={isOpen}\n  onClose={setIsOpen}\n  title=\"Dialog Title\"\n>\n  <p>Dialog content</p>\n</AccessibleDialog>\n\n// Accessible switch\n<AccessibleSwitch\n  checked={enabled}\n  onChange={setEnabled}\n  label=\"Enable notifications\"\n  description=\"Receive email notifications\"\n/>\n```\n\n### Forms (`@dbs-portal/core-ui/forms/tanstack`)\n\nTanStack Form integration:\n\n```tsx\nimport {\n  Form,\n  FormField,\n  useEnhancedForm,\n  useFieldValidation\n} from '@dbs-portal/core-ui/forms/tanstack'\n\nfunction MyForm() {\n  const { required, email } = useFieldValidation()\n\n  return (\n    <Form onSubmit={(data) => console.log(data)}>\n      <FormField\n        name=\"email\"\n        label=\"Email Address\"\n        component=\"input\"\n        validators={[required(), email()]}\n      />\n      <FormField\n        name=\"message\"\n        label=\"Message\"\n        component=\"textarea\"\n        validators={[required()]}\n      />\n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n```\n\n## Customization\n\n### Theme Customization\n\nThe components use the theme system from `@dbs-portal/core-theme`. You can customize colors, typography, spacing, and more through design tokens.\n\n### CSS Classes\n\nAll components include CSS classes for custom styling:\n\n- `.dbs-button` - Button component\n- `.dbs-input` - Input component  \n- `.dbs-card` - Card component\n- `.dbs-modal` - Modal component\n- `.dbs-layout` - Layout components\n\n## TypeScript Support\n\nAll components are fully typed with TypeScript, providing excellent developer experience with IntelliSense and type checking.\n\n## Accessibility\n\nComponents follow accessibility best practices:\n\n- Proper ARIA attributes\n- Keyboard navigation support\n- Focus management\n- Screen reader compatibility\n\n## Dependencies\n\n### Core Dependencies\n- React 19+\n- Ant Design 5.26+\n- @dbs-portal/core-theme\n- @dbs-portal/core-shared\n\n### Enhanced Dependencies\n- @tanstack/react-form - Advanced form management\n- framer-motion - Smooth animations and transitions\n- @floating-ui/react - Smart positioning for tooltips and popovers\n- @headlessui/react - Accessible, unstyled UI components\n\n## Migration Guide\n\n### From Previous Versions\n\nThe enhanced UI package maintains backward compatibility with existing components. New features are available through separate imports:\n\n```tsx\n// Existing components (unchanged)\nimport { Button, Input, Card } from '@dbs-portal/core-ui'\n\n// New enhanced modules (opt-in)\nimport { FadeIn } from '@dbs-portal/core-ui/animations'\nimport { FloatingTooltip } from '@dbs-portal/core-ui/positioning'\nimport { AccessibleDialog } from '@dbs-portal/core-ui/accessibility'\n```\n\n### Performance Considerations\n\nEnhanced modules are tree-shakeable and only loaded when imported:\n\n```tsx\n// Only loads animation utilities\nimport { FadeIn, SlideIn } from '@dbs-portal/core-ui/animations'\n\n// Only loads positioning utilities\nimport { FloatingTooltip } from '@dbs-portal/core-ui/positioning'\n```\n\n## Contributing\n\nWhen contributing to the enhanced UI package:\n\n1. **Follow established patterns** - Use existing component structures\n2. **Maintain backward compatibility** - Don't break existing APIs\n3. **Add comprehensive tests** - Test both functionality and accessibility\n4. **Update documentation** - Include examples and usage guides\n5. **Consider performance** - Ensure tree-shaking and lazy loading work correctly\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-9b990e2ff9a7c9557b8772a7fcc2972f"}