cekat-ui 1.2.0 → 1.2.2

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,6 @@
+import { AlertProps } from './alert.types';
+declare const Alert: {
+    ({ title, description, color, layout, background, icon, iconVariant, showIcon, primaryAction, secondaryAction, actionVariant, actions, onClose, closeLabel, className, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Alert;

package/dist/components/Alert/alert.styles.d.ts

@@ -0,0 +1,47 @@
+import { AlertColor } from './alert.types';
+export declare const alertStyles: (props?: {
+    layout?: "full-width" | "floating";
+} & import('class-variance-authority/types').ClassProp) => string;
+/**
+ * Per-color surfaces. `surface`/`border` are only applied when the alert opts into
+ * `background="light"`; otherwise the card stays white with a neutral border.
+ */
+export declare const alertColorStyles: Record<AlertColor, {
+    /** Card fill for `background="light"`. */
+    surface: string;
+    /** Card border for `background="light"`. */
+    border: string;
+    /** Featured icon fill on a white card. */
+    iconSurface: string;
+    /** Featured icon fill on a tinted card, so the badge stays readable. */
+    iconSurfaceOnLight: string;
+    iconText: string;
+}>;
+/** Card fill/border used when `background="white"` (the Figma default). */
+export declare const alertWhiteSurfaceStyles = "bg-white border-light-200";
+/** Inner max-width container, only used by the `full-width` layout. */
+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";
+export declare const featuredIconStyles: (props?: {
+    layout?: "full-width" | "floating";
+    shape?: "square" | "circle";
+    variant?: "plain" | "featured";
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const alertContentStyles: (props?: {
+    layout?: "full-width" | "floating";
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const alertTextStyles: (props?: {
+    layout?: "full-width" | "floating";
+    closable?: boolean;
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const alertTitleStyles = "text-caption-lg font-bold text-light-800";
+export declare const alertDescriptionStyles = "text-caption-lg text-light-600";
+export declare const alertActionsStyles: (props?: {
+    layout?: "full-width" | "floating";
+    actionVariant?: "link" | "button";
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const alertLinkActionStyles: (props?: {
+    emphasis?: "primary" | "secondary";
+} & import('class-variance-authority/types').ClassProp) => string;
+export declare const alertCloseButtonStyles: (props?: {
+    layout?: "full-width" | "floating";
+} & import('class-variance-authority/types').ClassProp) => string;

package/dist/components/Alert/alert.types.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+export type AlertColor = "default" | "brand" | "gray" | "error" | "warning" | "success";
+/** Figma "Size" variant: a rounded floating card, or an edge-to-edge page banner. */
+export type AlertLayout = "floating" | "full-width";
+/**
+ * Card surface. `white` is the Figma default; `light` tints the card with the
+ * light shade of the current `color`.
+ */
+export type AlertBackground = "white" | "light";
+export type AlertActionVariant = "link" | "button";
+/**
+ * `featured` wraps the icon in the Figma "Featured icon" badge (fixed size, tinted
+ * fill, rounded shape). `plain` drops the badge so a custom illustration can be
+ * dropped straight in at its own size.
+ */
+export type AlertIconVariant = "featured" | "plain";
+export interface AlertAction {
+    label: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "color"> {
+    title: React.ReactNode;
+    /** Supporting text rendered under (floating) or beside (full-width) the title. */
+    description?: React.ReactNode;
+    color?: AlertColor;
+    layout?: AlertLayout;
+    /** Set to `light` to fill the card with the light shade of `color`. Defaults to `white`. */
+    background?: AlertBackground;
+    /** Overrides the default featured icon for the current `color`. */
+    icon?: React.ReactNode;
+    /** Set to `plain` to render `icon` without the featured-icon badge. Defaults to `featured`. */
+    iconVariant?: AlertIconVariant;
+    showIcon?: boolean;
+    /** Emphasised action, e.g. "View changes". */
+    primaryAction?: AlertAction;
+    /** Low-emphasis action, e.g. "Dismiss". */
+    secondaryAction?: AlertAction;
+    /** Defaults to `link` for `floating` and `button` for `full-width`. */
+    actionVariant?: AlertActionVariant;
+    /** Replaces the rendered actions entirely, ignoring `primaryAction`/`secondaryAction`. */
+    actions?: React.ReactNode;
+    /** Renders the close (X) button when provided. */
+    onClose?: () => void;
+    closeLabel?: string;
+    className?: string;
+}

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

@@ -0,0 +1,3 @@
+import { default as Alert } from './Alert';
+export { Alert };
+export type { AlertProps, AlertColor, AlertLayout, AlertBackground, AlertIconVariant, AlertAction, AlertActionVariant, } from './alert.types';

package/dist/components/Button/Button.d.ts

@@ -1,3 +1,9 @@
+import { default as React } from 'react';
 import { ButtonProps } from './button.types';
-declare const ButtonBase: ({ children, className, tone, variant, size, iconOnly, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Forwards its ref to the underlying `<button>`, so callers can focus or measure it
+ * and so libraries that clone the trigger and attach a ref — Tippy, Radix, and the
+ * like — can use a `Button` directly as their child.
+ */
+declare const ButtonBase: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default ButtonBase;

package/dist/components/Button/button.types.d.ts

@@ -11,7 +11,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 export interface ButtonSubComponentProps {
     children: React.ReactNode;
 }
-export type ButtonCompound = React.FC<ButtonProps> & {
+/** `ForwardRefExoticComponent` rather than `FC`: the base forwards a ref to its `<button>`. */
+export type ButtonCompound = React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> & {
     Icon: React.FC<ButtonSubComponentProps>;
     Text: React.FC<ButtonSubComponentProps>;
 };

package/dist/components/Input/Input.d.ts

@@ -1,2 +1,8 @@
 import { InputProps } from './input.types';
-export default function Input({ label, required, hint, rightIcon, size, error, disabled, compact, hideCalendarIcon, type, prefix, suffix, leadingAddon, leadingDropdown, trailingDropdown, trailingButton, maxLength, value, className, wrapperClassName, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+import { default as React } from 'react';
+/**
+ * Forwards its ref to the inner `<input>`, so callers can focus, select, or measure
+ * the field — inline-edit affordances and autofocus need this.
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

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

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

package/dist/index.d.ts

@@ -19,3 +19,4 @@ export * from './components/WebsiteInput';
 export * from './components/WebsiteCopyInput';
 export * from './components/InputDropdown';
 export * from './components/Dropdown';
+export * from './components/Alert';