@timeax/form-palette 0.0.1

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

@@ -0,0 +1,236 @@
+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/index.ts

@@ -0,0 +1,75 @@
+// src/variants/index.ts
+
+import {
+    registerVariant as _register,
+    getVariant as _get,
+    listVariants as _list,
+} from "@/variants/registry";
+import type {
+    VariantKey,
+    VariantModule,
+    VariantValueFor,
+    VariantPropsFor,
+} from "@/schema/variant";
+import { textVariant } from "@/variants/core/text";
+import { numberVariant } from "./core/number";
+import { PhoneVariantModule } from "./core/phone";
+import { ColorVariantModule } from "./core/color";
+import passwordVariant from "./core/password";
+import { dateVariant } from "./core/date";
+import { chipVariant } from "./core/chips";
+import { textareaVariant } from "./core/textarea";
+import ToggleVariantModule from "./core/toggle";
+import { radioVariantModule } from "./core/radio";
+import { checkboxModule } from "./core/checkbox";
+import { selectModule } from "./core/select";
+import multiSelectVariantModule from "./core/multiselect";
+import sliderModule from './core/slider'
+import { keyValueModule } from "./core/keyvalue";
+import customVariant from "./core/custom";
+import treeselectModule from "./core/treeselect";
+import { fileManagerModule } from "./core/file";
+
+export type { VariantKey, VariantModule, VariantValueFor, VariantPropsFor };
+export {
+    _register as registerVariant,
+    _get as getVariant,
+    _list as listVariants,
+};
+export { textVariant };
+
+
+const variants = [
+    textVariant,
+    numberVariant,
+    PhoneVariantModule,
+    ColorVariantModule,
+    passwordVariant,
+    dateVariant,
+    chipVariant,
+    textareaVariant,
+    ToggleVariantModule,
+    radioVariantModule,
+    checkboxModule,
+    selectModule,
+    multiSelectVariantModule,
+    sliderModule,
+    keyValueModule,
+    customVariant,
+    treeselectModule,
+    fileManagerModule
+]
+
+/**
+ * Register all core/built-in variants.
+ *
+ * Hosts can call this once at bootstrap:
+ *
+ *   import { registerCoreVariants } from "@timeax/form-palette/variants";
+ *   registerCoreVariants();
+ */
+export function registerCoreVariants(): void {
+    variants.forEach(item => _register(item as any))
+}
+
+registerCoreVariants();

package/src/variants/registry.ts

@@ -0,0 +1,38 @@
+// 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/src/variants/shared.ts

@@ -0,0 +1,126 @@
+// src/variants/shared.ts
+
+import React from "react";
+
+/**
+ * Size hint for field variants.
+ *
+ * Presets can interpret these however they like (font size, padding, etc.).
+ */
+export type FieldSize = "sm" | "md" | "lg";
+
+/**
+ * Density hint for field variants.
+ *
+ * - "compact"     → tight vertical spacing
+ * - "comfortable" → default spacing
+ * - "loose"       → extra breathing room
+ */
+export type FieldDensity = "compact" | "comfortable" | "loose";
+
+/**
+ * Logical source of a change event.
+ *
+ * Variants and utilities can tag changes to help the host reason
+ * about where a value came from.
+ */
+export type ChangeSource =
+    | "variant"
+    | "paste"
+    | "programmatic"
+    | "util"
+    | (string & {}); // allow custom tags
+
+/**
+ * Additional context passed along with value changes.
+ */
+export interface ChangeDetail<TMeta = unknown, TRaw = unknown> {
+    /**
+     * Logical source for this change.
+     */
+    source: ChangeSource;
+
+    /**
+     * Optional raw input that produced this value.
+     *
+     * Example: original keyboard input or pasted string.
+     */
+    raw?: TRaw;
+
+    nativeEvent?: React.SyntheticEvent;
+    /**
+     * Variant-specific metadata (e.g. cursor position).
+     */
+    meta?: TMeta;
+}
+
+/**
+ * Base props shared by all variant components.
+ *
+ * Each variant module will extend this with its own props type.
+ */
+export interface VariantBaseProps<TValue> {
+    /**
+     * Current logical value for this field.
+     */
+    value?: TValue | undefined;
+
+    /**
+     * Called whenever the variant wants to update the value.
+     *
+     * The detail payload describes where the change came from.
+     */
+    onValue?(value: TValue | undefined, detail?: ChangeDetail): void;
+
+    /**
+     * State flags.
+     */
+    disabled?: boolean;
+    defaultValue?: TValue;
+    readOnly?: boolean;
+    required?: boolean;
+
+    alias?: string;
+    main?: boolean;
+    /**
+     * Current error message for this field, if any.
+     */
+    error?: string;
+
+    /**
+     * Size & density hints.
+     *
+     * Variants are free to ignore these, but presets (e.g. Shadcn)
+     * will typically honour them.
+     */
+    size?: FieldSize;
+    density?: FieldDensity;
+}
+
+export interface Extras {
+    trailingIcons?: React.ReactNode[];
+    leadingIcons?: React.ReactNode[];
+    icon?: React.ReactNode;
+    iconGap?: number;
+    trailingIconSpacing?: number;
+    leadingIconSpacing?: number;
+    trailingControl?: React.ReactNode;
+    leadingControl?: React.ReactNode;
+    /**
+     * Optional className applied to the container that wraps the leading control.
+     * This does not affect the control node itself, only the wrapper div.
+     */
+    leadingControlClassName?: string;
+    /**
+     * Optional className applied to the container that wraps the trailing control.
+     * This does not affect the control node itself, only the wrapper div.
+     */
+    trailingControlClassName?: string;
+    px?: number;
+    py?: number
+    pb?: number;
+    pe?: number;
+    ps?: number;
+}
+
+export type ExtraFieldProps<Props> = Extras & Props;

package/tsconfig.json

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