@sesamehr/react-design-system 2.0.0-beta.2 → 2.0.0-beta.21
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.
- package/README.md +34 -0
- package/dist/Button/ActionItem/ActionItem.d.ts +40 -0
- package/dist/Button/ActionItem/index.d.ts +1 -0
- package/dist/Button/IconButton/IconButton.d.ts +32 -0
- package/dist/Button/IconButton/index.d.ts +27 -0
- package/dist/Data/Table/Table.d.ts +1 -1
- package/dist/Data/Table/TableBody/TableBody.d.ts +3 -0
- package/dist/Data/Table/TableHead/TableHead.d.ts +25 -1
- package/dist/Data/Table/TableScrollbar/TableScrollbar.d.ts +21 -0
- package/dist/Data/Table/TableSelectCell/TableSelectCell.d.ts +8 -0
- package/dist/Data/Table/TableVirtualized/TableVirtualized.d.ts +45 -0
- package/dist/Data/Table/TableVirtualized/index.d.ts +2 -0
- package/dist/Data/Table/hooks/index.d.ts +3 -0
- package/dist/Data/Table/hooks/useDragToScroll/useDragToScroll.d.ts +12 -2
- package/dist/Data/Table/hooks/useTableVirtual/context.d.ts +16 -0
- package/dist/Data/Table/hooks/useTableVirtual/index.d.ts +3 -0
- package/dist/Data/Table/hooks/useTableVirtual/useTableVirtual.d.ts +36 -0
- package/dist/Data/Table/hooks/useTableVirtual/useTableVirtual.types.d.ts +74 -0
- package/dist/Data/Table/index.d.ts +2 -2
- package/dist/Display/Avatar/AvatarSkeleton/AvatarSkeleton.d.ts +30 -0
- package/dist/Display/Avatar/index.d.ts +2 -0
- package/dist/Display/AvatarDetails/AvatarDetails.d.ts +68 -0
- package/dist/Display/AvatarDetails/index.d.ts +1 -0
- package/dist/Display/AvatarGroup/AvatarGroup.d.ts +3 -0
- package/dist/Display/Badge/Badge.d.ts +3 -2
- package/dist/Display/Badge/index.d.ts +10 -1
- package/dist/Display/ChatBubble/ChatBubble.d.ts +28 -0
- package/dist/Display/ChatBubble/ChatBubbleStatus/ChatBubbleStatus.d.ts +8 -0
- package/dist/Display/ChatBubble/ChatBubbleStatus/index.d.ts +10 -0
- package/dist/Display/ChatBubble/index.d.ts +44 -0
- package/dist/Display/Chip/Chip.d.ts +21 -5
- package/dist/Display/Chip/index.d.ts +19 -10
- package/dist/Display/FileCard/FileCard.d.ts +66 -0
- package/dist/Display/FileCard/index.d.ts +1 -0
- package/dist/Display/FilePreviewCard/FilePreviewCard.d.ts +49 -0
- package/dist/Display/FilePreviewCard/index.d.ts +1 -0
- package/dist/Feedback/Alert/AlertIcon.d.ts +1 -1
- package/dist/Feedback/Dialog/DialogBody.d.ts +18 -0
- package/dist/Feedback/Dialog/index.d.ts +1 -0
- package/dist/Feedback/Loader/Loader.d.ts +16 -0
- package/dist/Feedback/Loader/index.d.ts +2 -0
- package/dist/Feedback/Popover/PopoverContent.d.ts +0 -1
- package/dist/Feedback/Progress/Progress.d.ts +3 -0
- package/dist/Feedback/Progress/index.d.ts +17 -0
- package/dist/Feedback/Skeleton/Skeleton.d.ts +21 -0
- package/dist/Feedback/Skeleton/index.d.ts +2 -0
- package/dist/Feedback/Tooltip/TooltipContent.d.ts +0 -1
- package/dist/Forms/Field/Counter/Counter.d.ts +9 -0
- package/dist/Forms/Field/Counter/index.d.ts +13 -0
- package/dist/Forms/Field/FieldGroup/FieldGroup.d.ts +16 -1
- package/dist/Forms/Field/FieldLabel/FieldLabel.d.ts +16 -0
- package/dist/Forms/Field/FieldMessage/FieldMessage.d.ts +22 -2
- package/dist/Forms/Field/index.d.ts +1 -0
- package/dist/Forms/Field/useFieldGroup.d.ts +108 -0
- package/dist/Forms/Inputs/Calendar/Calendar.d.ts +55 -0
- package/dist/Forms/Inputs/Calendar/CalendarDay.d.ts +37 -0
- package/dist/Forms/Inputs/Calendar/CalendarRange.d.ts +56 -0
- package/dist/Forms/Inputs/Calendar/constraints.d.ts +19 -0
- package/dist/Forms/Inputs/Calendar/date.d.ts +28 -0
- package/dist/Forms/Inputs/Calendar/index.d.ts +21 -0
- package/dist/Forms/Inputs/Calendar/nav.d.ts +34 -0
- package/dist/Forms/Inputs/Calendar/testids.d.ts +28 -0
- package/dist/Forms/Inputs/Calendar/useCalendarLocale.d.ts +40 -0
- package/dist/Forms/Inputs/ChatInput/ChatInput.d.ts +68 -0
- package/dist/Forms/Inputs/ChatInput/index.d.ts +46 -0
- package/dist/Forms/Inputs/Combobox/Combobox.d.ts +19 -0
- package/dist/Forms/Inputs/Combobox/ComboboxCancel.d.ts +14 -0
- package/dist/Forms/Inputs/Combobox/ComboboxChipsInput.d.ts +11 -0
- package/dist/Forms/Inputs/Combobox/ComboboxContent.d.ts +0 -6
- package/dist/Forms/Inputs/Combobox/ComboboxGroup.d.ts +6 -2
- package/dist/Forms/Inputs/Combobox/ComboboxInput.d.ts +6 -1
- package/dist/Forms/Inputs/Combobox/ComboboxItem.d.ts +4 -0
- package/dist/Forms/Inputs/Combobox/ComboboxItemEdit.d.ts +134 -0
- package/dist/Forms/Inputs/Combobox/context.d.ts +21 -1
- package/dist/Forms/Inputs/Combobox/index.d.ts +2 -0
- package/dist/Forms/Inputs/Combobox/useChipOverflow.d.ts +30 -0
- package/dist/Forms/Inputs/Combobox/useComboboxEditing.d.ts +40 -0
- package/dist/Forms/Inputs/Combobox/useComboboxLabels.d.ts +21 -0
- package/dist/Forms/Inputs/Combobox/useComboboxSearch.d.ts +20 -0
- package/dist/Forms/Inputs/DatePicker/DatePicker.d.ts +51 -0
- package/dist/Forms/Inputs/DatePicker/DatePickerHeader.d.ts +65 -0
- package/dist/Forms/Inputs/DatePicker/DatePickerMonthSelect.d.ts +27 -0
- package/dist/Forms/Inputs/DatePicker/DatePickerTrigger.d.ts +29 -0
- package/dist/Forms/Inputs/DatePicker/DatePickerYearSelect.d.ts +25 -0
- package/dist/Forms/Inputs/DatePicker/DateRangePicker.d.ts +61 -0
- package/dist/Forms/Inputs/DatePicker/format.d.ts +44 -0
- package/dist/Forms/Inputs/DatePicker/index.d.ts +6 -0
- package/dist/Forms/Inputs/DatePicker/month.d.ts +28 -0
- package/dist/Forms/Inputs/DatePicker/useDatePickerHeader.d.ts +23 -0
- package/dist/Forms/Inputs/InputOtp/InputOtp.d.ts +7 -0
- package/dist/Forms/Inputs/InputPassword/InputPassword.d.ts +9 -1
- package/dist/Forms/Inputs/InputText/InputText.d.ts +9 -0
- package/dist/Forms/Inputs/SearchBar/SearchBar.d.ts +35 -0
- package/dist/Forms/Inputs/SearchBar/index.d.ts +20 -0
- package/dist/Forms/Inputs/SearchPanel/SearchPanel.d.ts +71 -0
- package/dist/Forms/Inputs/SearchPanel/SearchPanelEmpty.d.ts +16 -0
- package/dist/Forms/Inputs/SearchPanel/SearchPanelGroup.d.ts +14 -0
- package/dist/Forms/Inputs/SearchPanel/SearchPanelInput.d.ts +31 -0
- package/dist/Forms/Inputs/SearchPanel/SearchPanelItem.d.ts +20 -0
- package/dist/Forms/Inputs/SearchPanel/SearchPanelList.d.ts +11 -0
- package/dist/Forms/Inputs/SearchPanel/context.d.ts +11 -0
- package/dist/Forms/Inputs/SearchPanel/index.d.ts +6 -0
- package/dist/Forms/Inputs/Select/SelectContent.d.ts +0 -4
- package/dist/Forms/Inputs/Select/SelectGroup.d.ts +6 -2
- package/dist/Forms/Inputs/Select/SelectItem.d.ts +6 -0
- package/dist/Forms/Inputs/Textarea/Textarea.d.ts +69 -0
- package/dist/Forms/Inputs/Textarea/index.d.ts +21 -0
- package/dist/Forms/Inputs/Toggle/RadioButton/RadioGroup.d.ts +5 -0
- package/dist/Forms/Inputs/Toggle/ToggleLabel/ToggleLabel.d.ts +10 -1
- package/dist/Forms/Inputs/index.d.ts +6 -0
- package/dist/Layout/Card/Card.d.ts +4 -1
- package/dist/Layout/Card/index.d.ts +10 -4
- package/dist/Layout/Scrollbar/Scrollbar.d.ts +46 -0
- package/dist/Layout/Scrollbar/index.d.ts +2 -0
- package/dist/Layout/Scrollbar/useScrollbar.d.ts +52 -0
- package/dist/Navigation/ToggleTabs/useToggleTabsPill.d.ts +27 -0
- package/dist/hooks/index.d.ts +14 -0
- package/dist/hooks/useAutoGrow/useAutoGrow.d.ts +22 -0
- package/dist/hooks/useSearchDebounce/useSearchDebounce.d.ts +24 -0
- package/dist/internal/Listbox/ListboxEmpty.d.ts +3 -0
- package/dist/internal/Listbox/ListboxItem.d.ts +23 -0
- package/dist/internal/Listbox/ListboxLabel.d.ts +9 -0
- package/dist/internal/Listbox/ListboxSeparator.d.ts +3 -0
- package/dist/internal/Listbox/ListboxViewport.d.ts +9 -0
- package/dist/internal/Surface/Surface.d.ts +35 -0
- package/dist/internal/index.d.ts +13 -0
- package/dist/lib/cssModules.d.ts +13 -0
- package/dist/main.d.ts +18 -7
- package/dist/preflight.css +391 -0
- package/dist/react-design-system.css +1 -1
- package/dist/react-design-system.js +17244 -10361
- package/dist/react-design-system.umd.cjs +164 -117
- package/package.json +4 -2
- package/dist/Data/Table/TableAvatar/TableAvatar.d.ts +0 -14
- package/dist/Display/Tag/Tag.d.ts +0 -19
- package/dist/Display/Tag/index.d.ts +0 -2
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* The track's own width, `w-3`.
|
|
4
|
+
*
|
|
5
|
+
* Exported because a parent that places the bar by its *left* edge has to pull
|
|
6
|
+
* it back by the full width to sit inside the scrollport rather than alongside
|
|
7
|
+
* it, and the number it pulls back by has to be the one the stylesheet uses.
|
|
8
|
+
*/
|
|
9
|
+
export declare const SCROLLBAR_THICKNESS = 12;
|
|
10
|
+
/**
|
|
11
|
+
* The element that scrolls, as a ref or as the element itself. A ref because
|
|
12
|
+
* that is what a parent normally has, and a `useRef` never re-renders anything
|
|
13
|
+
* when it fills in.
|
|
14
|
+
*/
|
|
15
|
+
export type ScrollbarPort = RefObject<HTMLElement | null> | HTMLElement | null | undefined;
|
|
16
|
+
export interface UseScrollbarReturn {
|
|
17
|
+
/** Shown while scrolling, while dragging, and near the right edge. */
|
|
18
|
+
visible: boolean;
|
|
19
|
+
/** The thumb is being dragged. */
|
|
20
|
+
dragging: boolean;
|
|
21
|
+
/** The pointer is in the strip the bar occupies, so the bar widens. */
|
|
22
|
+
near: boolean;
|
|
23
|
+
/** Where the thumb goes, in pixels. A height of zero means no thumb at all. */
|
|
24
|
+
thumb: {
|
|
25
|
+
top: number;
|
|
26
|
+
height: number;
|
|
27
|
+
};
|
|
28
|
+
/** Recompute the thumb from the port's current scroll metrics. */
|
|
29
|
+
measure: () => void;
|
|
30
|
+
/** `onMouseDown` on the thumb. */
|
|
31
|
+
startDrag: (event: React.MouseEvent) => void;
|
|
32
|
+
/** `onMouseEnter` on the thumb. See `near`. */
|
|
33
|
+
approach: () => void;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* The behaviour of an overlay scrollbar, with no opinion about where it sits.
|
|
37
|
+
* Mirrors `@sesame/orxata-core` useScrollbar.
|
|
38
|
+
*
|
|
39
|
+
* Geometry only goes one way here: the track is positioned and sized by CSS,
|
|
40
|
+
* and this reads back the height it ended up with. That is what keeps the
|
|
41
|
+
* placement out — a virtualised table subtracts its `<thead>` and compensates
|
|
42
|
+
* for an `offsetParent`, a chat composer does neither, and neither of those
|
|
43
|
+
* facts has to be expressible here for both to work.
|
|
44
|
+
*
|
|
45
|
+
* Both elements are watched for resize, which is also what makes the
|
|
46
|
+
* measurement land in the right frame: a `<textarea>` that auto-grows writes
|
|
47
|
+
* its own height, the track follows it, and the resize callback runs after that
|
|
48
|
+
* write and before the paint. That matters more here than on the Vue side —
|
|
49
|
+
* a child's effects run before its parent's, so the bar cannot be ordered
|
|
50
|
+
* after the growth by declaration order alone.
|
|
51
|
+
*/
|
|
52
|
+
export declare const useScrollbar: (port: ScrollbarPort, track: RefObject<HTMLElement | null>) => UseScrollbarReturn;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Moves the selected pill over whichever tab is active.
|
|
4
|
+
*
|
|
5
|
+
* The selected state used to be a background on the trigger itself, which is
|
|
6
|
+
* why it could not travel: two elements cannot transition into one another. So
|
|
7
|
+
* the pill is a single element in the track, taken out of flow, and what moves
|
|
8
|
+
* is its geometry — published as custom properties on the track
|
|
9
|
+
* (`--toggle-tabs-pill-x/y/width/height`) for the stylesheet to spend.
|
|
10
|
+
*
|
|
11
|
+
* The handoff is the point. Nothing here decides how the pill is drawn: no
|
|
12
|
+
* `transform` string, no radius, no colour, no orientation branch. This writes
|
|
13
|
+
* four numbers and the component's own rule composes them, which keeps a
|
|
14
|
+
* measurement out of the stylesheet's job and the stylesheet's job out of here
|
|
15
|
+
* — and means the vertical orientation needs no code, only the `y` that is
|
|
16
|
+
* already being written.
|
|
17
|
+
*
|
|
18
|
+
* Both axes always, for that reason: `data-orientation="vertical"` turns the
|
|
19
|
+
* track into a column and the pill then travels down it, measured by exactly
|
|
20
|
+
* the same two rectangles.
|
|
21
|
+
*
|
|
22
|
+
* The whole of it runs off observers rather than off the render, which is what
|
|
23
|
+
* lets it be a single effect with no dependency on the active value: a tab
|
|
24
|
+
* changing, a tab arriving and a tab being resized are all DOM events by the
|
|
25
|
+
* time they matter here.
|
|
26
|
+
*/
|
|
27
|
+
export declare function useToggleTabsPill(track: RefObject<HTMLElement | null>): void;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hooks shared by more than one component — the React side of the Vue
|
|
3
|
+
* package's `src/composables/`, which is the rename the parity rules apply
|
|
4
|
+
* (`composables` ↔ `hooks`, see `packages/eslint-plugin/src/parity/compare.js`).
|
|
5
|
+
*
|
|
6
|
+
* A hook lives beside its component until a second one needs it; at that point
|
|
7
|
+
* it belongs here, because the alternative is a component importing out of a
|
|
8
|
+
* sibling's folder and a reader having to know that `Textarea`'s sizing is
|
|
9
|
+
* really `ChatInput`'s. See `.claude/rules/component-architecture.md` §13.
|
|
10
|
+
*/
|
|
11
|
+
export { useAutoGrow } from './useAutoGrow/useAutoGrow.ts';
|
|
12
|
+
export type { UseAutoGrowReturn } from './useAutoGrow/useAutoGrow.ts';
|
|
13
|
+
export { useSearchDebounce } from './useSearchDebounce/useSearchDebounce.ts';
|
|
14
|
+
export type { UseSearchDebounceReturn } from './useSearchDebounce/useSearchDebounce.ts';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
export interface UseAutoGrowReturn {
|
|
3
|
+
/** Re-measure and re-apply the height. Cheap; call it on every keystroke. */
|
|
4
|
+
resize: () => void;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Grows a `<textarea>` with its content up to `maxRows`, then lets it scroll.
|
|
8
|
+
* Mirrors `@sesame/orxata-core` useAutoGrow.
|
|
9
|
+
*
|
|
10
|
+
* Measuring is the whole trick and it has one rule: the height has to be
|
|
11
|
+
* cleared before `scrollHeight` is read. `scrollHeight` never reports less
|
|
12
|
+
* than the element's own height, so measuring against the height left over
|
|
13
|
+
* from the previous keystroke makes the field a one-way ratchet — it grows
|
|
14
|
+
* when text is added and never shrinks when it is deleted.
|
|
15
|
+
*
|
|
16
|
+
* The cap is applied here rather than as a CSS `max-height` so that the
|
|
17
|
+
* overflow can be switched with it. A permanently scrollable textarea shows a
|
|
18
|
+
* scrollbar gutter in the browsers that reserve one, which moves the text by a
|
|
19
|
+
* few pixels for as long as the field is a single line — visible, and wrong
|
|
20
|
+
* against a design that has no scrollbar in it.
|
|
21
|
+
*/
|
|
22
|
+
export declare const useAutoGrow: (element: RefObject<HTMLTextAreaElement | null>, value: string, maxRows: number) => UseAutoGrowReturn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The quiet period between typing and searching — mirrors
|
|
3
|
+
* `@sesame/orxata-core` `useSearchDebounce`.
|
|
4
|
+
*
|
|
5
|
+
* A search field that emits on every keystroke turns "Marie" into five
|
|
6
|
+
* requests, four of which are already stale by the time they land. Waiting for
|
|
7
|
+
* typing to stop collapses them into one.
|
|
8
|
+
*
|
|
9
|
+
* Two ways in, because the two are not the same event. `schedule` is typing:
|
|
10
|
+
* every keystroke restarts the clock, so only the pause at the end fires.
|
|
11
|
+
* `immediately` is an explicit request — the clear button, Enter — where the
|
|
12
|
+
* user has said what they want and there is nothing left to wait for; it also
|
|
13
|
+
* drops whatever `schedule` had pending, which would otherwise fire a moment
|
|
14
|
+
* later with a term the user has already moved on from.
|
|
15
|
+
*/
|
|
16
|
+
export interface UseSearchDebounceReturn {
|
|
17
|
+
/** Restart the quiet period; emit when it elapses. */
|
|
18
|
+
schedule: (term: string) => void;
|
|
19
|
+
/** Emit now, dropping anything pending. */
|
|
20
|
+
immediately: (term: string) => void;
|
|
21
|
+
/** Drop anything pending without emitting. */
|
|
22
|
+
cancel: () => void;
|
|
23
|
+
}
|
|
24
|
+
export declare const useSearchDebounce: (debounce: number, emit: (term: string) => void) => UseSearchDebounceReturn;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export type ListboxEmptyProps = React.ComponentPropsWithoutRef<'div'>;
|
|
2
|
+
/** Shown in place of the rows when a search matched nothing. Internal. */
|
|
3
|
+
export declare const ListboxEmpty: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface ListboxItemProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
2
|
+
/**
|
|
3
|
+
* The check mark, for lists that have one. Pass it — even as a fragment that
|
|
4
|
+
* renders nothing while the row is unchecked — and the row reserves the space
|
|
5
|
+
* on its right; leave it out and the row sits flush.
|
|
6
|
+
*/
|
|
7
|
+
indicator?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* One row of a list: `Select`'s option, `Combobox`'s option, `SearchPanel`'
|
|
11
|
+
* result. Port of `core/src/internal/Listbox/ListboxItem`.
|
|
12
|
+
*
|
|
13
|
+
* Whether the row leaves room on the right is decided by the presence of the
|
|
14
|
+
* `indicator` prop, not by whether the row is currently checked — a list with
|
|
15
|
+
* check marks always passes it and a list without one never does, so the gap
|
|
16
|
+
* is stable instead of appearing the moment a row becomes checked.
|
|
17
|
+
*
|
|
18
|
+
* The indicator wrapper is rendered here rather than left to the caller so the
|
|
19
|
+
* positioning lives in one file. That matters less in React than in Vue, where
|
|
20
|
+
* scoped CSS would simply not reach an element authored elsewhere, but keeping
|
|
21
|
+
* the two ports the same shape is what makes them comparable.
|
|
22
|
+
*/
|
|
23
|
+
export declare const ListboxItem: import('react').ForwardRefExoticComponent<ListboxItemProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type ListboxLabelProps = React.ComponentPropsWithoutRef<'div'>;
|
|
2
|
+
/**
|
|
3
|
+
* The heading above a group of rows. Internal — see `Surface.tsx`.
|
|
4
|
+
*
|
|
5
|
+
* Content is `children`, never a string prop: the heading is the caller's word
|
|
6
|
+
* for their own category, and a design system that took it as a prop would be
|
|
7
|
+
* deciding how it can be written.
|
|
8
|
+
*/
|
|
9
|
+
export declare const ListboxLabel: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export type ListboxSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
|
|
2
|
+
/** The rule between two groups of rows. Internal — see `Surface.tsx`. */
|
|
3
|
+
export declare const ListboxSeparator: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type ListboxViewportProps = React.ComponentPropsWithoutRef<'div'>;
|
|
2
|
+
/**
|
|
3
|
+
* The padded, scrolling box the rows sit in. Internal — see `Surface.tsx`.
|
|
4
|
+
*
|
|
5
|
+
* Reached through `asChild` from Radix's `Select.Viewport` or cmdk's
|
|
6
|
+
* `Command.List`, both of which own the scrolling behaviour and neither of
|
|
7
|
+
* which agrees on a name.
|
|
8
|
+
*/
|
|
9
|
+
export declare const ListboxViewport: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export interface SurfaceProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
2
|
+
/**
|
|
3
|
+
* Drawn free of any trigger rather than tethered to one: no border, a deeper
|
|
4
|
+
* shadow. The command palette is the case.
|
|
5
|
+
*/
|
|
6
|
+
floating?: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Joined to the edge of whatever it drops out of, rather than separated from
|
|
9
|
+
* it by a gap: the corners on the side it meets go square, so the two boxes
|
|
10
|
+
* read as one card. `SearchPanel`'s results are the case.
|
|
11
|
+
*/
|
|
12
|
+
attached?: boolean;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* The floating surface: the card a `Popover`, a `Select`, a `Combobox` or a
|
|
16
|
+
* `SearchPanel` panel is drawn on. Port of `core/src/internal/Surface`.
|
|
17
|
+
*
|
|
18
|
+
* Internal on purpose. It carries no portal and no positioning — those belong
|
|
19
|
+
* to whichever primitive family opened it, and they are not interchangeable.
|
|
20
|
+
* What is interchangeable is the *look*: the fill, the border, the radius, the
|
|
21
|
+
* shadow and the open/close animation. Each content component keeps its own
|
|
22
|
+
* primitive as the root and reaches this element through `asChild`, so the
|
|
23
|
+
* primitive's `data-state` and `data-side` land on the div below and the
|
|
24
|
+
* animation selectors see them.
|
|
25
|
+
*
|
|
26
|
+
* It is not exported from `main.ts`. On its own it is an inert div: no
|
|
27
|
+
* keyboard, no focus management, no positioning. The public way to get one
|
|
28
|
+
* stays `OxPopover`, `OxSelect`, `OxCombobox` or `OxSearchPanel`.
|
|
29
|
+
*
|
|
30
|
+
* `forwardRef` is not optional here: `asChild` composes the primitive's ref
|
|
31
|
+
* onto this component, and a plain function component would drop it — the
|
|
32
|
+
* popover would have nothing to measure and would position itself at the
|
|
33
|
+
* origin.
|
|
34
|
+
*/
|
|
35
|
+
export declare const Surface: import('react').ForwardRefExoticComponent<SurfaceProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared presentational parts. Deliberately absent from `src/main.ts`: each is
|
|
3
|
+
* an inert element with no keyboard, no roles and no positioning, so publishing
|
|
4
|
+
* one would ship something that looks like an option and behaves like a div.
|
|
5
|
+
* The public way to build a list stays `OxSelect`, `OxCombobox` or
|
|
6
|
+
* `OxSearchPanel`, each of which pairs these with its own primitive.
|
|
7
|
+
*/
|
|
8
|
+
export { Surface, type SurfaceProps } from './Surface/Surface.tsx';
|
|
9
|
+
export { ListboxEmpty, type ListboxEmptyProps, } from './Listbox/ListboxEmpty.tsx';
|
|
10
|
+
export { ListboxItem, type ListboxItemProps } from './Listbox/ListboxItem.tsx';
|
|
11
|
+
export { ListboxLabel, type ListboxLabelProps, } from './Listbox/ListboxLabel.tsx';
|
|
12
|
+
export { ListboxSeparator, type ListboxSeparatorProps, } from './Listbox/ListboxSeparator.tsx';
|
|
13
|
+
export { ListboxViewport, type ListboxViewportProps, } from './Listbox/ListboxViewport.tsx';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Maps the class names a `cva()` returns through a CSS module's hashed names.
|
|
3
|
+
*
|
|
4
|
+
* The variant objects are copied verbatim between the two packages —
|
|
5
|
+
* `parity-variants` compares them as source text — so they have to hold the
|
|
6
|
+
* same literal strings on both sides: `'ox-button--default'`, not a
|
|
7
|
+
* `styles.oxButtonDefault` lookup that only exists here. The lookup happens
|
|
8
|
+
* afterwards, which is what this is.
|
|
9
|
+
*
|
|
10
|
+
* A name the module does not define passes through untouched, so a caller's own
|
|
11
|
+
* class survives being handed to it.
|
|
12
|
+
*/
|
|
13
|
+
export declare const moduleClasses: (styles: Record<string, string>, names: string | undefined) => string;
|
package/dist/main.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * from './lib/utils.ts';
|
|
2
|
+
export * from './hooks/index.ts';
|
|
2
3
|
export { TransitionBounce as OxTransitionBounce } from './Transitions/TransitionBounce/TransitionBounce.tsx';
|
|
3
4
|
export { TransitionSlideX as OxTransitionSlideX } from './Transitions/TransitionSlideX/TransitionSlideX.tsx';
|
|
4
5
|
export { TransitionFade as OxTransitionFade } from './Transitions/TransitionFade/TransitionFade.tsx';
|
|
@@ -6,33 +7,43 @@ export { TransitionSlideY as OxTransitionSlideY } from './Transitions/Transition
|
|
|
6
7
|
export { TransitionExpand as OxTransitionExpand } from './Transitions/TransitionExpand/TransitionExpand.tsx';
|
|
7
8
|
export { TransitionFlip as OxTransitionFlip } from './Transitions/TransitionFlip/TransitionFlip.tsx';
|
|
8
9
|
export { Button as OxButton, buttonVariants, type ButtonVariants, } from './Button/index.ts';
|
|
10
|
+
export { IconButton as OxIconButton, iconButtonVariants, type IconButtonVariants, } from './Button/IconButton/index.ts';
|
|
11
|
+
export { ActionItem as OxActionItem, type ActionItemProps, } from './Button/ActionItem/index.ts';
|
|
9
12
|
export { Card as OxCard, cardVariants, type CardVariants, } from './Layout/Card/index.ts';
|
|
10
13
|
export { CardStack as OxCardStack, CARD_STACK_DECK, } from './Layout/CardStack/index.ts';
|
|
11
14
|
export { Divider as OxDivider, type DividerProps, } from './Layout/Divider/index.ts';
|
|
12
15
|
export { Resizable as OxResizable, ResizablePanel as OxResizablePanel, ResizableHandle as OxResizableHandle, } from './Layout/Resizable/index.ts';
|
|
16
|
+
export { Scrollbar as OxScrollbar, useScrollbar, SCROLLBAR_THICKNESS, type ScrollbarProps, type UseScrollbarReturn, } from './Layout/Scrollbar/index.ts';
|
|
13
17
|
export { LocaleProvider as OxLocaleProvider } from './Locale/index.ts';
|
|
14
18
|
export { normalizeLocale, useLocale } from './Locale/index.ts';
|
|
15
|
-
export { AvatarRounded as OxAvatarRounded, AvatarSquare as OxAvatarSquare, avatarRoundedVariants, avatarSquareVariants, type AvatarRoundedVariants, type AvatarSize, type AvatarSquareVariants, type AvatarTone, } from './Display/Avatar/index.ts';
|
|
19
|
+
export { AvatarRounded as OxAvatarRounded, AvatarSkeleton as OxAvatarSkeleton, AvatarSquare as OxAvatarSquare, avatarRoundedVariants, avatarSquareVariants, type AvatarRoundedVariants, type AvatarSize, type AvatarSquareVariants, type AvatarTone, } from './Display/Avatar/index.ts';
|
|
20
|
+
export { AvatarDetails as OxAvatarDetails, type AvatarDetailsAvatar, } from './Display/AvatarDetails/index.ts';
|
|
16
21
|
export { AvatarGroup as OxAvatarGroup, type AvatarItem, } from './Display/AvatarGroup/index.ts';
|
|
17
22
|
export { Badge as OxBadge, badgeVariants, type BadgeVariants, } from './Display/Badge/index.ts';
|
|
18
23
|
export { CalendarDate as OxCalendarDate, calendarDateVariants, type CalendarDateVariants, } from './Display/CalendarDate/index.ts';
|
|
19
24
|
export { NumberFlow as OxNumberFlow, resolveNumberFlowPreset, NUMBER_FLOW_PRESETS, type NumberFlowConfig, type NumberFlowPreset, } from './Display/NumberFlow/index.ts';
|
|
20
25
|
export { PaymentCard as OxPaymentCard, paymentCardVariants, type PaymentCardVariants, type BadgeType, type CardData, } from './Display/PaymentCard/index.ts';
|
|
21
|
-
export {
|
|
26
|
+
export { FileCard as OxFileCard } from './Display/FileCard/index.ts';
|
|
27
|
+
export { FilePreviewCard as OxFilePreviewCard } from './Display/FilePreviewCard/index.ts';
|
|
28
|
+
export { ChatBubble as OxChatBubble, chatBubbleVariants, type ChatBubbleDelivery, type ChatBubbleVariants, } from './Display/ChatBubble/index.ts';
|
|
29
|
+
export { ChatBubbleStatus as OxChatBubbleStatus, chatBubbleStatusVariants, type ChatBubbleStatusVariants, } from './Display/ChatBubble/ChatBubbleStatus/index.ts';
|
|
22
30
|
export { Chip as OxChip, chipVariants, type ChipVariants, } from './Display/Chip/index.ts';
|
|
23
31
|
export { PointMarker as OxPointMarker, pointMarkerVariants, type PointMarkerVariants, } from './Display/PointMarker/index.ts';
|
|
24
32
|
export { StatusBadge as OxStatusBadge, statusBadgeVariants, indicatorVariants, type StatusBadgeVariants, } from './Feedback/StatusBadge/index.ts';
|
|
25
33
|
export { Bullet as OxBullet, bulletVariants, type BulletVariants, } from './Feedback/Bullet/index.ts';
|
|
34
|
+
export { Loader as OxLoader } from './Feedback/Loader/index.ts';
|
|
26
35
|
export { Progress as OxProgress } from './Feedback/Progress/index.ts';
|
|
36
|
+
export { Skeleton as OxSkeleton } from './Feedback/Skeleton/index.ts';
|
|
27
37
|
export { Alert as OxAlert, AlertClose as OxAlertClose, AlertDescription as OxAlertDescription, AlertIcon as OxAlertIcon, AlertTitle as OxAlertTitle, AlertToggle as OxAlertToggle, } from './Feedback/Alert/index.ts';
|
|
28
|
-
export { Dialog as OxDialog, DialogContent as OxDialogContent, DialogTitle as OxDialogTitle, DialogDescription as OxDialogDescription, DialogOverlay as OxDialogOverlay, DialogTwoPanelContent as OxDialogTwoPanelContent, DialogTrigger as OxDialogTrigger, DialogClose as OxDialogClose, } from './Feedback/Dialog/index.ts';
|
|
38
|
+
export { Dialog as OxDialog, DialogContent as OxDialogContent, DialogBody as OxDialogBody, DialogTitle as OxDialogTitle, DialogDescription as OxDialogDescription, DialogOverlay as OxDialogOverlay, DialogTwoPanelContent as OxDialogTwoPanelContent, DialogTrigger as OxDialogTrigger, DialogClose as OxDialogClose, } from './Feedback/Dialog/index.ts';
|
|
29
39
|
export { Tooltip as OxTooltip, TooltipContent as OxTooltipContent, } from './Feedback/Tooltip/index.ts';
|
|
30
40
|
export { Popover as OxPopover, PopoverContent as OxPopoverContent, PopoverClose as OxPopoverClose, } from './Feedback/Popover/index.ts';
|
|
31
41
|
export { Accordion as OxAccordion, AccordionItem as OxAccordionItem, AccordionTrigger as OxAccordionTrigger, AccordionContent as OxAccordionContent, } from './Navigation/Accordion/index.ts';
|
|
32
42
|
export { ToggleTabs as OxToggleTabs, ToggleTabsList as OxToggleTabsList, ToggleTabsTrigger as OxToggleTabsTrigger, ToggleTabsContent as OxToggleTabsContent, } from './Navigation/ToggleTabs/index.ts';
|
|
33
43
|
export { PageControl as OxPageControl, pageControlDots, PAGE_CONTROL_WINDOW, type PageControlDot, type PageControlDotSize, } from './Navigation/PageControl/index.ts';
|
|
34
44
|
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';
|
|
35
|
-
export {
|
|
36
|
-
export {
|
|
37
|
-
export {
|
|
38
|
-
export
|
|
45
|
+
export { Counter as OxCounter, counterVariants, type CounterVariants, } from './Forms/Field/Counter/index.ts';
|
|
46
|
+
export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, useFieldControl, useFieldControlGroup, type FieldControlAttrs, type FieldControlGroupAttrs, type FieldGroupProps, type FieldVariant, } from './Forms/Field/index.ts';
|
|
47
|
+
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, Calendar as OxCalendar, CalendarRange as OxCalendarRange, CalendarDay as OxCalendarDay, calendarDayVariants, Combobox as OxCombobox, ComboboxCancel as OxComboboxCancel, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxItemEdit as OxComboboxItemEdit, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, ChatInput as OxChatInput, DatePicker as OxDatePicker, DateRangePicker as OxDateRangePicker, DatePickerTrigger as OxDatePickerTrigger, DatePickerHeader as OxDatePickerHeader, DatePickerMonthSelect as OxDatePickerMonthSelect, DatePickerYearSelect as OxDatePickerYearSelect, SearchBar as OxSearchBar, searchBarVariants, SearchPanel as OxSearchPanel, SearchPanelInput as OxSearchPanelInput, SearchPanelList as OxSearchPanelList, SearchPanelGroup as OxSearchPanelGroup, SearchPanelItem as OxSearchPanelItem, SearchPanelEmpty as OxSearchPanelEmpty, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, Textarea as OxTextarea, 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 CalendarProps, type CalendarRangeProps, type CalendarDateRange, type CalendarDayProps, type CalendarDayState, type CalendarDayVariants, type CalendarConstraints, type CalendarNav, type ComboboxProps, type ChatInputActionLabels, type ChatInputState, type DatePickerProps, type DateRangePickerProps, type DatePickerTriggerProps, type DatePickerHeaderProps, type DatePickerMonthSelectProps, type DatePickerYearSelectProps, type SearchBarVariants, type SelectProps, type TextareaCounterState, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
|
|
48
|
+
export { Table as OxTable, TableVirtualized as OxTableVirtualized, 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, TableRowExpanded as OxTableRowExpanded, TableExpandCell as OxTableExpandCell, TableColumnVisibility as OxTableColumnVisibility, useTable, useTableSelection, useTableSorting, useTablePagination, useTableDetailRow, useTablePinning, useTableColumns, useScrollShadow, useDragToScroll, useFixedColumns, useTableVirtual, } from './Data/Table/index.ts';
|
|
49
|
+
export type { UseTableOptions, UseTableReturn, UseTableSelectionReturn, UseTableSortingReturn, UseTablePaginationOptions, UseTablePaginationReturn, DetailRowInstance, DetailRowOptions, DetailRowPluginDef, UseTablePinningOptions, UseTablePinningReturn, CellInfo, HeaderInfo, UseTableVirtualOptions, UseTableVirtualReturn, 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';
|