cekat-ui 1.0.7 → 1.2.0

package/dist/components/InputDropdown/inputDropdown.types.d.ts

@@ -0,0 +1,45 @@
+import { ClassValue } from 'clsx';
+import * as React from "react";
+export type InputDropdownSize = "xs" | "sm" | "md";
+export type InputDropdownType = "default" | "search" | "tags";
+export interface InputDropdownOption {
+    id: string;
+    label: string;
+    /** Muted secondary text rendered after the label (e.g. "@nicholas"). */
+    supportingText?: string;
+    /** Leading icon rendered before the label. */
+    icon?: React.ReactNode;
+    /** Avatar image URL rendered before the label. */
+    avatar?: string;
+    /** Dot color rendered before the label (any CSS color). */
+    dot?: string;
+    disabled?: boolean;
+}
+export interface InputDropdownProps {
+    size?: InputDropdownSize;
+    /**
+     * "default" is a click-to-select dropdown, "search" adds a filter input,
+     * "tags" is a searchable multi-select with removable tags.
+     */
+    type?: InputDropdownType;
+    label?: string;
+    required?: boolean;
+    /** Tighter padding/height/radius and a smaller semibold label, independent of `size`'s font scale. Opt-in, does not affect default styling. */
+    compact?: boolean;
+    /** Rendered after the label (e.g. a help tooltip icon). */
+    helpIcon?: React.ReactNode;
+    hint?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Leading ornament shown on the trigger while no option is selected (e.g. a user icon or dot). */
+    leadingIcon?: React.ReactNode;
+    options: InputDropdownOption[];
+    /** Selected option id ("default" / "search" types). */
+    value?: string | null;
+    onChange?: (option: InputDropdownOption) => void;
+    /** Selected option ids ("tags" type). */
+    values?: string[];
+    onValuesChange?: (ids: string[]) => void;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,6 @@
+import { LoadingProps } from './loading.types';
+declare const Loading: {
+    ({ size, style, supportingText, label, className, }: LoadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Loading;

package/dist/components/Loading/LoadingSpinner.d.ts

@@ -0,0 +1,9 @@
+export declare const LineSimpleSpinner: ({ size }: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const LineSpinnerSpinner: ({ size }: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const DotCircleSpinner: ({ size }: {
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Loading/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Loading } from './Loading';
+export { Loading };
+export type { LoadingProps, LoadingSize, LoadingStyle } from './loading.types';

package/dist/components/Loading/loading.styles.d.ts

@@ -0,0 +1,6 @@
+import { LoadingSize } from './loading.types';
+export declare const loadingSizeMap: Record<LoadingSize, {
+    box: number;
+    gapClass: string;
+    textClass: string;
+}>;

package/dist/components/Loading/loading.types.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type LoadingSize = 'sm' | 'md' | 'lg' | 'xl';
+export type LoadingStyle = 'line-simple' | 'line-spinner' | 'dot-circle';
+export interface LoadingProps {
+    size?: LoadingSize;
+    style?: LoadingStyle;
+    supportingText?: boolean;
+    label?: React.ReactNode;
+    className?: string;
+}

package/dist/components/MultiSelectInput/MultiSelectInput.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { ClassValue } from 'clsx';
+export interface MultiSelectOption {
+    id: string;
+    label: string;
+    avatar?: string;
+}
+interface MultiSelectInputProps {
+    size?: 'sm' | 'md';
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    rightIcon?: React.ReactNode;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+    options: MultiSelectOption[];
+    value?: MultiSelectOption[];
+    onChange?: (value: MultiSelectOption[]) => void;
+}
+export declare function MultiSelectInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, className, wrapperClassName, options, value, onChange, }: MultiSelectInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MultiSelectInput/index.d.ts

@@ -0,0 +1 @@
+export { MultiSelectInput } from './MultiSelectInput';

package/dist/components/MultiSelectInput/multiSelectInput.styles.d.ts

@@ -0,0 +1,17 @@
+export declare const wrapperStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
+export declare const labelStyles: (props?: {
+    error?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const containerStyles: (props?: {
+    size?: "sm" | "md";
+    error?: boolean;
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const scrollAreaStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
+export declare const chipStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
+export declare const inputStyles: (props?: {
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const hintStyles: (props?: {
+    error?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;

package/dist/components/Radio/radio.types.d.ts

@@ -1,4 +1,6 @@
-export type RadioSize = 'sm' | 'md' | 'lg';
+export type RadioSize = 'sm' | 'md'
+/** @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`. */
+ | 'lg';
 export interface RadioGroupProps {
     value?: string;
     defaultValue?: string;

package/dist/components/Tab/Tab.d.ts

@@ -0,0 +1,6 @@
+import { TabProps } from './tab.types';
+declare const Tab: {
+    ({ children, variant, size, active, fullWidth, count, disabled, onClick, className, }: TabProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Tab;

package/dist/components/Tab/TabList.d.ts

@@ -0,0 +1,6 @@
+import { TabListProps } from './tab.types';
+declare const TabList: {
+    ({ children, variant, orientation, boxed, className, }: TabListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabList;

package/dist/components/Tab/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Tab } from './Tab';
+import { default as TabList } from './TabList';
+export { Tab, TabList };
+export type { TabProps, TabVariant, TabSize, TabListProps, TabListOrientation, } from './tab.types';

package/dist/components/Tab/tab.styles.d.ts

@@ -0,0 +1,15 @@
+import { TabVariant, TabSize } from './tab.types';
+export declare const tabSizeMap: Record<TabVariant, Record<TabSize, string>>;
+export declare const tabRadiusMap: Record<TabVariant, string>;
+export declare const tabColorMap: Record<TabVariant, {
+    active: string;
+    inactive: string;
+    hoverInactive: string;
+    hasFocusRing: boolean;
+}>;
+/** Count badge is always neutral gray in Figma, regardless of tab variant/active state. */
+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";
+export declare const tabListStyleMap: Record<TabVariant, {
+    gapClass: string;
+    hasHairline: boolean;
+}>;

package/dist/components/Tab/tab.types.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export type TabVariant = 'button-gray' | 'button-white' | 'button-primary' | 'underline' | 'underline-filled' | 'line';
+export type TabSize = 'sm' | 'md';
+export interface TabProps {
+    children: React.ReactNode;
+    variant?: TabVariant;
+    size?: TabSize;
+    active?: boolean;
+    fullWidth?: boolean;
+    count?: number | string;
+    disabled?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+export type TabListOrientation = 'horizontal' | 'vertical';
+export interface TabListProps {
+    children: React.ReactNode;
+    /** Controls the default gap and whether a bottom hairline is drawn under the row. */
+    variant?: TabVariant;
+    orientation?: TabListOrientation;
+    /** Wraps the tabs in a padded gray card (used by the "boxed" button-tab treatments). */
+    boxed?: boolean;
+    className?: string;
+}

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,6 @@
+import { TagProps } from './tag.types';
+declare const Tag: {
+    ({ children, size, shape, icon, checked, onCheckedChange, onClose, count, disabled, className, color, customColor, }: TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Tag;

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Tag } from './Tag';
+export { Tag };
+export type { TagProps, TagSize, TagShape, TagColor } from './tag.types';

package/dist/components/Tag/tag.styles.d.ts

@@ -0,0 +1,19 @@
+import { TagColor } from './tag.types';
+export declare const tagColorStyles: Record<TagColor, {
+    bg: string;
+    border: string;
+    text: string;
+}>;
+export declare const tagStyles: (props?: {
+    size?: "sm" | "md" | "lg";
+    shape?: "rounded" | "pill";
+    hasLeading?: boolean;
+    hasTrailing?: boolean;
+    interactive?: boolean;
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const tagCheckboxStyles: (props?: {
+    checked?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const tagCountStyles = "shrink-0 rounded-[3px] bg-light-100 px-1 text-light-800";
+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";

package/dist/components/Tag/tag.types.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export type TagSize = 'sm' | 'md' | 'lg';
+export type TagShape = 'rounded' | 'pill';
+export type TagColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'blue-gray' | 'blue-light' | 'indigo' | 'purple' | 'blue' | 'pink' | 'orange';
+export interface TagProps {
+    children: React.ReactNode;
+    size?: TagSize;
+    /** Corner style. 'rounded' = rounded-md (default), 'pill' = fully rounded. */
+    shape?: TagShape;
+    icon?: React.ReactNode;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    onClose?: () => void;
+    count?: number | string;
+    disabled?: boolean;
+    className?: string;
+    /** Named accent color token for the border, background and text. Defaults to 'gray'. */
+    color?: TagColor;
+    /** 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. */
+    customColor?: string;
+}

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,4 @@
+import { TextareaProps } from './textarea.types';
+import * as React from "react";
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Textarea } from './Textarea';
+export { Textarea };
+export type { TextareaProps } from './textarea.types';

package/dist/components/Textarea/textarea.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const textareaWrapperStyles = "flex flex-col gap-1 w-full max-w-[320px]";
+export declare const textareaLabelStyles: (props?: {
+    error?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const textareaContainerStyles: (props?: {
+    error?: boolean;
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const textareaStyles: (props?: {
+    resizable?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const textareaHintStyles: (props?: {
+    error?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;

package/dist/components/Textarea/textarea.types.d.ts

@@ -0,0 +1,17 @@
+import { ClassValue } from 'clsx';
+import * as React from "react";
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className"> {
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    helpIcon?: React.ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    resizable?: boolean;
+    /** Tighter padding/min-height and a smaller semibold label, for compact form layouts (e.g. a multi-field grid). Opt-in, does not affect default styling. */
+    compact?: boolean;
+    /** Number of visible text lines. Drives an explicit min-height (rows × 20px line-height) that overrides the default/compact min-height, instead of just being a floor the browser's intrinsic sizing can exceed unpredictably. */
+    rows?: number;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}

package/dist/components/Toggle/toggle.styles.d.ts

@@ -2,8 +2,9 @@ export declare const toggleTrackStyles: (props?: {
     size?: "sm" | "md" | "lg";
     checked?: boolean;
     disabled?: boolean;
+    variant?: "default" | "success";
 } & import('class-variance-authority/types').ClassProp) => string;
 export declare const toggleThumbStyles: (props?: {
     size?: "sm" | "md" | "lg";
-    checked?: boolean;
+    disabled?: boolean;
 } & import('class-variance-authority/types').ClassProp) => string;

package/dist/components/Toggle/toggle.types.d.ts

@@ -1,7 +1,11 @@
 import * as React from 'react';
-export type ToggleSize = 'sm' | 'md' | 'lg';
+export type ToggleSize = 'sm' | 'md'
+/** @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`. */
+ | 'lg';
+export type ToggleVariant = 'default' | 'success';
 export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     checked?: boolean;
     size?: ToggleSize;
+    variant?: ToggleVariant;
     onCheckedChange?: (checked: boolean) => void;
 }

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import { TooltipProps } from './tooltip.types';
 declare const Tooltip: {
-    ({ content, side, open, defaultOpen, disabled, delay, className, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    ({ content, supportingText, side, open, defaultOpen, disabled, delay, className, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Tooltip;

package/dist/components/Tooltip/tooltip.styles.d.ts

@@ -1,6 +1,8 @@
 export declare const tooltipContentStyles: (props?: {
     side?: "top" | "bottom" | "left" | "right";
+    hasSupportingText?: boolean;
 } & import('class-variance-authority/types').ClassProp) => string;
+export declare const tooltipSupportingTextStyles = "mt-1 font-medium text-light-100";
 export declare const tooltipArrowStyles: (props?: {
     side?: "top" | "bottom" | "left" | "right";
 } & import('class-variance-authority/types').ClassProp) => string;

package/dist/components/Tooltip/tooltip.types.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 export interface TooltipProps {
     content: React.ReactNode;
+    supportingText?: React.ReactNode;
     children: React.ReactElement;
     side?: TooltipSide;
     open?: boolean;

package/dist/components/WebsiteCopyInput/WebsiteCopyInput.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { ClassValue } from 'clsx';
+interface WebsiteCopyInputProps {
+    size?: "sm" | "md";
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    value?: string;
+    rightIcon?: React.ReactNode;
+    suffix?: React.ReactNode;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+export declare function WebsiteCopyInput({ size, label, required, hint, error, disabled, placeholder, value, rightIcon, suffix, onChange, className, wrapperClassName, }: WebsiteCopyInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/WebsiteCopyInput/index.d.ts

@@ -0,0 +1 @@
+export { WebsiteCopyInput } from '../WebsiteCopyInput/WebsiteCopyInput';

package/dist/components/WebsiteCopyInput/websiteCopyInput.styles.d.ts

@@ -0,0 +1,25 @@
+export declare const wrapperStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
+export declare const labelStyles: (props?: {
+    error?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const containerStyles: (props?: {
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const inputAreaStyles: (props?: {
+    size?: "sm" | "md";
+    error?: boolean;
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const dividerStyles: (props?: {
+    error?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const suffixStyles: (props?: {
+    size?: "sm" | "md";
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const inputStyles: (props?: {
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const hintStyles: (props?: {
+    error?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;

package/dist/components/WebsiteInput/WebsiteInput.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { ClassValue } from 'clsx';
+interface WebsiteInputProps {
+    size?: "sm" | "md";
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    value?: string;
+    rightIcon?: React.ReactNode;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+export declare function WebsiteInput({ size, label, required, hint, error, disabled, placeholder, value, rightIcon, onChange, className, wrapperClassName, }: WebsiteInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/WebsiteInput/index.d.ts

@@ -0,0 +1 @@
+export { WebsiteInput } from '../WebsiteInput/WebsiteInput';

package/dist/components/WebsiteInput/websiteInput.styles.d.ts

@@ -0,0 +1,24 @@
+export declare const wrapperStyles: (props?: import('class-variance-authority/types').ClassProp) => string;
+export declare const labelStyles: (props?: {
+    error?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const containerStyles: (props?: {
+    error?: boolean;
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const prefixStyles: (props?: {
+    size?: "sm" | "md";
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const dividerStyles = "w-px bg-light-200";
+export declare const inputAreaStyles: (props?: {
+    size?: "sm" | "md";
+    error?: boolean;
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const inputStyles: (props?: {
+    disabled?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const hintStyles: (props?: {
+    error?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;

package/dist/index.d.ts

@@ -3,3 +3,19 @@ export * from './components/Checkbox';
 export * from './components/Radio';
 export * from './components/Toggle';
 export * from './components/Tooltip';
+export * from './components/Tag';
+export * from './components/Badge';
+export * from './components/BadgeGroup';
+export * from './components/Loading';
+export * from './components/Avatar';
+export * from './components/AvatarGroup';
+export * from './components/AvatarLabelGroup';
+export * from './components/AvatarProfilePhoto';
+export * from './components/Tab';
+export * from './components/Input';
+export * from './components/Textarea';
+export * from './components/MultiSelectInput';
+export * from './components/WebsiteInput';
+export * from './components/WebsiteCopyInput';
+export * from './components/InputDropdown';
+export * from './components/Dropdown';