@konstructio/ui 0.1.2-alpha.52 → 0.1.2-alpha.53

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { ListProps, TabsProps, TriggerProps } from './Tabs.types';
+import { Content, List, Trigger } from './components';
+import * as ReactTabs from '@radix-ui/react-tabs';
+/**
+ * A tabs component built on Radix UI primitives.
+ * Supports horizontal and vertical orientations with List, Trigger, and Content sub-components.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List orientation="horizontal">
+ *     <Tabs.Trigger tab="overview" label="Overview" isActive />
+ *     <Tabs.Trigger tab="settings" label="Settings" isActive={false} />
+ *     <Tabs.Trigger tab="billing" label="Billing" isActive={false} />
+ *   </Tabs.List>
+ *
+ *   <Tabs.Content value="overview">
+ *     Overview content here
+ *   </Tabs.Content>
+ *   <Tabs.Content value="settings">
+ *     Settings content here
+ *   </Tabs.Content>
+ *   <Tabs.Content value="billing">
+ *     Billing content here
+ *   </Tabs.Content>
+ * </Tabs>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tabs--docs Storybook}
+ */
+declare const Tabs: FC<TabsProps> & {
+    List: FC<ListProps>;
+    Trigger: FC<TriggerProps>;
+    Content: FC<ReactTabs.TabsContentProps>;
+};
+export { Content, List, Tabs, Trigger };

package/dist/components/Tabs/Tabs.types.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { triggerVariants } from './Tabs.variants';
+import { Theme } from '../../domain/theme';
+import * as ReactTabs from '@radix-ui/react-tabs';
+/**
+ * Props for the Tabs component.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <Tabs.List orientation="horizontal">
+ *     <Tabs.Trigger tab="tab1" label="Tab 1" isActive />
+ *     <Tabs.Trigger tab="tab2" label="Tab 2" isActive={false} />
+ *   </Tabs.List>
+ *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
+ *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
+ * </Tabs>
+ * ```
+ */
+export interface TabsProps extends ReactTabs.TabsProps, PropsWithChildren {
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/**
+ * Props for Tabs.Trigger component.
+ */
+export interface TriggerProps extends VariantProps<typeof triggerVariants>, React.HTMLAttributes<HTMLDivElement> {
+    /** Tab value identifier */
+    tab: string;
+    /** Display label for the tab */
+    label: string;
+    /** Whether this tab is active */
+    isActive: boolean;
+}
+/**
+ * Props for Tabs.List component.
+ */
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+    /** Tab list orientation */
+    orientation: 'horizontal' | 'vertical';
+}

package/dist/components/Tabs/Tabs.variants.d.ts

@@ -0,0 +1,12 @@
+export declare const rootVariants: (props?: ({
+    variant?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const contentVariants: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const listVariants: (props?: ({
+    variant?: "default" | "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const triggerVariants: (props?: ({
+    variant?: "default" | "active" | "inactive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Tabs/components/Content.d.ts

@@ -0,0 +1,4 @@
+import { TabsContentProps } from '@radix-ui/react-tabs';
+import { FC } from 'react';
+declare const Content: FC<TabsContentProps>;
+export { Content };

package/dist/components/Tabs/components/List.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ListProps } from '../Tabs.types';
+declare const List: FC<ListProps>;
+export { List };

package/dist/components/Tabs/components/Trigger.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TriggerProps } from '../Tabs.types';
+declare const Trigger: FC<TriggerProps>;
+export { Trigger };

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

@@ -0,0 +1,3 @@
+export * from './Content';
+export * from './List';
+export * from './Trigger';

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

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { TagProps } from './Tag.types';
+/**
+ * A small label component for categorization, status display, or filtering.
+ * Supports multiple color variants and optional icons.
+ *
+ * @example
+ * ```tsx
+ * <Tag id="1" label="New" color="green" />
+ * <Tag id="2" label="Pending" color="gold" leftIcon={<Clock />} />
+ * <Tag id="3" label="Error" color="pink" rightIcon={<X />} />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tag--docs Storybook}
+ */
+export declare const Tag: FC<TagProps>;

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Tag component.
+ * A small label component for categorization or status display.
+ *
+ * @example
+ * ```tsx
+ * <Tag
+ *   id="status-active"
+ *   label="Active"
+ *   color="green"
+ *   leftIcon={<CheckIcon />}
+ * />
+ * ```
+ */
+export type TagProps = {
+    /** Color variant for the tag */
+    color?: 'gray' | 'gray-800' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
+    /** Unique identifier for the tag */
+    id: string | number;
+    /** Text displayed in the tag */
+    label: string;
+    /** Icon displayed after the label */
+    rightIcon?: ReactNode;
+    /** Icon displayed before the label */
+    leftIcon?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Data attribute for the tag value */
+    'data-value'?: string;
+    /** Whether the tag is in a selected state */
+    isSelected?: boolean;
+};

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

@@ -0,0 +1,3 @@
+export declare const tagVariants: (props?: ({
+    color?: "default" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "pink" | "purple" | "gray-800" | "light blue" | "emerald" | "fuscia" | "light-orange" | "dark-sky-blue" | "mistery" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/TagSelect/TagSelect.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { TagSelectProps } from './TagSelect.types';
+/**
+ * An input component for selecting from a list of tag options.
+ * Supports single and multi-selection modes.
+ *
+ * @example
+ * ```tsx
+ * <TagSelect
+ *   label="Skills"
+ *   placeholder="Select skills..."
+ *   options={[
+ *     { label: 'React', color: 'blue' },
+ *     { label: 'TypeScript', color: 'purple' },
+ *     { label: 'Node.js', color: 'green' },
+ *   ]}
+ *   multiselect
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tagselect--docs Storybook}
+ */
+export declare const TagSelect: FC<TagSelectProps>;

package/dist/components/TagSelect/TagSelect.types.d.ts

@@ -0,0 +1,37 @@
+import { VariantProps } from 'class-variance-authority';
+import { TagProps } from '../Tag/Tag.types';
+import { tagSelectVariants } from './TagSelect.variants';
+/**
+ * Props for the TagSelect component.
+ * An input that allows selecting from a list of tags.
+ *
+ * @example
+ * ```tsx
+ * <TagSelect
+ *   label="Categories"
+ *   placeholder="Select categories..."
+ *   options={[
+ *     { label: 'Frontend', color: 'blue' },
+ *     { label: 'Backend', color: 'green' },
+ *     { label: 'DevOps', color: 'purple' },
+ *   ]}
+ *   multiselect
+ * />
+ * ```
+ */
+export interface TagSelectProps extends VariantProps<typeof tagSelectVariants> {
+    /** Label displayed above the input */
+    label?: string;
+    /** Available tag options to select from */
+    options: TagProps[];
+    /** Form field name for the input */
+    name?: string;
+    /** Placeholder text when no selection */
+    placeholder?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Whether multiple tags can be selected */
+    multiselect?: boolean;
+}

package/dist/components/TagSelect/TagSelect.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const tagSelectVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/TagSelect/components/Item/Item.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ItemProps } from './Item.types';
+export declare const Item: FC<ItemProps>;

package/dist/components/TagSelect/components/Item/Item.types.d.ts

@@ -0,0 +1,6 @@
+import { TagProps } from '../../../Tag/Tag.types';
+import { Theme } from '../../../../domain/theme';
+export type ItemProps = {
+    option: TagProps;
+    theme?: Theme;
+};

package/dist/components/TagSelect/components/Item/Item.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapperVariants: (props?: ({
+    isSelected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/TagSelect/components/List/List.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ListProps } from './List.types';
+export declare const List: FC<ListProps>;

package/dist/components/TagSelect/components/List/List.types.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '../../../../domain/theme';
+export type ListProps = {
+    theme?: Theme;
+};

package/dist/components/TagSelect/components/List/List.variants.d.ts

@@ -0,0 +1 @@
+export declare const wrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/TagSelect/components/Wrapper/Wrapper.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { WrapperProps } from './Wrapper.types';
+export declare const Wrapper: FC<WrapperProps>;

package/dist/components/TagSelect/components/Wrapper/Wrapper.types.d.ts

@@ -0,0 +1,7 @@
+import { ForwardedRef } from 'react';
+import { Theme } from '../../../../domain/theme';
+import { TagSelectProps } from '../../TagSelect.types';
+export type WrapperProps = Omit<TagSelectProps, 'options' | 'multiselect'> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+    theme?: Theme;
+};

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

@@ -0,0 +1,3 @@
+export * from './Item/Item';
+export * from './List/List';
+export * from './Wrapper/Wrapper';

package/dist/components/TagSelect/contexts/TagSelect.context.d.ts

@@ -0,0 +1,2 @@
+import { State } from './TagSelect.types';
+export declare const TagSelectContext: import('react').Context<State>;

package/dist/components/TagSelect/contexts/TagSelect.hook.d.ts

@@ -0,0 +1 @@
+export declare const useTagSelect: () => import('./TagSelect.types').State;

package/dist/components/TagSelect/contexts/TagSelect.provider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TagSelectProviderProps } from './TagSelect.types';
+export declare const TagSelectProvider: FC<TagSelectProviderProps>;

package/dist/components/TagSelect/contexts/TagSelect.types.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { TagProps } from '../../Tag/Tag.types';
+export type State = {
+    tags: TagProps[];
+    selectedTags: TagProps[];
+    isOpen: boolean;
+    inputRef: RefObject<HTMLInputElement | null> | null;
+    onSelectTag: (tag: TagProps) => void;
+    onRemoveTag: (tag: TagProps) => void;
+    onOpen: (value?: boolean) => void;
+};
+export type TagSelectProviderProps = PropsWithChildren & {
+    defaultOptions?: TagProps[];
+    multiselect?: boolean;
+};

package/dist/components/TagSelect/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TagSelect.hook';
+export * from './TagSelect.provider';

package/dist/components/TagSelect/hooks/useTagSelect.d.ts

@@ -0,0 +1,4 @@
+export declare const useTagSelect: () => {
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleOpen: (event: React.MouseEvent<HTMLElement>) => void;
+};

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { TextAreaProps } from './TextArea.types';
+/**
+ * A multiline text input component with optional label.
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <TextArea label="Description" placeholder="Enter description..." />
+ *
+ * // Textarea with more rows
+ * <TextArea label="Notes" rows={5} />
+ *
+ * // Controlled textarea
+ * <TextArea
+ *   label="Comments"
+ *   value={comments}
+ *   onChange={(e) => setComments(e.target.value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-textarea--docs Storybook}
+ */
+export declare const TextArea: FC<TextAreaProps>;

package/dist/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { textAreaVariants } from './TextArea.variants';
+/**
+ * Props for the TextArea component.
+ *
+ * @example
+ * ```tsx
+ * <TextArea label="Description" placeholder="Enter description..." />
+ * <TextArea label="Notes" rows={5} />
+ * <TextArea name="bio" initialValue="Default text" />
+ * ```
+ */
+export interface TextAreaProps extends InputHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textAreaVariants> {
+    /** Number of visible text rows (default: 3) */
+    rows?: number;
+    /** Label displayed above the textarea */
+    label?: string | ReactNode;
+    /** Form field name */
+    name?: string;
+    /** Initial/default value */
+    initialValue?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+}

package/dist/components/TextArea/TextArea.variants.d.ts

@@ -0,0 +1 @@
+export declare const textAreaVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { TimePickerProps } from './TimePicker.types';
+/**
+ * A scrollable time picker component with 12 or 24 hour format support.
+ * Features smooth scroll navigation through hours, minutes, and AM/PM options.
+ *
+ * @example
+ * ```tsx
+ * <TimePicker
+ *   label="Start Time"
+ *   name="startTime"
+ *   format="12"
+ *   time={selectedTime}
+ *   scrollBehavior="smooth"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-timepicker--docs Storybook}
+ */
+declare const TimePicker: FC<TimePickerProps>;
+export { TimePicker };

package/dist/components/TimePicker/TimePicker.js

@@ -1,8 +1,15 @@
 import { jsx as r } from "react/jsx-runtime";
-import { TimePickerProvider as m } from "./contexts/time-picker.provider.js";
-import { Wrapper as o } from "./components/Wrapper/Wrapper.js";
-const p = ({ format: i = "12", ...e }) => /* @__PURE__ */ r(m, { format: i, children: /* @__PURE__ */ r(o, { ...e }) });
-p.displayName = "KonstructTimePicker";
+import { TimePickerProvider as p } from "./contexts/time-picker.provider.js";
+import { Wrapper as s } from "./components/Wrapper/Wrapper.js";
+const P = ({
+  format: e = "12",
+  mode: i = "select",
+  showList: m = !0,
+  time: o,
+  onChange: t,
+  ...c
+}) => /* @__PURE__ */ r(p, { format: e, time: o, onChange: t, children: /* @__PURE__ */ r(s, { mode: i, showList: m, ...c }) });
+P.displayName = "KonstructTimePicker";
 export {
-  p as TimePicker
+  P as TimePicker
 };

package/dist/components/TimePicker/TimePicker.types.d.ts

@@ -0,0 +1,53 @@
+import { VariantProps } from 'class-variance-authority';
+import { timePickerVariants } from './TimePicker.variants';
+/**
+ * Props for the TimePicker component.
+ * A scrollable time picker with support for 12 and 24 hour formats.
+ *
+ * @example
+ * ```tsx
+ * <TimePicker
+ *   label="Meeting Time"
+ *   name="meetingTime"
+ *   format="12"
+ *   time={new Date()}
+ *   isRequired
+ * />
+ * ```
+ */
+export type TimePickerProps = VariantProps<typeof timePickerVariants> & {
+    /** Time format: '12' for AM/PM or '24' for military time */
+    format?: '12' | '24';
+    /** Input mode: 'select' for dropdown only, 'input' for typing */
+    mode?: 'select' | 'input';
+    /** Whether to show the dropdown list (default: true) */
+    showList?: boolean;
+    /** Scroll behavior when navigating times */
+    scrollBehavior?: 'smooth' | 'auto';
+    /** Currently selected time */
+    time?: Date;
+    /** Form field name */
+    name?: string;
+    /** Label displayed above the picker */
+    label?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Additional CSS classes for the scrollable list */
+    listClassName?: string;
+    /** Additional CSS classes for list items */
+    listItemClassName?: string;
+    /** Additional CSS classes for list item buttons */
+    listItemButtonClassName?: string;
+    /** Callback when time changes */
+    onChange?: (time: Date) => void;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Error message to display (overrides internal validation error) */
+    error?: string;
+    /** Placeholder text for input mode */
+    placeholder?: string;
+    /** Direction to open the dropdown list (default: 'bottom') */
+    listPosition?: 'top' | 'bottom';
+};

package/dist/components/TimePicker/TimePicker.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const timePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const ulVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const liVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/TimePicker/TimePicker.variants.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const e = r([
+import { c as t } from "../../index-D29mdTf5.js";
+const r = t([
   "border",
   "rounded",
   "p-2.5",
@@ -18,7 +18,7 @@ const e = r([
   "text-sm",
   "text-slate-800",
   "dark:text-slate-50"
-]), a = r([
+]), e = t([
   "snap-y",
   "snap-mandatory",
   "overflow-y-scroll",
@@ -26,33 +26,32 @@ const e = r([
   "flex",
   "flex-col",
   "dark:text-metal-50"
-]), o = r([
+]), o = t([
   "w-15",
   "h-10",
   "snap-start",
   "rounded",
   "transition-all",
   "transition-duration-100",
-  "focus-within:outline-2",
+  "outline-none",
   "border-2",
   "border-transparent",
-  "outline-none",
   "hover:bg-gray-100",
-  "hover:border-2",
-  "hover:border-white",
+  "focus-within:bg-gray-100",
   "data-[active=true]:bg-blue-600",
-  "data-[active=true]:hover:border-blue-200",
   "data-[active=true]:text-white",
   "data-[active=true]:font-medium",
-  "focus-visible:border-blue-200",
-  "focus-within:border-blue-200",
-  "dark:focus-within:border-aurora-50",
+  "data-[active=true]:hover:border-blue-200",
+  "data-[active=true]:focus-within:bg-blue-600",
+  "data-[active=true]:focus-within:border-blue-200",
   "dark:data-[active=true]:bg-aurora-500",
-  "dark:data-[active=true]:hover:border-aurora-50",
-  "dark:hover:border-transparent",
   "dark:data-[active=true]:text-metal-900",
-  "dark:hover:bg-metal-700"
-]), n = r([
+  "dark:data-[active=true]:hover:border-aurora-50",
+  "dark:data-[active=true]:focus-within:bg-aurora-500",
+  "dark:data-[active=true]:focus-within:border-aurora-50",
+  "dark:hover:bg-metal-700",
+  "dark:focus-within:bg-metal-700"
+]), i = t([
   "flex",
   "items-center",
   "justify-center",
@@ -62,12 +61,11 @@ const e = r([
   "px-6",
   "py-3",
   "outline-none",
-  "focus:border-blue-200",
   "text-sm"
 ]);
 export {
-  n as buttonVariants,
+  i as buttonVariants,
   o as liVariants,
-  e as timePickerVariants,
-  a as ulVariants
+  r as timePickerVariants,
+  e as ulVariants
 };

package/dist/components/TimePicker/components/HoursList/HoursList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { HourListProps } from './HoursList.types';
+declare const HoursList: FC<HourListProps>;
+export { HoursList };