@timeax/form-palette 0.0.2 → 0.0.4

package/src/presets/ui/time-dropdowns.tsx

@@ -1,350 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import {
-    Select,
-    SelectTrigger,
-    SelectValue,
-    SelectContent,
-    SelectItem,
-} from "@/presets/ui/select";
-
-export interface TimeDropdownsProps {
-    /**
-     * Current date-time value.
-     * Only the time portion will be modified; date part is preserved.
-     */
-    value: Date | undefined;
-
-    /**
-     * Called whenever any of the time parts change.
-     */
-    onChange(next: Date | undefined): void;
-
-    /**
-     * Whether to show seconds dropdown.
-     * Default: false.
-     */
-    showSeconds?: boolean;
-
-    /**
-     * Step between minutes in the dropdown.
-     * Default: 5.
-     */
-    minuteStep?: number;
-
-    /**
-     * Step between seconds in the dropdown.
-     * Default: 5.
-     */
-    secondStep?: number;
-
-    /**
-     * If true, show 12-hour clock with AM/PM toggle.
-     * If false, show 24-hour clock (00–23).
-     * Default: false (24-hour).
-     */
-    use12Hour?: boolean;
-
-    /**
-     * Optional label to show above or beside the dropdowns.
-     */
-    label?: React.ReactNode;
-
-    /**
-     * Custom className for the outer wrapper.
-     */
-    className?: string;
-
-    /**
-     * Custom className for each SelectTrigger (hours/minutes/seconds).
-     */
-    triggerClassName?: string;
-
-    /**
-     * Compact / normal layout toggle.
-     * Just a quick spacing switch for now.
-     */
-    density?: "compact" | "normal";
-}
-
-function pad2(n: number): string {
-    return n.toString().padStart(2, "0");
-}
-
-function buildMinuteOptions(step: number): string[] {
-    const items: string[] = [];
-    for (let m = 0; m < 60; m += step) {
-        items.push(pad2(m));
-    }
-    return items;
-}
-
-function buildSecondOptions(step: number): string[] {
-    const items: string[] = [];
-    for (let s = 0; s < 60; s += step) {
-        items.push(pad2(s));
-    }
-    return items;
-}
-
-function buildHourOptions24(): string[] {
-    const items: string[] = [];
-    for (let h = 0; h < 24; h++) {
-        items.push(pad2(h));
-    }
-    return items;
-}
-
-function buildHourOptions12(): string[] {
-    const items: string[] = [];
-    for (let h = 1; h <= 12; h++) {
-        items.push(h.toString());
-    }
-    return items;
-}
-
-/**
- * Safely create a new Date instance with updated time parts,
- * preserving the original date portion when possible.
- */
-function withTime(
-    base: Date | undefined,
-    opts: { hours?: number; minutes?: number; seconds?: number },
-): Date {
-    const src = base ? new Date(base.getTime()) : new Date();
-    const h = opts.hours ?? src.getHours();
-    const m = opts.minutes ?? src.getMinutes();
-    const s = opts.seconds ?? src.getSeconds();
-    src.setHours(h, m, s, 0);
-    return src;
-}
-
-/**
- * Drop-in time dropdown cluster for use in the date popover.
- *
- * Renders hour / minute (and optionally second) Selects plus
- * an AM/PM toggle when `use12Hour` is true.
- */
-export const TimeDropdowns: React.FC<TimeDropdownsProps> = (props) => {
-    const {
-        value,
-        onChange,
-        showSeconds = false,
-        minuteStep = 5,
-        secondStep = 5,
-        use12Hour = false,
-        label,
-        className,
-        triggerClassName,
-        density = "normal",
-    } = props;
-
-    const minuteOptions = React.useMemo(
-        () => buildMinuteOptions(minuteStep),
-        [minuteStep],
-    );
-    const secondOptions = React.useMemo(
-        () => buildSecondOptions(secondStep),
-        [secondStep],
-    );
-
-    const hourOptions = React.useMemo(
-        () => (use12Hour ? buildHourOptions12() : buildHourOptions24()),
-        [use12Hour],
-    );
-
-    // Derive current parts from value.
-    let hours24 = value ? value.getHours() : 0;
-    let minutes = value ? value.getMinutes() : 0;
-    let seconds = value ? value.getSeconds() : 0;
-
-    let hourDisplay: string;
-    let period: "am" | "pm" | null = null;
-
-    if (use12Hour) {
-        period = hours24 >= 12 ? "pm" : "am";
-        let h12 = hours24 % 12;
-        if (h12 === 0) h12 = 12;
-        hourDisplay = h12.toString();
-    } else {
-        hourDisplay = pad2(hours24);
-    }
-
-    const minuteDisplay = pad2(minutes);
-    const secondDisplay = pad2(seconds);
-
-    const baseTriggerClasses = cn(
-        "h-8 w-[4.2rem] px-2 py-0 text-xs",
-        "whitespace-nowrap",
-        "border-input bg-background",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-    );
-
-    const triggerClasses = cn(
-        baseTriggerClasses,
-        triggerClassName,
-        density === "compact" && "h-7 text-[0.7rem] px-1.5",
-    );
-
-    const gapClass = density === "compact" ? "gap-1" : "gap-2";
-
-    const handleHourChange = (hStr: string) => {
-        let nextHours24: number;
-
-        if (use12Hour) {
-            const h12 = parseInt(hStr, 10) || 0;
-            if (!period) {
-                // fallback: assume AM
-                nextHours24 = h12 % 12;
-            } else {
-                if (period === "am") {
-                    nextHours24 = h12 % 12; // 12am → 0
-                } else {
-                    nextHours24 = h12 % 12 + 12; // 12pm → 12, 1pm → 13
-                }
-            }
-        } else {
-            nextHours24 = parseInt(hStr, 10) || 0;
-        }
-
-        const nextDate = withTime(value, { hours: nextHours24 });
-        onChange(nextDate);
-    };
-
-    const handleMinuteChange = (mStr: string) => {
-        const m = parseInt(mStr, 10) || 0;
-        const nextDate = withTime(value, { minutes: m });
-        onChange(nextDate);
-    };
-
-    const handleSecondChange = (sStr: string) => {
-        const s = parseInt(sStr, 10) || 0;
-        const nextDate = withTime(value, { seconds: s });
-        onChange(nextDate);
-    };
-
-    const handlePeriodChange = (p: string) => {
-        if (!use12Hour) return;
-        const nextPeriod = p === "pm" ? "pm" : "am";
-
-        // Convert from current hours24 + new period.
-        let h12 = hours24 % 12;
-        if (h12 === 0) h12 = 12;
-
-        let nextHours24: number;
-        if (nextPeriod === "am") {
-            nextHours24 = h12 % 12; // 12am → 0
-        } else {
-            nextHours24 = h12 % 12 + 12; // 12pm → 12, etc.
-        }
-
-        const nextDate = withTime(value, { hours: nextHours24 });
-        onChange(nextDate);
-    };
-
-    return (
-        <div
-            className={cn(
-                "flex w-full flex-col gap-2",
-                density === "compact" && "gap-1",
-                className,
-            )}
-            data-slot="time-dropdowns"
-        >
-            {label && (
-                <div className="text-xs font-medium text-muted-foreground">
-                    {label}
-                </div>
-            )}
-
-            <div
-                className={cn(
-                    "flex w-full items-center",
-                    gapClass,
-                )}
-                data-slot="time-dropdowns-row"
-            >
-                {/* Hour */}
-                <Select value={hourDisplay} onValueChange={handleHourChange}>
-                    <SelectTrigger
-                        className={triggerClasses}
-                        data-slot="time-hour"
-                    >
-                        <SelectValue placeholder="HH" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {hourOptions.map((h) => (
-                            <SelectItem key={h} value={h}>
-                                {use12Hour ? h.padStart(2, " ") : pad2(Number(h))}
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-
-                {/* Minute */}
-                <Select
-                    value={minuteDisplay}
-                    onValueChange={handleMinuteChange}
-                >
-                    <SelectTrigger
-                        className={triggerClasses}
-                        data-slot="time-minute"
-                    >
-                        <SelectValue placeholder="MM" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {minuteOptions.map((m) => (
-                            <SelectItem key={m} value={m}>
-                                {m}
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-
-                {/* Second (optional) */}
-                {showSeconds && (
-                    <Select
-                        value={secondDisplay}
-                        onValueChange={handleSecondChange}
-                    >
-                        <SelectTrigger
-                            className={triggerClasses}
-                            data-slot="time-second"
-                        >
-                            <SelectValue placeholder="SS" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {secondOptions.map((s) => (
-                                <SelectItem key={s} value={s}>
-                                    {s}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                )}
-
-                {/* AM/PM (optional) */}
-                {use12Hour && (
-                    <Select
-                        value={period ?? "am"}
-                        onValueChange={handlePeriodChange}
-                    >
-                        <SelectTrigger
-                            className={cn(
-                                triggerClasses,
-                                "w-[3.8rem]",
-                            )}
-                            data-slot="time-period"
-                        >
-                            <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="am">AM</SelectItem>
-                            <SelectItem value="pm">PM</SelectItem>
-                        </SelectContent>
-                    </Select>
-                )}
-            </div>
-        </div>
-    );
-};

package/src/variants/core/checkbox.tsx

@@ -1,54 +0,0 @@
-// src/variants/core/checkbox.ts
-
-import type { VariantModuleFor } from "@/schema/variant";
-import { ShadcnCheckboxVariant } from "@/presets/shadcn-variants/checkbox";
-import type {
-   ShadcnCheckboxVariantPublicProps,
-   CheckboxVariantPublicValue,
-} from "@/presets/shadcn-variants/checkbox";
-import type { VariantBaseProps } from "@/variants/shared";
-import { toggleLayoutDefaults } from "./toggle";
-
-/**
- * Public props type you can import elsewhere:
- *
- *   import type { CheckboxVariantProps } from "@/variants/core/checkbox";
- */
-export type CheckboxVariantProps = ShadcnCheckboxVariantPublicProps;
-
-/**
- * Concrete Variant component type, if you need it:
- *
- *   VariantBaseProps<CheckboxVariantPublicValue> & CheckboxVariantProps
- */
-type CheckboxVariantComponentProps =
-   VariantBaseProps<CheckboxVariantPublicValue> & CheckboxVariantProps;
-
-/**
- * Runtime module for the "checkbox" variant.
- *
- * This wires the Shadcn preset into the core registry with sensible defaults.
- */
-export const checkboxModule: VariantModuleFor<"checkbox"> = {
-   variant: "checkbox",
-
-   // ShadcnCheckboxVariant is generic; we fix it to the public aliases
-   // via this cast. At call sites you'll still get strong typing because
-   // the registry types know the concrete value/props.
-   Variant: ShadcnCheckboxVariant as unknown as React.ComponentType<CheckboxVariantComponentProps>,
-
-   resolveLayout({ props }) {
-      if (props.single) {
-         return toggleLayoutDefaults
-      }
-
-      return {};
-   },
-
-   meta: {
-      label: "Checkbox",
-      description:
-         "Single or group checkboxes with optional per-item tri-state support.",
-      tags: ["checkbox", "group", "boolean", "tri-state"],
-   },
-};

package/src/variants/core/chips.tsx

@@ -1,22 +0,0 @@
-import ShadcnChipsVariant from "@/presets/shadcn-variants/chips";
-import { VariantModuleFor } from "@/schema/variant";
-
-
-export const chipVariant: VariantModuleFor<"chips"> = {
-   variant: "chips",
-   Variant: ShadcnChipsVariant as any,
-   // Optional layout defaults – tweak as you like
-   defaults: {
-      layout: {
-         fullWidth: true,
-         // You can set defaultSize/defaultDensity here if you want:
-         // defaultSize: "md",
-         // defaultDensity: "normal",
-      },
-   },
-   meta: {
-      label: "Chips",
-      description: "Chips input allowing multiple selections.",
-      tags: ["chips", "multi-select", "tags"],
-   },
-}

package/src/variants/core/color.tsx

@@ -1,16 +0,0 @@
-// ———————————————————————————————
-// VariantModule wiring
-
-import { ShadcnColorVariant } from "@/presets/shadcn-variants/color";
-import { VariantModule } from "@/schema/variant";
-
-// ———————————————————————————————
-export const ColorVariantModule: VariantModule<"color"> = {
-   variant: "color",
-   Variant: ShadcnColorVariant,
-   meta: {
-      label: "Phone",
-      description: "Phone number input with country code and masking.",
-      tags: ["phone", "tel", "contact"],
-   },
-};

package/src/variants/core/date.tsx

@@ -1,25 +0,0 @@
-import ShadcnDateVariant from "@/presets/shadcn-variants/date";
-import { VariantModuleFor } from "@/schema/variant";
-
-
-export const dateVariant: VariantModuleFor<"date"> = {
-   variant: "date",
-   Variant: ShadcnDateVariant as any,
-
-   // Optional layout defaults – tweak as you like
-   defaults: {
-      layout: {
-         fullWidth: true,
-         // You can set defaultSize/defaultDensity here if you want:
-         // defaultSize: "md",
-         // defaultDensity: "normal",
-      },
-   },
-
-   meta: {
-      label: "Date",
-      description:
-         "Date input with calendar picker.",
-      tags: ["date", "calendar", "picker"],
-   },
-}

package/src/variants/core/file.tsx

@@ -1,9 +0,0 @@
-import ShadcnFileVariant from "@/presets/shadcn-variants/file";
-import { VariantModule } from "@/schema/variant";
-
-
-
-export const fileManagerModule: VariantModule<'file'> = {
-   Variant: ShadcnFileVariant as any,
-   variant: 'file'
-}

package/src/variants/core/keyvalue.tsx

@@ -1,12 +0,0 @@
-import ShadcnKeyValueVariant from "@/presets/shadcn-variants/keyvalue";
-import { VariantModule } from "@/schema/variant";
-
-
-export const keyValueModule: VariantModule<'keyvalue'> = {
-   variant: 'keyvalue',
-   Variant: ShadcnKeyValueVariant,
-
-   meta: {
-      label: ''
-   }
-} 

package/src/variants/core/multiselect.tsx

@@ -1,28 +0,0 @@
-
-
-// src/variants/multi-select.ts
-
-import type { VariantModule } from "@/schema/variant";
-import {
-   ShadcnMultiSelectVariant,
-   type ShadcnMultiSelectVariantProps,
-} from "@/presets/shadcn-variants/multiselect";
-
-export type MultiSelectValue = (string | number)[] | undefined;
-
-
-/**
- * Variant module for "multi-select".
- *
- * No defaults / layout overrides here — layout is driven by InputField +
- * host overrides, same as your other variants.
- */
-export const multiSelectVariantModule: VariantModule<"multi-select"> = {
-   variant: "multi-select",
-   Variant: ShadcnMultiSelectVariant,
-   meta: {
-      
-   }
-};
-
-export default multiSelectVariantModule;

package/src/variants/core/number.tsx

@@ -1,115 +0,0 @@
-// src/variants/core/text.tsx
-
-import * as React from "react";
-
-import type { Dict } from "@/schema/core";
-import type { VariantModule } from "@/schema/variant";
-import type { ValidateResult } from "@/schema/input-field";
-import { ShadcnTextVariant } from "@/presets/shadcn-variants/text";
-import type { ShadcnTextUiProps } from "@/presets/shadcn-variants/text";
-import { ShadcnNumberVariant, ShadcnNumberVariantProps } from "@/presets/shadcn-variants/number";
-
-/**
- * Text variant props (core layer).
- *
- * - Extends Dict so it can cleanly participate in the Variants registry.
- * - Extends the Shadcn UI props so the core variant can pass everything
- *   straight through to the underlying visual component.
- *
- * This is where we hang *semantic* flags that drive validation.
- */
-export interface TextVariantProps extends Dict, ShadcnTextUiProps {
-   /**
-    * If true, the value will be trimmed before validation.
-    * (Visual value is still whatever the user types; this is just for
-    * validation semantics.)
-    */
-   trim?: boolean;
-
-   /**
-    * Minimum allowed string length (after optional trimming).
-    */
-   minLength?: number;
-
-   /**
-    * Maximum allowed string length (after optional trimming).
-    */
-   maxLength?: number;
-}
-
-/**
- * Simple validation helper for the text variant.
- */
-function validateText(
-   value: number | undefined,
-   ctx: {
-      required?: boolean;
-      props: ShadcnNumberVariantProps;
-   }
-): ValidateResult {
-   const { required, props } = ctx;
-   const { minLength, maxLength } = props;
-
-   const raw = (value ?? "") + "";
-   const v = raw.trim();
-
-   // required
-   if (required && v.length === 0) {
-      return "This field is required.";
-   }
-
-   // minLength
-   if (typeof minLength === "number" && v.length > 0 && v.length < minLength) {
-      return `Please enter at least ${minLength} characters.`;
-   }
-
-   // maxLength
-   if (typeof maxLength === "number" && v.length > maxLength) {
-      return `Please enter no more than ${maxLength} characters.`;
-   }
-
-   return true;
-}
-
-/**
- * Core text variant module.
- *
- * - Uses ShadcnTextVariant as the visual component.
- * - Adds simple length-based validation.
- * - Provides layout defaults for InputField to use.
- */
-export const numberVariant: VariantModule<"number"> = {
-   variant: "number",
-
-   // Visual component: Shadcn-based text input
-   Variant: ShadcnNumberVariant as any,
-
-   // Validation logic (runs before/alongside per-field onValidate)
-   validate(value, { required, props, field, form }) {
-      // field + form are available if you need them later.
-      return validateText(value, { required, props });
-   },
-
-   // Layout defaults for this variant
-   defaults: {
-      layout: {
-         labelPlacement: "top",
-         sublabelPlacement: "right",
-         descriptionPlacement: "below",
-         helpTextPlacement: "below",
-         errorTextPlacement: "below",
-         inline: false,
-         fullWidth: true,
-         defaultSize: "md",
-         defaultDensity: "comfortable",
-      },
-   },
-
-   meta: {
-      label: "Number",
-      description: "Single-line number input",
-      tags: ["number", "input", "integer", "float"],
-   },
-};
-
-export default numberVariant;

package/src/variants/core/password.tsx

@@ -1,35 +0,0 @@
-// src/variants/core/password.tsx
-
-import type { VariantModuleFor } from "@/schema/variant";
-import { ShadcnPasswordVariant } from "@/presets/shadcn-variants/password";
-
-/**
- * Core module for the "password" variant.
- *
- * - Uses the ShadcnPasswordVariant UI (Input + reveal toggle + strength meter).
- * - Value type is string | undefined (from Variants["password"].value).
- * - Props are ShadcnPasswordVariantProps (from Variants["password"].props).
- */
-export const passwordVariant: VariantModuleFor<"password"> = {
-   variant: "password",
-   Variant: ShadcnPasswordVariant,
-
-   // Optional layout defaults – tweak as you like
-   defaults: {
-      layout: {
-         fullWidth: true,
-         // You can set defaultSize/defaultDensity here if you want:
-         // defaultSize: "md",
-         // defaultDensity: "normal",
-      },
-   },
-
-   meta: {
-      label: "Password",
-      description:
-         "Password input with reveal toggle and optional strength meter.",
-      tags: ["auth", "security", "password"],
-   },
-};
-
-export default passwordVariant;

package/src/variants/core/phone.tsx

@@ -1,16 +0,0 @@
-// ———————————————————————————————
-// VariantModule wiring
-
-import { ShadcnPhoneVariant } from "@/presets/shadcn-variants/phone";
-import { VariantModule } from "@/schema/variant";
-
-// ———————————————————————————————
-export const PhoneVariantModule: VariantModule<"phone"> = {
-   variant: "phone",
-   Variant: ShadcnPhoneVariant,
-   meta: {
-      label: "Phone",
-      description: "Phone number input with country code and masking.",
-      tags: ["phone", "tel", "contact"],
-   },
-};