@flikk/ui 1.0.0-beta.32 → 1.0.0-beta.33

package/dist/tools.json

@@ -1881,6 +1881,21 @@
               "required": true,
               "description": "Current counter value (controlled)"
             },
+            "size": {
+              "kind": "enum",
+              "options": [
+                "sm",
+                "md",
+                "lg"
+              ],
+              "default": "md",
+              "description": "Control size, drawn from the shared `--form-*` scale so a counter lines up"
+            },
+            "editable": {
+              "kind": "boolean",
+              "default": true,
+              "description": "Whether clicking the number swaps it for a text field so the value can be"
+            },
             "state": {
               "kind": "enum",
               "options": [
@@ -2667,7 +2682,12 @@
             },
             "selected": {
               "kind": "boolean",
-              "description": "Whether the pill is selected (controlled state)"
+              "description": "Whether the pill is selected — CONTROLLED. Passing it makes the prop"
+            },
+            "defaultSelected": {
+              "kind": "boolean",
+              "default": false,
+              "description": "Initial selection for an UNCONTROLLED pill, which then owns its own state."
             },
             "readOnly": {
               "kind": "boolean",

package/dist/utils/composeEventHandlers.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Compose a component's own event handler with the consumer's.
+ *
+ * 🔴 §9: a prop the component also sets is MERGED, never clobbered. Spreading
+ * `{...rest}` before the element's own `onKeyUp` drops the consumer's handler
+ * silently; spreading it after lets the consumer silently replace load-bearing
+ * internal machinery. Composition is the only option that serves both.
+ *
+ * **Ours runs first**, so consumer code observes settled internal state.
+ *
+ * 🔴 **Both handlers ALWAYS run.** A `preventDefault()` in either does NOT skip
+ * the other — a consumer that cares reads `event.defaultPrevented`. Dropping the
+ * second handler conditionally would reintroduce the invisible-drop bug this
+ * helper exists to remove.
+ *
+ * @example
+ * <div onKeyUp={composeEventHandlers(syncFormatting, onKeyUpProp)} />
+ */
+export declare function composeEventHandlers<E>(ours: ((event: E) => void) | undefined, theirs: ((event: E) => void) | undefined): (event: E) => void;

package/dist/utils/composeEventHandlers.js

@@ -0,0 +1,26 @@
+/**
+ * Compose a component's own event handler with the consumer's.
+ *
+ * 🔴 §9: a prop the component also sets is MERGED, never clobbered. Spreading
+ * `{...rest}` before the element's own `onKeyUp` drops the consumer's handler
+ * silently; spreading it after lets the consumer silently replace load-bearing
+ * internal machinery. Composition is the only option that serves both.
+ *
+ * **Ours runs first**, so consumer code observes settled internal state.
+ *
+ * 🔴 **Both handlers ALWAYS run.** A `preventDefault()` in either does NOT skip
+ * the other — a consumer that cares reads `event.defaultPrevented`. Dropping the
+ * second handler conditionally would reintroduce the invisible-drop bug this
+ * helper exists to remove.
+ *
+ * @example
+ * <div onKeyUp={composeEventHandlers(syncFormatting, onKeyUpProp)} />
+ */
+function composeEventHandlers(ours, theirs) {
+    return (event) => {
+        ours === null || ours === void 0 ? void 0 : ours(event);
+        theirs === null || theirs === void 0 ? void 0 : theirs(event);
+    };
+}
+
+export { composeEventHandlers };

package/dist/utils/composeEventHandlers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 export { cn } from "./cn";
 export { debounce } from "./debounce";
+export { composeEventHandlers } from "./composeEventHandlers";
 export { formatTimestamp, formatDate, formatTime, formatDateCustom, formatRelativeTime, isToday, isYesterday, isThisWeek, getLastNDays, getThisWeek, getLastWeek, getThisMonth, getLastMonth, getThisYear, getLastYear, toDate, addDays, isSameDay, isWeekend, getDaysBetween, getWeekNumber, type DateInput, type TimestampOptions, type DateRange, } from "./dateUtils";
 export { findNextMatchingOption, isValidTypeaheadChar, TYPEAHEAD_TIMEOUT_MS, type TypeaheadOption, type FindNextMatchingOptionParams, } from "./typeaheadUtils";
 export { parseOpenAI, parseAnthropic, parseGemini, parseSSELine, SSE_PARSERS, type SSEFormat, type SSEParser, } from "./sseFormatParsers";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.33",
   "description": "A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete className override support.",
   "type": "module",
   "packageManager": "yarn@1.22.22",

package/src/styles/theme.css

@@ -290,7 +290,7 @@
    --kpi-value-line-height-lg: 1.2;
 
    /* Form element variables — fixed px so they don't scale with root font-size */
-   --form-min-h-sm: 32px;
+   --form-min-h-sm: 28px;
    /* h-8 in Tailwind */
    --form-min-h-md: 36px;
    /* h-9 in Tailwind */
@@ -307,8 +307,9 @@
    --form-px-lg: 16px;
    /* px-4 in Tailwind */
 
-   --form-py-sm: 8px;
-   /* py-2 in Tailwind */
+   --form-py-sm: 6px;
+   /* 6px, not py-2's 8px: the sm rung is a 28px box around a 12px/16px line,
+      so 8px left a 12px content box for a 16px line. */
    --form-py-md: 10px;
    /* py-2.5 in Tailwind */
    --form-py-lg: 12px;
@@ -331,7 +332,7 @@
       Tailwind's arbitrary text-[…] syntax is ambiguous between colour and
       font-size and a bare var() resolves to the COLOUR branch, silently
       no-oping the size (see TYPE ROLE SYSTEM). */
-   --form-text-size-sm: var(--text-sm);
+   --form-text-size-sm: var(--text-xs);
    --form-text-size-md: var(--text-sm);
    --form-text-size-lg: var(--text-base);
 
@@ -344,10 +345,30 @@
       that 20px→21px step. Values alias Tailwind's own pairing vars so the
       ramp stays byte-identical and --font-scale still flows through (the
       pairings are unitless ratios). */
-   --form-line-height-sm: var(--text-sm--line-height);
+   --form-line-height-sm: var(--text-xs--line-height);
    --form-line-height-md: var(--text-sm--line-height);
    --form-line-height-lg: var(--text-base--line-height);
 
+   /* CONTROL ICON SIZE — the GLYPH inside a field (chevron, clock, search,
+      check), NOT any button square.
+
+      🔴 Do not confuse with --button-icon-square-* , which is the icon-only
+      BUTTON's box (aliased to --form-min-h-*). This family is the drawn icon.
+
+      Icons were the one axis of a field's geometry that was NOT themeable: a
+      preset could retune height, padding, radius and type, and every decorator
+      stayed a hardcoded size-4/size-5. So a scaled-up theme got 16px chevrons
+      rattling around a 48px field. The ramp is deliberately gentler than the
+      type ramp (12/14/16 against 14/14/16) — an icon carries more optical mass
+      per px than a glyph of text, so matching type 1:1 reads heavy at sm.
+
+      Consumed as size-[var(--form-icon-size-…)] via formsBaseTheme.iconStyles.sizes.
+      Unlike --form-text-size-*, there is no line-height partner to pair — an
+      icon is a box, not a line of text. */
+   --form-icon-size-sm: 12px;
+   --form-icon-size-md: 14px;
+   --form-icon-size-lg: 16px;
+
    /* ============================================
      OTP SLOT SIZING
      OTP slots are SQUARE, so this is one size token per rung, not a height +
@@ -524,10 +545,13 @@
    --button-icon-p-md: 8px;
    --button-icon-p-lg: 10px;
 
-   /* Button icon-only sizes */
-   --button-icon-size-sm: var(--form-min-h-sm);
-   --button-icon-size-md: var(--form-min-h-md);
-   --button-icon-size-lg: var(--form-min-h-lg);
+   /* Icon-only Button SQUARE — the button's box, aliased to the form height so
+      an icon button lines up with the field beside it. Named `-square-`, not
+      `-size-`: it is not the size of the icon (that is --form-icon-size-*, and
+      two tokens both called `icon-size` meaning different things is a trap). */
+   --button-icon-square-sm: var(--form-min-h-sm);
+   --button-icon-square-md: var(--form-min-h-md);
+   --button-icon-square-lg: var(--form-min-h-lg);
 
    /* Badge variables.
       Radius derives from --radius-base like every other CONTROL (Button/Input/