cekat-ui 1.2.8 → 1.3.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 (113) hide show
  1. package/README.md +24 -2
  2. package/dist/index.d.mts +864 -0
  3. package/dist/index.d.ts +864 -23
  4. package/dist/index.mjs +14209 -0
  5. package/dist/index.umd.js +8 -3
  6. package/dist/style.css +813 -684
  7. package/package.json +35 -6
  8. package/tailwind.preset.cjs +452 -453
  9. package/dist/components/Alert/Alert.d.ts +0 -6
  10. package/dist/components/Alert/alert.styles.d.ts +0 -47
  11. package/dist/components/Alert/alert.types.d.ts +0 -46
  12. package/dist/components/Alert/index.d.ts +0 -3
  13. package/dist/components/Avatar/Avatar.d.ts +0 -6
  14. package/dist/components/Avatar/AvatarIcons.d.ts +0 -8
  15. package/dist/components/Avatar/avatar.styles.d.ts +0 -12
  16. package/dist/components/Avatar/avatar.types.d.ts +0 -16
  17. package/dist/components/Avatar/index.d.ts +0 -3
  18. package/dist/components/AvatarGroup/AvatarGroup.d.ts +0 -6
  19. package/dist/components/AvatarGroup/avatargroup.styles.d.ts +0 -17
  20. package/dist/components/AvatarGroup/avatargroup.types.d.ts +0 -18
  21. package/dist/components/AvatarGroup/index.d.ts +0 -3
  22. package/dist/components/AvatarLabelGroup/AvatarLabelGroup.d.ts +0 -6
  23. package/dist/components/AvatarLabelGroup/avatarlabelgroup.styles.d.ts +0 -5
  24. package/dist/components/AvatarLabelGroup/avatarlabelgroup.types.d.ts +0 -14
  25. package/dist/components/AvatarLabelGroup/index.d.ts +0 -3
  26. package/dist/components/AvatarProfilePhoto/AvatarProfilePhoto.d.ts +0 -6
  27. package/dist/components/AvatarProfilePhoto/avatarprofilephoto.styles.d.ts +0 -10
  28. package/dist/components/AvatarProfilePhoto/avatarprofilephoto.types.d.ts +0 -12
  29. package/dist/components/AvatarProfilePhoto/index.d.ts +0 -3
  30. package/dist/components/Badge/Badge.d.ts +0 -6
  31. package/dist/components/Badge/badge.styles.d.ts +0 -20
  32. package/dist/components/Badge/badge.types.d.ts +0 -23
  33. package/dist/components/Badge/index.d.ts +0 -3
  34. package/dist/components/BadgeGroup/BadgeGroup.d.ts +0 -6
  35. package/dist/components/BadgeGroup/badgegroup.styles.d.ts +0 -28
  36. package/dist/components/BadgeGroup/badgegroup.types.d.ts +0 -19
  37. package/dist/components/BadgeGroup/index.d.ts +0 -3
  38. package/dist/components/Button/Button.d.ts +0 -9
  39. package/dist/components/Button/ButtonIcon.d.ts +0 -2
  40. package/dist/components/Button/ButtonText.d.ts +0 -2
  41. package/dist/components/Button/button.styles.d.ts +0 -6
  42. package/dist/components/Button/button.types.d.ts +0 -18
  43. package/dist/components/Button/index.d.ts +0 -3
  44. package/dist/components/Checkbox/Checkbox.d.ts +0 -4
  45. package/dist/components/Checkbox/checkbox.styles.d.ts +0 -5
  46. package/dist/components/Checkbox/checkbox.types.d.ts +0 -12
  47. package/dist/components/Checkbox/index.d.ts +0 -3
  48. package/dist/components/Dropdown/Dropdown.d.ts +0 -2
  49. package/dist/components/Dropdown/dropdown.styles.d.ts +0 -19
  50. package/dist/components/Dropdown/dropdown.types.d.ts +0 -44
  51. package/dist/components/Dropdown/index.d.ts +0 -3
  52. package/dist/components/Input/CardNumberInput.d.ts +0 -19
  53. package/dist/components/Input/Input.d.ts +0 -8
  54. package/dist/components/Input/InputCounter.d.ts +0 -18
  55. package/dist/components/Input/InputPrefix.d.ts +0 -4
  56. package/dist/components/Input/InputSuffix.d.ts +0 -4
  57. package/dist/components/Input/PhoneInput.d.ts +0 -18
  58. package/dist/components/Input/SaleAmountInput.d.ts +0 -20
  59. package/dist/components/Input/index.d.ts +0 -13
  60. package/dist/components/Input/input.styles.d.ts +0 -36
  61. package/dist/components/Input/input.types.d.ts +0 -39
  62. package/dist/components/InputDropdown/InputDropdown.d.ts +0 -2
  63. package/dist/components/InputDropdown/index.d.ts +0 -3
  64. package/dist/components/InputDropdown/inputDropdown.styles.d.ts +0 -15
  65. package/dist/components/InputDropdown/inputDropdown.types.d.ts +0 -45
  66. package/dist/components/Loading/Loading.d.ts +0 -6
  67. package/dist/components/Loading/LoadingSpinner.d.ts +0 -9
  68. package/dist/components/Loading/index.d.ts +0 -3
  69. package/dist/components/Loading/loading.styles.d.ts +0 -6
  70. package/dist/components/Loading/loading.types.d.ts +0 -10
  71. package/dist/components/MultiSelectInput/MultiSelectInput.d.ts +0 -24
  72. package/dist/components/MultiSelectInput/index.d.ts +0 -1
  73. package/dist/components/MultiSelectInput/multiSelectInput.styles.d.ts +0 -17
  74. package/dist/components/Radio/RadioGroup.d.ts +0 -6
  75. package/dist/components/Radio/RadioGroupItem.d.ts +0 -3
  76. package/dist/components/Radio/index.d.ts +0 -3
  77. package/dist/components/Radio/radio.styles.d.ts +0 -9
  78. package/dist/components/Radio/radio.types.d.ts +0 -17
  79. package/dist/components/Tab/Tab.d.ts +0 -13
  80. package/dist/components/Tab/TabList.d.ts +0 -14
  81. package/dist/components/Tab/index.d.ts +0 -4
  82. package/dist/components/Tab/tab.styles.d.ts +0 -15
  83. package/dist/components/Tab/tab.types.d.ts +0 -46
  84. package/dist/components/TabBrowser/TabBrowser.d.ts +0 -4
  85. package/dist/components/TabBrowser/TabBrowserBar.d.ts +0 -17
  86. package/dist/components/TabBrowser/index.d.ts +0 -4
  87. package/dist/components/TabBrowser/tabbrowser.styles.d.ts +0 -53
  88. package/dist/components/TabBrowser/tabbrowser.types.d.ts +0 -44
  89. package/dist/components/Tag/Tag.d.ts +0 -6
  90. package/dist/components/Tag/index.d.ts +0 -3
  91. package/dist/components/Tag/tag.styles.d.ts +0 -19
  92. package/dist/components/Tag/tag.types.d.ts +0 -21
  93. package/dist/components/Textarea/Textarea.d.ts +0 -4
  94. package/dist/components/Textarea/index.d.ts +0 -3
  95. package/dist/components/Textarea/textarea.styles.d.ts +0 -14
  96. package/dist/components/Textarea/textarea.types.d.ts +0 -17
  97. package/dist/components/Toggle/Toggle.d.ts +0 -4
  98. package/dist/components/Toggle/index.d.ts +0 -3
  99. package/dist/components/Toggle/toggle.styles.d.ts +0 -10
  100. package/dist/components/Toggle/toggle.types.d.ts +0 -11
  101. package/dist/components/Tooltip/Tooltip.d.ts +0 -6
  102. package/dist/components/Tooltip/index.d.ts +0 -2
  103. package/dist/components/Tooltip/tooltip.styles.d.ts +0 -8
  104. package/dist/components/Tooltip/tooltip.types.d.ts +0 -13
  105. package/dist/components/WebsiteCopyInput/WebsiteCopyInput.d.ts +0 -19
  106. package/dist/components/WebsiteCopyInput/index.d.ts +0 -1
  107. package/dist/components/WebsiteCopyInput/websiteCopyInput.styles.d.ts +0 -25
  108. package/dist/components/WebsiteInput/WebsiteInput.d.ts +0 -18
  109. package/dist/components/WebsiteInput/index.d.ts +0 -1
  110. package/dist/components/WebsiteInput/websiteInput.styles.d.ts +0 -24
  111. package/dist/index.es.js +0 -10994
  112. package/dist/utils/cn.d.ts +0 -2
  113. package/dist/utils/color.d.ts +0 -4
@@ -1,18 +0,0 @@
1
- import { default as React } from 'react';
2
- import { InputProps } from './input.types';
3
- interface PhoneInputProps {
4
- size?: "sm" | "md";
5
- label?: string;
6
- required?: boolean;
7
- hint?: string;
8
- error?: boolean;
9
- disabled?: boolean;
10
- placeholder?: string;
11
- rightIcon?: React.ReactNode;
12
- value?: string;
13
- onChange?: React.ChangeEventHandler<HTMLInputElement>;
14
- className?: InputProps["className"];
15
- wrapperClassName?: InputProps["wrapperClassName"];
16
- }
17
- export declare function PhoneInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, value, onChange, className, wrapperClassName, }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
18
- export {};
@@ -1,20 +0,0 @@
1
- import { default as React } from 'react';
2
- import { InputProps } from './input.types';
3
- interface SaleAmountInputProps {
4
- size?: "sm" | "md";
5
- label?: string;
6
- required?: boolean;
7
- hint?: string;
8
- error?: boolean;
9
- disabled?: boolean;
10
- value?: string;
11
- placeholder?: string;
12
- currency?: string;
13
- onCurrencyChange?: () => void;
14
- rightIcon?: React.ReactNode;
15
- onChange?: React.ChangeEventHandler<HTMLInputElement>;
16
- className?: InputProps["className"];
17
- wrapperClassName?: InputProps["wrapperClassName"];
18
- }
19
- export declare function SaleAmountInput({ size, label, required, hint, error, disabled, value, placeholder, currency, onCurrencyChange, rightIcon, onChange, className, wrapperClassName, }: SaleAmountInputProps): import("react/jsx-runtime").JSX.Element;
20
- export {};
@@ -1,13 +0,0 @@
1
- import { default as InputBase } from './Input';
2
- import { default as InputPrefix } from './InputPrefix';
3
- import { default as InputSuffix } from './InputSuffix';
4
- type InputCompound = typeof InputBase & {
5
- Prefix: typeof InputPrefix;
6
- Suffix: typeof InputSuffix;
7
- };
8
- declare const Input: InputCompound;
9
- export { Input };
10
- export { PhoneInput } from './PhoneInput';
11
- export { SaleAmountInput } from './SaleAmountInput';
12
- export { InputCounter } from './InputCounter';
13
- export { CardNumberInput } from './CardNumberInput';
@@ -1,36 +0,0 @@
1
- export declare const inputWrapperStyles: (props?: {
2
- size?: "xs" | "sm" | "md";
3
- } & import('class-variance-authority/types').ClassProp) => string;
4
- export declare const labelStyles: (props?: {
5
- error?: boolean;
6
- } & import('class-variance-authority/types').ClassProp) => string;
7
- export declare const inputContainerStyles: (props?: {
8
- size?: "xs" | "sm" | "md";
9
- error?: boolean;
10
- disabled?: boolean;
11
- } & import('class-variance-authority/types').ClassProp) => string;
12
- export declare const inputStyles: (props?: {
13
- size?: "xs" | "sm" | "md";
14
- error?: boolean;
15
- } & import('class-variance-authority/types').ClassProp) => string;
16
- export declare const hintStyles: (props?: {
17
- error?: boolean;
18
- } & import('class-variance-authority/types').ClassProp) => string;
19
- export declare const inputGroupWrapperStyles: (props?: {
20
- size?: "xs" | "sm" | "md";
21
- error?: boolean;
22
- disabled?: boolean;
23
- } & import('class-variance-authority/types').ClassProp) => string;
24
- export declare const inputGroupFieldStyles: (props?: {
25
- size?: "xs" | "sm" | "md";
26
- disabled?: boolean;
27
- } & import('class-variance-authority/types').ClassProp) => string;
28
- export declare const inputAddonStyles: (props?: {
29
- size?: "xs" | "sm" | "md";
30
- } & import('class-variance-authority/types').ClassProp) => string;
31
- export declare const inputDropdownStyles: (props?: {
32
- size?: "xs" | "sm" | "md";
33
- } & import('class-variance-authority/types').ClassProp) => string;
34
- export declare const inputTrailingButtonStyles: (props?: {
35
- size?: "xs" | "sm" | "md";
36
- } & import('class-variance-authority/types').ClassProp) => string;
@@ -1,39 +0,0 @@
1
- import { ClassValue } from 'clsx';
2
- import * as React from "react";
3
- export type InputSize = "xs" | "sm" | "md";
4
- export interface InputDropdownSlot {
5
- value: React.ReactNode;
6
- onClick?: () => void;
7
- disabled?: boolean;
8
- }
9
- export interface InputTrailingButtonSlot {
10
- label: React.ReactNode;
11
- icon?: React.ReactNode;
12
- onClick: () => void;
13
- disabled?: boolean;
14
- }
15
- export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "className"> {
16
- label?: string;
17
- required?: boolean;
18
- hint?: string;
19
- rightIcon?: React.ReactNode;
20
- size?: InputSize;
21
- error?: boolean;
22
- /** Tighter padding/height/radius and a smaller semibold label, independent of `size`'s font scale. Opt-in, does not affect default styling. */
23
- compact?: boolean;
24
- /** Hides the browser-native calendar icon on `type="date"` inputs (e.g. when a custom `prefix` icon already covers that affordance). Opt-in, no effect on other input types or existing consumers. */
25
- hideCalendarIcon?: boolean;
26
- prefix?: React.ReactNode;
27
- suffix?: React.ReactNode;
28
- /** Renders a separately-boxed add-on (e.g. "http://") divided from the input by its own border. */
29
- leadingAddon?: React.ReactNode;
30
- /** Renders a clickable value+chevron trigger sharing the input's border, no divider (e.g. country code). */
31
- leadingDropdown?: InputDropdownSlot;
32
- /** Renders a clickable value+chevron trigger sharing the input's border, no divider (e.g. currency). */
33
- trailingDropdown?: InputDropdownSlot;
34
- /** Renders a button fused to the input's trailing edge, sharing the outer border (e.g. "Copy"). */
35
- trailingButton?: InputTrailingButtonSlot;
36
- maxLength?: number;
37
- className?: ClassValue;
38
- wrapperClassName?: ClassValue;
39
- }
@@ -1,2 +0,0 @@
1
- import { InputDropdownProps } from './inputDropdown.types';
2
- export default function InputDropdown({ size, type, label, required, helpIcon, hint, placeholder, disabled, compact, leadingIcon, options, value, onChange, values, onValuesChange, className, wrapperClassName, }: InputDropdownProps): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import { default as InputDropdown } from './InputDropdown';
2
- export { InputDropdown };
3
- export type { InputDropdownProps, InputDropdownOption, InputDropdownSize, InputDropdownType, } from './inputDropdown.types';
@@ -1,15 +0,0 @@
1
- export declare const dropdownWrapperStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
2
- export declare const dropdownLabelStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
3
- export declare const dropdownTriggerStyles: (props?: {
4
- size?: "xs" | "sm" | "md";
5
- open?: boolean;
6
- disabled?: boolean;
7
- } & import('class-variance-authority/types').ClassProp) => string;
8
- export declare const dropdownMenuStyles: (props?: {
9
- size?: "xs" | "sm" | "md";
10
- } & import('class-variance-authority/types').ClassProp) => string;
11
- export declare const dropdownItemStyles: (props?: {
12
- size?: "xs" | "sm" | "md";
13
- disabled?: boolean;
14
- } & import('class-variance-authority/types').ClassProp) => string;
15
- export declare const dropdownHintStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
@@ -1,45 +0,0 @@
1
- import { ClassValue } from 'clsx';
2
- import * as React from "react";
3
- export type InputDropdownSize = "xs" | "sm" | "md";
4
- export type InputDropdownType = "default" | "search" | "tags";
5
- export interface InputDropdownOption {
6
- id: string;
7
- label: string;
8
- /** Muted secondary text rendered after the label (e.g. "@nicholas"). */
9
- supportingText?: string;
10
- /** Leading icon rendered before the label. */
11
- icon?: React.ReactNode;
12
- /** Avatar image URL rendered before the label. */
13
- avatar?: string;
14
- /** Dot color rendered before the label (any CSS color). */
15
- dot?: string;
16
- disabled?: boolean;
17
- }
18
- export interface InputDropdownProps {
19
- size?: InputDropdownSize;
20
- /**
21
- * "default" is a click-to-select dropdown, "search" adds a filter input,
22
- * "tags" is a searchable multi-select with removable tags.
23
- */
24
- type?: InputDropdownType;
25
- label?: string;
26
- required?: boolean;
27
- /** Tighter padding/height/radius and a smaller semibold label, independent of `size`'s font scale. Opt-in, does not affect default styling. */
28
- compact?: boolean;
29
- /** Rendered after the label (e.g. a help tooltip icon). */
30
- helpIcon?: React.ReactNode;
31
- hint?: string;
32
- placeholder?: string;
33
- disabled?: boolean;
34
- /** Leading ornament shown on the trigger while no option is selected (e.g. a user icon or dot). */
35
- leadingIcon?: React.ReactNode;
36
- options: InputDropdownOption[];
37
- /** Selected option id ("default" / "search" types). */
38
- value?: string | null;
39
- onChange?: (option: InputDropdownOption) => void;
40
- /** Selected option ids ("tags" type). */
41
- values?: string[];
42
- onValuesChange?: (ids: string[]) => void;
43
- className?: ClassValue;
44
- wrapperClassName?: ClassValue;
45
- }
@@ -1,6 +0,0 @@
1
- import { LoadingProps } from './loading.types';
2
- declare const Loading: {
3
- ({ size, style, supportingText, label, className, }: LoadingProps): import("react/jsx-runtime").JSX.Element;
4
- displayName: string;
5
- };
6
- export default Loading;
@@ -1,9 +0,0 @@
1
- export declare const LineSimpleSpinner: ({ size }: {
2
- size: number;
3
- }) => import("react/jsx-runtime").JSX.Element;
4
- export declare const LineSpinnerSpinner: ({ size }: {
5
- size: number;
6
- }) => import("react/jsx-runtime").JSX.Element;
7
- export declare const DotCircleSpinner: ({ size }: {
8
- size: number;
9
- }) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import { default as Loading } from './Loading';
2
- export { Loading };
3
- export type { LoadingProps, LoadingSize, LoadingStyle } from './loading.types';
@@ -1,6 +0,0 @@
1
- import { LoadingSize } from './loading.types';
2
- export declare const loadingSizeMap: Record<LoadingSize, {
3
- box: number;
4
- gapClass: string;
5
- textClass: string;
6
- }>;
@@ -1,10 +0,0 @@
1
- import * as React from 'react';
2
- export type LoadingSize = 'sm' | 'md' | 'lg' | 'xl';
3
- export type LoadingStyle = 'line-simple' | 'line-spinner' | 'dot-circle';
4
- export interface LoadingProps {
5
- size?: LoadingSize;
6
- style?: LoadingStyle;
7
- supportingText?: boolean;
8
- label?: React.ReactNode;
9
- className?: string;
10
- }
@@ -1,24 +0,0 @@
1
- import { default as React } from 'react';
2
- import { ClassValue } from 'clsx';
3
- export interface MultiSelectOption {
4
- id: string;
5
- label: string;
6
- avatar?: string;
7
- }
8
- interface MultiSelectInputProps {
9
- size?: 'sm' | 'md';
10
- label?: string;
11
- required?: boolean;
12
- hint?: string;
13
- error?: boolean;
14
- disabled?: boolean;
15
- placeholder?: string;
16
- rightIcon?: React.ReactNode;
17
- className?: ClassValue;
18
- wrapperClassName?: ClassValue;
19
- options: MultiSelectOption[];
20
- value?: MultiSelectOption[];
21
- onChange?: (value: MultiSelectOption[]) => void;
22
- }
23
- export declare function MultiSelectInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, className, wrapperClassName, options, value, onChange, }: MultiSelectInputProps): import("react/jsx-runtime").JSX.Element;
24
- export {};
@@ -1 +0,0 @@
1
- export { MultiSelectInput } from './MultiSelectInput';
@@ -1,17 +0,0 @@
1
- export declare const wrapperStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
2
- export declare const labelStyles: (props?: {
3
- error?: boolean;
4
- } & import('class-variance-authority/types').ClassProp) => string;
5
- export declare const containerStyles: (props?: {
6
- size?: "sm" | "md";
7
- error?: boolean;
8
- disabled?: boolean;
9
- } & import('class-variance-authority/types').ClassProp) => string;
10
- export declare const scrollAreaStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
11
- export declare const chipStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
12
- export declare const inputStyles: (props?: {
13
- disabled?: boolean;
14
- } & import('class-variance-authority/types').ClassProp) => string;
15
- export declare const hintStyles: (props?: {
16
- error?: boolean;
17
- } & import('class-variance-authority/types').ClassProp) => string;
@@ -1,6 +0,0 @@
1
- import { RadioGroupProps } from './radio.types';
2
- export declare const RadioGroup: ({ value, defaultValue, onValueChange, children, className, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
3
- export declare const useRadioGroup: () => {
4
- value?: string;
5
- onValueChange?: (value: string) => void;
6
- };
@@ -1,3 +0,0 @@
1
- import { RadioGroupItemProps } from './radio.types';
2
- import * as React from 'react';
3
- export declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
@@ -1,3 +0,0 @@
1
- export { RadioGroup } from './RadioGroup';
2
- export { RadioGroupItem } from './RadioGroupItem';
3
- export type { RadioGroupProps, RadioGroupItemProps, } from './radio.types';
@@ -1,9 +0,0 @@
1
- export declare const radioOuterStyles: (props?: {
2
- size?: "sm" | "md" | "lg";
3
- checked?: boolean;
4
- disabled?: boolean;
5
- } & import('class-variance-authority/types').ClassProp) => string;
6
- export declare const radioInnerStyles: (props?: {
7
- size?: "sm" | "md" | "lg";
8
- checked?: boolean;
9
- } & import('class-variance-authority/types').ClassProp) => string;
@@ -1,17 +0,0 @@
1
- export type RadioSize = 'sm' | 'md'
2
- /** @deprecated `lg` is no longer a distinct size — it now renders identically to `md` and will be removed in a future major version. Migrate to `md`. */
3
- | 'lg';
4
- export interface RadioGroupProps {
5
- value?: string;
6
- defaultValue?: string;
7
- onValueChange?: (value: string) => void;
8
- children: React.ReactNode;
9
- className?: string;
10
- }
11
- export interface RadioGroupItemProps {
12
- id?: string;
13
- value: string;
14
- disabled?: boolean;
15
- size?: RadioSize;
16
- className?: string;
17
- }
@@ -1,13 +0,0 @@
1
- import { TabProps } from './tab.types';
2
- /**
3
- * Renders on react-aria-components' `<Tab>`, so it only works inside a `TabList` (which
4
- * supplies the `<Tabs>` context). `active`/`onClick` stay the public API — `TabList` reads
5
- * `active` off each child to derive RAC's `selectedKey`, and reaches back into `onClick` when
6
- * a press or arrow-key navigation changes the selection — so callers keep driving state
7
- * exactly as before and get roving-tabindex keyboard nav for free.
8
- */
9
- declare const Tab: {
10
- ({ children, variant, size, fullWidth, count, iconLeft, iconRight, disabled, onClick, className, id, active: _active, }: TabProps): import("react/jsx-runtime").JSX.Element;
11
- displayName: string;
12
- };
13
- export default Tab;
@@ -1,14 +0,0 @@
1
- import { TabListProps } from './tab.types';
2
- /**
3
- * Backed by react-aria-components' `<Tabs>` for roving-tabindex arrow-key navigation and
4
- * focus management. Selection still lives with the caller: each `Tab` child's own
5
- * `active`/`onClick` stay the source of truth — this derives RAC's `selectedKey` from
6
- * whichever child is `active`, and reaches back into that child's `onClick` when RAC changes
7
- * the selection (arrow keys, click, or press), so the caller's state — and therefore
8
- * `selectedKey` on the next render — stays in sync.
9
- */
10
- declare const TabList: {
11
- ({ children, variant, orientation, boxed, "aria-label": ariaLabel, keyboardActivation, disabledKeys, className, }: TabListProps): import("react/jsx-runtime").JSX.Element;
12
- displayName: string;
13
- };
14
- export default TabList;
@@ -1,4 +0,0 @@
1
- import { default as Tab } from './Tab';
2
- import { default as TabList } from './TabList';
3
- export { Tab, TabList };
4
- export type { TabProps, TabVariant, TabSize, TabListProps, TabListOrientation, } from './tab.types';
@@ -1,15 +0,0 @@
1
- import { TabVariant, TabSize } from './tab.types';
2
- export declare const tabSizeMap: Record<TabVariant, Record<TabSize, string>>;
3
- export declare const tabRadiusMap: Record<TabVariant, string>;
4
- export declare const tabColorMap: Record<TabVariant, {
5
- active: string;
6
- inactive: string;
7
- hoverInactive: string;
8
- hasFocusRing: boolean;
9
- }>;
10
- /** Count badge is always neutral gray in Figma, regardless of tab variant/active state. */
11
- export declare const tabBadgeClasses = "inline-flex items-center justify-center rounded-full border border-light-200 bg-light-50 px-2 py-0.5 text-caption-sm font-medium text-light-700";
12
- export declare const tabListStyleMap: Record<TabVariant, {
13
- gapClass: string;
14
- hasHairline: boolean;
15
- }>;
@@ -1,46 +0,0 @@
1
- import { Key } from 'react-aria-components';
2
- import * as React from 'react';
3
- export type TabVariant = 'button-gray' | 'button-white' | 'button-primary' | 'underline' | 'underline-filled' | 'line';
4
- export type TabSize = 'sm' | 'md';
5
- export interface TabProps {
6
- /** Tab label content. */
7
- children: React.ReactNode;
8
- /** Visual style; should match the parent TabList's variant. */
9
- variant?: TabVariant;
10
- size?: TabSize;
11
- /** Whether this tab is the current selection. */
12
- active?: boolean;
13
- /** Stretches the tab to fill available row width. */
14
- fullWidth?: boolean;
15
- /** Count badge rendered after the label. */
16
- count?: number | string;
17
- /** Icon rendered before the label. */
18
- iconLeft?: React.ReactNode;
19
- /** Icon rendered after the badge, e.g. a chevron. */
20
- iconRight?: React.ReactNode;
21
- /** Removes the tab from RAC's keyboard/selection order. */
22
- disabled?: boolean;
23
- /** Fires on select, including via keyboard navigation. */
24
- onClick?: () => void;
25
- className?: string;
26
- /** Set internally by `TabList` to key the tab for RAC's roving-tabindex selection. */
27
- id?: string;
28
- }
29
- export type TabListOrientation = 'horizontal' | 'vertical';
30
- export interface TabListProps {
31
- /** `Tab` elements to render; selection is read from each child's `active` prop. */
32
- children: React.ReactNode;
33
- /** Controls the default gap and whether a bottom hairline is drawn under the row. */
34
- variant?: TabVariant;
35
- /** Arrow-key axis: horizontal moves with Left/Right, vertical with Up/Down. */
36
- orientation?: TabListOrientation;
37
- /** Wraps the tabs in a padded gray card (used by the "boxed" button-tab treatments). */
38
- boxed?: boolean;
39
- /** Accessible name for the tab row, read by screen readers. */
40
- 'aria-label'?: string;
41
- /** Whether arrow-key focus also selects ("automatic", RAC's default) or only Enter/Space does ("manual"). */
42
- keyboardActivation?: 'automatic' | 'manual';
43
- /** Keys of `Tab` children (their index as a string) to remove from selection and keyboard navigation. */
44
- disabledKeys?: Iterable<Key>;
45
- className?: string;
46
- }
@@ -1,4 +0,0 @@
1
- import { TabBrowserProps } from './tabbrowser.types';
2
- import * as React from 'react';
3
- declare const TabBrowser: React.ForwardRefExoticComponent<TabBrowserProps & React.RefAttributes<HTMLButtonElement>>;
4
- export default TabBrowser;
@@ -1,17 +0,0 @@
1
- import { TabBrowserBarProps } from './tabbrowser.types';
2
- /**
3
- * Pure layout for a row of TabBrowsers. It deliberately draws no divider — that belongs
4
- * to whatever surface hosts the row, so it can span the full header width.
5
- *
6
- * No `gap` either: each tab reserves its own breathing room (see TAB_PADDING_X), which
7
- * keeps spacing identical whether or not a tab is selected. A flex gap on top would read
8
- * as dead space beside the selected tab only.
9
- *
10
- * Nor any height or leading space — how far the row sits from what's above it depends on
11
- * the surface, so that stays with the caller.
12
- */
13
- declare const TabBrowserBar: {
14
- ({ children, separators, trailingSlot, className }: TabBrowserBarProps): import("react/jsx-runtime").JSX.Element;
15
- displayName: string;
16
- };
17
- export default TabBrowserBar;
@@ -1,4 +0,0 @@
1
- import { default as TabBrowser } from './TabBrowser';
2
- import { default as TabBrowserBar } from './TabBrowserBar';
3
- export { TabBrowser, TabBrowserBar };
4
- export type { TabBrowserProps, TabBrowserBarProps, TabBrowserType } from './tabbrowser.types';
@@ -1,53 +0,0 @@
1
- /** Radius every corner turns through, in px — top corners and bottom flares alike. */
2
- export declare const TAB_GIRTH = 9;
3
- /** Outline weight, in px. Also the divider's thickness, which the flares hand off to. */
4
- export declare const TAB_HAIRLINE = 1;
5
- /**
6
- * Label inset from the tab's box edge, in px, split between the button's padding and the
7
- * fill's. Both states leave the same hairline on the button, so the split lands the same
8
- * either way — selecting a tab neither resizes it nor shifts the row. Keep it that way:
9
- * `max-width` tabs are `flex-1`, and flex-grow divides a row from bases that already
10
- * include each item's padding, so a state-dependent button padding resizes the tab.
11
- */
12
- export declare const TAB_PADDING_X = 30;
13
- /**
14
- * Silhouette of a tab, with bottom corners flaring *outward* into the divider line.
15
- * A border can't survive a clip, so the outline is the gap between two clipped layers —
16
- * a border-colored box wrapped around a white one, both tracing this path at a
17
- * different `inset`. Three things keep that gap even; none are safe to tidy away:
18
- *
19
- * - Only concentric arcs hold a constant weight through a turn, so the inner arc
20
- * shrinks on the convex top corners but *grows* on the flares, which curve the other
21
- * way. A uniformly inset box gets the flares ~40% bolder than the corners they meet.
22
- * - Left to itself a flare runs tangent to the bottom edge, where the two curves meet
23
- * at a point and the outline fades out short of the divider. The skirt lifts the
24
- * outer arc 1px clear so it lands at full weight, as Figma's assets do (`…H0 V7.5…`).
25
- * - Coordinates are box-relative, so the inner path leans 1px outside its own at the
26
- * bottom corners. The fill can't paint there, which trims the skirt back to 1px.
27
- *
28
- * Without `shape()` the declaration is dropped and tabs fall back to the `rounded-t-lg`
29
- * top corners in TabBrowser's base classes, 1px padding standing in as a border.
30
- *
31
- * Technique: https://master.dev/blog/modern-css-round-out-tabs/
32
- */
33
- export declare function tabOutlinePath(inset: number): string;
34
- export declare const TAB_CLIP_OUTER: string;
35
- export declare const TAB_CLIP_INNER: string;
36
- /**
37
- * `default` tabs size to their own label and sit at the head of a page. `max-width` tabs
38
- * divide a row equally between them and run shorter, for tighter surfaces like a side panel.
39
- *
40
- * `padX` is the label's inset from the tab's box edge, split between the button and the fill
41
- * — see Tab's ACTIVE_FILL/INACTIVE_FILL. Equal-width tabs centre their label anyway, so
42
- * theirs only has to clear the flare reserve.
43
- */
44
- export declare const tabBrowserTypeMap: {
45
- readonly default: {
46
- readonly box: "h-12 shrink-0";
47
- readonly padX: 30;
48
- };
49
- readonly 'max-width': {
50
- readonly box: "h-9 min-w-px flex-1";
51
- readonly padX: 9;
52
- };
53
- };
@@ -1,44 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * Sizing variant, mirroring the design system's Tab Browser Base. `default` sizes each tab
4
- * to its own label; `max-width` makes them equal-width and lets the row divide itself
5
- * between them, which also runs them shorter.
6
- */
7
- export type TabBrowserType = 'default' | 'max-width';
8
- /**
9
- * Everything a `<button>` takes comes through — `id`, `aria-controls`, `tabIndex`,
10
- * `onKeyDown`, `data-*`. The tab carries `role="tab"` but leaves selection and panel wiring
11
- * to the caller, so those are the props they build it out of.
12
- *
13
- * `type` is the exception: it names the sizing variant here, and the rendered button is
14
- * pinned to `type="button"` so it never submits a form it happens to sit in.
15
- */
16
- export interface TabBrowserProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
17
- /** Whether this tab is the currently selected one. */
18
- active?: boolean;
19
- type?: TabBrowserType;
20
- /**
21
- * Removes the browser-tab silhouette and fixed sizing so `className` can fully control
22
- * padding, dimensions, borders, and hover states.
23
- */
24
- unstyled?: boolean;
25
- /** Icon rendered before the label. */
26
- iconLeft?: React.ReactNode;
27
- /** Rendered after the label, e.g. a status Badge. */
28
- trailing?: React.ReactNode;
29
- /** Shorthand for the native `title`, which wins if both are given. */
30
- tooltip?: string;
31
- /** Classes applied to the tab's inner content element. */
32
- contentClassName?: string;
33
- /** Inline styles applied to the tab's inner content element. */
34
- contentStyle?: React.CSSProperties;
35
- children: React.ReactNode;
36
- }
37
- export interface TabBrowserBarProps {
38
- children: React.ReactNode;
39
- /** Renders a vertical divider between adjacent tabs. */
40
- separators?: boolean;
41
- /** Extra content pinned to the end of the row, e.g. a "+" add button or CTA buttons. */
42
- trailingSlot?: React.ReactNode;
43
- className?: string;
44
- }
@@ -1,6 +0,0 @@
1
- import { TagProps } from './tag.types';
2
- declare const Tag: {
3
- ({ children, size, shape, icon, checked, onCheckedChange, onClose, count, disabled, className, color, customColor, }: TagProps): import("react/jsx-runtime").JSX.Element;
4
- displayName: string;
5
- };
6
- export default Tag;
@@ -1,3 +0,0 @@
1
- import { default as Tag } from './Tag';
2
- export { Tag };
3
- export type { TagProps, TagSize, TagShape, TagColor } from './tag.types';
@@ -1,19 +0,0 @@
1
- import { TagColor } from './tag.types';
2
- export declare const tagColorStyles: Record<TagColor, {
3
- bg: string;
4
- border: string;
5
- text: string;
6
- }>;
7
- export declare const tagStyles: (props?: {
8
- size?: "sm" | "md" | "lg";
9
- shape?: "rounded" | "pill";
10
- hasLeading?: boolean;
11
- hasTrailing?: boolean;
12
- interactive?: boolean;
13
- disabled?: boolean;
14
- } & import('class-variance-authority/types').ClassProp) => string;
15
- export declare const tagCheckboxStyles: (props?: {
16
- checked?: boolean;
17
- } & import('class-variance-authority/types').ClassProp) => string;
18
- export declare const tagCountStyles = "shrink-0 rounded-[3px] bg-light-100 px-1 text-light-800";
19
- export declare const tagCloseButtonStyles = "shrink-0 rounded-[3px] p-0.5 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400";
@@ -1,21 +0,0 @@
1
- import * as React from 'react';
2
- export type TagSize = 'sm' | 'md' | 'lg';
3
- export type TagShape = 'rounded' | 'pill';
4
- export type TagColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'blue-gray' | 'blue-light' | 'indigo' | 'purple' | 'blue' | 'pink' | 'orange';
5
- export interface TagProps {
6
- children: React.ReactNode;
7
- size?: TagSize;
8
- /** Corner style. 'rounded' = rounded-md (default), 'pill' = fully rounded. */
9
- shape?: TagShape;
10
- icon?: React.ReactNode;
11
- checked?: boolean;
12
- onCheckedChange?: (checked: boolean) => void;
13
- onClose?: () => void;
14
- count?: number | string;
15
- disabled?: boolean;
16
- className?: string;
17
- /** Named accent color token for the border, background and text. Defaults to 'gray'. */
18
- color?: TagColor;
19
- /** Custom accent color as a 6-digit hex (e.g. "#13a8bf"), applied to border, background tint and text. Overrides `color` when set. Ignored if not a valid 6-digit hex. */
20
- customColor?: string;
21
- }
@@ -1,4 +0,0 @@
1
- import { TextareaProps } from './textarea.types';
2
- import * as React from "react";
3
- declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
4
- export default Textarea;