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

package/dist/components/PhoneNumberInput/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { Country } from '../contexts';
+export declare const getPhoneMask: (country: Country) => string | undefined;

package/dist/components/PhoneNumberInput/utils/index.js

@@ -1,4 +1,4 @@
-import { l as t } from "../../../libphonenumber-FTwQ9nyV.js";
+import { l as t } from "../../../libphonenumber-C9G59k5J.js";
 const e = t.PhoneNumberUtil.getInstance(), m = (r) => {
   const o = r.code, n = e.getExampleNumber(o);
   if (!n)

package/dist/components/PieChart/PieChart.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Props } from './PieChart.types';
+/**
+ * A doughnut/pie chart component for data visualization.
+ * Built on Chart.js with support for center text labels.
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   values={[25, 75]}
+ *   colors={['#94a3b8', '#22c55e']}
+ *   title="75%"
+ *   subtitle="Progress"
+ *   cutoutPercentage={80}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-piechart--docs Storybook}
+ */
+export declare const PieChart: FC<Props>;

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

@@ -0,0 +1,90 @@
+type HexColor = `#${string}`;
+type CSSColor = `var(--${string})` | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})`;
+/**
+ * Props for the PieChart component.
+ * A doughnut/pie chart built on Chart.js for data visualization.
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   values={[30, 70]}
+ *   colors={['#ef4444', '#22c55e']}
+ *   title="70%"
+ *   subtitle="Complete"
+ *   cutoutPercentage={75}
+ * />
+ * ```
+ */
+export type Props = {
+    /**
+     * Array of hexadecimal colors for the borders of the pie chart segments
+     * @default ['#FFFFFF', '#FFFFFF']
+     */
+    borderColors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
+    /**
+     * Width of the border for pie chart segments in pixels
+     * @default 0
+     */
+    borderWidth?: number;
+    /**
+     * Array of hexadecimal colors for filling the pie chart segments
+     * @default ['#525252', '#00D492']
+     */
+    colors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
+    /**
+     * Percentage of the pie chart's center that should be cut out, creating a donut chart effect
+     * @default 80
+     */
+    cutoutPercentage?: number;
+    /**
+     * Whether to redraw the entire chart when props change
+     * @default true
+     */
+    redraw?: boolean;
+    /**
+     * Hexadecimal color for the subtitle text
+     * @default '#6B7280'
+     */
+    subtitleColor?: HexColor;
+    /**
+     * Font size for the subtitle in pixels
+     * @default 14
+     */
+    subtitleFontSize?: number;
+    /**
+     * Font weight for the subtitle
+     * @default 'normal'
+     */
+    subtitleFontWeight?: 'bold' | 'normal';
+    /**
+     * Hexadecimal color for the title text
+     * @default '#111827'
+     */
+    titleColor?: HexColor;
+    /**
+     * Font size for the title in pixels
+     * @default 16
+     */
+    titleFontSize?: number;
+    /**
+     * Font weight for the title
+     * @default 'bold'
+     */
+    titleFontWeight?: 'bold' | 'normal';
+    /**
+     * Array of numeric values representing data for each segment of the pie chart
+     * @required
+     */
+    values: number[];
+} /**
+ * Union type that enforces either:
+ * - No title and no subtitle
+ * - Title with optional subtitle
+ */ & ({
+    title?: undefined;
+    subtitle?: never;
+} | {
+    title: string;
+    subtitle?: string;
+});
+export {};

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { ProgressBarProps } from './ProgressBar.types';
+/**
+ * A progress bar component showing completion percentage.
+ *
+ * @example
+ * ```tsx
+ * // Basic progress bar
+ * <ProgressBar percent={50} />
+ *
+ * // With label
+ * <ProgressBar percent={75} label="Upload Progress" />
+ *
+ * // Completed state
+ * <ProgressBar percent={100} status="success" label="Complete" />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-progressbar--docs Storybook}
+ */
+export declare const ProgressBar: FC<ProgressBarProps>;

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

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { progressBarVariants } from './ProgressBar.variants';
+/**
+ * Props for the ProgressBar component.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar percent={75} label="Progress" />
+ * <ProgressBar percent={100} status="success" />
+ * ```
+ */
+export interface ProgressBarProps extends VariantProps<typeof progressBarVariants> {
+    /** CSS classes for the background bar */
+    backgroundBarClassName?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label text displayed above the progress bar */
+    label?: string;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Progress percentage (0-100) */
+    percent: number;
+    /** CSS classes for the percent text */
+    percentClassName?: string;
+    /** CSS classes for the progress bar fill */
+    progressBarClassName?: string;
+    /** Visual status of the progress bar */
+    status?: 'success' | 'progress';
+    /** Theme override for this component */
+    theme?: Theme;
+    /** CSS classes for the outer wrapper */
+    wrapperClassName?: string;
+}

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

@@ -0,0 +1,4 @@
+export declare const progressBarVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const progressBarProgress: (props?: ({
+    status?: "progress" | "error" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { RadioProps } from './Radio.types';
+/**
+ * A radio button component with label and optional description.
+ * Use RadioGroup to manage a group of radio buttons.
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="plan"
+ *   value="basic"
+ *   label="Basic Plan"
+ *   description="Free forever"
+ *   checked={plan === 'basic'}
+ *   onChange={(value) => setPlan(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radio--docs Storybook}
+ */
+declare const Radio: FC<RadioProps>;
+export { Radio };

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

@@ -0,0 +1,44 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { radioVariants } from './Radio.variants';
+/**
+ * Props for the Radio component.
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="plan"
+ *   value="basic"
+ *   label="Basic Plan"
+ *   checked={selected === 'basic'}
+ *   onChange={(value) => setSelected(value)}
+ * />
+ * ```
+ */
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'>, VariantProps<typeof radioVariants> {
+    /** Whether the radio is checked */
+    checked?: boolean;
+    /** Initial checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Whether the radio is disabled */
+    disabled?: boolean;
+    /** Label text or element */
+    label?: string | ReactNode;
+    /** CSS classes for the label text */
+    labelTextClassName?: string;
+    /** Form field name (groups radios together) */
+    name: string;
+    /** Description text below the label */
+    description?: string | ReactNode;
+    /** CSS classes for the description */
+    descriptionClassName?: string;
+    /** Value submitted when selected */
+    value: string;
+    /** CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when selected */
+    onChange?: (value: string) => void;
+}

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

@@ -0,0 +1,8 @@
+export declare const wrapperRadioVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const radioVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelRadioVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/RadioCard/RadioCard.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { RadioCardProps } from './RadioCard.types';
+/**
+ * A card-style radio button for visually prominent selection options.
+ * Use RadioCardGroup to manage a group of radio cards.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard
+ *   name="tier"
+ *   value="enterprise"
+ *   label="Enterprise"
+ *   description="Custom pricing"
+ *   checked={tier === 'enterprise'}
+ *   onChange={(value) => setTier(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocard--docs Storybook}
+ */
+declare const RadioCard: FC<RadioCardProps>;
+export { RadioCard };

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

@@ -0,0 +1,23 @@
+import { Theme } from '../../domain/theme';
+import { CardProps } from '../Card/Card.types';
+import { RadioProps } from '../Radio/Radio.types';
+/**
+ * Props for the RadioCard component.
+ * Combines Card styling with Radio functionality.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard
+ *   name="plan"
+ *   value="pro"
+ *   label="Pro Plan"
+ *   description="$29/month"
+ *   checked={selected === 'pro'}
+ *   onChange={(value) => setSelected(value)}
+ * />
+ * ```
+ */
+export type RadioCardProps = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
+    labelWrapperClassName?: string;
+    theme?: Theme;
+};

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

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

package/dist/components/RadioCardGroup/RadioCardGroup.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { RadioCardGroupProps } from './RadioCardGroup.types';
+/**
+ * A group of card-style radio buttons with shared state management.
+ *
+ * @example
+ * ```tsx
+ * <RadioCardGroup
+ *   name="plan"
+ *   direction="row"
+ *   options={[
+ *     { value: 'starter', label: 'Starter', description: 'For individuals' },
+ *     { value: 'team', label: 'Team', description: 'For small teams' },
+ *     { value: 'business', label: 'Business', description: 'For organizations' },
+ *   ]}
+ *   defaultChecked="team"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocardgroup--docs Storybook}
+ */
+export declare const RadioCardGroup: FC<RadioCardGroupProps>;

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

@@ -0,0 +1,30 @@
+import { Theme } from '../../domain/theme';
+import { RadioCardProps } from '../RadioCard/RadioCard.types';
+/**
+ * Props for the RadioCardGroup component.
+ *
+ * @example
+ * ```tsx
+ * <RadioCardGroup
+ *   name="pricing"
+ *   options={[
+ *     { value: 'basic', label: 'Basic', description: '$9/mo' },
+ *     { value: 'pro', label: 'Pro', description: '$29/mo' },
+ *     { value: 'enterprise', label: 'Enterprise', description: 'Custom' },
+ *   ]}
+ *   defaultChecked="pro"
+ *   onValueChange={(value) => setTier(value)}
+ * />
+ * ```
+ */
+export type RadioCardGroupProps = {
+    asChild?: boolean;
+    className?: string;
+    defaultChecked?: string;
+    direction?: 'row' | 'col';
+    name: string;
+    options: Omit<RadioCardProps, 'name' | 'checked' | 'defaultChecked'>[];
+    theme?: Theme;
+    wrapperClassName?: string;
+    onValueChange?: (value: string) => void;
+};

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

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

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { RadioGroupProps } from './RadioGroup.types';
+/**
+ * A group of radio buttons with shared state management.
+ *
+ * @example
+ * ```tsx
+ * // Vertical layout (default)
+ * <RadioGroup
+ *   name="subscription"
+ *   options={[
+ *     { value: 'monthly', label: 'Monthly', description: '$10/mo' },
+ *     { value: 'yearly', label: 'Yearly', description: '$100/yr' },
+ *   ]}
+ *   defaultChecked="monthly"
+ *   onValueChange={(value) => setSubscription(value)}
+ * />
+ *
+ * // Horizontal layout
+ * <RadioGroup
+ *   name="size"
+ *   direction="row"
+ *   options={[
+ *     { value: 'sm', label: 'Small' },
+ *     { value: 'md', label: 'Medium' },
+ *     { value: 'lg', label: 'Large' },
+ *   ]}
+ *   onValueChange={setSize}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiogroup--docs Storybook}
+ */
+export declare const RadioGroup: FC<RadioGroupProps>;

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

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { RadioProps } from '../Radio/Radio.types';
+/**
+ * Props for the RadioGroup component.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   name="plan"
+ *   options={[
+ *     { value: 'basic', label: 'Basic' },
+ *     { value: 'pro', label: 'Pro' },
+ *     { value: 'enterprise', label: 'Enterprise' },
+ *   ]}
+ *   defaultChecked="basic"
+ *   onValueChange={(value) => setPlan(value)}
+ * />
+ * ```
+ */
+export interface RadioGroupProps {
+    /** Merge props onto child element */
+    asChild?: boolean;
+    /** CSS classes for each radio option */
+    className?: RadioProps['className'];
+    /** Initially selected value */
+    defaultChecked?: string;
+    /** Layout direction (row or col) */
+    direction?: 'row' | 'col';
+    /** Label for the group */
+    label?: string | ReactNode;
+    /** Form field name (shared by all radios) */
+    name: string;
+    /** Array of radio options */
+    options: Omit<RadioProps, 'name' | 'checked' | 'defaultChecked'>[];
+    /** Theme override for this component */
+    theme?: Theme;
+    /** CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Callback when selection changes */
+    onValueChange?: (value: string) => void;
+}

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

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

package/dist/components/Range/Range.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { RangeProps } from './Range.types';
+/**
+ * A dual-thumb slider component for selecting a value range.
+ * Built on Radix UI Slider for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Range
+ *   label="Budget"
+ *   min={0}
+ *   max={10000}
+ *   defaultValue={[2000, 8000]}
+ *   showValue
+ *   name="budget"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-range--docs Storybook}
+ */
+export declare const Range: FC<RangeProps>;

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

@@ -0,0 +1,40 @@
+import { SliderProps as SliderPropsBase } from '@radix-ui/react-slider';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { rangeVariants } from './Range.variants';
+/**
+ * Props for the Range component.
+ * A dual-thumb slider for selecting a value range.
+ *
+ * @example
+ * ```tsx
+ * <Range
+ *   label="Price Range"
+ *   min={0}
+ *   max={1000}
+ *   defaultValue={[100, 500]}
+ *   showValue
+ *   size="md"
+ * />
+ * ```
+ */
+export interface RangeProps extends VariantProps<typeof rangeVariants> {
+    /** Additional CSS classes */
+    className?: string;
+    /** Initial range values [min, max] */
+    defaultValue?: SliderPropsBase['defaultValue'];
+    /** Label displayed above the range slider */
+    label?: string;
+    /** Maximum value for the range */
+    max?: SliderPropsBase['max'];
+    /** Minimum value for the range */
+    min?: SliderPropsBase['min'];
+    /** Form field name for the hidden input */
+    name?: string;
+    /** Whether to display the current range values */
+    showValue?: boolean;
+    /** Size of the slider track and thumbs */
+    size?: 'sm' | 'md' | 'lg';
+    /** Theme override for this component */
+    theme?: Theme;
+}

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

@@ -0,0 +1,8 @@
+export declare const rangeVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const rangeOutsideVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const trackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const thumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { SelectProps } from './Select.types';
+/**
+ * A dropdown select component with search, icons, and infinite scroll support.
+ * Also exported as `Dropdown` for convenience.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Select
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *   ]}
+ *   value={selected}
+ *   onChange={(e) => setSelected(e.target.value)}
+ * />
+ *
+ * // Searchable with custom icons
+ * <Select
+ *   label="Select region"
+ *   options={regions.map(r => ({
+ *     value: r.id,
+ *     label: r.name,
+ *     leftIcon: <RegionIcon />,
+ *     subLabel: r.description,
+ *   }))}
+ *   searchable
+ *   highlightSearch
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-select--docs Storybook}
+ */
+export declare const Select: FC<SelectProps>;