cekat-ui 1.2.9 → 1.3.1
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 +125 -44
- package/dist/index.d.mts +876 -0
- package/dist/index.d.ts +876 -23
- package/dist/index.mjs +14285 -0
- package/dist/index.umd.js +8 -3
- package/dist/style.css +898 -691
- package/package.json +35 -6
- package/tailwind.preset.cjs +452 -453
- package/dist/components/Alert/Alert.d.ts +0 -6
- package/dist/components/Alert/alert.styles.d.ts +0 -47
- package/dist/components/Alert/alert.types.d.ts +0 -46
- package/dist/components/Alert/index.d.ts +0 -3
- package/dist/components/Avatar/Avatar.d.ts +0 -6
- package/dist/components/Avatar/AvatarIcons.d.ts +0 -8
- package/dist/components/Avatar/avatar.styles.d.ts +0 -12
- package/dist/components/Avatar/avatar.types.d.ts +0 -16
- package/dist/components/Avatar/index.d.ts +0 -3
- package/dist/components/AvatarGroup/AvatarGroup.d.ts +0 -6
- package/dist/components/AvatarGroup/avatargroup.styles.d.ts +0 -17
- package/dist/components/AvatarGroup/avatargroup.types.d.ts +0 -18
- package/dist/components/AvatarGroup/index.d.ts +0 -3
- package/dist/components/AvatarLabelGroup/AvatarLabelGroup.d.ts +0 -6
- package/dist/components/AvatarLabelGroup/avatarlabelgroup.styles.d.ts +0 -5
- package/dist/components/AvatarLabelGroup/avatarlabelgroup.types.d.ts +0 -14
- package/dist/components/AvatarLabelGroup/index.d.ts +0 -3
- package/dist/components/AvatarProfilePhoto/AvatarProfilePhoto.d.ts +0 -6
- package/dist/components/AvatarProfilePhoto/avatarprofilephoto.styles.d.ts +0 -10
- package/dist/components/AvatarProfilePhoto/avatarprofilephoto.types.d.ts +0 -12
- package/dist/components/AvatarProfilePhoto/index.d.ts +0 -3
- package/dist/components/Badge/Badge.d.ts +0 -6
- package/dist/components/Badge/badge.styles.d.ts +0 -20
- package/dist/components/Badge/badge.types.d.ts +0 -23
- package/dist/components/Badge/index.d.ts +0 -3
- package/dist/components/BadgeGroup/BadgeGroup.d.ts +0 -6
- package/dist/components/BadgeGroup/badgegroup.styles.d.ts +0 -28
- package/dist/components/BadgeGroup/badgegroup.types.d.ts +0 -19
- package/dist/components/BadgeGroup/index.d.ts +0 -3
- package/dist/components/Button/Button.d.ts +0 -9
- package/dist/components/Button/ButtonIcon.d.ts +0 -2
- package/dist/components/Button/ButtonText.d.ts +0 -2
- package/dist/components/Button/button.styles.d.ts +0 -6
- package/dist/components/Button/button.types.d.ts +0 -18
- package/dist/components/Button/index.d.ts +0 -3
- package/dist/components/Checkbox/Checkbox.d.ts +0 -4
- package/dist/components/Checkbox/checkbox.styles.d.ts +0 -5
- package/dist/components/Checkbox/checkbox.types.d.ts +0 -12
- package/dist/components/Checkbox/index.d.ts +0 -3
- package/dist/components/Dropdown/Dropdown.d.ts +0 -2
- package/dist/components/Dropdown/dropdown.styles.d.ts +0 -19
- package/dist/components/Dropdown/dropdown.types.d.ts +0 -44
- package/dist/components/Dropdown/index.d.ts +0 -3
- package/dist/components/Input/CardNumberInput.d.ts +0 -19
- package/dist/components/Input/Input.d.ts +0 -8
- package/dist/components/Input/InputCounter.d.ts +0 -18
- package/dist/components/Input/InputPrefix.d.ts +0 -4
- package/dist/components/Input/InputSuffix.d.ts +0 -4
- package/dist/components/Input/PhoneInput.d.ts +0 -18
- package/dist/components/Input/SaleAmountInput.d.ts +0 -20
- package/dist/components/Input/index.d.ts +0 -13
- package/dist/components/Input/input.styles.d.ts +0 -36
- package/dist/components/Input/input.types.d.ts +0 -39
- package/dist/components/InputDropdown/InputDropdown.d.ts +0 -2
- package/dist/components/InputDropdown/index.d.ts +0 -3
- package/dist/components/InputDropdown/inputDropdown.styles.d.ts +0 -15
- package/dist/components/InputDropdown/inputDropdown.types.d.ts +0 -45
- package/dist/components/Loading/Loading.d.ts +0 -6
- package/dist/components/Loading/LoadingSpinner.d.ts +0 -9
- package/dist/components/Loading/index.d.ts +0 -3
- package/dist/components/Loading/loading.styles.d.ts +0 -6
- package/dist/components/Loading/loading.types.d.ts +0 -10
- package/dist/components/MultiSelectInput/MultiSelectInput.d.ts +0 -24
- package/dist/components/MultiSelectInput/index.d.ts +0 -1
- package/dist/components/MultiSelectInput/multiSelectInput.styles.d.ts +0 -17
- package/dist/components/Radio/RadioGroup.d.ts +0 -6
- package/dist/components/Radio/RadioGroupItem.d.ts +0 -3
- package/dist/components/Radio/index.d.ts +0 -3
- package/dist/components/Radio/radio.styles.d.ts +0 -9
- package/dist/components/Radio/radio.types.d.ts +0 -17
- package/dist/components/Tab/Tab.d.ts +0 -13
- package/dist/components/Tab/TabList.d.ts +0 -14
- package/dist/components/Tab/index.d.ts +0 -4
- package/dist/components/Tab/tab.styles.d.ts +0 -15
- package/dist/components/Tab/tab.types.d.ts +0 -46
- package/dist/components/TabBrowser/TabBrowser.d.ts +0 -4
- package/dist/components/TabBrowser/TabBrowserBar.d.ts +0 -17
- package/dist/components/TabBrowser/index.d.ts +0 -4
- package/dist/components/TabBrowser/tabbrowser.styles.d.ts +0 -53
- package/dist/components/TabBrowser/tabbrowser.types.d.ts +0 -44
- package/dist/components/Tag/Tag.d.ts +0 -6
- package/dist/components/Tag/index.d.ts +0 -3
- package/dist/components/Tag/tag.styles.d.ts +0 -19
- package/dist/components/Tag/tag.types.d.ts +0 -21
- package/dist/components/Textarea/Textarea.d.ts +0 -4
- package/dist/components/Textarea/index.d.ts +0 -3
- package/dist/components/Textarea/textarea.styles.d.ts +0 -14
- package/dist/components/Textarea/textarea.types.d.ts +0 -17
- package/dist/components/Toggle/Toggle.d.ts +0 -4
- package/dist/components/Toggle/index.d.ts +0 -3
- package/dist/components/Toggle/toggle.styles.d.ts +0 -10
- package/dist/components/Toggle/toggle.types.d.ts +0 -11
- package/dist/components/Tooltip/Tooltip.d.ts +0 -6
- package/dist/components/Tooltip/index.d.ts +0 -2
- package/dist/components/Tooltip/tooltip.styles.d.ts +0 -8
- package/dist/components/Tooltip/tooltip.types.d.ts +0 -13
- package/dist/components/WebsiteCopyInput/WebsiteCopyInput.d.ts +0 -19
- package/dist/components/WebsiteCopyInput/index.d.ts +0 -1
- package/dist/components/WebsiteCopyInput/websiteCopyInput.styles.d.ts +0 -25
- package/dist/components/WebsiteInput/WebsiteInput.d.ts +0 -18
- package/dist/components/WebsiteInput/index.d.ts +0 -1
- package/dist/components/WebsiteInput/websiteInput.styles.d.ts +0 -24
- package/dist/index.es.js +0 -10997
- package/dist/utils/cn.d.ts +0 -2
- package/dist/utils/color.d.ts +0 -4
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { AlertProps } from './alert.types';
|
|
2
|
-
declare const Alert: {
|
|
3
|
-
({ title, description, color, layout, background, icon, iconVariant, showIcon, primaryAction, secondaryAction, actionVariant, actions, onClose, closeLabel, className, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
6
|
-
export default Alert;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { AlertColor } from './alert.types';
|
|
2
|
-
export declare const alertStyles: (props?: {
|
|
3
|
-
layout?: "full-width" | "floating";
|
|
4
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
5
|
-
/**
|
|
6
|
-
* Per-color surfaces. `surface`/`border` are only applied when the alert opts into
|
|
7
|
-
* `background="light"`; otherwise the card stays white with a neutral border.
|
|
8
|
-
*/
|
|
9
|
-
export declare const alertColorStyles: Record<AlertColor, {
|
|
10
|
-
/** Card fill for `background="light"`. */
|
|
11
|
-
surface: string;
|
|
12
|
-
/** Card border for `background="light"`. */
|
|
13
|
-
border: string;
|
|
14
|
-
/** Featured icon fill on a white card. */
|
|
15
|
-
iconSurface: string;
|
|
16
|
-
/** Featured icon fill on a tinted card, so the badge stays readable. */
|
|
17
|
-
iconSurfaceOnLight: string;
|
|
18
|
-
iconText: string;
|
|
19
|
-
}>;
|
|
20
|
-
/** Card fill/border used when `background="white"` (the Figma default). */
|
|
21
|
-
export declare const alertWhiteSurfaceStyles = "bg-white border-light-200";
|
|
22
|
-
/** Inner max-width container, only used by the `full-width` layout. */
|
|
23
|
-
export declare const alertContainerStyles = "relative mx-auto flex w-full max-w-[1280px] flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:gap-3 sm:px-8 sm:py-3";
|
|
24
|
-
export declare const featuredIconStyles: (props?: {
|
|
25
|
-
layout?: "full-width" | "floating";
|
|
26
|
-
shape?: "square" | "circle";
|
|
27
|
-
variant?: "plain" | "featured";
|
|
28
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
29
|
-
export declare const alertContentStyles: (props?: {
|
|
30
|
-
layout?: "full-width" | "floating";
|
|
31
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
32
|
-
export declare const alertTextStyles: (props?: {
|
|
33
|
-
layout?: "full-width" | "floating";
|
|
34
|
-
closable?: boolean;
|
|
35
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
36
|
-
export declare const alertTitleStyles = "text-caption-lg font-bold text-light-800";
|
|
37
|
-
export declare const alertDescriptionStyles = "text-caption-lg text-light-600";
|
|
38
|
-
export declare const alertActionsStyles: (props?: {
|
|
39
|
-
layout?: "full-width" | "floating";
|
|
40
|
-
actionVariant?: "link" | "button";
|
|
41
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
42
|
-
export declare const alertLinkActionStyles: (props?: {
|
|
43
|
-
emphasis?: "primary" | "secondary";
|
|
44
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
45
|
-
export declare const alertCloseButtonStyles: (props?: {
|
|
46
|
-
layout?: "full-width" | "floating";
|
|
47
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
export type AlertColor = "default" | "brand" | "gray" | "error" | "warning" | "success";
|
|
3
|
-
/** Figma "Size" variant: a rounded floating card, or an edge-to-edge page banner. */
|
|
4
|
-
export type AlertLayout = "floating" | "full-width";
|
|
5
|
-
/**
|
|
6
|
-
* Card surface. `white` is the Figma default; `light` tints the card with the
|
|
7
|
-
* light shade of the current `color`.
|
|
8
|
-
*/
|
|
9
|
-
export type AlertBackground = "white" | "light";
|
|
10
|
-
export type AlertActionVariant = "link" | "button";
|
|
11
|
-
/**
|
|
12
|
-
* `featured` wraps the icon in the Figma "Featured icon" badge (fixed size, tinted
|
|
13
|
-
* fill, rounded shape). `plain` drops the badge so a custom illustration can be
|
|
14
|
-
* dropped straight in at its own size.
|
|
15
|
-
*/
|
|
16
|
-
export type AlertIconVariant = "featured" | "plain";
|
|
17
|
-
export interface AlertAction {
|
|
18
|
-
label: React.ReactNode;
|
|
19
|
-
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
20
|
-
}
|
|
21
|
-
export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "color"> {
|
|
22
|
-
title: React.ReactNode;
|
|
23
|
-
/** Supporting text rendered under (floating) or beside (full-width) the title. */
|
|
24
|
-
description?: React.ReactNode;
|
|
25
|
-
color?: AlertColor;
|
|
26
|
-
layout?: AlertLayout;
|
|
27
|
-
/** Set to `light` to fill the card with the light shade of `color`. Defaults to `white`. */
|
|
28
|
-
background?: AlertBackground;
|
|
29
|
-
/** Overrides the default featured icon for the current `color`. */
|
|
30
|
-
icon?: React.ReactNode;
|
|
31
|
-
/** Set to `plain` to render `icon` without the featured-icon badge. Defaults to `featured`. */
|
|
32
|
-
iconVariant?: AlertIconVariant;
|
|
33
|
-
showIcon?: boolean;
|
|
34
|
-
/** Emphasised action, e.g. "View changes". */
|
|
35
|
-
primaryAction?: AlertAction;
|
|
36
|
-
/** Low-emphasis action, e.g. "Dismiss". */
|
|
37
|
-
secondaryAction?: AlertAction;
|
|
38
|
-
/** Defaults to `link` for `floating` and `button` for `full-width`. */
|
|
39
|
-
actionVariant?: AlertActionVariant;
|
|
40
|
-
/** Replaces the rendered actions entirely, ignoring `primaryAction`/`secondaryAction`. */
|
|
41
|
-
actions?: React.ReactNode;
|
|
42
|
-
/** Renders the close (X) button when provided. */
|
|
43
|
-
onClose?: () => void;
|
|
44
|
-
closeLabel?: string;
|
|
45
|
-
className?: string;
|
|
46
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export declare const UserPlaceholderIcon: ({ className, style, }: {
|
|
3
|
-
className?: string;
|
|
4
|
-
style?: React.CSSProperties;
|
|
5
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
export declare const VerifiedTickIcon: ({ className }: {
|
|
7
|
-
className?: string;
|
|
8
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { AvatarSize } from './avatar.types';
|
|
2
|
-
export declare const avatarSizeMap: Record<AvatarSize, {
|
|
3
|
-
box: number;
|
|
4
|
-
borderWidth: string;
|
|
5
|
-
statusSize: number;
|
|
6
|
-
badgeSize: number;
|
|
7
|
-
textClass: string;
|
|
8
|
-
}>;
|
|
9
|
-
/** Figma's online-indicator green (fg-success-secondary) — noticeably brighter
|
|
10
|
-
* than this repo's `success-500` token, kept exact since it's a recognizable,
|
|
11
|
-
* standardized "online status" color. */
|
|
12
|
-
export declare const AVATAR_ONLINE_COLOR = "#17B26A";
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
3
|
-
export type AvatarStatus = 'none' | 'online' | 'company' | 'verified';
|
|
4
|
-
export interface AvatarProps {
|
|
5
|
-
/** Image URL. When provided, renders the photo. */
|
|
6
|
-
src?: string;
|
|
7
|
-
alt?: string;
|
|
8
|
-
/** Renders centered initials instead of a photo/placeholder icon. */
|
|
9
|
-
initials?: React.ReactNode;
|
|
10
|
-
size?: AvatarSize;
|
|
11
|
-
status?: AvatarStatus;
|
|
12
|
-
/** Custom content for the "company" status badge (e.g. a logo image). */
|
|
13
|
-
statusIcon?: React.ReactNode;
|
|
14
|
-
contrastBorder?: boolean;
|
|
15
|
-
className?: string;
|
|
16
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { AvatarGroupSize } from './avatargroup.types';
|
|
2
|
-
export declare const avatarInitialsPalette: {
|
|
3
|
-
bg: string;
|
|
4
|
-
text: string;
|
|
5
|
-
}[];
|
|
6
|
-
/** Deterministic pick from `avatarInitialsPalette` so the same avatar always gets the same color across renders. */
|
|
7
|
-
export declare const getAvatarInitialsColor: (seed: string) => {
|
|
8
|
-
bg: string;
|
|
9
|
-
text: string;
|
|
10
|
-
};
|
|
11
|
-
export declare const avatarGroupSizeMap: Record<AvatarGroupSize, {
|
|
12
|
-
box: number;
|
|
13
|
-
overlap: number;
|
|
14
|
-
contrastBorderWidth: string;
|
|
15
|
-
plusIconSize: number;
|
|
16
|
-
textClass: string;
|
|
17
|
-
}>;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export type AvatarGroupSize = 'xs' | 'sm' | 'md';
|
|
3
|
-
export interface AvatarGroupItem {
|
|
4
|
-
src?: string;
|
|
5
|
-
alt?: string;
|
|
6
|
-
initials?: React.ReactNode;
|
|
7
|
-
/** Tooltip content shown on hover. */
|
|
8
|
-
label?: React.ReactNode;
|
|
9
|
-
}
|
|
10
|
-
export interface AvatarGroupProps {
|
|
11
|
-
avatars: AvatarGroupItem[];
|
|
12
|
-
/** Max avatars to show before collapsing the rest into a "+N" badge. */
|
|
13
|
-
max?: number;
|
|
14
|
-
size?: AvatarGroupSize;
|
|
15
|
-
/** Shows a dashed "add" button after the avatars when provided. */
|
|
16
|
-
onAdd?: () => void;
|
|
17
|
-
className?: string;
|
|
18
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { AvatarLabelGroupProps } from './avatarlabelgroup.types';
|
|
2
|
-
declare const AvatarLabelGroup: {
|
|
3
|
-
({ name, subtitle, src, initials, size, status, statusIcon, className, }: AvatarLabelGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
6
|
-
export default AvatarLabelGroup;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { AvatarStatus } from '../Avatar/avatar.types';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
export type AvatarLabelGroupSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
|
-
export interface AvatarLabelGroupProps {
|
|
5
|
-
name: React.ReactNode;
|
|
6
|
-
subtitle?: React.ReactNode;
|
|
7
|
-
src?: string;
|
|
8
|
-
initials?: React.ReactNode;
|
|
9
|
-
size?: AvatarLabelGroupSize;
|
|
10
|
-
status?: AvatarStatus;
|
|
11
|
-
/** Custom content for the "company" status badge (e.g. a logo image). */
|
|
12
|
-
statusIcon?: React.ReactNode;
|
|
13
|
-
className?: string;
|
|
14
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { AvatarProfilePhotoProps } from './avatarprofilephoto.types';
|
|
2
|
-
declare const AvatarProfilePhoto: {
|
|
3
|
-
({ src, alt, initials, size, verified, contrastBorder, className, }: AvatarProfilePhotoProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
6
|
-
export default AvatarProfilePhoto;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { AvatarProfilePhotoSize } from './avatarprofilephoto.types';
|
|
2
|
-
export declare const avatarProfilePhotoSizeMap: Record<AvatarProfilePhotoSize, {
|
|
3
|
-
box: number;
|
|
4
|
-
ringWidth: number;
|
|
5
|
-
shadowClass: string;
|
|
6
|
-
iconSize: number;
|
|
7
|
-
textClass: string;
|
|
8
|
-
verifiedSize: number;
|
|
9
|
-
verifiedOffset: number;
|
|
10
|
-
}>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export type AvatarProfilePhotoSize = 'sm' | 'md' | 'lg';
|
|
3
|
-
export interface AvatarProfilePhotoProps {
|
|
4
|
-
src?: string;
|
|
5
|
-
alt?: string;
|
|
6
|
-
/** Renders centered initials instead of a photo/placeholder icon. */
|
|
7
|
-
initials?: React.ReactNode;
|
|
8
|
-
size?: AvatarProfilePhotoSize;
|
|
9
|
-
verified?: boolean;
|
|
10
|
-
contrastBorder?: boolean;
|
|
11
|
-
className?: string;
|
|
12
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { BadgeProps } from './badge.types';
|
|
2
|
-
declare const Badge: {
|
|
3
|
-
({ children, size, shape, variant, color, customColor, modern, icon, trailingIcon, checked, onCheckedChange, onClose, iconOnly, disabled, className, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
6
|
-
export default Badge;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { BadgeColor } from './badge.types';
|
|
2
|
-
export declare const badgeColorStyles: Record<BadgeColor, {
|
|
3
|
-
solidBg: string;
|
|
4
|
-
solidBorder: string;
|
|
5
|
-
solidText: string;
|
|
6
|
-
outlineBorder: string;
|
|
7
|
-
outlineText: string;
|
|
8
|
-
}>;
|
|
9
|
-
export declare const badgeStyles: (props?: {
|
|
10
|
-
size?: "sm" | "md" | "lg";
|
|
11
|
-
shape?: "pill" | "badge";
|
|
12
|
-
modern?: boolean;
|
|
13
|
-
hasLeading?: boolean;
|
|
14
|
-
hasTrailing?: boolean;
|
|
15
|
-
iconOnly?: boolean;
|
|
16
|
-
interactive?: boolean;
|
|
17
|
-
disabled?: boolean;
|
|
18
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
19
|
-
export declare const badgeCheckboxStyles = "size-4 shrink-0 rounded border bg-white";
|
|
20
|
-
export declare const badgeCloseButtonStyles = "shrink-0 rounded p-0.5 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400";
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export type BadgeSize = 'sm' | 'md' | 'lg';
|
|
3
|
-
export type BadgeShape = 'pill' | 'badge';
|
|
4
|
-
export type BadgeVariant = 'solid' | 'outline';
|
|
5
|
-
export type BadgeColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'blue-gray' | 'blue-light' | 'indigo' | 'purple' | 'blue' | 'pink' | 'orange';
|
|
6
|
-
export interface BadgeProps {
|
|
7
|
-
children?: React.ReactNode;
|
|
8
|
-
size?: BadgeSize;
|
|
9
|
-
shape?: BadgeShape;
|
|
10
|
-
variant?: BadgeVariant;
|
|
11
|
-
color?: BadgeColor;
|
|
12
|
-
/** 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. */
|
|
13
|
-
customColor?: string;
|
|
14
|
-
modern?: boolean;
|
|
15
|
-
icon?: React.ReactNode;
|
|
16
|
-
trailingIcon?: React.ReactNode;
|
|
17
|
-
checked?: boolean;
|
|
18
|
-
onCheckedChange?: (checked: boolean) => void;
|
|
19
|
-
onClose?: () => void;
|
|
20
|
-
iconOnly?: boolean;
|
|
21
|
-
disabled?: boolean;
|
|
22
|
-
className?: string;
|
|
23
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { BadgeGroupProps } from './badgegroup.types';
|
|
2
|
-
declare const BadgeGroup: {
|
|
3
|
-
({ badgeLabel, children, size, theme, color, badgePosition, icon, onClick, className, }: BadgeGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
6
|
-
export default BadgeGroup;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { BadgeGroupColor } from './badgegroup.types';
|
|
2
|
-
export declare const badgeGroupColorStyles: Record<BadgeGroupColor, {
|
|
3
|
-
bg50: string;
|
|
4
|
-
hoverBg100: string;
|
|
5
|
-
border200: string;
|
|
6
|
-
border500: string;
|
|
7
|
-
text500: string;
|
|
8
|
-
}>;
|
|
9
|
-
export declare const badgeGroupSizeStyles: {
|
|
10
|
-
readonly md: {
|
|
11
|
-
readonly outerPad: {
|
|
12
|
-
readonly leading: "pl-1 pr-2.5 py-1";
|
|
13
|
-
readonly trailing: "pl-3 pr-1 py-1";
|
|
14
|
-
};
|
|
15
|
-
readonly gap: "gap-2";
|
|
16
|
-
readonly chipPad: "px-2 py-0.5";
|
|
17
|
-
readonly text: "text-caption-lg";
|
|
18
|
-
};
|
|
19
|
-
readonly lg: {
|
|
20
|
-
readonly outerPad: {
|
|
21
|
-
readonly leading: "pl-1.5 pr-3 py-1.5";
|
|
22
|
-
readonly trailing: "pl-3 pr-1.5 py-1.5";
|
|
23
|
-
};
|
|
24
|
-
readonly gap: "gap-2";
|
|
25
|
-
readonly chipPad: "px-2.5 py-[3px]";
|
|
26
|
-
readonly text: "text-body-sm";
|
|
27
|
-
};
|
|
28
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export type BadgeGroupSize = 'md' | 'lg';
|
|
3
|
-
export type BadgeGroupTheme = 'light' | 'outline' | 'modern';
|
|
4
|
-
export type BadgeGroupBadgePosition = 'leading' | 'trailing';
|
|
5
|
-
export type BadgeGroupColor = 'brand' | 'gray' | 'error' | 'warning' | 'success';
|
|
6
|
-
export interface BadgeGroupProps {
|
|
7
|
-
/** Text shown inside the small inner chip, e.g. "New" */
|
|
8
|
-
badgeLabel: React.ReactNode;
|
|
9
|
-
/** The announcement message */
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
size?: BadgeGroupSize;
|
|
12
|
-
theme?: BadgeGroupTheme;
|
|
13
|
-
color?: BadgeGroupColor;
|
|
14
|
-
badgePosition?: BadgeGroupBadgePosition;
|
|
15
|
-
/** Optional trailing icon (e.g. an arrow) */
|
|
16
|
-
icon?: React.ReactNode;
|
|
17
|
-
onClick?: () => void;
|
|
18
|
-
className?: string;
|
|
19
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { ButtonProps } from './button.types';
|
|
3
|
-
/**
|
|
4
|
-
* Forwards its ref to the underlying `<button>`, so callers can focus or measure it
|
|
5
|
-
* and so libraries that clone the trigger and attach a ref — Tippy, Radix, and the
|
|
6
|
-
* like — can use a `Button` directly as their child.
|
|
7
|
-
*/
|
|
8
|
-
declare const ButtonBase: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
9
|
-
export default ButtonBase;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export declare const buttonStyles: (props?: {
|
|
2
|
-
size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
3
|
-
tone?: "primary" | "destructive";
|
|
4
|
-
iconOnly?: boolean;
|
|
5
|
-
variant?: "solid" | "outline" | "ghost" | "outline-primary" | "ghost-primary" | "plain" | "plain-black";
|
|
6
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
export type ButtonTone = "primary" | "destructive";
|
|
3
|
-
export type ButtonVariant = "solid" | "outline" | "outline-primary" | "ghost" | "ghost-primary" | "plain" | "plain-black";
|
|
4
|
-
export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
5
|
-
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
|
-
tone?: ButtonTone;
|
|
7
|
-
size?: ButtonSize;
|
|
8
|
-
variant?: ButtonVariant;
|
|
9
|
-
iconOnly?: boolean;
|
|
10
|
-
}
|
|
11
|
-
export interface ButtonSubComponentProps {
|
|
12
|
-
children: React.ReactNode;
|
|
13
|
-
}
|
|
14
|
-
/** `ForwardRefExoticComponent` rather than `FC`: the base forwards a ref to its `<button>`. */
|
|
15
|
-
export type ButtonCompound = React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> & {
|
|
16
|
-
Icon: React.FC<ButtonSubComponentProps>;
|
|
17
|
-
Text: React.FC<ButtonSubComponentProps>;
|
|
18
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export type CheckboxSize = '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 CheckboxProps {
|
|
5
|
-
id?: string;
|
|
6
|
-
checked: boolean;
|
|
7
|
-
indeterminate?: boolean;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
size?: CheckboxSize;
|
|
10
|
-
onCheckedChange?: (value: boolean) => void;
|
|
11
|
-
className?: string;
|
|
12
|
-
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import { DropdownProps } from './dropdown.types';
|
|
2
|
-
export default function Dropdown({ trigger, label, icon, avatarSrc, avatarInitials, header, items, open: openProp, defaultOpen, onOpenChange, disabled, align, className, menuClassName, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export declare const dropdownButtonTriggerStyles: (props?: {
|
|
2
|
-
open?: boolean;
|
|
3
|
-
disabled?: boolean;
|
|
4
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
5
|
-
export declare const dropdownIconTriggerStyles: (props?: {
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
8
|
-
export declare const dropdownAvatarTriggerStyles: (props?: {
|
|
9
|
-
open?: boolean;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
12
|
-
export declare const dropdownMenuStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
|
|
13
|
-
export declare const dropdownHeaderStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
|
|
14
|
-
export declare const dropdownItemsWrapperStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
|
|
15
|
-
export declare const dropdownItemStyles: (props?: {
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
} & import('class-variance-authority/types').ClassProp) => string;
|
|
18
|
-
export declare const dropdownShortcutStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
|
|
19
|
-
export declare const dropdownDividerStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { ClassValue } from 'clsx';
|
|
2
|
-
import { AvatarStatus } from '../Avatar/avatar.types';
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
export type DropdownTriggerType = "button" | "icon" | "avatar";
|
|
5
|
-
export interface DropdownMenuItem {
|
|
6
|
-
id: string;
|
|
7
|
-
/** Renders a horizontal divider instead of an item when true. */
|
|
8
|
-
divider?: boolean;
|
|
9
|
-
label?: string;
|
|
10
|
-
icon?: React.ReactNode;
|
|
11
|
-
/** Trailing shortcut hint (e.g. "⌘C"). */
|
|
12
|
-
shortcut?: string;
|
|
13
|
-
disabled?: boolean;
|
|
14
|
-
onClick?: () => void;
|
|
15
|
-
}
|
|
16
|
-
export interface DropdownHeader {
|
|
17
|
-
name: React.ReactNode;
|
|
18
|
-
subtitle?: React.ReactNode;
|
|
19
|
-
avatarSrc?: string;
|
|
20
|
-
avatarInitials?: React.ReactNode;
|
|
21
|
-
status?: AvatarStatus;
|
|
22
|
-
}
|
|
23
|
-
export interface DropdownProps {
|
|
24
|
-
/** "button" shows a labeled trigger, "icon" a kebab trigger, "avatar" the user's avatar. */
|
|
25
|
-
trigger?: DropdownTriggerType;
|
|
26
|
-
/** Label for the "button" trigger. */
|
|
27
|
-
label?: string;
|
|
28
|
-
/** Custom icon for the "icon" trigger (defaults to a vertical-dots icon). */
|
|
29
|
-
icon?: React.ReactNode;
|
|
30
|
-
/** Avatar image for the "avatar" trigger. */
|
|
31
|
-
avatarSrc?: string;
|
|
32
|
-
avatarInitials?: React.ReactNode;
|
|
33
|
-
/** Optional user summary rendered at the top of the menu. */
|
|
34
|
-
header?: DropdownHeader;
|
|
35
|
-
items: DropdownMenuItem[];
|
|
36
|
-
open?: boolean;
|
|
37
|
-
defaultOpen?: boolean;
|
|
38
|
-
onOpenChange?: (open: boolean) => void;
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
/** Which edge of the trigger the menu aligns to. */
|
|
41
|
-
align?: "start" | "end";
|
|
42
|
-
className?: ClassValue;
|
|
43
|
-
menuClassName?: ClassValue;
|
|
44
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { InputProps } from './input.types';
|
|
3
|
-
interface CardNumberInputProps {
|
|
4
|
-
size?: "sm" | "md";
|
|
5
|
-
label?: string;
|
|
6
|
-
required?: boolean;
|
|
7
|
-
hint?: string;
|
|
8
|
-
error?: boolean;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
placeholder?: string;
|
|
11
|
-
value?: string;
|
|
12
|
-
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
13
|
-
rightIcon?: React.ReactNode;
|
|
14
|
-
prefix?: React.ReactNode;
|
|
15
|
-
className?: InputProps["className"];
|
|
16
|
-
wrapperClassName?: InputProps["wrapperClassName"];
|
|
17
|
-
}
|
|
18
|
-
export declare function CardNumberInput({ size, label, required, hint, error, disabled, placeholder, value, onChange, rightIcon, prefix, className, wrapperClassName, }: CardNumberInputProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { InputProps } from './input.types';
|
|
2
|
-
import { default as React } from 'react';
|
|
3
|
-
/**
|
|
4
|
-
* Forwards its ref to the inner `<input>`, so callers can focus, select, or measure
|
|
5
|
-
* the field — inline-edit affordances and autofocus need this.
|
|
6
|
-
*/
|
|
7
|
-
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
8
|
-
export default Input;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { InputProps } from './input.types';
|
|
3
|
-
interface InputCounterProps {
|
|
4
|
-
size?: "sm" | "md";
|
|
5
|
-
label?: string;
|
|
6
|
-
required?: boolean;
|
|
7
|
-
hint?: string;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
error?: boolean;
|
|
10
|
-
className?: InputProps["className"];
|
|
11
|
-
wrapperClassName?: InputProps["wrapperClassName"];
|
|
12
|
-
value: string;
|
|
13
|
-
maxLength: number;
|
|
14
|
-
placeholder?: string;
|
|
15
|
-
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
16
|
-
}
|
|
17
|
-
export declare function InputCounter({ size, label, required, hint, disabled, error, className, wrapperClassName, value, maxLength, placeholder, onChange, }: InputCounterProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
-
export {};
|