@cyclone-ui/helpers 0.3.11 → 0.3.13

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 # Changelog for Cyclone UI - Helpers
 
+## [0.3.12](https://github.com/storm-software/cyclone-ui/releases/tag/helpers%400.3.12) (10/11/2026)
+
+### Bug Fixes
+
+- **themes:** Update the token structure in the design system ([a226f474](https://github.com/storm-software/cyclone-ui/commit/a226f474))
+- **monorepo:** Update component descriptions and added design sync with Claude Design ([35ece709](https://github.com/storm-software/cyclone-ui/commit/35ece709))
+
+### Features
+
+- **cli:** Added a `create-tokens` command ([0c2dde08](https://github.com/storm-software/cyclone-ui/commit/0c2dde08))
+
+### Source Code Improvements
+
+- **monorepo:** Update form field usage to reduce overall number of components ([4e5fef79](https://github.com/storm-software/cyclone-ui/commit/4e5fef79))
+
 ## [0.3.11](https://github.com/storm-software/cyclone-ui/releases/tag/helpers%400.3.11) (10/07/2026)
 
 ### Updated Dependencies

package/README.md

@@ -27,7 +27,7 @@ This package is part of the <b>🌀 Cyclone UI</b> monorepo. The repository cont
 <!-- markdownlint-disable -->
 
 > [!IMPORTANT] 
-> This repository, and the apps, libraries, and tools contained within, is still in it's initial development phase. As a result, bugs and issues are expected with it's usage. When the main development phase completes, a proper release will be performed, the packages will be availible through NPM (and other distributions), and this message will be removed. However, in the meantime, please feel free to report any issues you may come across.
+> This repository, and the apps, libraries, and tools contained within, is still in it's initial development phase. As a result, bugs and issues are expected with it's usage. When the main development phase completes, a proper release will be performed, the packages will be available through NPM (and other distributions), and this message will be removed. However, in the meantime, please feel free to report any issues you may come across.
 
 <!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->

package/dist/form-control.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./form-size.cjs"),t=require("./get-sized.cjs");let n=require("@tamagui/core"),r=require("react"),i=require("react/jsx-runtime");const a=(0,r.createContext)(void 0),o=()=>(0,r.use)(a),s=e=>{let t=o()?.setLabelDefaults;(0,r.useLayoutEffect)(()=>{if(t)return t(e),()=>t(void 0)},[e,t])},c=e=>{let t=o()?.setControlOptions;(0,r.useLayoutEffect)(()=>{if(t)return t(e),()=>t(void 0)},[e,t])},l=Symbol(`field-placeholder-unset`),u=(e=l)=>{let t=o(),n=t?.setHasPlaceholder,i=e===l?l:!!e;return(0,r.useLayoutEffect)(()=>{if(i!==l&&n)return n(i),()=>n(!1)},[i,n]),t?.variant??`outlined`},d=()=>o()?.hasStartIcon??!1,f=()=>o()?.hasValidationMessage??!1,p=()=>{let e=o();return e?.labelVariant===`floating`?e.variant===`outlined`?`border`:`inset`:void 0},m=(t,n)=>t?t===`border`?3:13*e.getFormSizeScale(n):0,h=e=>e!=null&&e!==``,g=e=>{let t=o();return t?.labelVariant!==`floating`||!h(e)&&!!t.focused},_=e=>{let t=o();return(e??t?.labelVariant)===`floating`&&(h(t?.formattedValue)||!!t?.focused)},v=()=>{let e=o(),t=e?.disabled,n=e?.focused,r=e?.theme,i=(!r||r===`base`)&&!e?.hasValidationMessage,a=t?i?`borderDisabled`:`disabled`:i?n?`borderActive`:`border`:n?`active`:`accent`,s=t?i?`borderDisabled`:`disabled`:i?`borderActive`:`active`;return{iconColor:e?.hovered?s:a,hoverIconColor:s,isNeutral:i}},y=(0,n.styled)(n.View,{displayName:`FieldNotchedOutline`,render:`fieldset`,transition:`200ms`,position:`absolute`,top:0,right:0,bottom:0,left:0,margin:0,padding:0,minWidth:0,borderWidth:1,borderStyle:`solid`,borderRadius:`control`,pointerEvents:`none`}),b=(0,n.styled)(n.View,{displayName:`FieldNotchedOutline`,render:`legend`,transition:`100ms`,height:0,padding:0,overflow:`hidden`}),x=(0,n.createStyledHOC)(y,(a,s)=>{let c=o(),l=c?.labelContentRef,u=c?.labelVariant,d=c?.size,f=_(u),p=(0,r.useRef)(null),m=(0,n.useComposedRefs)(s,p),[h,g]=(0,r.useState)();(0,r.useLayoutEffect)(()=>{let e=p.current,t=l?.current;if(!e||!t)return;let n=()=>{let n=t.getBoundingClientRect().left-e.getBoundingClientRect().left,r=t.getBoundingClientRect().width;g(e=>e?.left===n&&e.width===r?e:{left:n,width:r})};if(n(),typeof ResizeObserver>`u`)return;let r=new ResizeObserver(n);return r.observe(e),r.observe(t),()=>r.disconnect()},[l,u]);let v=t.getSpaced(`sm`)*e.getFormSizeScale(d);return/* @__PURE__ */ (0,i.jsx)(y,{ref:m,"aria-hidden":!0,...a,children:/* @__PURE__ */ (0,i.jsx)(b,{marginLeft:Math.max(0,(h?.left??0)-v),width:f&&h?h.width+v*2:0})})},{displayName:`FieldNotchedOutline`});exports.FieldNotchedOutline=x,exports.FormControlContext=a,exports.getFieldLabelInset=m,exports.useFieldHasStartIcon=d,exports.useFieldHasValidationMessage=f,exports.useFieldIconColor=v,exports.useFieldLabelDefaults=s,exports.useFieldLabelFloated=_,exports.useFieldLabelPlacement=p,exports.useFieldOptions=c,exports.useFieldShouldShowPlaceholder=g,exports.useFieldVariant=u,exports.useFormControl=o;

package/dist/form-control.d.cts

@@ -0,0 +1,198 @@
+import { FormControlSize } from "./form-size.cjs";
+import { SelectOption } from "@stryke/types/form";
+import { ValidationDetail } from "@stryke/types/validations";
+import { TamaguiWebElement } from "@tamagui/core";
+import { ReactNode, Ref, RefObject } from "react";
+//#region src/form-control.d.ts
+/**
+ * The field's control style (see Material UI's `TextField` variants).
+ */
+type FieldVariant = "outlined" | "underlined" | "inlined";
+/**
+ * Where the field's label is displayed: floating over the control (resting
+ * inside it until the field is focused or has a value), or above it.
+ */
+type FieldLabelVariant = "floating" | "above";
+/**
+ * How a control makes room for its field's floating label: `"border"` when the
+ * label floats onto an outlined control's border, `"inset"` when it floats
+ * inside an underlined or inlined control.
+ */
+type FieldLabelPlacement = "border" | "inset";
+/**
+ * The state a form control (such as `Field`) shares with the input inside it.
+ *
+ * @remarks
+ * Modeled on Material UI's `FormControl` context: controls such as `Input`,
+ * `Switch` or `Select` read it with {@link useFormControl} and fall back to it
+ * for any prop they are not given, so the same uncontrolled control can be
+ * used on its own or connected to a form by wrapping it in a `Field`. It holds
+ * plain values and callbacks only, so it does not tie a control to any form
+ * state library.
+ */
+interface FormControlState {
+  /** The field name, also used as the control's `id`. */
+  name?: string;
+  /** The field's current (parsed) value. */
+  value?: any;
+  /** The field's value formatted for display. */
+  formattedValue?: string;
+  /** The field's initial value. */
+  defaultValue?: any;
+  /** The selectable options of a field, with `selected`/`disabled` resolved. */
+  items?: SelectOption[];
+  size?: FormControlSize;
+  theme?: string;
+  disabled?: boolean;
+  required?: boolean;
+  focused?: boolean;
+  /** Whether the pointer is over the field (mirrors `group-hover/field`). */
+  hovered?: boolean;
+  clearable?: boolean;
+  hasValidationMessage: boolean;
+  /** Ref the control attaches to its native input (applies masking). */
+  inputRef?: Ref<any>;
+  /** Set the field's value. */
+  onChange?: (value: any) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  /**
+   * Show (or, without a message, remove) a status message the control raises
+   * itself, such as a caps lock warning, keyed by its `code`.
+   */
+  setMessage?: (code: string, message?: ValidationDetail) => void;
+  /**
+   * Status adornments (validation icon, clear button) the field asks a text
+   * box style control to render at its end.
+   */
+  endAdornment?: ReactNode;
+  /**
+   * The field's status icon (validation, disabled), as `Field.ThemeIcon`
+   * renders it, for controls that show it beside an item.
+   */
+  statusIcon?: ReactNode;
+  variant: FieldVariant;
+  labelVariant: FieldLabelVariant | undefined;
+  /** How the field's control prefers its label (see {@link useFieldLabelDefaults}). */
+  labelDefaults: FieldLabelDefaults | undefined;
+  setLabelDefaults: (labelDefaults: FieldLabelDefaults | undefined) => void;
+  /** Field options the control supplies (see {@link useFieldOptions}). */
+  setControlOptions: (options: FieldControlOptions | undefined) => void;
+  hasPlaceholder: boolean;
+  endIconCount: number;
+  hasStartIcon: boolean;
+  labelContentRef: RefObject<TamaguiWebElement | null>;
+  setLabelVariant: (labelVariant: FieldLabelVariant | undefined) => void;
+  setHasPlaceholder: (hasPlaceholder: boolean) => void;
+  registerEndIcon: () => () => void;
+  registerStartIcon: () => () => void;
+}
+declare const FormControlContext: import("react").Context<FormControlState | undefined>;
+/**
+ * Get the enclosing form control's state, or `undefined` outside of one.
+ */
+declare const useFormControl: () => FormControlState | undefined;
+/**
+ * How a control prefers the enclosing field's label to be displayed.
+ */
+interface FieldLabelDefaults {
+  /** Used when `Field.Label` sets no `variant` (text boxes float it). */
+  variant?: FieldLabelVariant;
+  /**
+   * Show a compact label beside the control (checkbox, switch): no required
+   * marker, no bottom padding, and a disabled icon next to it. The value sets
+   * the alignment of the label's row.
+   */
+  inline?: {
+    alignItems?: "center";
+  } | {
+    alignContent?: "center";
+  };
+}
+/**
+ * Register how a control prefers its field's label to be displayed.
+ *
+ * @param labelDefaults - A stable (memoized or module level) value.
+ */
+declare const useFieldLabelDefaults: (labelDefaults: FieldLabelDefaults) => void;
+/**
+ * Field options (as `Field` takes them: `format`, `parse`, `mask`,
+ * `clearable`, ...) that a control supplies to its field.
+ */
+interface FieldControlOptions {
+  /** Options the control sets over the field's own props. */
+  overrides?: Record<string, unknown>;
+  /** Options used when the field's props leave them unset. */
+  defaults?: Record<string, unknown>;
+}
+/**
+ * Supply field options from a control, for example a date picker's
+ * `format`/`parse`/`mask` for its mode.
+ *
+ * @param options - A stable (memoized) value; functions inside are compared by
+ * reference.
+ */
+declare const useFieldOptions: (options: FieldControlOptions) => void;
+/**
+ * Get the enclosing field's control style, registering whether the control
+ * shows a placeholder (a floating label stays floated over one).
+ */
+declare const useFieldVariant: (placeholder?: unknown) => FieldVariant;
+/**
+ * Whether the enclosing field shows a `position="start"` icon before its
+ * control's text.
+ */
+declare const useFieldHasStartIcon: () => boolean;
+declare const useFieldHasValidationMessage: () => boolean;
+/**
+ * Get how the enclosing field's floating label needs the control to make room
+ * for it, or `undefined` outside a field or without a floating label.
+ */
+declare const useFieldLabelPlacement: () => FieldLabelPlacement | undefined;
+/**
+ * Get the extra height (and top text inset) a control adds for a floating
+ * label: a label floats onto an outlined control's border, so it only
+ * needs a few pixels, but inside an underlined or inlined control it needs a row.
+ *
+ * @param placement - The field's label placement.
+ * @param size - The control size.
+ * @returns The extra height, in pixels.
+ */
+declare const getFieldLabelInset: (placement: FieldLabelPlacement | undefined, size?: FormControlSize) => number;
+/**
+ * Whether a control should show its placeholder: always, unless a floating
+ * label rests over the (unfocused, empty) control.
+ */
+declare const useFieldShouldShowPlaceholder: (value: unknown) => boolean;
+/**
+ * Whether a floating label is floated: the field is focused or has a value.
+ *
+ * @param labelVariant - The label's variant, when the caller already knows it
+ * (the field only learns it once the label has mounted).
+ */
+declare const useFieldLabelFloated: (labelVariant?: FieldLabelVariant) => boolean;
+/**
+ * Resolves the color tokens used by field icons (and their dividers): `accent`
+ * when the field has a non-base theme or a validation message, otherwise
+ * `border`. `iconColor` is a single theme key so it can be passed directly
+ * to Tamagui v3 icons, which do not resolve flat `group-hover/` values.
+ */
+declare const useFieldIconColor: () => {
+  iconColor: string;
+  hoverIconColor: string;
+  isNeutral: boolean;
+};
+/**
+ * The border of an outlined control whose field label floats onto it.
+ *
+ * @remarks
+ * Drawn as a native `fieldset` whose `legend` opens a gap in the border under
+ * the floated label, like Material UI's `NotchedOutline`. The label then needs
+ * no background color behind it, so the form can sit on any surface. Render it
+ * as the last child of the control's (positioned) frame, sized to the frame's
+ * border box, and drop the frame's own border.
+ */
+declare const FieldNotchedOutline: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, keyof import("@tamagui/core").StackStyleBase | keyof import("@tamagui/core").RNTamaguiViewNonStyleProps> & Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, never> & Omit<import("@tamagui/core").WithThemeValues<Omit<import("@tamagui/core").StackStyleBase, never>> & import("@tamagui/core").WithFlatVariantValues<{}> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>, keyof import("@tamagui/core").RNTamaguiViewNonStyleProps>, import("@tamagui/core").StackStyleBase, Omit<{}, keyof import("@tamagui/core").StackStyleBase | keyof import("@tamagui/core").RNTamaguiViewNonStyleProps>, import("@tamagui/core").StaticConfigPublic>;
+//#endregion
+export { FieldControlOptions, FieldLabelDefaults, FieldLabelPlacement, FieldLabelVariant, FieldNotchedOutline, FieldVariant, FormControlContext, FormControlState, getFieldLabelInset, useFieldHasStartIcon, useFieldHasValidationMessage, useFieldIconColor, useFieldLabelDefaults, useFieldLabelFloated, useFieldLabelPlacement, useFieldOptions, useFieldShouldShowPlaceholder, useFieldVariant, useFormControl };
+//# sourceMappingURL=form-control.d.cts.map

package/dist/form-control.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.d.cts","names":[],"sources":["../src/form-control.tsx"],"mappings":";;;;;;;;;KA+BY;;;;;KAMA;;;;;;KAOA;;;;;;;;;;;;UAaK;;EAEf;;EAGA;;EAGA;;EAGA;;EAGA,QAAQ;EAER,OAAO;EACP;EACA;EACA;EACA;;EAEA;EACA;EACA;;EAGA,WAAW;;EAGX,YAAY;EACZ;EACA;;;;;EAMA,cAAc,cAAc,UAAU;;;;;EAMtC,eAAe;;;;;EAMf,aAAa;EAEb,SAAS;EACT,cAAc;;EAGd,eAAe;EACf,mBAAmB,eAAe;;EAGlC,oBAAoB,SAAS;EAC7B;EACA;EACA;EACA,iBAAiB,UAAU;EAC3B,kBAAkB,cAAc;EAChC,oBAAoB;EACpB;EACA;;cAGW,oCAAkB,QAAA;;;;cAOlB,sBAAc;;;;UAKV;;EAEf,UAAU;;;;;;EAOV;IAAW;;IAA4B;;;;;;;;cAQ5B,wBAAyB,eAAe;;;;;UAkBpC;;EAEf,YAAY;;EAGZ,WAAW;;;;;;;;;cAUA,kBAAmB,SAAS;;;;;cAoB5B,kBACX,0BACC;;;;;cAyBU;cAGA;;;;;cAOA,8BAA6B;;;;;;;;;;cAmB7B,qBACX,WAAW,iCACX,OAAO;;;;;cAWI,gCAAiC;;;;;;;cAejC,uBACX,eAAe;;;;;;;cAiBJ;;;;;;;;;;;;;;;cAyEA,6CAAmB,yCAAA,mCAAA,gBAAA,6BAAA,0DAAA,+CAAA,8BAAA,6BAAA,qCAAA,6BAAA,gBAAA,6BAAA,kDAAA,oDAAA,uCAAA,wCAAA,gDAAA,qDAAA,gBAAA,uCAAA,+CAAA,qDAAA"}

package/dist/form-control.d.mts

@@ -0,0 +1,198 @@
+import { FormControlSize } from "./form-size.mjs";
+import { TamaguiWebElement } from "@tamagui/core";
+import { ReactNode, Ref, RefObject } from "react";
+import { SelectOption } from "@stryke/types/form";
+import { ValidationDetail } from "@stryke/types/validations";
+//#region src/form-control.d.ts
+/**
+ * The field's control style (see Material UI's `TextField` variants).
+ */
+type FieldVariant = "outlined" | "underlined" | "inlined";
+/**
+ * Where the field's label is displayed: floating over the control (resting
+ * inside it until the field is focused or has a value), or above it.
+ */
+type FieldLabelVariant = "floating" | "above";
+/**
+ * How a control makes room for its field's floating label: `"border"` when the
+ * label floats onto an outlined control's border, `"inset"` when it floats
+ * inside an underlined or inlined control.
+ */
+type FieldLabelPlacement = "border" | "inset";
+/**
+ * The state a form control (such as `Field`) shares with the input inside it.
+ *
+ * @remarks
+ * Modeled on Material UI's `FormControl` context: controls such as `Input`,
+ * `Switch` or `Select` read it with {@link useFormControl} and fall back to it
+ * for any prop they are not given, so the same uncontrolled control can be
+ * used on its own or connected to a form by wrapping it in a `Field`. It holds
+ * plain values and callbacks only, so it does not tie a control to any form
+ * state library.
+ */
+interface FormControlState {
+  /** The field name, also used as the control's `id`. */
+  name?: string;
+  /** The field's current (parsed) value. */
+  value?: any;
+  /** The field's value formatted for display. */
+  formattedValue?: string;
+  /** The field's initial value. */
+  defaultValue?: any;
+  /** The selectable options of a field, with `selected`/`disabled` resolved. */
+  items?: SelectOption[];
+  size?: FormControlSize;
+  theme?: string;
+  disabled?: boolean;
+  required?: boolean;
+  focused?: boolean;
+  /** Whether the pointer is over the field (mirrors `group-hover/field`). */
+  hovered?: boolean;
+  clearable?: boolean;
+  hasValidationMessage: boolean;
+  /** Ref the control attaches to its native input (applies masking). */
+  inputRef?: Ref<any>;
+  /** Set the field's value. */
+  onChange?: (value: any) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  /**
+   * Show (or, without a message, remove) a status message the control raises
+   * itself, such as a caps lock warning, keyed by its `code`.
+   */
+  setMessage?: (code: string, message?: ValidationDetail) => void;
+  /**
+   * Status adornments (validation icon, clear button) the field asks a text
+   * box style control to render at its end.
+   */
+  endAdornment?: ReactNode;
+  /**
+   * The field's status icon (validation, disabled), as `Field.ThemeIcon`
+   * renders it, for controls that show it beside an item.
+   */
+  statusIcon?: ReactNode;
+  variant: FieldVariant;
+  labelVariant: FieldLabelVariant | undefined;
+  /** How the field's control prefers its label (see {@link useFieldLabelDefaults}). */
+  labelDefaults: FieldLabelDefaults | undefined;
+  setLabelDefaults: (labelDefaults: FieldLabelDefaults | undefined) => void;
+  /** Field options the control supplies (see {@link useFieldOptions}). */
+  setControlOptions: (options: FieldControlOptions | undefined) => void;
+  hasPlaceholder: boolean;
+  endIconCount: number;
+  hasStartIcon: boolean;
+  labelContentRef: RefObject<TamaguiWebElement | null>;
+  setLabelVariant: (labelVariant: FieldLabelVariant | undefined) => void;
+  setHasPlaceholder: (hasPlaceholder: boolean) => void;
+  registerEndIcon: () => () => void;
+  registerStartIcon: () => () => void;
+}
+declare const FormControlContext: import("react").Context<FormControlState | undefined>;
+/**
+ * Get the enclosing form control's state, or `undefined` outside of one.
+ */
+declare const useFormControl: () => FormControlState | undefined;
+/**
+ * How a control prefers the enclosing field's label to be displayed.
+ */
+interface FieldLabelDefaults {
+  /** Used when `Field.Label` sets no `variant` (text boxes float it). */
+  variant?: FieldLabelVariant;
+  /**
+   * Show a compact label beside the control (checkbox, switch): no required
+   * marker, no bottom padding, and a disabled icon next to it. The value sets
+   * the alignment of the label's row.
+   */
+  inline?: {
+    alignItems?: "center";
+  } | {
+    alignContent?: "center";
+  };
+}
+/**
+ * Register how a control prefers its field's label to be displayed.
+ *
+ * @param labelDefaults - A stable (memoized or module level) value.
+ */
+declare const useFieldLabelDefaults: (labelDefaults: FieldLabelDefaults) => void;
+/**
+ * Field options (as `Field` takes them: `format`, `parse`, `mask`,
+ * `clearable`, ...) that a control supplies to its field.
+ */
+interface FieldControlOptions {
+  /** Options the control sets over the field's own props. */
+  overrides?: Record<string, unknown>;
+  /** Options used when the field's props leave them unset. */
+  defaults?: Record<string, unknown>;
+}
+/**
+ * Supply field options from a control, for example a date picker's
+ * `format`/`parse`/`mask` for its mode.
+ *
+ * @param options - A stable (memoized) value; functions inside are compared by
+ * reference.
+ */
+declare const useFieldOptions: (options: FieldControlOptions) => void;
+/**
+ * Get the enclosing field's control style, registering whether the control
+ * shows a placeholder (a floating label stays floated over one).
+ */
+declare const useFieldVariant: (placeholder?: unknown) => FieldVariant;
+/**
+ * Whether the enclosing field shows a `position="start"` icon before its
+ * control's text.
+ */
+declare const useFieldHasStartIcon: () => boolean;
+declare const useFieldHasValidationMessage: () => boolean;
+/**
+ * Get how the enclosing field's floating label needs the control to make room
+ * for it, or `undefined` outside a field or without a floating label.
+ */
+declare const useFieldLabelPlacement: () => FieldLabelPlacement | undefined;
+/**
+ * Get the extra height (and top text inset) a control adds for a floating
+ * label: a label floats onto an outlined control's border, so it only
+ * needs a few pixels, but inside an underlined or inlined control it needs a row.
+ *
+ * @param placement - The field's label placement.
+ * @param size - The control size.
+ * @returns The extra height, in pixels.
+ */
+declare const getFieldLabelInset: (placement: FieldLabelPlacement | undefined, size?: FormControlSize) => number;
+/**
+ * Whether a control should show its placeholder: always, unless a floating
+ * label rests over the (unfocused, empty) control.
+ */
+declare const useFieldShouldShowPlaceholder: (value: unknown) => boolean;
+/**
+ * Whether a floating label is floated: the field is focused or has a value.
+ *
+ * @param labelVariant - The label's variant, when the caller already knows it
+ * (the field only learns it once the label has mounted).
+ */
+declare const useFieldLabelFloated: (labelVariant?: FieldLabelVariant) => boolean;
+/**
+ * Resolves the color tokens used by field icons (and their dividers): `accent`
+ * when the field has a non-base theme or a validation message, otherwise
+ * `border`. `iconColor` is a single theme key so it can be passed directly
+ * to Tamagui v3 icons, which do not resolve flat `group-hover/` values.
+ */
+declare const useFieldIconColor: () => {
+  iconColor: string;
+  hoverIconColor: string;
+  isNeutral: boolean;
+};
+/**
+ * The border of an outlined control whose field label floats onto it.
+ *
+ * @remarks
+ * Drawn as a native `fieldset` whose `legend` opens a gap in the border under
+ * the floated label, like Material UI's `NotchedOutline`. The label then needs
+ * no background color behind it, so the form can sit on any surface. Render it
+ * as the last child of the control's (positioned) frame, sized to the frame's
+ * border box, and drop the frame's own border.
+ */
+declare const FieldNotchedOutline: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, keyof import("@tamagui/core").StackStyleBase | keyof import("@tamagui/core").RNTamaguiViewNonStyleProps> & Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, never> & Omit<import("@tamagui/core").WithThemeValues<Omit<import("@tamagui/core").StackStyleBase, never>> & import("@tamagui/core").WithFlatVariantValues<{}> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>, keyof import("@tamagui/core").RNTamaguiViewNonStyleProps>, import("@tamagui/core").StackStyleBase, Omit<{}, keyof import("@tamagui/core").StackStyleBase | keyof import("@tamagui/core").RNTamaguiViewNonStyleProps>, import("@tamagui/core").StaticConfigPublic>;
+//#endregion
+export { FieldControlOptions, FieldLabelDefaults, FieldLabelPlacement, FieldLabelVariant, FieldNotchedOutline, FieldVariant, FormControlContext, FormControlState, getFieldLabelInset, useFieldHasStartIcon, useFieldHasValidationMessage, useFieldIconColor, useFieldLabelDefaults, useFieldLabelFloated, useFieldLabelPlacement, useFieldOptions, useFieldShouldShowPlaceholder, useFieldVariant, useFormControl };
+//# sourceMappingURL=form-control.d.mts.map

package/dist/form-control.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.d.mts","names":[],"sources":["../src/form-control.tsx"],"mappings":""}

package/dist/form-control.mjs

@@ -0,0 +1,2 @@
+import{getFormSizeScale as e}from"./form-size.mjs";import{getSpaced as t}from"./get-sized.mjs";import{View as n,createStyledHOC as r,styled as i,useComposedRefs as a}from"@tamagui/core";import{createContext as o,use as s,useLayoutEffect as c,useRef as l,useState as u}from"react";import{jsx as d}from"react/jsx-runtime";const f=o(void 0),p=()=>s(f),m=e=>{let t=p()?.setLabelDefaults;c(()=>{if(t)return t(e),()=>t(void 0)},[e,t])},h=e=>{let t=p()?.setControlOptions;c(()=>{if(t)return t(e),()=>t(void 0)},[e,t])},g=Symbol(`field-placeholder-unset`),_=(e=g)=>{let t=p(),n=t?.setHasPlaceholder,r=e===g?g:!!e;return c(()=>{if(r!==g&&n)return n(r),()=>n(!1)},[r,n]),t?.variant??`outlined`},v=()=>p()?.hasStartIcon??!1,y=()=>p()?.hasValidationMessage??!1,b=()=>{let e=p();return e?.labelVariant===`floating`?e.variant===`outlined`?`border`:`inset`:void 0},x=(t,n)=>t?t===`border`?3:13*e(n):0,S=e=>e!=null&&e!==``,C=e=>{let t=p();return t?.labelVariant!==`floating`||!S(e)&&!!t.focused},w=e=>{let t=p();return(e??t?.labelVariant)===`floating`&&(S(t?.formattedValue)||!!t?.focused)},T=()=>{let e=p(),t=e?.disabled,n=e?.focused,r=e?.theme,i=(!r||r===`base`)&&!e?.hasValidationMessage,a=t?i?`borderDisabled`:`disabled`:i?n?`borderActive`:`border`:n?`active`:`accent`,o=t?i?`borderDisabled`:`disabled`:i?`borderActive`:`active`;return{iconColor:e?.hovered?o:a,hoverIconColor:o,isNeutral:i}},E=i(n,{displayName:`FieldNotchedOutline`,render:`fieldset`,transition:`200ms`,position:`absolute`,top:0,right:0,bottom:0,left:0,margin:0,padding:0,minWidth:0,borderWidth:1,borderStyle:`solid`,borderRadius:`control`,pointerEvents:`none`}),D=i(n,{displayName:`FieldNotchedOutline`,render:`legend`,transition:`100ms`,height:0,padding:0,overflow:`hidden`}),O=r(E,(n,r)=>{let i=p(),o=i?.labelContentRef,s=i?.labelVariant,f=i?.size,m=w(s),h=l(null),g=a(r,h),[_,v]=u();c(()=>{let e=h.current,t=o?.current;if(!e||!t)return;let n=()=>{let n=t.getBoundingClientRect().left-e.getBoundingClientRect().left,r=t.getBoundingClientRect().width;v(e=>e?.left===n&&e.width===r?e:{left:n,width:r})};if(n(),typeof ResizeObserver>`u`)return;let r=new ResizeObserver(n);return r.observe(e),r.observe(t),()=>r.disconnect()},[o,s]);let y=t(`sm`)*e(f);return/* @__PURE__ */ d(E,{ref:g,"aria-hidden":!0,...n,children:/* @__PURE__ */ d(D,{marginLeft:Math.max(0,(_?.left??0)-y),width:m&&_?_.width+y*2:0})})},{displayName:`FieldNotchedOutline`});export{O as FieldNotchedOutline,f as FormControlContext,x as getFieldLabelInset,v as useFieldHasStartIcon,y as useFieldHasValidationMessage,T as useFieldIconColor,m as useFieldLabelDefaults,w as useFieldLabelFloated,b as useFieldLabelPlacement,h as useFieldOptions,C as useFieldShouldShowPlaceholder,_ as useFieldVariant,p as useFormControl};
+//# sourceMappingURL=form-control.mjs.map

package/dist/form-control.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.mjs","names":["FormControlContext","createContext","useFormControl","use","useFieldLabelDefaults","setLabelDefaults","useLayoutEffect","labelDefaults","useFieldOptions","setControlOptions","options","FIELD_PLACEHOLDER_UNSET","useFieldVariant","formControl","setHasPlaceholder","hasPlaceholder","placeholder","useFieldHasStartIcon","useFieldHasValidationMessage","useFieldLabelPlacement","getFieldLabelInset","placement","getFormSizeScale","size","hasFieldValue","value","useFieldShouldShowPlaceholder","useFieldLabelFloated","labelVariant","useFieldIconColor","disabled","focused","theme","isNeutral","iconColor","hoverIconColor","FieldNotchedOutlineFrame","styled","View","FieldNotchedOutlineLegend","FieldNotchedOutline","createStyledHOC","labelContentRef","floating","outlineRef","useRef","composedRef","useComposedRefs","forwardedRef","notch","setNotch","useState","outline","label","update","left","width","current","resizeObserver","gap","getSpaced","props"],"sources":[],"mappings":""}

package/dist/form-size.d.cts

@@ -1,5 +1,5 @@
-import { StyleEnv } from "./types.cjs";
-import { getFontSized } from "./get-font-sized.cjs";
+import { a as StyleEnv } from "./types-VwCaLyLv.cjs";
+import { t as getFontSized } from "./get-font-sized-BOOkb_Zr.cjs";
 import { styled } from "@tamagui/core";
 //#region src/form-size.d.ts
 /** The public size contract shared by form controls and field state. */

package/dist/form-size.d.mts

@@ -1,5 +1,5 @@
-import { StyleEnv } from "./types.mjs";
-import { getFontSized } from "./get-font-sized.mjs";
+import { a as StyleEnv } from "./types-VwCaLyLv.mjs";
+import { t as getFontSized } from "./get-font-sized-Bouwk_EY.mjs";
 import { styled } from "@tamagui/core";
 //#region src/form-size.d.ts
 /** The public size contract shared by form controls and field state. */

package/dist/get-button-sized.d.cts

@@ -1,5 +1,5 @@
 import { t as TokenInput } from "./token-value-sAa1meMz.cjs";
-import { StyleEnv } from "./types.cjs";
+import { a as StyleEnv } from "./types-VwCaLyLv.cjs";
 //#region src/get-button-sized.d.ts
 /**
  * Get the sizing related style values for a button component based on the size token or number

package/dist/get-button-sized.d.mts

@@ -1,5 +1,5 @@
 import { t as TokenInput } from "./token-value-sAa1meMz.mjs";
-import { StyleEnv } from "./types.mjs";
+import { a as StyleEnv } from "./types-VwCaLyLv.mjs";
 //#region src/get-button-sized.d.ts
 /**
  * Get the sizing related style values for a button component based on the size token or number

package/dist/get-colors.d.cts

@@ -1,4 +1,4 @@
-import { ColorScientificPaletteRecord, ColorStylePaletteRecord } from "./types.cjs";
+import { n as ColorScientificPaletteRecord, r as ColorStylePaletteRecord } from "./types-VwCaLyLv.cjs";
 //#region src/get-colors.d.ts
 declare const createScientificPalettes: (color: string) => ColorScientificPaletteRecord;
 declare const createStylePalettes: (color: string, scale?: number) => ColorStylePaletteRecord;

package/dist/get-colors.d.mts

@@ -1,4 +1,4 @@
-import { ColorScientificPaletteRecord, ColorStylePaletteRecord } from "./types.mjs";
+import { n as ColorScientificPaletteRecord, r as ColorStylePaletteRecord } from "./types-VwCaLyLv.mjs";
 //#region src/get-colors.d.ts
 declare const createScientificPalettes: (color: string) => ColorScientificPaletteRecord;
 declare const createStylePalettes: (color: string, scale?: number) => ColorStylePaletteRecord;

package/dist/get-font-sized-BOOkb_Zr.d.cts

@@ -0,0 +1,28 @@
+import { t as TokenInput } from "./token-value-sAa1meMz.cjs";
+import { a as StyleEnv } from "./types-VwCaLyLv.cjs";
+import { FontSizeTokens, TextStyle } from "@tamagui/core";
+import { Mutable } from "@stryke/types/base";
+//#region src/get-font-sized.d.ts
+/**
+ * Get the font size related styles
+ *
+ * @remarks
+ * Call-site `color` and `fontStyle` props take precedence over the values
+ * returned here because Tamagui v3 applies call-site props above variants.
+ *
+ * @param sizeTokenIn - The size token to use
+ * @param env - The `styled.dynamic` environment
+ * @returns The font size related styles
+ */
+declare const getFontSized: (sizeTokenIn?: FontSizeTokens | TokenInput, { font, fontFamily }?: StyleEnv) => Mutable<TextStyle>;
+/**
+ * Get the font size related styles from a size token
+ *
+ * @param sizeTokenIn - The size token to use
+ * @param env - The `styled.dynamic` environment
+ * @returns The font size related styles
+ */
+declare const getFontSizedFromSize: (sizeTokenIn?: TokenInput, env?: StyleEnv) => Mutable<TextStyle>;
+//#endregion
+export { getFontSizedFromSize as n, getFontSized as t };
+//# sourceMappingURL=get-font-sized-BOOkb_Zr.d.cts.map

package/dist/get-font-sized-BOOkb_Zr.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-font-sized-BOOkb_Zr.d.cts","names":[],"sources":["../src/get-font-sized.ts"],"mappings":";;;;;;;;;;;;;;;;cAsCa,eACX,cAAa,iBAAiB,cAC9B,MAAA,eAAsB,aACrB,QAAQ;;;;;;;;cAqEE,uBACX,cAAa,YACb,MAAK,aACJ,QAAQ"}

package/dist/get-font-sized-Bouwk_EY.d.mts

@@ -0,0 +1,28 @@
+import { t as TokenInput } from "./token-value-sAa1meMz.mjs";
+import { a as StyleEnv } from "./types-VwCaLyLv.mjs";
+import { FontSizeTokens, TextStyle } from "@tamagui/core";
+import { Mutable } from "@stryke/types/base";
+//#region src/get-font-sized.d.ts
+/**
+ * Get the font size related styles
+ *
+ * @remarks
+ * Call-site `color` and `fontStyle` props take precedence over the values
+ * returned here because Tamagui v3 applies call-site props above variants.
+ *
+ * @param sizeTokenIn - The size token to use
+ * @param env - The `styled.dynamic` environment
+ * @returns The font size related styles
+ */
+declare const getFontSized: (sizeTokenIn?: FontSizeTokens | TokenInput, { font, fontFamily }?: StyleEnv) => Mutable<TextStyle>;
+/**
+ * Get the font size related styles from a size token
+ *
+ * @param sizeTokenIn - The size token to use
+ * @param env - The `styled.dynamic` environment
+ * @returns The font size related styles
+ */
+declare const getFontSizedFromSize: (sizeTokenIn?: TokenInput, env?: StyleEnv) => Mutable<TextStyle>;
+//#endregion
+export { getFontSizedFromSize as n, getFontSized as t };
+//# sourceMappingURL=get-font-sized-Bouwk_EY.d.mts.map

package/dist/get-font-sized-Bouwk_EY.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-font-sized-Bouwk_EY.d.mts","names":[],"sources":["../src/get-font-sized.ts"],"mappings":""}

package/dist/get-font-sized.d.cts

@@ -1,28 +1,2 @@
-import { t as TokenInput } from "./token-value-sAa1meMz.cjs";
-import { StyleEnv } from "./types.cjs";
-import { FontSizeTokens, TextStyle } from "@tamagui/core";
-import { Mutable } from "@stryke/types/base";
-//#region src/get-font-sized.d.ts
-/**
- * Get the font size related styles
- *
- * @remarks
- * Call-site `color` and `fontStyle` props take precedence over the values
- * returned here because Tamagui v3 applies call-site props above variants.
- *
- * @param sizeTokenIn - The size token to use
- * @param env - The `styled.dynamic` environment
- * @returns The font size related styles
- */
-declare const getFontSized: (sizeTokenIn?: FontSizeTokens | TokenInput, { font, fontFamily }?: StyleEnv) => Mutable<TextStyle>;
-/**
- * Get the font size related styles from a size token
- *
- * @param sizeTokenIn - The size token to use
- * @param env - The `styled.dynamic` environment
- * @returns The font size related styles
- */
-declare const getFontSizedFromSize: (sizeTokenIn?: TokenInput, env?: StyleEnv) => Mutable<TextStyle>;
-//#endregion
-export { getFontSized, getFontSizedFromSize };
-//# sourceMappingURL=get-font-sized.d.cts.map
+import { n as getFontSizedFromSize, t as getFontSized } from "./get-font-sized-BOOkb_Zr.cjs";
+export { getFontSized, getFontSizedFromSize };

package/dist/get-font-sized.d.mts

@@ -1,28 +1,2 @@
-import { t as TokenInput } from "./token-value-sAa1meMz.mjs";
-import { StyleEnv } from "./types.mjs";
-import { FontSizeTokens, TextStyle } from "@tamagui/core";
-import { Mutable } from "@stryke/types/base";
-//#region src/get-font-sized.d.ts
-/**
- * Get the font size related styles
- *
- * @remarks
- * Call-site `color` and `fontStyle` props take precedence over the values
- * returned here because Tamagui v3 applies call-site props above variants.
- *
- * @param sizeTokenIn - The size token to use
- * @param env - The `styled.dynamic` environment
- * @returns The font size related styles
- */
-declare const getFontSized: (sizeTokenIn?: FontSizeTokens | TokenInput, { font, fontFamily }?: StyleEnv) => Mutable<TextStyle>;
-/**
- * Get the font size related styles from a size token
- *
- * @param sizeTokenIn - The size token to use
- * @param env - The `styled.dynamic` environment
- * @returns The font size related styles
- */
-declare const getFontSizedFromSize: (sizeTokenIn?: TokenInput, env?: StyleEnv) => Mutable<TextStyle>;
-//#endregion
-export { getFontSized, getFontSizedFromSize };
-//# sourceMappingURL=get-font-sized.d.mts.map
+import { n as getFontSizedFromSize, t as getFontSized } from "./get-font-sized-Bouwk_EY.mjs";
+export { getFontSized, getFontSizedFromSize };

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./types.cjs"),t=require("./token-value.cjs"),n=require("./get-nearest-token.cjs"),r=require("./get-font-sized.cjs"),i=require("./form-size.cjs"),a=require("./get-token-relative.cjs"),o=require("./get-button-sized.cjs"),s=require("./get-colors.cjs"),c=require("./get-sized.cjs");exports.ColorScientificPalette=e.ColorScientificPalette,exports.createScientificPalettes=s.createScientificPalettes,exports.createStylePalettes=s.createStylePalettes,exports.fontSizeToSize=c.fontSizeToSize,exports.formSizeVariants=i.formSizeVariants,exports.getButtonSized=o.getButtonSized,exports.getFontSized=r.getFontSized,exports.getFontSizedFromSize=r.getFontSizedFromSize,exports.getFormFontScale=i.getFormFontScale,exports.getFormFontSize=i.getFormFontSize,exports.getFormSizeScale=i.getFormSizeScale,exports.getFormSizeToken=i.getFormSizeToken,exports.getNearestToken=n.getNearestToken,exports.getRadius=c.getRadius,exports.getSizeFromFontSized=c.getSizeFromFontSized,exports.getSized=c.getSized,exports.getSpaced=c.getSpaced,exports.getTokenRelative=a.getTokenRelative,exports.normalizeTokenValue=t.normalizeTokenValue,exports.sizeToSpace=c.sizeToSpace;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./types.cjs"),t=require("./token-value.cjs"),n=require("./get-nearest-token.cjs"),r=require("./get-font-sized.cjs"),i=require("./form-size.cjs"),a=require("./get-token-relative.cjs"),o=require("./get-sized.cjs"),s=require("./form-control.cjs"),c=require("./get-button-sized.cjs"),l=require("./get-colors.cjs");exports.ColorScientificPalette=e.ColorScientificPalette,exports.FieldNotchedOutline=s.FieldNotchedOutline,exports.FormControlContext=s.FormControlContext,exports.createScientificPalettes=l.createScientificPalettes,exports.createStylePalettes=l.createStylePalettes,exports.fontSizeToSize=o.fontSizeToSize,exports.formSizeVariants=i.formSizeVariants,exports.getButtonSized=c.getButtonSized,exports.getFieldLabelInset=s.getFieldLabelInset,exports.getFontSized=r.getFontSized,exports.getFontSizedFromSize=r.getFontSizedFromSize,exports.getFormFontScale=i.getFormFontScale,exports.getFormFontSize=i.getFormFontSize,exports.getFormSizeScale=i.getFormSizeScale,exports.getFormSizeToken=i.getFormSizeToken,exports.getNearestToken=n.getNearestToken,exports.getRadius=o.getRadius,exports.getSizeFromFontSized=o.getSizeFromFontSized,exports.getSized=o.getSized,exports.getSpaced=o.getSpaced,exports.getTokenRelative=a.getTokenRelative,exports.normalizeTokenValue=t.normalizeTokenValue,exports.sizeToSpace=o.sizeToSpace,exports.useFieldHasStartIcon=s.useFieldHasStartIcon,exports.useFieldHasValidationMessage=s.useFieldHasValidationMessage,exports.useFieldIconColor=s.useFieldIconColor,exports.useFieldLabelDefaults=s.useFieldLabelDefaults,exports.useFieldLabelFloated=s.useFieldLabelFloated,exports.useFieldLabelPlacement=s.useFieldLabelPlacement,exports.useFieldOptions=s.useFieldOptions,exports.useFieldShouldShowPlaceholder=s.useFieldShouldShowPlaceholder,exports.useFieldVariant=s.useFieldVariant,exports.useFormControl=s.useFormControl;

package/dist/index.d.cts

@@ -1,10 +1,11 @@
 import { n as TokenValue, r as normalizeTokenValue, t as TokenInput } from "./token-value-sAa1meMz.cjs";
-import { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, LCHColor, StyleEnv } from "./types.cjs";
-import { getFontSized, getFontSizedFromSize } from "./get-font-sized.cjs";
+import { a as StyleEnv, i as LCHColor, n as ColorScientificPaletteRecord, r as ColorStylePaletteRecord, t as ColorScientificPalette } from "./types-VwCaLyLv.cjs";
+import { n as getFontSizedFromSize, t as getFontSized } from "./get-font-sized-BOOkb_Zr.cjs";
 import { FormControlSize, FormSizeVariant, formSizeVariants, getFormFontScale, getFormFontSize, getFormSizeScale, getFormSizeToken } from "./form-size.cjs";
+import { FieldControlOptions, FieldLabelDefaults, FieldLabelPlacement, FieldLabelVariant, FieldNotchedOutline, FieldVariant, FormControlContext, FormControlState, getFieldLabelInset, useFieldHasStartIcon, useFieldHasValidationMessage, useFieldIconColor, useFieldLabelDefaults, useFieldLabelFloated, useFieldLabelPlacement, useFieldOptions, useFieldShouldShowPlaceholder, useFieldVariant, useFormControl } from "./form-control.cjs";
 import { getButtonSized } from "./get-button-sized.cjs";
 import { createScientificPalettes, createStylePalettes } from "./get-colors.cjs";
 import { getNearestToken } from "./get-nearest-token.cjs";
 import { GetRadiusOptions, GetSizedOptions, fontSizeToSize, getRadius, getSizeFromFontSized, getSized, getSpaced, sizeToSpace } from "./get-sized.cjs";
 import { GetTokenRelativeOptions, TokenRelativeType, getTokenRelative } from "./get-token-relative.cjs";
-export { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, FormControlSize, FormSizeVariant, GetRadiusOptions, GetSizedOptions, GetTokenRelativeOptions, LCHColor, StyleEnv, TokenInput, TokenRelativeType, TokenValue, createScientificPalettes, createStylePalettes, fontSizeToSize, formSizeVariants, getButtonSized, getFontSized, getFontSizedFromSize, getFormFontScale, getFormFontSize, getFormSizeScale, getFormSizeToken, getNearestToken, getRadius, getSizeFromFontSized, getSized, getSpaced, getTokenRelative, normalizeTokenValue, sizeToSpace };
+export { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, FieldControlOptions, FieldLabelDefaults, FieldLabelPlacement, FieldLabelVariant, FieldNotchedOutline, FieldVariant, FormControlContext, FormControlSize, FormControlState, FormSizeVariant, GetRadiusOptions, GetSizedOptions, GetTokenRelativeOptions, LCHColor, StyleEnv, TokenInput, TokenRelativeType, TokenValue, createScientificPalettes, createStylePalettes, fontSizeToSize, formSizeVariants, getButtonSized, getFieldLabelInset, getFontSized, getFontSizedFromSize, getFormFontScale, getFormFontSize, getFormSizeScale, getFormSizeToken, getNearestToken, getRadius, getSizeFromFontSized, getSized, getSpaced, getTokenRelative, normalizeTokenValue, sizeToSpace, useFieldHasStartIcon, useFieldHasValidationMessage, useFieldIconColor, useFieldLabelDefaults, useFieldLabelFloated, useFieldLabelPlacement, useFieldOptions, useFieldShouldShowPlaceholder, useFieldVariant, useFormControl };

package/dist/index.d.mts

@@ -1,10 +1,11 @@
 import { n as TokenValue, r as normalizeTokenValue, t as TokenInput } from "./token-value-sAa1meMz.mjs";
-import { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, LCHColor, StyleEnv } from "./types.mjs";
-import { getFontSized, getFontSizedFromSize } from "./get-font-sized.mjs";
+import { a as StyleEnv, i as LCHColor, n as ColorScientificPaletteRecord, r as ColorStylePaletteRecord, t as ColorScientificPalette } from "./types-VwCaLyLv.mjs";
+import { n as getFontSizedFromSize, t as getFontSized } from "./get-font-sized-Bouwk_EY.mjs";
 import { FormControlSize, FormSizeVariant, formSizeVariants, getFormFontScale, getFormFontSize, getFormSizeScale, getFormSizeToken } from "./form-size.mjs";
+import { FieldControlOptions, FieldLabelDefaults, FieldLabelPlacement, FieldLabelVariant, FieldNotchedOutline, FieldVariant, FormControlContext, FormControlState, getFieldLabelInset, useFieldHasStartIcon, useFieldHasValidationMessage, useFieldIconColor, useFieldLabelDefaults, useFieldLabelFloated, useFieldLabelPlacement, useFieldOptions, useFieldShouldShowPlaceholder, useFieldVariant, useFormControl } from "./form-control.mjs";
 import { getButtonSized } from "./get-button-sized.mjs";
 import { createScientificPalettes, createStylePalettes } from "./get-colors.mjs";
 import { getNearestToken } from "./get-nearest-token.mjs";
 import { GetRadiusOptions, GetSizedOptions, fontSizeToSize, getRadius, getSizeFromFontSized, getSized, getSpaced, sizeToSpace } from "./get-sized.mjs";
 import { GetTokenRelativeOptions, TokenRelativeType, getTokenRelative } from "./get-token-relative.mjs";
-export { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, FormControlSize, FormSizeVariant, GetRadiusOptions, GetSizedOptions, GetTokenRelativeOptions, LCHColor, StyleEnv, TokenInput, TokenRelativeType, TokenValue, createScientificPalettes, createStylePalettes, fontSizeToSize, formSizeVariants, getButtonSized, getFontSized, getFontSizedFromSize, getFormFontScale, getFormFontSize, getFormSizeScale, getFormSizeToken, getNearestToken, getRadius, getSizeFromFontSized, getSized, getSpaced, getTokenRelative, normalizeTokenValue, sizeToSpace };
+export { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, FieldControlOptions, FieldLabelDefaults, FieldLabelPlacement, FieldLabelVariant, FieldNotchedOutline, FieldVariant, FormControlContext, FormControlSize, FormControlState, FormSizeVariant, GetRadiusOptions, GetSizedOptions, GetTokenRelativeOptions, LCHColor, StyleEnv, TokenInput, TokenRelativeType, TokenValue, createScientificPalettes, createStylePalettes, fontSizeToSize, formSizeVariants, getButtonSized, getFieldLabelInset, getFontSized, getFontSizedFromSize, getFormFontScale, getFormFontSize, getFormSizeScale, getFormSizeToken, getNearestToken, getRadius, getSizeFromFontSized, getSized, getSpaced, getTokenRelative, normalizeTokenValue, sizeToSpace, useFieldHasStartIcon, useFieldHasValidationMessage, useFieldIconColor, useFieldLabelDefaults, useFieldLabelFloated, useFieldLabelPlacement, useFieldOptions, useFieldShouldShowPlaceholder, useFieldVariant, useFormControl };

package/dist/index.mjs

@@ -1 +1 @@
-import{ColorScientificPalette as e}from"./types.mjs";import{normalizeTokenValue as t}from"./token-value.mjs";import{getNearestToken as n}from"./get-nearest-token.mjs";import{getFontSized as r,getFontSizedFromSize as i}from"./get-font-sized.mjs";import{formSizeVariants as a,getFormFontScale as o,getFormFontSize as s,getFormSizeScale as c,getFormSizeToken as l}from"./form-size.mjs";import{getTokenRelative as u}from"./get-token-relative.mjs";import{getButtonSized as d}from"./get-button-sized.mjs";import{createScientificPalettes as f,createStylePalettes as p}from"./get-colors.mjs";import{fontSizeToSize as m,getRadius as h,getSizeFromFontSized as g,getSized as _,getSpaced as v,sizeToSpace as y}from"./get-sized.mjs";export{e as ColorScientificPalette,f as createScientificPalettes,p as createStylePalettes,m as fontSizeToSize,a as formSizeVariants,d as getButtonSized,r as getFontSized,i as getFontSizedFromSize,o as getFormFontScale,s as getFormFontSize,c as getFormSizeScale,l as getFormSizeToken,n as getNearestToken,h as getRadius,g as getSizeFromFontSized,_ as getSized,v as getSpaced,u as getTokenRelative,t as normalizeTokenValue,y as sizeToSpace};
+import{ColorScientificPalette as e}from"./types.mjs";import{normalizeTokenValue as t}from"./token-value.mjs";import{getNearestToken as n}from"./get-nearest-token.mjs";import{getFontSized as r,getFontSizedFromSize as i}from"./get-font-sized.mjs";import{formSizeVariants as a,getFormFontScale as o,getFormFontSize as s,getFormSizeScale as c,getFormSizeToken as l}from"./form-size.mjs";import{getTokenRelative as u}from"./get-token-relative.mjs";import{fontSizeToSize as d,getRadius as f,getSizeFromFontSized as p,getSized as m,getSpaced as h,sizeToSpace as g}from"./get-sized.mjs";import{FieldNotchedOutline as _,FormControlContext as v,getFieldLabelInset as y,useFieldHasStartIcon as b,useFieldHasValidationMessage as x,useFieldIconColor as S,useFieldLabelDefaults as C,useFieldLabelFloated as w,useFieldLabelPlacement as T,useFieldOptions as E,useFieldShouldShowPlaceholder as D,useFieldVariant as O,useFormControl as k}from"./form-control.mjs";import{getButtonSized as A}from"./get-button-sized.mjs";import{createScientificPalettes as j,createStylePalettes as M}from"./get-colors.mjs";export{e as ColorScientificPalette,_ as FieldNotchedOutline,v as FormControlContext,j as createScientificPalettes,M as createStylePalettes,d as fontSizeToSize,a as formSizeVariants,A as getButtonSized,y as getFieldLabelInset,r as getFontSized,i as getFontSizedFromSize,o as getFormFontScale,s as getFormFontSize,c as getFormSizeScale,l as getFormSizeToken,n as getNearestToken,f as getRadius,p as getSizeFromFontSized,m as getSized,h as getSpaced,u as getTokenRelative,t as normalizeTokenValue,g as sizeToSpace,b as useFieldHasStartIcon,x as useFieldHasValidationMessage,S as useFieldIconColor,C as useFieldLabelDefaults,w as useFieldLabelFloated,T as useFieldLabelPlacement,E as useFieldOptions,D as useFieldShouldShowPlaceholder,O as useFieldVariant,k as useFormControl};

package/dist/types-VwCaLyLv.d.cts

@@ -0,0 +1,36 @@
+import { Font, FontFamilyTokens, TokensParsed } from "@tamagui/core";
+import { Color } from "chroma-js";
+//#region src/types.d.ts
+/**
+ * The subset of Tamagui v3's `styled.dynamic` environment these helpers read.
+ *
+ * @remarks
+ * Tamagui does not export its `StyledDynamicEnv` type; the environment it
+ * passes to `styled.dynamic` callbacks and `.resolve` resolvers is a superset
+ * of this shape. Unlike v2 variant extras, it never carries component props.
+ */
+interface StyleEnv {
+  tokens?: TokensParsed;
+  font?: Font;
+  fontFamily?: FontFamilyTokens;
+}
+type ColorScientificPalette = "surrounding" | "analogous" | "triadic" | "tetradic" | "complementary" | "splitComplementary";
+declare const ColorScientificPalette: {
+  SURROUNDING: ColorScientificPalette;
+  ANALOGOUS: ColorScientificPalette;
+  TRIADIC: ColorScientificPalette;
+  TETRADIC: ColorScientificPalette;
+  COMPLEMENTARY: ColorScientificPalette;
+  SPLIT_COMPLEMENTARY: ColorScientificPalette;
+};
+interface LCHColor {
+  l: number;
+  c: number;
+  h: number;
+  mode: "lch";
+}
+type ColorScientificPaletteRecord = Record<ColorScientificPalette, Color[]>;
+type ColorStylePaletteRecord = Record<ColorScientificPalette, string[]>;
+//#endregion
+export { StyleEnv as a, LCHColor as i, ColorScientificPaletteRecord as n, ColorStylePaletteRecord as r, ColorScientificPalette as t };
+//# sourceMappingURL=types-VwCaLyLv.d.cts.map

package/dist/types-VwCaLyLv.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-VwCaLyLv.d.cts","names":[],"sources":["../src/types.ts"],"mappings":";;;;;;;;;;;UA6BiB;EACf,SAAS;EACT,OAAO;EACP,aAAa;;KAGH;cAQC;EACmB,aAAA;EACJ,WAAA;EACJ,SAAA;EACE,UAAA;EACU,eAAA;EACW,qBAAA;;UAG9B;EACf;EACA;EACA;EACA;;KAGU,+BAA+B,OACzC,wBACA;KAGU,0BAA0B,OAAO"}

package/dist/types-VwCaLyLv.d.mts

@@ -0,0 +1,36 @@
+import { Font, FontFamilyTokens, TokensParsed } from "@tamagui/core";
+import { Color } from "chroma-js";
+//#region src/types.d.ts
+/**
+ * The subset of Tamagui v3's `styled.dynamic` environment these helpers read.
+ *
+ * @remarks
+ * Tamagui does not export its `StyledDynamicEnv` type; the environment it
+ * passes to `styled.dynamic` callbacks and `.resolve` resolvers is a superset
+ * of this shape. Unlike v2 variant extras, it never carries component props.
+ */
+interface StyleEnv {
+  tokens?: TokensParsed;
+  font?: Font;
+  fontFamily?: FontFamilyTokens;
+}
+type ColorScientificPalette = "surrounding" | "analogous" | "triadic" | "tetradic" | "complementary" | "splitComplementary";
+declare const ColorScientificPalette: {
+  SURROUNDING: ColorScientificPalette;
+  ANALOGOUS: ColorScientificPalette;
+  TRIADIC: ColorScientificPalette;
+  TETRADIC: ColorScientificPalette;
+  COMPLEMENTARY: ColorScientificPalette;
+  SPLIT_COMPLEMENTARY: ColorScientificPalette;
+};
+interface LCHColor {
+  l: number;
+  c: number;
+  h: number;
+  mode: "lch";
+}
+type ColorScientificPaletteRecord = Record<ColorScientificPalette, Color[]>;
+type ColorStylePaletteRecord = Record<ColorScientificPalette, string[]>;
+//#endregion
+export { StyleEnv as a, LCHColor as i, ColorScientificPaletteRecord as n, ColorStylePaletteRecord as r, ColorScientificPalette as t };
+//# sourceMappingURL=types-VwCaLyLv.d.mts.map

package/dist/types-VwCaLyLv.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-VwCaLyLv.d.mts","names":[],"sources":["../src/types.ts"],"mappings":""}

package/dist/types.d.cts

@@ -1,36 +1,2 @@
-import { Font, FontFamilyTokens, TokensParsed } from "@tamagui/core";
-import { Color } from "chroma-js";
-//#region src/types.d.ts
-/**
- * The subset of Tamagui v3's `styled.dynamic` environment these helpers read.
- *
- * @remarks
- * Tamagui does not export its `StyledDynamicEnv` type; the environment it
- * passes to `styled.dynamic` callbacks and `.resolve` resolvers is a superset
- * of this shape. Unlike v2 variant extras, it never carries component props.
- */
-interface StyleEnv {
-  tokens?: TokensParsed;
-  font?: Font;
-  fontFamily?: FontFamilyTokens;
-}
-type ColorScientificPalette = "surrounding" | "analogous" | "triadic" | "tetradic" | "complementary" | "splitComplementary";
-declare const ColorScientificPalette: {
-  SURROUNDING: ColorScientificPalette;
-  ANALOGOUS: ColorScientificPalette;
-  TRIADIC: ColorScientificPalette;
-  TETRADIC: ColorScientificPalette;
-  COMPLEMENTARY: ColorScientificPalette;
-  SPLIT_COMPLEMENTARY: ColorScientificPalette;
-};
-interface LCHColor {
-  l: number;
-  c: number;
-  h: number;
-  mode: "lch";
-}
-type ColorScientificPaletteRecord = Record<ColorScientificPalette, Color[]>;
-type ColorStylePaletteRecord = Record<ColorScientificPalette, string[]>;
-//#endregion
-export { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, LCHColor, StyleEnv };
-//# sourceMappingURL=types.d.cts.map
+import { a as StyleEnv, i as LCHColor, n as ColorScientificPaletteRecord, r as ColorStylePaletteRecord, t as ColorScientificPalette } from "./types-VwCaLyLv.cjs";
+export { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, LCHColor, StyleEnv };

package/dist/types.d.mts

@@ -1,36 +1,2 @@
-import { Font, FontFamilyTokens, TokensParsed } from "@tamagui/core";
-import { Color } from "chroma-js";
-//#region src/types.d.ts
-/**
- * The subset of Tamagui v3's `styled.dynamic` environment these helpers read.
- *
- * @remarks
- * Tamagui does not export its `StyledDynamicEnv` type; the environment it
- * passes to `styled.dynamic` callbacks and `.resolve` resolvers is a superset
- * of this shape. Unlike v2 variant extras, it never carries component props.
- */
-interface StyleEnv {
-  tokens?: TokensParsed;
-  font?: Font;
-  fontFamily?: FontFamilyTokens;
-}
-type ColorScientificPalette = "surrounding" | "analogous" | "triadic" | "tetradic" | "complementary" | "splitComplementary";
-declare const ColorScientificPalette: {
-  SURROUNDING: ColorScientificPalette;
-  ANALOGOUS: ColorScientificPalette;
-  TRIADIC: ColorScientificPalette;
-  TETRADIC: ColorScientificPalette;
-  COMPLEMENTARY: ColorScientificPalette;
-  SPLIT_COMPLEMENTARY: ColorScientificPalette;
-};
-interface LCHColor {
-  l: number;
-  c: number;
-  h: number;
-  mode: "lch";
-}
-type ColorScientificPaletteRecord = Record<ColorScientificPalette, Color[]>;
-type ColorStylePaletteRecord = Record<ColorScientificPalette, string[]>;
-//#endregion
-export { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, LCHColor, StyleEnv };
-//# sourceMappingURL=types.d.mts.map
+import { a as StyleEnv, i as LCHColor, n as ColorScientificPaletteRecord, r as ColorStylePaletteRecord, t as ColorScientificPalette } from "./types-VwCaLyLv.mjs";
+export { ColorScientificPalette, ColorScientificPaletteRecord, ColorStylePaletteRecord, LCHColor, StyleEnv };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyclone-ui/helpers",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "private": false,
   "description": "A repository containing the core front-end components used by Storm Software across many platforms",
   "repository": {
@@ -24,6 +24,20 @@
         "default": "./dist/index.mjs"
       }
     },
+    "./form-control": {
+      "require": {
+        "types": "./dist/form-control.d.cts",
+        "default": "./dist/form-control.cjs"
+      },
+      "import": {
+        "types": "./dist/form-control.d.mts",
+        "default": "./dist/form-control.mjs"
+      },
+      "default": {
+        "types": "./dist/form-control.d.mts",
+        "default": "./dist/form-control.mjs"
+      }
+    },
     "./form-size": {
       "require": {
         "types": "./dist/form-size.d.cts",
@@ -157,17 +171,19 @@
   "dependencies": {
     "@stryke/type-checks": "^0.6.49",
     "@stryke/types": "^0.12.44",
-    "@tamagui/constants": "3.0.0-beta.1422.1",
-    "@tamagui/core": "3.0.0-beta.1422.1",
+    "@tamagui/constants": "3.0.2",
+    "@tamagui/core": "3.0.2",
     "chroma-js": "^2.6.0"
   },
   "devDependencies": {
     "@powerlines/plugin-tamagui": "^0.1.666",
     "@powerlines/plugin-tsdown": "^0.1.615",
     "@types/chroma-js": "^2.4.5",
-    "powerlines": "^0.47.214"
+    "powerlines": "^0.47.214",
+    "react": "^19.3.0"
   },
   "publishConfig": { "access": "public" },
   "module": "./dist/index.mjs",
-  "gitHead": "394fbc8f564ba966872485af47d3afcac07dacf0"
+  "peerDependencies": { "react": "^19.3.0" },
+  "gitHead": "0ca271e05c31b584a9c66598769cd2a0c432edf8"
 }

package/dist/get-font-sized.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-font-sized.d.cts","names":[],"sources":["../src/get-font-sized.ts"],"mappings":";;;;;;;;;;;;;;;;cAsCa,eACX,cAAa,iBAAiB,cAC9B,MAAA,eAAsB,aACrB,QAAQ;;;;;;;;cAqEE,uBACX,cAAa,YACb,MAAK,aACJ,QAAQ"}

package/dist/get-font-sized.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-font-sized.d.mts","names":[],"sources":["../src/get-font-sized.ts"],"mappings":""}

package/dist/types.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.cts","names":[],"sources":["../src/types.ts"],"mappings":";;;;;;;;;;;UA6BiB;EACf,SAAS;EACT,OAAO;EACP,aAAa;;KAGH;cAQC;EACmB,aAAA;EACJ,WAAA;EACJ,SAAA;EACE,UAAA;EACU,eAAA;EACW,qBAAA;;UAG9B;EACf;EACA;EACA;EACA;;KAGU,+BAA+B,OACzC,wBACA;KAGU,0BAA0B,OAAO"}

package/dist/types.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.mts","names":[],"sources":["../src/types.ts"],"mappings":""}