cekat-ui 1.1.0 → 1.2.0

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/index.d.ts

@@ -3,7 +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';