@pharos-ds/core 0.1.9

package/dist/Field/FieldLabel.d.ts

@@ -0,0 +1,102 @@
+/**
+ * @file FieldLabel.tsx
+ * @input Uses React, Icon, IconType
+ * @output Exports FieldLabel component, FieldLabelProps
+ * @position Core label implementation; used by Field, CheckboxInput, Switch
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
+ * - /packages/core/src/Field/index.ts (exports if types change)
+ * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
+ */
+import type { ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import { type IconType } from '../Icon';
+export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLLabelElement>;
+    /**
+     * Label text (always rendered for accessibility).
+     */
+    label: string;
+    /**
+     * ID of the input element this label points AT (rendered as `htmlFor` on the
+     * label). This is *not* the id of the label element itself — see
+     * `labelID` for that.
+     */
+    inputID: string;
+    /**
+     * The `id` applied TO the label element itself (not the element it points
+     * at — that's `inputID`). A grouping control (e.g. `role="radiogroup"`) can
+     * reference this via `aria-labelledby` to take the label as its accessible
+     * name.
+     */
+    labelID?: string;
+    /**
+     * When true, the field wraps a *group* of controls (e.g. a radiogroup)
+     * rather than a single input. In that case the label is rendered as a
+     * `<span>` instead of a `<label>` — a `<label>` semantically names one form
+     * control and can't be associated with a group, so it must not be a literal
+     * label element. The group takes the label as its name via
+     * `labelID` + `aria-labelledby`.
+     * @default false
+     */
+    isGroupLabel?: boolean;
+    /**
+     * Whether to visually hide the label and description (still accessible
+     * to screen readers). When hidden, the entire label group is rendered
+     * with sr-only styles and takes up no layout space.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /**
+     * Whether the associated input is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the field is optional. Mutually exclusive with isRequired.
+     * @default false
+     */
+    isOptional?: boolean;
+    /**
+     * Whether the field is required. Mutually exclusive with isOptional.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Icon to display before the label text.
+     */
+    labelIcon?: ReactNode | IconType;
+    /**
+     * Tooltip text to display in an info icon at the end of the label.
+     */
+    labelTooltip?: string;
+    /**
+     * Description displayed below the label. Hidden along with the label
+     * when isLabelHidden is true.
+     */
+    description?: ReactNode;
+    /**
+     * ID for the description element (for aria-describedby on the input).
+     */
+    descriptionID?: string;
+}
+/**
+ * Label + description group for form fields. Handles sr-only hiding,
+ * disabled styling, optional/required indicators, icons, and tooltips.
+ *
+ * When `isLabelHidden` is true the entire group uses sr-only positioning
+ * so it takes up zero layout space — no wrapper div left in flow.
+ *
+ * @example
+ * ```
+ * <FieldLabel label="Email" inputID={inputId} description="We won't share it" />
+ * <FieldLabel label="Search" inputID={inputId} isLabelHidden />
+ * ```
+ */
+export declare function FieldLabel({ label, inputID, labelID, isGroupLabel, isLabelHidden, isDisabled, isOptional, isRequired, labelIcon, labelTooltip, description, descriptionID, className, style, xstyle, ref, ...rest }: FieldLabelProps): import("react").JSX.Element;
+export declare namespace FieldLabel {
+    var displayName: string;
+}
+//# sourceMappingURL=FieldLabel.d.ts.map

package/dist/Field/FieldLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAkD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA0DjB;yBA5Ee,UAAU"}

package/dist/Field/FieldLabel.js

@@ -0,0 +1,144 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file FieldLabel.tsx
+ * @input Uses React, Icon, IconType
+ * @output Exports FieldLabel component, FieldLabelProps
+ * @position Core label implementation; used by Field, CheckboxInput, Switch
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
+ * - /packages/core/src/Field/index.ts (exports if types change)
+ * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import { mergeProps } from "../utils/index.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { Icon, renderIconSlot } from "../Icon/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const styles = {
+  label: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "xzye2dw",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xcr08ib",
+    kLWn49: "x1kq96og",
+    k63SB2: "x1e4wzip",
+    kMwMTN: "xv1l7n4",
+    kkrTdU: "x1ypdohk",
+    $$css: true
+  },
+  labelDisabled: {
+    kMwMTN: "xnbbluu",
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  },
+  srOnly: {
+    ksu8eU: "xng3xce",
+    kMcinP: "xzpqnlu",
+    kZKoxP: "xjm9jq1",
+    kLqNvP: "x1o0tod",
+    kogj98: "xkdpibf",
+    kVQacm: "xb3r6kr",
+    kmVPX3: "x1717udv",
+    kfzvcC: "x47corl",
+    kVAEAm: "x10l6tqk",
+    k87sOh: "x13vifvy",
+    kfSwDN: "x87ps6o",
+    khDVqt: "xuxw1ft",
+    kzqmXN: "x1i1rx1s",
+    $$css: true
+  }
+};
+/**
+ * Label + description group for form fields. Handles sr-only hiding,
+ * disabled styling, optional/required indicators, icons, and tooltips.
+ *
+ * When `isLabelHidden` is true the entire group uses sr-only positioning
+ * so it takes up zero layout space — no wrapper div left in flow.
+ *
+ * @example
+ * ```
+ * <FieldLabel label="Email" inputID={inputId} description="We won't share it" />
+ * <FieldLabel label="Search" inputID={inputId} isLabelHidden />
+ * ```
+ */
+export function FieldLabel({
+  label,
+  inputID,
+  labelID,
+  isGroupLabel = false,
+  isLabelHidden = false,
+  isDisabled = false,
+  isOptional = false,
+  isRequired = false,
+  labelIcon,
+  labelTooltip,
+  description,
+  descriptionID,
+  className,
+  style,
+  xstyle,
+  ref,
+  ...rest
+}) {
+  const statusText = isOptional ? 'Optional' : isRequired ? 'Required' : null;
+
+  // A group label (e.g. for a radiogroup) must not be a literal `<label>`
+  // element: a `<label>` semantically names a single form control and can't be
+  // associated with a group. Render it as a `<span>` instead, keeping all the
+  // label styling and slots. The group references it via `aria-labelledby`.
+  const LabelElement = isGroupLabel ? 'span' : 'label';
+  const labelContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [labelIcon && renderIconSlot(labelIcon, {
+      size: 'sm',
+      color: 'inherit'
+    }), label, statusText && /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x1sodnla x141an7d x1ltkj2j xv1l7n4"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: " \u2219 "
+      }), statusText]
+    }), labelTooltip && /*#__PURE__*/_jsx(Tooltip, {
+      content: labelTooltip,
+      placement: "above",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "info",
+        size: "sm",
+        color: "inherit"
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(LabelElement, {
+      ref: ref,
+      id: labelID
+      // `htmlFor` only applies to a real `<label>` associating with a single
+      // control; a group label (span) has no `htmlFor`.
+      ,
+      htmlFor: isGroupLabel ? undefined : inputID,
+      ...rest,
+      ...mergeProps(themeProps('field-label'), stylex.props(styles.label, isDisabled && styles.labelDisabled, isLabelHidden && styles.srOnly, xstyle), className, style),
+      children: labelContent
+    }), description && /*#__PURE__*/_jsx("span", {
+      id: descriptionID,
+      ...{
+        0: {
+          className: "x9ynric x141an7d x1ltkj2j x1sodnla xv1l7n4"
+        },
+        1: {
+          className: "x9ynric x141an7d x1ltkj2j x1sodnla xv1l7n4 xng3xce xzpqnlu xjm9jq1 x1o0tod xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
+        }
+      }[!!isLabelHidden << 0],
+      children: description
+    })]
+  });
+}
+FieldLabel.displayName = 'FieldLabel';

package/dist/Field/InputClearButton.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file InputClearButton.tsx
+ * @input Uses React, Button, Icon
+ * @output Exports InputClearButton shared clear button for input components
+ * @position Shared primitive; used by Typeahead, Tokenizer, TextInput
+ */
+import type { ReactNode } from 'react';
+import * as stylex from '@stylexjs/stylex';
+export interface InputClearButtonProps {
+    label: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    xstyle?: stylex.StyleXStyles;
+}
+export declare function InputClearButton({ label, onClick, xstyle, }: InputClearButtonProps): ReactNode;
+export declare namespace InputClearButton {
+    var displayName: string;
+}
+//# sourceMappingURL=InputClearButton.d.ts.map

package/dist/Field/InputClearButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAW3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;CAC9B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,GACP,EAAE,qBAAqB,GAAG,SAAS,CAYnC;yBAhBe,gBAAgB"}

package/dist/Field/InputClearButton.js

@@ -0,0 +1,41 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InputClearButton.tsx
+ * @input Uses React, Button, Icon
+ * @output Exports InputClearButton shared clear button for input components
+ * @position Shared primitive; used by Typeahead, Tokenizer, TextInput
+ */
+import * as stylex from '@stylexjs/stylex';
+import { Button } from "../Button/index.js";
+import { Icon } from "../Icon/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  button: {
+    kZKoxP: "x1qx5ct2",
+    kmuXW: "x2lah0s",
+    $$css: true
+  }
+};
+export function InputClearButton({
+  label,
+  onClick,
+  xstyle
+}) {
+  return /*#__PURE__*/_jsx(Button, {
+    variant: "ghost",
+    size: "sm",
+    label: label,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "close",
+      size: "sm",
+      color: "inherit"
+    }),
+    onClick: onClick,
+    isIconOnly: true,
+    xstyle: [styles.button, xstyle]
+  });
+}
+InputClearButton.displayName = 'InputClearButton';

package/dist/Field/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file index.ts
+ * @input Imports Field component and types from Field.tsx, FieldLabel from FieldLabel.tsx, FieldStatus from FieldStatus.tsx
+ * @output Exports Field, FieldProps, FieldStatusInput, FieldStatusType, FieldLabel, FieldLabelProps, FieldStatus component
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/Field/Field.doc.mjs
+ */
+export { Field } from './Field';
+export type { FieldProps, FieldStatusInput, FieldStatusType } from './Field';
+export { FieldLabel } from './FieldLabel';
+export type { FieldLabelProps } from './FieldLabel';
+export { FieldStatus } from '../FieldStatus';
+export type { FieldStatusProps, FieldStatusVariant, FieldStatusVariantMap, } from '../FieldStatus';
+export type { InputStatus, InputStatusType, InputSize } from './types';
+export { inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles, inputStatusFocusStyles, } from './inputStyles.stylex';
+export { InputClearButton } from './InputClearButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/Field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Field/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,YAAY,EAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAC,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAGxB,YAAY,EAAC,WAAW,EAAE,eAAe,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAGrE,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,EAC5B,4BAA4B,EAC5B,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC"}

package/dist/Field/index.js

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports Field component and types from Field.tsx, FieldLabel from FieldLabel.tsx, FieldStatus from FieldStatus.tsx
+ * @output Exports Field, FieldProps, FieldStatusInput, FieldStatusType, FieldLabel, FieldLabelProps, FieldStatus component
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/Field/Field.doc.mjs
+ */
+export { Field } from "./Field.js";
+export { FieldLabel } from "./FieldLabel.js";
+export { FieldStatus } from "../FieldStatus/index.js";
+
+// Shared input types
+
+// Shared input styles
+export { inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles, inputStatusFocusStyles } from "./inputStyles.stylex.js";
+
+// Shared input components
+export { InputClearButton } from "./InputClearButton.js";

package/dist/Field/inputStyles.stylex.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @file inputStyles.stylex.ts
+ * @input Uses theme tokens (color, spacing, radius, shadow, transition)
+ * @output Exports shared input wrapper appearance styles
+ * @position Shared styles consumed by TextInput, TextArea, NumberInput, DateInput,
+ *   TimeInput, Selector, Typeahead, and Tokenizer
+ *
+ * Centralizes the input wrapper appearance (borders, focus outlines, hover shadows,
+ * disabled state, status variants) so all input components stay in sync.
+ * Individual components layer their own overrides (padding, alignment, etc.)
+ * via stylex.props composition.
+ */
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Base wrapper styles shared by all input components.
+ * Components apply these as a foundation and override specific properties
+ * (e.g. padding, alignItems, gap) as needed.
+ */
+export declare const inputWrapperStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 1>;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "4px">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "8px">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#0064E0, #2694FE)" | "light-dark(#CCD3DB, #494D53)">;
+        readonly '--_field-radius': stylex.StyleXClassNameFor<"--_field-radius", "8px">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "var(--_field-radius)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#FFFFFF, #1F1F22)">;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "border-color, box-shadow">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | `inset 0px 0px 0px 2px ${stylex.StyleXVar<"light-dark(#0082FB33, #0082FB3F)">}` | {
+            readonly '@media (hover: hover)': `inset 0px 0px 0px 2px color-mix(in srgb, ${stylex.StyleXVar<"light-dark(#CCD3DB, #494D53)">} 30%, transparent)`;
+        }>;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    }>;
+    readonly disabled: Readonly<{
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.5>;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#CCD3DB, #494D53)">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none">;
+    }>;
+}>;
+/**
+ * Status border colors for input wrappers.
+ * Keyed by InputStatusType.
+ */
+export declare const inputStatusBorderStyles: Readonly<{
+    readonly warning: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E9AF08, #F2C00B)">;
+    }>;
+    readonly error: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E3193B, #F5394F)">;
+    }>;
+    readonly success: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#0D8626, #0D8626)">;
+    }>;
+}>;
+/**
+ * Status hover shadow styles for input wrappers.
+ * Keyed by InputStatusType.
+ */
+export declare const inputStatusHoverShadowStyles: Readonly<{
+    readonly warning: Readonly<{
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | {
+            readonly '@media (hover: hover)': stylex.StyleXVar<"inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3)">;
+        }>;
+    }>;
+    readonly error: Readonly<{
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | {
+            readonly '@media (hover: hover)': stylex.StyleXVar<"inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3)">;
+        }>;
+    }>;
+    readonly success: Readonly<{
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | {
+            readonly '@media (hover: hover)': stylex.StyleXVar<"inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3)">;
+        }>;
+    }>;
+}>;
+/**
+ * Status focus border styles using :focus-within.
+ * Used by input wrappers that contain a child input/textarea element.
+ * Keyed by InputStatusType.
+ */
+export declare const inputStatusFocusWithinStyles: Readonly<{
+    readonly warning: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E9AF08, #F2C00B)">;
+    }>;
+    readonly error: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E3193B, #F5394F)">;
+    }>;
+    readonly success: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#0D8626, #0D8626)">;
+    }>;
+}>;
+/**
+ * Status focus border styles using :focus.
+ * Used by components where the wrapper itself receives focus (e.g. Selector button).
+ * Keyed by InputStatusType.
+ */
+export declare const inputStatusFocusStyles: Readonly<{
+    readonly warning: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E9AF08, #F2C00B)">;
+    }>;
+    readonly error: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E3193B, #F5394F)">;
+    }>;
+    readonly success: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#0D8626, #0D8626)">;
+    }>;
+}>;
+//# sourceMappingURL=inputStyles.stylex.d.ts.map

package/dist/Field/inputStyles.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputStyles.stylex.d.ts","sourceRoot":"","sources":["../../src/Field/inputStyles.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAW3C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyC7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;EAUlC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;EAyBvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;EAmBvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;EAmBjC,CAAC"}

package/dist/Field/inputStyles.stylex.js

@@ -0,0 +1,133 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file inputStyles.stylex.ts
+ * @input Uses theme tokens (color, spacing, radius, shadow, transition)
+ * @output Exports shared input wrapper appearance styles
+ * @position Shared styles consumed by TextInput, TextArea, NumberInput, DateInput,
+ *   TimeInput, Selector, Typeahead, and Tokenizer
+ *
+ * Centralizes the input wrapper appearance (borders, focus outlines, hover shadows,
+ * disabled state, status variants) so all input components stay in sync.
+ * Individual components layer their own overrides (padding, alignment, etc.)
+ * via stylex.props composition.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars, borderVars } from "../theme/tokens.stylex.js";
+
+/**
+ * Base wrapper styles shared by all input components.
+ * Components apply these as a foundation and override specific properties
+ * (e.g. padding, alignItems, gap) as needed.
+ */
+export const inputWrapperStyles = {
+  base: {
+    kB7OPa: "x9f619",
+    kVAEAm: "x1n2onr6",
+    kY2c9j: "x1vjfegm",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "x1txdalj",
+    k8WAf4: "xu0wf1k",
+    kg3NbH: "xf314gf",
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "xvy26l8 x6q1khz",
+    "--_field-radius": "x1832zxr",
+    kaIpWk: "xvdfih8",
+    kWkggS: "x10xzikg",
+    k1ekBW: "x12zzom9",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kGVxlE: "x1gnnqk1 x12y27fx xuihb5h",
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  },
+  disabled: {
+    kkrTdU: "x1h6gzvc",
+    kSiTet: "xbyyjgo",
+    kVAM5u: "xvy26l8",
+    kGVxlE: "x1gnnqk1",
+    $$css: true
+  }
+};
+
+/**
+ * Status border colors for input wrappers.
+ * Keyed by InputStatusType.
+ */
+export const inputStatusBorderStyles = {
+  warning: {
+    kVAM5u: "x8wg1ba",
+    $$css: true
+  },
+  error: {
+    kVAM5u: "x1ofxpqo",
+    $$css: true
+  },
+  success: {
+    kVAM5u: "x16m2moy",
+    $$css: true
+  }
+};
+
+/**
+ * Status hover shadow styles for input wrappers.
+ * Keyed by InputStatusType.
+ */
+export const inputStatusHoverShadowStyles = {
+  warning: {
+    kGVxlE: "x1gnnqk1 xnoa3fc",
+    $$css: true
+  },
+  error: {
+    kGVxlE: "x1gnnqk1 xl68szm",
+    $$css: true
+  },
+  success: {
+    kGVxlE: "x1gnnqk1 xig9bu2",
+    $$css: true
+  }
+};
+
+/**
+ * Status focus border styles using :focus-within.
+ * Used by input wrappers that contain a child input/textarea element.
+ * Keyed by InputStatusType.
+ */
+export const inputStatusFocusWithinStyles = {
+  warning: {
+    kVAM5u: "x8wg1ba xa1yw2k",
+    $$css: true
+  },
+  error: {
+    kVAM5u: "x1ofxpqo xk2sxw7",
+    $$css: true
+  },
+  success: {
+    kVAM5u: "x16m2moy xyq33ac",
+    $$css: true
+  }
+};
+
+/**
+ * Status focus border styles using :focus.
+ * Used by components where the wrapper itself receives focus (e.g. Selector button).
+ * Keyed by InputStatusType.
+ */
+export const inputStatusFocusStyles = {
+  warning: {
+    kVAM5u: "x8wg1ba x12sck4v",
+    $$css: true
+  },
+  error: {
+    kVAM5u: "x1ofxpqo x64lkcz",
+    $$css: true
+  },
+  success: {
+    kVAM5u: "x16m2moy x1lglk5v",
+    $$css: true
+  }
+};

package/dist/Field/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @file types.ts
+ * @input None
+ * @output Exports shared input component types
+ * @position Shared types used across input components
+ *
+ * SYNC: When adding new shared types, update this file
+ */
+/**
+ * Status type for input validation states.
+ */
+export type InputStatusType = 'warning' | 'error' | 'success';
+/**
+ * Status indicator for input components.
+ * Used by TextInput, TextArea, DatePicker, TimePicker, etc.
+ */
+export interface InputStatus {
+    /**
+     * The type of status to display.
+     * - 'error': Invalid input, prevents form submission
+     * - 'warning': Caution, but allows submission
+     * - 'success': Valid input confirmation
+     */
+    type: InputStatusType;
+    /**
+     * Optional message to display below the input.
+     * When provided, shows a colored message box.
+     */
+    message?: string;
+}
+/**
+ * Standard size options for input components.
+ */
+export type InputSize = 'sm' | 'md' | 'lg';
+//# sourceMappingURL=types.d.ts.map

package/dist/Field/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Field/types.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,IAAI,EAAE,eAAe,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC"}

package/dist/Field/types.js

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