@sesamehr/react-design-system 0.1.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/README.md +37 -57
  2. package/dist/Button/Button.d.ts +2 -2
  3. package/dist/Button/index.d.ts +3 -3
  4. package/dist/Data/Table/TableAvatar/TableAvatar.d.ts +1 -0
  5. package/dist/Data/Table/TableFixed/index.d.ts +1 -1
  6. package/dist/Data/Table/hooks/index.d.ts +14 -14
  7. package/dist/Data/Table/hooks/useTablePinning/index.d.ts +1 -1
  8. package/dist/Data/Table/index.d.ts +16 -16
  9. package/dist/Display/Avatar/Avatar.d.ts +4 -3
  10. package/dist/Display/Avatar/hooks/useAvatarBullet.d.ts +1 -1
  11. package/dist/Display/Avatar/index.d.ts +3 -3
  12. package/dist/Display/AvatarGroup/AvatarGroup.d.ts +1 -0
  13. package/dist/Display/AvatarGroup/index.d.ts +1 -1
  14. package/dist/Display/Badge/Badge.d.ts +3 -2
  15. package/dist/Display/Badge/index.d.ts +2 -2
  16. package/dist/Display/PaymentCard/PaymentCard.d.ts +3 -2
  17. package/dist/Display/PaymentCard/index.d.ts +1 -1
  18. package/dist/Feedback/Alert/Alert.d.ts +2 -2
  19. package/dist/Feedback/Alert/AlertIcon.d.ts +3 -1
  20. package/dist/Feedback/Alert/index.d.ts +7 -7
  21. package/dist/Feedback/Bullet/Bullet.d.ts +3 -2
  22. package/dist/Feedback/Bullet/index.d.ts +3 -3
  23. package/dist/Feedback/Dialog/index.d.ts +6 -6
  24. package/dist/Feedback/Popover/PopoverContent.d.ts +1 -0
  25. package/dist/Feedback/Popover/index.d.ts +2 -2
  26. package/dist/Feedback/StatusBadge/StatusBadge.d.ts +3 -2
  27. package/dist/Feedback/StatusBadge/index.d.ts +1 -1
  28. package/dist/Feedback/Tooltip/TooltipContent.d.ts +1 -0
  29. package/dist/Feedback/Tooltip/index.d.ts +2 -2
  30. package/dist/Forms/Field/index.d.ts +3 -3
  31. package/dist/Forms/Inputs/Combobox/Combobox.d.ts +1 -0
  32. package/dist/Forms/Inputs/Combobox/ComboboxChipsInput.d.ts +3 -1
  33. package/dist/Forms/Inputs/Combobox/ComboboxEmpty.d.ts +2 -2
  34. package/dist/Forms/Inputs/Combobox/ComboboxInput.d.ts +3 -1
  35. package/dist/Forms/Inputs/Combobox/ComboboxSeparator.d.ts +2 -2
  36. package/dist/Forms/Inputs/Combobox/index.d.ts +8 -8
  37. package/dist/Forms/Inputs/InputNumber/InputNumber.d.ts +2 -0
  38. package/dist/Forms/Inputs/InputNumber/index.d.ts +5 -5
  39. package/dist/Forms/Inputs/InputOtp/InputOtp.d.ts +10 -0
  40. package/dist/Forms/Inputs/InputOtp/InputOtpGroup/InputOtpGroup.d.ts +3 -0
  41. package/dist/Forms/Inputs/InputOtp/InputOtpSeparator/InputOtpSeparator.d.ts +3 -0
  42. package/dist/Forms/Inputs/InputOtp/InputOtpSlot/InputOtpSlot.d.ts +3 -0
  43. package/dist/Forms/Inputs/InputOtp/hooks/useInputOtp.d.ts +3 -0
  44. package/dist/Forms/Inputs/InputOtp/index.d.ts +6 -0
  45. package/dist/Forms/Inputs/InputOtp/types.d.ts +39 -0
  46. package/dist/Forms/Inputs/InputPassword/InputPassword.d.ts +20 -0
  47. package/dist/Forms/Inputs/InputPassword/InputPasswordInput.d.ts +3 -0
  48. package/dist/Forms/Inputs/InputPassword/InputPasswordToggle.d.ts +12 -0
  49. package/dist/Forms/Inputs/InputPassword/index.d.ts +5 -0
  50. package/dist/Forms/Inputs/InputPassword/useInputPassword.d.ts +12 -0
  51. package/dist/Forms/Inputs/InputText/InputText.d.ts +4 -2
  52. package/dist/Forms/Inputs/Toggle/Checkbox/Checkbox.d.ts +1 -1
  53. package/dist/Forms/Inputs/Toggle/RadioButton/RadioButton.d.ts +1 -1
  54. package/dist/Forms/Inputs/Toggle/RadioButton/RadioGroup.d.ts +1 -1
  55. package/dist/Forms/Inputs/Toggle/Switch/Switch.d.ts +1 -1
  56. package/dist/Forms/Inputs/Toggle/ToggleDescription/ToggleDescription.d.ts +1 -1
  57. package/dist/Forms/Inputs/Toggle/ToggleGroup/ToggleGroup.d.ts +1 -1
  58. package/dist/Forms/Inputs/Toggle/ToggleLabel/ToggleLabel.d.ts +1 -1
  59. package/dist/Forms/Inputs/Toggle/index.d.ts +8 -8
  60. package/dist/Forms/Inputs/index.d.ts +4 -2
  61. package/dist/Forms/Inputs/inputSize.d.ts +7 -0
  62. package/dist/Layout/Card/Card.d.ts +10 -0
  63. package/dist/Layout/Card/index.d.ts +1 -0
  64. package/dist/Layout/Divider/Divider.d.ts +16 -0
  65. package/dist/Layout/Divider/index.d.ts +1 -0
  66. package/dist/Layout/Resizable/Resizable.d.ts +1 -0
  67. package/dist/Layout/Resizable/ResizableHandle.d.ts +2 -1
  68. package/dist/Layout/Resizable/ResizablePanel.d.ts +4 -18
  69. package/dist/Layout/Resizable/index.d.ts +3 -3
  70. package/dist/Navigation/Accordion/index.d.ts +4 -4
  71. package/dist/Navigation/Breadcrumb/BreadcrumbEllipsis.d.ts +4 -2
  72. package/dist/Navigation/Breadcrumb/BreadcrumbSeparator.d.ts +4 -2
  73. package/dist/Navigation/Breadcrumb/index.d.ts +7 -7
  74. package/dist/Navigation/Tabs/Tabs.d.ts +4 -2
  75. package/dist/Navigation/Tabs/index.d.ts +4 -4
  76. package/dist/Transitions/TransitionBounce/TransitionBounce.d.ts +2 -2
  77. package/dist/Transitions/TransitionBounce/index.d.ts +1 -1
  78. package/dist/Transitions/TransitionExpand/TransitionExpand.d.ts +2 -2
  79. package/dist/Transitions/TransitionExpand/index.d.ts +1 -1
  80. package/dist/Transitions/TransitionFade/TransitionFade.d.ts +2 -2
  81. package/dist/Transitions/TransitionFade/index.d.ts +1 -1
  82. package/dist/Transitions/TransitionFlip/TransitionFlip.d.ts +2 -2
  83. package/dist/Transitions/TransitionFlip/index.d.ts +1 -1
  84. package/dist/Transitions/TransitionSlideX/TransitionSlideX.d.ts +2 -2
  85. package/dist/Transitions/TransitionSlideX/index.d.ts +1 -1
  86. package/dist/Transitions/TransitionSlideY/TransitionSlideY.d.ts +2 -2
  87. package/dist/Transitions/TransitionSlideY/index.d.ts +1 -1
  88. package/dist/main.d.ts +28 -25
  89. package/dist/react-design-system.css +1 -1
  90. package/dist/react-design-system.js +13716 -13238
  91. package/dist/react-design-system.umd.cjs +45 -35
  92. package/package.json +21 -20
  93. package/src/assets/styles/mainTheme.css +1 -1
  94. package/src/assets/styles/primitives-v3.css +589 -0
  95. package/src/assets/styles/theme-v3.css +215 -0
package/README.md CHANGED
@@ -1,89 +1,69 @@
1
1
  # @sesamehr/react-design-system
2
2
 
3
- React component library and design tokens for the Sesame HR design system.
3
+ React components and design tokens for the Sesame HR design system.
4
4
 
5
- Accessible, composable components built on [Radix UI](https://www.radix-ui.com/) and styled with [Tailwind CSS v4](https://tailwindcss.com/), shipped as an ESM + UMD bundle with full TypeScript types.
5
+ 📖 **[Component documentation](https://reactds.sesametime.com)**
6
6
 
7
- ## Installation
7
+ ## Install
8
8
 
9
9
  ```bash
10
- npm install @sesamehr/react-design-system
10
+ npm install @sesamehr/react-design-system react react-dom tailwindcss
11
11
  ```
12
12
 
13
- This package has peer dependencies you must install alongside it:
14
-
15
- ```bash
16
- npm install react react-dom tailwindcss
17
- ```
18
-
19
- | Peer | Supported range |
20
- | ------------- | -------------------- |
21
- | `react` | `^18.3.0 \|\| ^19.0.0` |
22
- | `react-dom` | `^18.3.0 \|\| ^19.0.0` |
23
- | `tailwindcss` | `^4.1.7` |
24
-
25
13
  ## Usage
26
14
 
27
- Import the stylesheet once at your app root, then use the components:
15
+ Import the stylesheet once at your app entry:
28
16
 
29
17
  ```tsx
30
- // main.tsx / App entry — import the compiled styles once
31
18
  import '@sesamehr/react-design-system/style.css';
32
19
  ```
33
20
 
21
+ Every component is exported with the `Ox` prefix:
22
+
34
23
  ```tsx
35
- import { Button, Avatar, Alert } from '@sesamehr/react-design-system';
24
+ import {
25
+ OxAvatar,
26
+ OxButton,
27
+ OxFieldGroup,
28
+ OxFieldLabel,
29
+ OxFieldMessage,
30
+ OxInputText,
31
+ } from '@sesamehr/react-design-system';
32
+ import { useState } from 'react';
36
33
 
37
34
  export function Example() {
35
+ const [email, setEmail] = useState('');
36
+
38
37
  return (
39
- <div>
40
- <Avatar initials="SH" size="lg" />
41
- <Button variant="default">Save</Button>
42
- <Alert>Saved successfully.</Alert>
43
- </div>
38
+ <>
39
+ <OxAvatar initials="SH" size="lg" dataTestid="user-avatar" />
40
+
41
+ <OxFieldGroup variant="error">
42
+ <OxFieldLabel htmlFor="email">Email</OxFieldLabel>
43
+ <OxInputText
44
+ id="email"
45
+ field={email}
46
+ onFieldChange={setEmail}
47
+ placeholder="you@example.com"
48
+ />
49
+ <OxFieldMessage variant="error">Invalid email</OxFieldMessage>
50
+ </OxFieldGroup>
51
+
52
+ <OxButton variant="default">Save</OxButton>
53
+ </>
44
54
  );
45
55
  }
46
56
  ```
47
57
 
48
58
  ### Design tokens
49
59
 
50
- The compiled stylesheet already includes the tokens. If you want the raw token
51
- layers (e.g. to `@reference` them from your own Tailwind setup), they are
52
- exported separately:
60
+ The stylesheet already contains the tokens. To `@reference` the raw token layers
61
+ from your own Tailwind setup:
53
62
 
54
63
  ```css
55
64
  @import '@sesamehr/react-design-system/assets/styles/mainTheme.css';
56
65
  ```
57
66
 
58
- ### `cn` utility
59
-
60
- The class-merging helper used internally is also exported:
61
-
62
- ```ts
63
- import { cn } from '@sesamehr/react-design-system/lib/utils';
64
- ```
65
-
66
- ## Components
67
-
68
- - **Buttons** — Button
69
- - **Forms** — Input, InputNumber, InputGroup, Combobox, Checkbox, Switch, RadioButton, Toggle, Field
70
- - **Data** — Table (sorting, selection, pinning, row drag & drop, pagination), TablePagination, Avatar cells
71
- - **Display** — Avatar, AvatarGroup, Badge, PaymentCard
72
- - **Feedback** — Alert, Dialog, Popover, Tooltip, StatusBadge, Bullet
73
- - **Navigation** — Tabs, Accordion, Breadcrumb
74
- - **Layout** — Resizable
75
- - **Transitions** — Fade, Expand, Flip, Bounce, SlideX, SlideY
76
-
77
- All components ship with TypeScript definitions and support `ref` forwarding.
78
-
79
- ## Dark mode
80
-
81
- Components react to the `dark` class on a parent element (typically `<html>`):
82
-
83
- ```ts
84
- document.documentElement.classList.toggle('dark', isDark);
85
- ```
86
-
87
67
  ## License
88
68
 
89
- [MIT](./LICENSE) © Sesame HR
69
+ MIT © Sesame HR
@@ -1,4 +1,4 @@
1
- import { ButtonVariants } from '.';
1
+ import { ButtonVariants } from './index.ts';
2
2
  export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
3
3
  variant?: ButtonVariants['variant'];
4
4
  size?: ButtonVariants['size'];
@@ -6,7 +6,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
6
6
  asChild?: boolean;
7
7
  }
8
8
  /**
9
- * Button — mirrors `@orxata/core` Button.
9
+ * Button — mirrors `@sesame/orxata-core` Button.
10
10
  * `asChild` replaces reka-ui's `<Primitive as-child>` via `@radix-ui/react-slot`.
11
11
  */
12
12
  export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -1,7 +1,7 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
- export { Button, type ButtonProps } from './Button';
2
+ export { Button, type ButtonProps } from './Button.tsx';
3
3
  export declare const buttonVariants: (props?: ({
4
- variant?: "link" | "default" | "success" | "secondary" | "outline" | "destructive" | "ghost" | null | undefined;
5
- size?: "default" | "icon" | "sm" | "lg" | null | undefined;
4
+ variant?: "link" | "default" | "destructive" | "success" | "outline" | "secondary" | "ghost" | null | undefined;
5
+ size?: "icon" | "xs" | "sm" | "md" | "lg" | null | undefined;
6
6
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
7
  export type ButtonVariants = VariantProps<typeof buttonVariants>;
@@ -9,5 +9,6 @@ export interface TableAvatarProps extends React.ComponentPropsWithoutRef<'div'>
9
9
  name: string;
10
10
  /** Subtitle (department, role, etc.) */
11
11
  subtitle?: string;
12
+ dataTestid: string;
12
13
  }
13
14
  export declare const TableAvatar: import('react').ForwardRefExoticComponent<TableAvatarProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- export { TableFixed, TableFixedContext, type TableFixedProps, type TableFixedContextValue, } from './TableFixed';
1
+ export { TableFixed, TableFixedContext, type TableFixedProps, type TableFixedContextValue, } from './TableFixed.tsx';
@@ -1,20 +1,20 @@
1
- export { useTable } from './useTable/useTable';
1
+ export { useTable } from './useTable/useTable.ts';
2
2
  export type { UseTableOptions, UseTableReturn, } from './useTable/useTable.types';
3
- export { useTableSelection } from './useTableSelection/useTableSelection';
3
+ export { useTableSelection } from './useTableSelection/useTableSelection.ts';
4
4
  export type { SelectionOptions, SelectionInstance, SelectionPluginDef, } from './useTableSelection/useTableSelection.types';
5
- export { useTableSorting } from './useTableSorting/useTableSorting';
5
+ export { useTableSorting } from './useTableSorting/useTableSorting.ts';
6
6
  export type { SortingOptions, SortingInstance, SortingPluginDef, } from './useTableSorting/useTableSorting.types';
7
- export { useTablePagination } from './useTablePagination/useTablePagination';
8
- export type { UseTablePaginationOptions, UseTablePaginationReturn, } from './useTablePagination/useTablePagination';
9
- export { useTableDetailRow } from './useTableDetailRow/useTableDetailRow';
7
+ export { useTablePagination } from './useTablePagination/useTablePagination.ts';
8
+ export type { UseTablePaginationOptions, UseTablePaginationReturn, } from './useTablePagination/useTablePagination.ts';
9
+ export { useTableDetailRow } from './useTableDetailRow/useTableDetailRow.ts';
10
10
  export type { DetailRowOptions, DetailRowInstance, DetailRowPluginDef, } from './useTableDetailRow/useTableDetailRow.types';
11
- export { useTablePinning } from './useTablePinning/useTablePinning';
11
+ export { useTablePinning } from './useTablePinning/useTablePinning.ts';
12
12
  export type { PinningOptions, PinningInstance, PinningPluginDef, CellInfo, HeaderInfo, } from './useTablePinning/useTablePinning.types';
13
- export { useTableColumns } from './useTableColumns/useTableColumns';
13
+ export { useTableColumns } from './useTableColumns/useTableColumns.ts';
14
14
  export type { ColumnsOptions, ColumnsInstance, ColumnsPluginDef, } from './useTableColumns/useTableColumns.types';
15
- export { useScrollShadow } from './useScrollShadow/useScrollShadow';
16
- export type { UseScrollShadowOptions, UseScrollShadowReturn, } from './useScrollShadow/useScrollShadow';
17
- export { useDragToScroll } from './useDragToScroll/useDragToScroll';
18
- export type { UseDragToScrollOptions, UseDragToScrollReturn, } from './useDragToScroll/useDragToScroll';
19
- export { useFixedColumns } from './useFixedColumns';
20
- export type { UseFixedColumnsOptions } from './useFixedColumns';
15
+ export { useScrollShadow } from './useScrollShadow/useScrollShadow.ts';
16
+ export type { UseScrollShadowOptions, UseScrollShadowReturn, } from './useScrollShadow/useScrollShadow.ts';
17
+ export { useDragToScroll } from './useDragToScroll/useDragToScroll.ts';
18
+ export type { UseDragToScrollOptions, UseDragToScrollReturn, } from './useDragToScroll/useDragToScroll.ts';
19
+ export { useFixedColumns } from './useFixedColumns.ts';
20
+ export type { UseFixedColumnsOptions } from './useFixedColumns.ts';
@@ -1,2 +1,2 @@
1
- export { useTablePinning } from './useTablePinning';
1
+ export { useTablePinning } from './useTablePinning.ts';
2
2
  export type { PinningOptions, PinningInstance, PinningPluginDef, CellInfo, HeaderInfo, } from './useTablePinning.types';
@@ -1,17 +1,17 @@
1
- export { Table, type TableComponentProps } from './Table';
2
- export { TableHead, type TableHeadProps } from './TableHead/TableHead';
3
- export { TableBody, type TableBodyProps } from './TableBody/TableBody';
4
- export { TableRow, type TableRowProps } from './TableRow/TableRow';
5
- export { TableCell, type TableCellProps } from './TableCell/TableCell';
6
- export { TableHeaderCell, type TableHeaderCellProps, } from './TableHeaderCell/TableHeaderCell';
7
- export { TableSelectCell, type TableSelectCellProps, } from './TableSelectCell/TableSelectCell';
8
- export { TableDragCell, type TableDragCellProps, } from './TableDragCell/TableDragCell';
9
- export { TableBulkHeader, type TableBulkHeaderProps, } from './TableBulkHeader/TableBulkHeader';
10
- export { TablePagination, type TablePaginationProps, } from './TablePagination/TablePagination';
11
- export { TableEmpty, type TableEmptyProps } from './TableEmpty/TableEmpty';
12
- export { TableAvatar, type TableAvatarProps } from './TableAvatar/TableAvatar';
13
- export { TableRowExpanded, type TableRowExpandedProps, } from './TableRowExpanded/TableRowExpanded';
14
- export { TableExpandCell, type TableExpandCellProps, } from './TableExpandCell/TableExpandCell';
15
- export { TableColumnVisibility, type TableColumnVisibilityProps, } from './TableColumnVisibility/TableColumnVisibility';
16
- export { useTable, type UseTableOptions, type UseTableReturn, useTableSelection, type SelectionInstance as UseTableSelectionReturn, useTableSorting, type SortingInstance as UseTableSortingReturn, useTablePagination, type UseTablePaginationOptions, type UseTablePaginationReturn, useTableDetailRow, type DetailRowInstance, type DetailRowOptions, type DetailRowPluginDef, useTablePinning, type PinningOptions as UseTablePinningOptions, type PinningInstance as UseTablePinningReturn, type CellInfo, type HeaderInfo, useTableColumns, type ColumnsOptions as UseTableColumnsOptions, type ColumnsInstance as UseTableColumnsReturn, useScrollShadow, type UseScrollShadowOptions, type UseScrollShadowReturn, useDragToScroll, type UseDragToScrollOptions, type UseDragToScrollReturn, useFixedColumns, type UseFixedColumnsOptions, } from './hooks';
1
+ export { Table, type TableComponentProps } from './Table.tsx';
2
+ export { TableHead, type TableHeadProps } from './TableHead/TableHead.tsx';
3
+ export { TableBody, type TableBodyProps } from './TableBody/TableBody.tsx';
4
+ export { TableRow, type TableRowProps } from './TableRow/TableRow.tsx';
5
+ export { TableCell, type TableCellProps } from './TableCell/TableCell.tsx';
6
+ export { TableHeaderCell, type TableHeaderCellProps, } from './TableHeaderCell/TableHeaderCell.tsx';
7
+ export { TableSelectCell, type TableSelectCellProps, } from './TableSelectCell/TableSelectCell.tsx';
8
+ export { TableDragCell, type TableDragCellProps, } from './TableDragCell/TableDragCell.tsx';
9
+ export { TableBulkHeader, type TableBulkHeaderProps, } from './TableBulkHeader/TableBulkHeader.tsx';
10
+ export { TablePagination, type TablePaginationProps, } from './TablePagination/TablePagination.tsx';
11
+ export { TableEmpty, type TableEmptyProps } from './TableEmpty/TableEmpty.tsx';
12
+ export { TableAvatar, type TableAvatarProps, } from './TableAvatar/TableAvatar.tsx';
13
+ export { TableRowExpanded, type TableRowExpandedProps, } from './TableRowExpanded/TableRowExpanded.tsx';
14
+ export { TableExpandCell, type TableExpandCellProps, } from './TableExpandCell/TableExpandCell.tsx';
15
+ export { TableColumnVisibility, type TableColumnVisibilityProps, } from './TableColumnVisibility/TableColumnVisibility.tsx';
16
+ export { useTable, type UseTableOptions, type UseTableReturn, useTableSelection, type SelectionInstance as UseTableSelectionReturn, useTableSorting, type SortingInstance as UseTableSortingReturn, useTablePagination, type UseTablePaginationOptions, type UseTablePaginationReturn, useTableDetailRow, type DetailRowInstance, type DetailRowOptions, type DetailRowPluginDef, useTablePinning, type PinningOptions as UseTablePinningOptions, type PinningInstance as UseTablePinningReturn, type CellInfo, type HeaderInfo, useTableColumns, type ColumnsOptions as UseTableColumnsOptions, type ColumnsInstance as UseTableColumnsReturn, useScrollShadow, type UseScrollShadowOptions, type UseScrollShadowReturn, useDragToScroll, type UseDragToScrollOptions, type UseDragToScrollReturn, useFixedColumns, type UseFixedColumnsOptions, } from './hooks/index.ts';
17
17
  export type { TableProps, TableMode, ColumnDef, ColumnAlign, CellContext, SortingState, PaginationState, PaginationChangePayload, SortingChangePayload, SelectionChangePayload, FilterChangePayload, ColumnResizeMode, ColumnVisibilityState, ColumnOrderState, ExpandedState, ColumnVisibilityChangePayload, ColumnOrderChangePayload, RowExpandChangePayload, ColumnResizePayload, ColumnPinningState, } from './types';
@@ -1,5 +1,5 @@
1
- import { AvatarVariants } from '.';
2
- import { BulletVariants } from '../../Feedback/Bullet';
1
+ import { BulletVariants } from '../../Feedback/Bullet/index.ts';
2
+ import { AvatarVariants } from './index.ts';
3
3
  export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
4
4
  /** Image source URL */
5
5
  src?: string;
@@ -15,9 +15,10 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
15
15
  action?: React.ReactNode;
16
16
  /** Label slot (rendered bottom-center) */
17
17
  label?: React.ReactNode;
18
+ dataTestid: string;
18
19
  }
19
20
  /**
20
- * Avatar — mirrors `@orxata/core` Avatar. SVG hexagon shape with hover
21
+ * Avatar — mirrors `@sesame/orxata-core` Avatar. SVG hexagon shape with hover
21
22
  * drop-shadow, clip-path image, foreignObject initials, and status Bullet.
22
23
  */
23
24
  export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & import('react').RefAttributes<HTMLSpanElement>>;
@@ -10,7 +10,7 @@ interface BulletBottomStyle {
10
10
  }
11
11
  export type BulletStyle = BulletTopStyle | BulletBottomStyle;
12
12
  export declare function useAvatarBullet(size: AvatarSize): {
13
- bulletSize: "8" | "24" | "16" | "12" | null | undefined;
13
+ bulletSize: "24" | "16" | "12" | "8" | null | undefined;
14
14
  bulletStyle: BulletStyle;
15
15
  };
16
16
  export {};
@@ -1,9 +1,9 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
- export { Avatar, type AvatarProps } from './Avatar';
2
+ export { Avatar, type AvatarProps } from './Avatar.tsx';
3
3
  export declare const avatarVariants: (props?: ({
4
- size?: "sm" | "md" | "lg" | "xs" | "2xl" | "xl" | "2xs" | null | undefined;
4
+ size?: "xs" | "sm" | "md" | "lg" | "2xl" | "xl" | "2xs" | null | undefined;
5
5
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
6
6
  export declare const avatarTextVariants: (props?: ({
7
- size?: "sm" | "md" | "lg" | "xs" | "2xl" | "xl" | "2xs" | null | undefined;
7
+ size?: "xs" | "sm" | "md" | "lg" | "2xl" | "xl" | "2xs" | null | undefined;
8
8
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
9
9
  export type AvatarVariants = VariantProps<typeof avatarVariants>;
@@ -12,5 +12,6 @@ export interface AvatarGroupProps extends Omit<React.ButtonHTMLAttributes<HTMLBu
12
12
  interactive?: boolean;
13
13
  /** Click handler (only fired when interactive) */
14
14
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
15
+ dataTestid: string;
15
16
  }
16
17
  export declare const AvatarGroup: import('react').ForwardRefExoticComponent<AvatarGroupProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -1 +1 @@
1
- export { AvatarGroup, type AvatarGroupProps, type AvatarItem, } from './AvatarGroup';
1
+ export { AvatarGroup, type AvatarGroupProps, type AvatarItem, } from './AvatarGroup.tsx';
@@ -1,6 +1,7 @@
1
- import { BadgeVariants } from '.';
1
+ import { BadgeVariants } from './index.ts';
2
2
  export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
3
3
  variant?: BadgeVariants['variant'];
4
+ dataTestid: string;
4
5
  }
5
- /** Badge — mirrors `@orxata/core` Badge (cva-only). */
6
+ /** Badge — mirrors `@sesame/orxata-core` Badge (cva-only). */
6
7
  export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;
@@ -1,6 +1,6 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
- export { Badge, type BadgeProps } from './Badge';
2
+ export { Badge, type BadgeProps } from './Badge.tsx';
3
3
  export declare const badgeVariants: (props?: ({
4
- variant?: "default" | "secondary" | "outline" | "destructive" | null | undefined;
4
+ variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
5
5
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
6
6
  export type BadgeVariants = VariantProps<typeof badgeVariants>;
@@ -1,4 +1,4 @@
1
- import { BadgeType, CardData, PaymentCardVariants } from '.';
1
+ import { BadgeType, CardData, PaymentCardVariants } from './index.ts';
2
2
  export interface PaymentCardProps extends React.HTMLAttributes<HTMLDivElement> {
3
3
  /** Card size */
4
4
  size?: PaymentCardVariants['size'];
@@ -8,6 +8,7 @@ export interface PaymentCardProps extends React.HTMLAttributes<HTMLDivElement> {
8
8
  badgeType?: BadgeType;
9
9
  /** Card data (number, name, expiry, last digits) */
10
10
  cardData?: CardData;
11
+ dataTestid: string;
11
12
  }
12
- /** PaymentCard — mirrors `@orxata/core` PaymentCard. */
13
+ /** PaymentCard — mirrors `@sesame/orxata-core` PaymentCard. */
13
14
  export declare const PaymentCard: import('react').ForwardRefExoticComponent<PaymentCardProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,5 +1,5 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
- export { PaymentCard, type PaymentCardProps } from './PaymentCard';
2
+ export { PaymentCard, type PaymentCardProps } from './PaymentCard.tsx';
3
3
  export declare const paymentCardVariants: (props?: ({
4
4
  size?: "default" | "compact" | null | undefined;
5
5
  disabled?: boolean | null | undefined;
@@ -1,4 +1,4 @@
1
- import { AlertVariant } from './alert-context';
1
+ import { AlertVariant } from './alert-context.ts';
2
2
  export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onToggle'> {
3
3
  variant?: AlertVariant;
4
4
  dismissible?: boolean;
@@ -12,7 +12,7 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
12
12
  onToggled?: (open: boolean) => void;
13
13
  }
14
14
  /**
15
- * Alert — mirrors `@orxata/core` Alert.
15
+ * Alert — mirrors `@sesame/orxata-core` Alert.
16
16
  * Vue `provide/inject` context becomes React context (`AlertContext`).
17
17
  */
18
18
  export declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,3 +1,5 @@
1
- export type AlertIconProps = React.HTMLAttributes<HTMLDivElement>;
1
+ export interface AlertIconProps extends React.HTMLAttributes<HTMLDivElement> {
2
+ dataTestid: string;
3
+ }
2
4
  /** AlertIcon — renders the variant's default lucide icon, or `children` if provided. */
3
5
  export declare const AlertIcon: import('react').ForwardRefExoticComponent<AlertIconProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,7 +1,7 @@
1
- export { Alert, type AlertProps } from './Alert';
2
- export { AlertClose, type AlertCloseProps } from './AlertClose';
3
- export { AlertDescription, type AlertDescriptionProps, } from './AlertDescription';
4
- export { AlertIcon, type AlertIconProps } from './AlertIcon';
5
- export { AlertTitle, type AlertTitleProps } from './AlertTitle';
6
- export { AlertToggle, type AlertToggleProps } from './AlertToggle';
7
- export { type AlertVariant } from './alert-context';
1
+ export { Alert, type AlertProps } from './Alert.tsx';
2
+ export { AlertClose, type AlertCloseProps } from './AlertClose.tsx';
3
+ export { AlertDescription, type AlertDescriptionProps, } from './AlertDescription.tsx';
4
+ export { AlertIcon, type AlertIconProps } from './AlertIcon.tsx';
5
+ export { AlertTitle, type AlertTitleProps } from './AlertTitle.tsx';
6
+ export { AlertToggle, type AlertToggleProps } from './AlertToggle.tsx';
7
+ export { type AlertVariant } from './alert-context.ts';
@@ -1,7 +1,8 @@
1
- import { BulletVariants } from '.';
1
+ import { BulletVariants } from './index.ts';
2
2
  export interface BulletProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
3
3
  size?: BulletVariants['size'];
4
4
  color?: BulletVariants['color'];
5
+ dataTestid: string;
5
6
  }
6
- /** Bullet — mirrors `@orxata/core` Bullet (cva-only). */
7
+ /** Bullet — mirrors `@sesame/orxata-core` Bullet (cva-only). */
7
8
  export declare const Bullet: import('react').ForwardRefExoticComponent<BulletProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,7 +1,7 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
- export { Bullet, type BulletProps } from './Bullet';
2
+ export { Bullet, type BulletProps } from './Bullet.tsx';
3
3
  export declare const bulletVariants: (props?: ({
4
- size?: "8" | "24" | "16" | "12" | null | undefined;
5
- color?: "active" | "warning" | "info" | "neutral" | null | undefined;
4
+ size?: "24" | "16" | "12" | "8" | null | undefined;
5
+ color?: "active" | "info" | "warning" | "neutral" | null | undefined;
6
6
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
7
  export type BulletVariants = VariantProps<typeof bulletVariants>;
@@ -1,7 +1,7 @@
1
- export { Dialog, type DialogProps } from './Dialog';
2
- export { DialogContent, type DialogContentProps } from './DialogContent';
3
- export { DialogTitle, type DialogTitleProps } from './DialogTitle';
4
- export { DialogDescription, type DialogDescriptionProps, } from './DialogDescription';
5
- export { DialogOverlay, type DialogOverlayProps } from './DialogOverlay';
6
- export { DialogTwoPanelContent, type DialogTwoPanelContentProps, } from './DialogTwoPanelContent';
1
+ export { Dialog, type DialogProps } from './Dialog.tsx';
2
+ export { DialogContent, type DialogContentProps } from './DialogContent.tsx';
3
+ export { DialogTitle, type DialogTitleProps } from './DialogTitle.tsx';
4
+ export { DialogDescription, type DialogDescriptionProps, } from './DialogDescription.tsx';
5
+ export { DialogOverlay, type DialogOverlayProps } from './DialogOverlay.tsx';
6
+ export { DialogTwoPanelContent, type DialogTwoPanelContentProps, } from './DialogTwoPanelContent.tsx';
7
7
  export { Trigger as DialogTrigger, Close as DialogClose, } from '@radix-ui/react-dialog';
@@ -1,6 +1,7 @@
1
1
  import * as PopoverPrimitive from '@radix-ui/react-popover';
2
2
  export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
3
3
  showArrow?: boolean;
4
+ dataTestid: string;
4
5
  }
5
6
  /** PopoverContent — portalled Radix popover content with optional arrow. */
6
7
  export declare const PopoverContent: import('react').ForwardRefExoticComponent<PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,3 +1,3 @@
1
- export { Popover, type PopoverProps } from './Popover';
2
- export { PopoverContent, type PopoverContentProps } from './PopoverContent';
1
+ export { Popover, type PopoverProps } from './Popover.tsx';
2
+ export { PopoverContent, type PopoverContentProps } from './PopoverContent.tsx';
3
3
  export { PopoverClose } from '@radix-ui/react-popover';
@@ -1,6 +1,7 @@
1
- import { StatusBadgeVariants } from '.';
1
+ import { StatusBadgeVariants } from './index.ts';
2
2
  export interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
3
3
  status?: StatusBadgeVariants['status'];
4
+ dataTestid: string;
4
5
  }
5
- /** StatusBadge — mirrors `@orxata/core` StatusBadge (cva-only). */
6
+ /** StatusBadge — mirrors `@sesame/orxata-core` StatusBadge (cva-only). */
6
7
  export declare const StatusBadge: import('react').ForwardRefExoticComponent<StatusBadgeProps & import('react').RefAttributes<HTMLSpanElement>>;
@@ -1,5 +1,5 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
- export { StatusBadge, type StatusBadgeProps } from './StatusBadge';
2
+ export { StatusBadge, type StatusBadgeProps } from './StatusBadge.tsx';
3
3
  export declare const statusBadgeVariants: (props?: ({
4
4
  status?: "paused" | "active" | "draft" | "completed" | "scheduled" | "deleted" | null | undefined;
5
5
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -1,6 +1,7 @@
1
1
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
2
2
  export interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
3
3
  showArrow?: boolean;
4
+ dataTestid: string;
4
5
  }
5
6
  /** TooltipContent — portalled Radix tooltip content with optional arrow. */
6
7
  export declare const TooltipContent: import('react').ForwardRefExoticComponent<TooltipContentProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,2 +1,2 @@
1
- export { Tooltip, type TooltipProps } from './Tooltip';
2
- export { TooltipContent, type TooltipContentProps } from './TooltipContent';
1
+ export { Tooltip, type TooltipProps } from './Tooltip.tsx';
2
+ export { TooltipContent, type TooltipContentProps } from './TooltipContent.tsx';
@@ -1,3 +1,3 @@
1
- export { FieldGroup, type FieldGroupProps } from './FieldGroup/FieldGroup';
2
- export { FieldLabel, type FieldLabelProps } from './FieldLabel/FieldLabel';
3
- export { FieldMessage, type FieldMessageProps, } from './FieldMessage/FieldMessage';
1
+ export { FieldGroup, type FieldGroupProps } from './FieldGroup/FieldGroup.tsx';
2
+ export { FieldLabel, type FieldLabelProps } from './FieldLabel/FieldLabel.tsx';
3
+ export { FieldMessage, type FieldMessageProps, } from './FieldMessage/FieldMessage.tsx';
@@ -16,6 +16,7 @@ export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>
16
16
  /** Emitted when the open state changes. */
17
17
  onOpenChange?: (open: boolean) => void;
18
18
  children?: React.ReactNode;
19
+ dataTestid: string;
19
20
  }
20
21
  /**
21
22
  * Combobox root — replaces reka-ui `ComboboxRoot`.
@@ -1,6 +1,8 @@
1
- export interface ComboboxChipsInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
1
+ import { InputSize } from '../inputSize.ts';
2
+ export interface ComboboxChipsInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size'> {
2
3
  placeholder?: string;
3
4
  disabled?: boolean;
5
+ size?: InputSize;
4
6
  /** Custom trigger content (defaults to a chevron icon). */
5
7
  trigger?: React.ReactNode;
6
8
  }
@@ -3,8 +3,8 @@ export type ComboboxEmptyProps = React.ComponentPropsWithoutRef<typeof CommandEm
3
3
  /** ComboboxEmpty — replaces reka `ComboboxEmpty`. Shown when no items match. */
4
4
  export declare const ComboboxEmpty: import('react').ForwardRefExoticComponent<Omit<{
5
5
  children?: React.ReactNode;
6
- } & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | "key"> & {
6
+ } & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
7
7
  ref?: React.Ref<HTMLDivElement>;
8
8
  } & {
9
9
  asChild?: boolean;
10
- }, keyof import('react').HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
10
+ }, "asChild" | "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,6 +1,8 @@
1
- export interface ComboboxInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
1
+ import { InputSize } from '../inputSize.ts';
2
+ export interface ComboboxInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size'> {
2
3
  placeholder?: string;
3
4
  disabled?: boolean;
5
+ size?: InputSize;
4
6
  /** Formats the selected value shown in the input when not actively searching. */
5
7
  displayValue?: (value: unknown) => string;
6
8
  /** Custom trigger content (defaults to a chevron icon). */
@@ -1,10 +1,10 @@
1
1
  import { CommandSeparator } from 'cmdk';
2
2
  export type ComboboxSeparatorProps = React.ComponentPropsWithoutRef<typeof CommandSeparator>;
3
3
  /** ComboboxSeparator — replaces reka `ComboboxSeparator`. */
4
- export declare const ComboboxSeparator: import('react').ForwardRefExoticComponent<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | "key"> & {
4
+ export declare const ComboboxSeparator: import('react').ForwardRefExoticComponent<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
5
5
  ref?: React.Ref<HTMLDivElement>;
6
6
  } & {
7
7
  asChild?: boolean;
8
- }, keyof import('react').HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
8
+ }, "asChild" | "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
9
9
  alwaysRender?: boolean;
10
10
  } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
@@ -1,8 +1,8 @@
1
- export { Combobox, type ComboboxProps } from './Combobox';
2
- export { ComboboxInput, type ComboboxInputProps } from './ComboboxInput';
3
- export { ComboboxChipsInput, type ComboboxChipsInputProps, } from './ComboboxChipsInput';
4
- export { ComboboxContent, type ComboboxContentProps } from './ComboboxContent';
5
- export { ComboboxItem, type ComboboxItemProps } from './ComboboxItem';
6
- export { ComboboxEmpty, type ComboboxEmptyProps } from './ComboboxEmpty';
7
- export { ComboboxGroup, type ComboboxGroupProps } from './ComboboxGroup';
8
- export { ComboboxSeparator, type ComboboxSeparatorProps, } from './ComboboxSeparator';
1
+ export { Combobox, type ComboboxProps } from './Combobox.tsx';
2
+ export { ComboboxInput, type ComboboxInputProps } from './ComboboxInput.tsx';
3
+ export { ComboboxChipsInput, type ComboboxChipsInputProps, } from './ComboboxChipsInput.tsx';
4
+ export { ComboboxContent, type ComboboxContentProps, } from './ComboboxContent.tsx';
5
+ export { ComboboxItem, type ComboboxItemProps } from './ComboboxItem.tsx';
6
+ export { ComboboxEmpty, type ComboboxEmptyProps } from './ComboboxEmpty.tsx';
7
+ export { ComboboxGroup, type ComboboxGroupProps } from './ComboboxGroup.tsx';
8
+ export { ComboboxSeparator, type ComboboxSeparatorProps, } from './ComboboxSeparator.tsx';
@@ -1,4 +1,6 @@
1
+ import { InputSize } from '../inputSize.ts';
1
2
  export interface InputNumberProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
3
+ size?: InputSize;
2
4
  /** Controlled value. */
3
5
  value?: number | null;
4
6
  /** Uncontrolled initial value. */
@@ -1,5 +1,5 @@
1
- export { InputNumber, type InputNumberProps } from './InputNumber';
2
- export { InputNumberContent, type InputNumberContentProps, } from './InputNumberContent';
3
- export { InputNumberDecrement, type InputNumberDecrementProps, } from './InputNumberDecrement';
4
- export { InputNumberIncrement, type InputNumberIncrementProps, } from './InputNumberIncrement';
5
- export { InputNumberInput, type InputNumberInputProps, } from './InputNumberInput';
1
+ export { InputNumber, type InputNumberProps } from './InputNumber.tsx';
2
+ export { InputNumberContent, type InputNumberContentProps, } from './InputNumberContent.tsx';
3
+ export { InputNumberDecrement, type InputNumberDecrementProps, } from './InputNumberDecrement.tsx';
4
+ export { InputNumberIncrement, type InputNumberIncrementProps, } from './InputNumberIncrement.tsx';
5
+ export { InputNumberInput, type InputNumberInputProps, } from './InputNumberInput.tsx';
@@ -0,0 +1,10 @@
1
+ import { InputOtpProps } from './types.ts';
2
+ /**
3
+ * InputOtp root — mirrors `@sesame/orxata-core` InputOtp.
4
+ *
5
+ * The Vue package delegates to reka-ui's `PinInput`, which has no Radix
6
+ * counterpart, so the pin behaviour (focus advance, backspace, arrow keys,
7
+ * paste spreading, per-slot labels) lives here and reaches the slots through
8
+ * context. The rendered DOM matches the Vue version: one `<input>` per slot.
9
+ */
10
+ export declare const InputOtp: import('react').ForwardRefExoticComponent<InputOtpProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,3 @@
1
+ export type InputOtpGroupProps = React.HTMLAttributes<HTMLDivElement>;
2
+ /** InputOtpGroup — visual cluster of slots; its test id follows mount order. */
3
+ export declare const InputOtpGroup: import('react').ForwardRefExoticComponent<InputOtpGroupProps & import('react').RefAttributes<HTMLDivElement>>;