@timeax/form-palette 0.0.2 → 0.0.4

package/src/variants/core/radio.tsx

@@ -1,38 +0,0 @@
-// src/variants/core/radio.ts
-
-import type { VariantModuleFor } from "@/schema/variant";
-import { ShadcnRadioVariant } from "@/presets/shadcn-variants/radio";
-
-/**
- * Built-in "radio" variant module.
- *
- * Uses the Shadcn-based implementation in presets/shadcn-variants/radio.tsx
- */
-export const radioVariantModule: VariantModuleFor<"radio"> = {
-   variant: "radio",
-   // Note: registry-level typing uses unknown, but the component itself is generic.
-   Variant: ShadcnRadioVariant as any,
-   defaults: {
-      layout: {
-         // Standard stacked field layout; the smart renderer still
-         // handles ordering/relative roots for helpers.
-         labelPlacement: "top",
-         sublabelPlacement: "right",
-         descriptionPlacement: "below",
-         helpTextPlacement: "below",
-         errorTextPlacement: "below",
-         inline: false,
-         fullWidth: true,
-
-         // Explicit layout hints
-         defaultSize: "md",
-         defaultDensity: "comfortable", // ← uses your FieldDensity union
-      },
-   },
-   meta: {
-      label: "Radio group",
-      description:
-         "Choose one option from a list of mutually exclusive choices.",
-      tags: ["choice", "select", "exclusive", "radio"],
-   },
-};

package/src/variants/core/select.tsx

@@ -1,15 +0,0 @@
-import ShadcnSelectVariant, { ShadcnSelectVariantProps } from "@/presets/shadcn-variants/select";
-import { VariantModuleFor } from "@/schema/variant";
-
-export type SelectVariantProps = ShadcnSelectVariantProps;
-
-export const selectModule: VariantModuleFor<"select"> = {
-   variant: "select",
-   Variant: ShadcnSelectVariant,
-
-   meta: {
-      label: "Select",
-      description: "Single-value dropdown based on Shadcn Select.",
-      tags: ["select", "dropdown", "single-value"],
-   },
-};

package/src/variants/core/slider.tsx

@@ -1,55 +0,0 @@
-// src/variants/core/slider.ts
-
-import type { ValidateResult } from "@/schema/input-field";
-import type { ShadcnSliderVariantProps } from "@/presets/shadcn-variants/slider";
-import { ShadcnSliderVariant } from "@/presets/shadcn-variants/slider";
-import { VariantModule } from "@/schema/variant";
-
-/**
- * Slider value type:
- * - `number | undefined` for now (single-value slider).
- *   If/when you add range support, this can be widened to [number, number].
- */
-export type SliderValue = number | undefined;
-
-
-/**
- * Basic validation:
- * - if required → must have a numeric value
- * - otherwise always OK
- */
-function validateSlider(
-   value: SliderValue,
-   ctx: { required?: boolean }
-): ValidateResult {
-   if (ctx.required) {
-      if (value === undefined || value === null) {
-         return "Required.";
-      }
-      if (typeof value !== "number" || Number.isNaN(value)) {
-         return "Invalid number.";
-      }
-   }
-
-   // You could optionally enforce min/max here using ctx.props
-   return true;
-}
-
-/**
- * Register the slider variant with the global registry.
- *
- * No layout defaults are provided here:
- * - layout (inline vs stacked, label placement, etc.) is controlled by
- *   the host via FieldLayoutConfig / InputField overrides instead.
- */
-export default {
-   variant: "slider",
-   Variant: ShadcnSliderVariant,
-   validate(value, ctx): ValidateResult {
-      return validateSlider(value as SliderValue, {
-         required: ctx.required,
-      });
-   },
-} as VariantModule<'slider'>;
-
-export type SliderVariantProps = ShadcnSliderVariantProps;

package/src/variants/core/textarea.tsx

@@ -1,22 +0,0 @@
-import ShadcnTextareaVariant from "@/presets/shadcn-variants/textarea";
-import { VariantModuleFor } from "@/schema/variant";
-
-
-export const textareaVariant: VariantModuleFor<"textarea"> = {
-   variant: "textarea",
-   Variant: ShadcnTextareaVariant 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: "Textarea",
-      description: "Multi-line text input area.",
-      tags: ["text", "multiline", "comments", "notes"],
-   },
-}

package/src/variants/core/toggle.tsx

@@ -1,50 +0,0 @@
-// src/variants/core/toggle.ts
-
-import type { VariantModuleFor } from "@/schema/variant";
-import type { FieldLayoutConfig } from "@/schema/input-field";
-import ShadcnToggleVariant from "@/presets/shadcn-variants/toggle";
-
-export const toggleLayoutDefaults: FieldLayoutConfig = {
-   // Render label + control in a single row
-   inline: true,
-
-   // Semantically: label is to the "right" of the control for this variant.
-   // (Your InputField can use this to decide macro-level positioning.)
-   labelPlacement: "right",
-
-   // Attach all helpers to the label root by default.
-   // Sublabel will still use its own placement (default: "right"),
-   // but it's logically anchored to the label block.
-   relativeRoots: {
-      sublabel: "label",
-      description: "label",
-      helpText: "label",
-      errorText: "label",
-   },
-
-   fullWidth: false,
-
-   // Within the label root, show error first, then description, then help,
-   // then sublabel (all still respecting their individual placements).
-   ordering: {
-      label: ["errorText", "description", "helpText", "sublabel"],
-      // For this variant we don't really use input-root helpers,
-      // but we keep the key for completeness.
-      input: [],
-   },
-};
-
-export const ToggleVariantModule: VariantModuleFor<"toggle"> = {
-   variant: "toggle",
-   Variant: ShadcnToggleVariant as any,
-   defaults: {
-      layout: toggleLayoutDefaults,
-   },
-   meta: {
-      label: "Toggle",
-      description: "Boolean on/off switch",
-      tags: ["boolean", "toggle", "switch"],
-   },
-};
-
-export default ToggleVariantModule;

package/src/variants/core/treeselect.tsx

@@ -1,11 +0,0 @@
-import ShadcnTreeSelectVariant from "@/presets/shadcn-variants/treeselect";
-import { VariantModule } from "@/schema/variant";
-
-
-
-const treeselectModule: VariantModule<'treeselect'> = {
-   variant: 'treeselect',
-   Variant: ShadcnTreeSelectVariant as any
-}
-
-export default treeselectModule

package/src/variants/helpers/selection-summary.tsx

@@ -1,236 +0,0 @@
-import * as React from "react";
-import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
-import {
-   Popover,
-   PopoverTrigger,
-   PopoverContent,
-} from "@/presets/ui/popover";
-
-type NormalizedMultiItem = {
-   key: string;
-   value: string | number;
-   labelNode: React.ReactNode;
-   labelText: string; // Used for width calculation
-   disabled?: boolean;
-};
-
-export interface SelectionSummaryProps {
-   selectedItems: NormalizedMultiItem[];
-   placeholder?: React.ReactNode;
-   onRemoveValue?: (value: NormalizedMultiItem) => void;
-}
-
-/**
- * Helper: Measure text width using a canvas.
- * Much faster than rendering hidden DOM elements.
- */
-function getTextWidth(text: string, font: string) {
-   if (typeof window === "undefined") return 0;
-   const canvas =
-      (window as any).__canvas ||
-      ((window as any).__canvas = document.createElement("canvas"));
-   const context = canvas.getContext("2d");
-   context.font = font;
-   const metrics = context.measureText(text);
-   return metrics.width;
-}
-
-export const SelectionSummary: React.FC<SelectionSummaryProps> = ({
-   selectedItems,
-   placeholder,
-   onRemoveValue,
-}) => {
-   const containerRef = React.useRef<HTMLSpanElement | null>(null);
-   const [visibleCount, setVisibleCount] = React.useState(0);
-   const [moreOpen, setMoreOpen] = React.useState(false);
-
-   // Measure available width and calculate how many items fit
-   React.useLayoutEffect(() => {
-      const el = containerRef.current;
-      if (!el) return;
-
-      const computeVisibleItems = () => {
-         const containerWidth = el.clientWidth;
-
-         // 1. Get current font styles to ensure accurate measurement
-         const computedStyle = window.getComputedStyle(el);
-         const font = `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
-
-         // 2. Calculate the "Buffer" (12 characters width)
-         // This is the space reserved for the "+ N more" trigger if truncation happens.
-         // We use 'M' or '0' as an average widest character approximation, or a standard string.
-         const bufferWidth = getTextWidth("000000000000", font);
-
-         // 3. Width of the separator (e.g., ", ")
-         const commaWidth = getTextWidth(", ", font);
-
-         let usedWidth = 0;
-         let count = 0;
-         const totalItems = selectedItems.length;
-
-         for (let i = 0; i < totalItems; i++) {
-            const item = selectedItems[i];
-            const itemWidth = getTextWidth(item.labelText, font);
-
-            // Is this the very last item in the entire list?
-            const isLastItem = i === totalItems - 1;
-
-            // If it's the last item, we don't need the buffer space.
-            // If it's NOT the last item, we must ensure we have space for this item AND the buffer.
-            // (Because if we can't fit the *next* item, we'll need the buffer to show the badge).
-            const spaceNeeded = isLastItem
-               ? itemWidth
-               : itemWidth + commaWidth + bufferWidth;
-
-            if (usedWidth + spaceNeeded <= containerWidth) {
-               usedWidth += itemWidth + commaWidth;
-               count++;
-            } else {
-               // No more space
-               break;
-            }
-         }
-
-         // Ensure we show at least 1 item if there are items, 
-         // unless even the first item is wider than the container (then CSS truncation handles it).
-         setVisibleCount(Math.max(1, count));
-      };
-
-      computeVisibleItems();
-
-      const ro = new ResizeObserver(computeVisibleItems);
-      ro.observe(el);
-      return () => ro.disconnect();
-   }, [selectedItems, selectedItems.length]); // Re-run if items change
-
-   const totalCount = selectedItems.length;
-
-   if (!totalCount) {
-      return (
-         <span ref={containerRef} className="truncate text-muted-foreground w-full block">
-            {placeholder ?? "Select options…"}
-         </span>
-      );
-   }
-
-   const visibleItems = selectedItems.slice(0, visibleCount);
-   // If visible count covers everything, overflow is 0
-   const overflowCount = totalCount - visibleItems.length;
-
-   // Safety check: if our calculation says we can show X, but X < Total, 
-   // strictly ensure we render the "More" chip.
-   // If calculation resulted in showing all items, overflow is 0.
-   const showMore = overflowCount > 0;
-
-   const handleRemove = (value: NormalizedMultiItem) => {
-      if (!onRemoveValue) return;
-      onRemoveValue(value);
-   };
-
-   return (
-      <span
-         ref={containerRef}
-         className="flex items-center w-full overflow-hidden whitespace-nowrap"
-      >
-         {/* Render Visible Items */}
-         {visibleItems.map((item, index) => (
-            <React.Fragment key={item.key}>
-               <span className="truncate flex-shrink-0">
-                  {item.labelNode}
-               </span>
-               {/* Add comma if it's not the last visible item */}
-               {index < visibleItems.length - 1 && (
-                  <span className="text-muted-foreground mr-1">,</span>
-               )}
-            </React.Fragment>
-         ))}
-
-         {/* Render Separator before "More" if needed */}
-         {showMore && (
-            <span className="text-muted-foreground mr-1">,</span>
-         )}
-
-         {/* Render "+N more" Chip */}
-         {showMore && (
-            <Popover open={moreOpen} onOpenChange={setMoreOpen}>
-               <PopoverTrigger asChild>
-                  <button
-                     type="button"
-                     className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 flex-shrink-0"
-                     onClick={(e) => e.stopPropagation()}
-                  >
-                     +{overflowCount} more
-                  </button>
-               </PopoverTrigger>
-               <PopoverContent
-                  align="start"
-                  className="w-56 max-h-64 overflow-y-auto p-2 text-sm"
-                  onClick={(e) => e.stopPropagation()}
-               >
-                  <div className="flex items-center justify-between mb-1">
-                     <span className="font-medium text-xs text-muted-foreground">
-                        Selected ({totalCount})
-                     </span>
-                     <button
-                        type="button"
-                        className="p-1 rounded hover:bg-muted"
-                        onClick={() => setMoreOpen(false)}
-                     >
-                        <X className="h-3 w-3" />
-                     </button>
-                  </div>
-
-                  <div className="space-y-1">
-                     {selectedItems.map((item) => (
-                        <div
-                           key={item.key}
-                           className={cn(
-                              "flex items-center justify-between gap-2 rounded px-2 py-1",
-                              "bg-muted/40"
-                           )}
-                        >
-                           <span className="truncate">{item.labelNode}</span>
-                           {onRemoveValue && (
-                              <button
-                                 type="button"
-                                 className="flex h-4 w-4 shrink-0 items-center justify-center rounded hover:bg-muted text-muted-foreground hover:text-foreground"
-                                 onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleRemove(item);
-                                 }}
-                              >
-                                 <X className="h-3 w-3" />
-                              </button>
-                           )}
-                        </div>
-                     ))}
-                  </div>
-               </PopoverContent>
-            </Popover>
-         )}
-      </span>
-   );
-};
-
-
-// src/variants/select-utils.ts (or wherever you keep small helpers)
-
-export type SelectPrimitive = string | number;
-
-/**
- * Remove a single value from a selection array.
- *
- * - Works even if the selection is undefined/null.
- * - Compares using String() so "1" and 1 are treated consistently.
- */
-export function removeSelectValue<T extends SelectPrimitive>(
-   current: readonly T[] | undefined | null,
-   valueToRemove: T
-): T[] {
-   if (!current || current.length === 0) return [];
-
-   const target = String(valueToRemove);
-
-   return current.filter((v) => String(v) !== target);
-}

package/src/variants/registry.ts

@@ -1,38 +0,0 @@
-// src/variants/registry.ts
-
-import type { VariantKey, VariantModule } from "@/schema/variant";
-
-/**
- * Internal storage for registered variants.
- */
-const registry = new Map<VariantKey, VariantModule<any>>();
-
-/**
- * Register (or overwrite) a variant module.
- *
- * Typically called from presets, e.g.:
- *
- *   registerVariant(textVariant);
- *   registerVariant(numberVariant);
- */
-export function registerVariant<K extends VariantKey>(
-    module: VariantModule<K>
-): void {
-    registry.set(module.variant, module as VariantModule<any>);
-}
-
-/**
- * Look up a variant module by key.
- */
-export function getVariant<K extends VariantKey>(
-    key: K
-): VariantModule<K> | undefined {
-    return registry.get(key) as VariantModule<K> | undefined;
-}
-
-/**
- * List all registered variant modules.
- */
-export function listVariants(): VariantModule<VariantKey>[] {
-    return Array.from(registry.values()) as VariantModule<VariantKey>[];
-}

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-   "extends": "../../tsconfig.base.json",
-   "compilerOptions": {
-      "outDir": "dist",
-      "declaration": true,
-      "declarationMap": true,
-      "sourceMap": true,
-      "rootDir": "src",
-      "jsx": "react-jsx"
-   },
-   "include": [
-      "src"
-   ]
-}