@sesamehr/react-design-system 1.0.0 → 1.2.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 (16) hide show
  1. package/README.md +37 -57
  2. package/dist/Forms/Inputs/Select/Select.d.ts +20 -0
  3. package/dist/Forms/Inputs/Select/SelectContent.d.ts +11 -0
  4. package/dist/Forms/Inputs/Select/SelectGroup.d.ts +7 -0
  5. package/dist/Forms/Inputs/Select/SelectItem.d.ts +14 -0
  6. package/dist/Forms/Inputs/Select/SelectSeparator.d.ts +4 -0
  7. package/dist/Forms/Inputs/Select/SelectTrigger.d.ts +25 -0
  8. package/dist/Forms/Inputs/Select/context.d.ts +21 -0
  9. package/dist/Forms/Inputs/Select/index.d.ts +6 -0
  10. package/dist/Forms/Inputs/Select/types.d.ts +6 -0
  11. package/dist/Forms/Inputs/index.d.ts +1 -0
  12. package/dist/main.d.ts +1 -1
  13. package/dist/react-design-system.css +1 -1
  14. package/dist/react-design-system.js +8228 -5808
  15. package/dist/react-design-system.umd.cjs +37 -37
  16. package/package.json +5 -4
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
package/dist/Forms/Inputs/Select/Select.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import * as SelectPrimitive from '@radix-ui/react-select';
2
+ export interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, 'children'> {
3
+ className?: string;
4
+ children?: React.ReactNode;
5
+ dataTestid: string;
6
+ }
7
+ /**
8
+ * Select root. `@radix-ui/react-select` Root renders no element of its own, so
9
+ * the wrapper below is what carries `data-slot`, `data-testid` and the class.
10
+ *
11
+ * The selection is held here rather than handed to the primitive as an optional
12
+ * prop: an empty string is how Radix asks for the placeholder, so passing one
13
+ * keeps it controlled from the first render, where `undefined` would make it
14
+ * flip from uncontrolled to controlled on the first choice and warn. Both paths
15
+ * still work — `defaultValue` seeds the state, `value` overrides it.
16
+ *
17
+ * The same state also feeds the trigger's render prop, together with the label
18
+ * registry in `context.ts`.
19
+ */
20
+ export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLDivElement>>;
package/dist/Forms/Inputs/Select/SelectContent.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import * as SelectPrimitive from '@radix-ui/react-select';
2
+ export interface SelectContentProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'side' | 'align' | 'sideOffset' | 'position'> {
3
+ side?: 'top' | 'right' | 'bottom' | 'left';
4
+ sideOffset?: number;
5
+ align?: 'start' | 'center' | 'end';
6
+ }
7
+ /**
8
+ * The floating list. Always positioned against the trigger rather than over it,
9
+ * so the popup matches the trigger's width and never covers it.
10
+ */
11
+ export declare const SelectContent: import('react').ForwardRefExoticComponent<SelectContentProps & import('react').RefAttributes<HTMLDivElement>>;
package/dist/Forms/Inputs/Select/SelectGroup.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import * as SelectPrimitive from '@radix-ui/react-select';
2
+ export interface SelectGroupProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {
3
+ /** Optional group heading. */
4
+ label?: string;
5
+ }
6
+ /** Groups related options under a heading, announced as a group label. */
7
+ export declare const SelectGroup: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
package/dist/Forms/Inputs/Select/SelectItem.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import * as SelectPrimitive from '@radix-ui/react-select';
2
+ export interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
3
+ value: string;
4
+ disabled?: boolean;
5
+ }
6
+ /**
7
+ * A single option.
8
+ *
9
+ * The rendered text is published to the root on mount so the trigger's render
10
+ * prop can name the selection. Reading it off the DOM keeps arbitrary markup
11
+ * working, and it runs while the list is closed too: the primitive keeps items
12
+ * mounted in a detached fragment so their text is available to the trigger.
13
+ */
14
+ export declare const SelectItem: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
package/dist/Forms/Inputs/Select/SelectSeparator.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import * as SelectPrimitive from '@radix-ui/react-select';
2
+ export type SelectSeparatorProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>;
3
+ /** A rule between groups of options. Decorative, hidden from assistive tech. */
4
+ export declare const SelectSeparator: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
package/dist/Forms/Inputs/Select/SelectTrigger.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import * as SelectPrimitive from '@radix-ui/react-select';
2
+ /** What the `children` render prop receives. */
3
+ export interface SelectTriggerState {
4
+ /** Rendered text of the selected item, empty while nothing is chosen. */
5
+ selectedLabel: string;
6
+ /** Value of the selected item. */
7
+ value: string | undefined;
8
+ }
9
+ export interface SelectTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'> {
10
+ /** Shown while nothing is selected. */
11
+ placeholder?: string;
12
+ disabled?: boolean;
13
+ /** Replaces the chevron. */
14
+ icon?: React.ReactNode;
15
+ /** Replaces what is rendered for the current value. */
16
+ children?: (state: SelectTriggerState) => React.ReactNode;
17
+ }
18
+ /**
19
+ * The button that opens the list and shows the current value.
20
+ *
21
+ * It takes no size prop: height and radius come from the `--controller-*`
22
+ * variables shared with every other input, so `inputSizeClass[size]` on any
23
+ * ancestor drives it.
24
+ */
25
+ export declare const SelectTrigger: import('react').ForwardRefExoticComponent<SelectTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
package/dist/Forms/Inputs/Select/context.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Shared Select state.
3
+ *
4
+ * Radix keeps its own selection state in a scoped context that is not part of
5
+ * its public API, and it never exposes the *text* of the selected item — the
6
+ * trigger shows it by portalling the item's own text node, so no caller ever
7
+ * gets a string back. `SelectTrigger` hands that string to its render prop, so
8
+ * the value and a value → text registry are kept here instead: every
9
+ * `SelectItem` publishes its rendered text on mount, including while the list
10
+ * is closed.
11
+ */
12
+ export interface SelectContextValue {
13
+ /** Current selection, or `undefined` while the placeholder shows. */
14
+ value: string | undefined;
15
+ /** Rendered text of every mounted item, keyed by its value. */
16
+ labels: Record<string, string>;
17
+ /** Publish an item's rendered text. Called by `SelectItem` on mount. */
18
+ registerLabel: (value: string, label: string) => void;
19
+ }
20
+ export declare const SelectContext: import('react').Context<SelectContextValue | null>;
21
+ export declare function useSelectContext(): SelectContextValue;
package/dist/Forms/Inputs/Select/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export { Select, type SelectProps } from './Select.tsx';
2
+ export { SelectTrigger, type SelectTriggerProps, type SelectTriggerState, } from './SelectTrigger.tsx';
3
+ export { SelectContent, type SelectContentProps } from './SelectContent.tsx';
4
+ export { SelectItem, type SelectItemProps } from './SelectItem.tsx';
5
+ export { SelectGroup, type SelectGroupProps } from './SelectGroup.tsx';
6
+ export { SelectSeparator, type SelectSeparatorProps, } from './SelectSeparator.tsx';
package/dist/Forms/Inputs/Select/types.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export type { SelectProps } from './Select';
2
+ export type { SelectTriggerProps, SelectTriggerState } from './SelectTrigger';
3
+ export type { SelectContentProps } from './SelectContent';
4
+ export type { SelectItemProps } from './SelectItem';
5
+ export type { SelectGroupProps } from './SelectGroup';
6
+ export type { SelectSeparatorProps } from './SelectSeparator';
package/dist/Forms/Inputs/index.d.ts CHANGED
@@ -4,4 +4,5 @@ export * from './InputNumber/index.ts';
4
4
  export * from './InputPassword/index.ts';
5
5
  export * from './InputOtp/index.ts';
6
6
  export * from './Combobox/index.ts';
7
+ export * from './Select/index.ts';
7
8
  export * from './Toggle/index.ts';
package/dist/main.d.ts CHANGED
@@ -23,6 +23,6 @@ export { Accordion as OxAccordion, AccordionItem as OxAccordionItem, AccordionTr
23
23
  export { Tabs as OxTabs, TabsList as OxTabsList, TabsTrigger as OxTabsTrigger, TabsContent as OxTabsContent, } from './Navigation/Tabs/index.ts';
24
24
  export { Breadcrumb as OxBreadcrumb, BreadcrumbList as OxBreadcrumbList, BreadcrumbItem as OxBreadcrumbItem, BreadcrumbLink as OxBreadcrumbLink, BreadcrumbPage as OxBreadcrumbPage, BreadcrumbSeparator as OxBreadcrumbSeparator, BreadcrumbEllipsis as OxBreadcrumbEllipsis, } from './Navigation/Breadcrumb/index.ts';
25
25
  export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, type FieldGroupProps, } from './Forms/Field/index.ts';
26
- export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Combobox as OxCombobox, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, Switch as OxSwitch, Checkbox as OxCheckbox, RadioButton as OxRadioButton, RadioGroup as OxRadioGroup, ToggleGroup as OxToggleGroup, ToggleLabel as OxToggleLabel, ToggleDescription as OxToggleDescription, SWITCH_SIZES, type InputNumberProps, type InputPasswordProps, type InputPasswordContext, type InputOtpProps, type InputOtpSlotProps, type InputOtpContext, type ComboboxProps, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
26
+ export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Combobox as OxCombobox, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, Switch as OxSwitch, Checkbox as OxCheckbox, RadioButton as OxRadioButton, RadioGroup as OxRadioGroup, ToggleGroup as OxToggleGroup, ToggleLabel as OxToggleLabel, ToggleDescription as OxToggleDescription, SWITCH_SIZES, type InputNumberProps, type InputPasswordProps, type InputPasswordContext, type InputOtpProps, type InputOtpSlotProps, type InputOtpContext, type ComboboxProps, type SelectProps, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
27
27
  export { Table as OxTable, TableHead as OxTableHead, TableBody as OxTableBody, TableRow as OxTableRow, TableCell as OxTableCell, TableHeaderCell as OxTableHeaderCell, TableSelectCell as OxTableSelectCell, TableDragCell as OxTableDragCell, TableBulkHeader as OxTableBulkHeader, TablePagination as OxTablePagination, TableEmpty as OxTableEmpty, TableAvatar as OxTableAvatar, TableRowExpanded as OxTableRowExpanded, TableExpandCell as OxTableExpandCell, TableColumnVisibility as OxTableColumnVisibility, useTable, useTableSelection, useTableSorting, useTablePagination, useTableDetailRow, useTablePinning, useTableColumns, useScrollShadow, useDragToScroll, useFixedColumns, } from './Data/Table/index.ts';
28
28
  export type { UseTableOptions, UseTableReturn, UseTableSelectionReturn, UseTableSortingReturn, UseTablePaginationOptions, UseTablePaginationReturn, DetailRowInstance, DetailRowOptions, DetailRowPluginDef, UseTablePinningOptions, UseTablePinningReturn, CellInfo, HeaderInfo, UseTableColumnsOptions, UseTableColumnsReturn, UseScrollShadowOptions, UseScrollShadowReturn, UseDragToScrollOptions, UseDragToScrollReturn, UseFixedColumnsOptions, TableProps, TableMode, ColumnDef, ColumnAlign, CellContext, SortingState, PaginationState, PaginationChangePayload, SortingChangePayload, SelectionChangePayload, FilterChangePayload, ColumnResizeMode, ColumnVisibilityState, ColumnOrderState, ExpandedState, ColumnVisibilityChangePayload, ColumnOrderChangePayload, RowExpandChangePayload, ColumnResizePayload, ColumnPinningState, } from './Data/Table/index.ts';