@pglevy/sailwind 0.1.0

package/dist/components/TextField/TextField.js

@@ -0,0 +1,113 @@
+import { jsxs as d, jsx as o, Fragment as $ } from "react/jsx-runtime";
+import * as j from "react";
+import { FieldWrapper as U } from "../shared/FieldWrapper.js";
+const G = ({
+  label: c,
+  instructions: i,
+  required: m = !1,
+  readOnly: e = !1,
+  disabled: p = !1,
+  value: n = "",
+  validations: t = [],
+  saveInto: E,
+  onChange: x,
+  // refreshAfter = "UNFOCUS", // Not used in React (controlled components update immediately)
+  validationGroup: N,
+  requiredMessage: g,
+  align: b = "LEFT",
+  labelPosition: h = "ABOVE",
+  placeholder: R,
+  helpTooltip: A,
+  masked: C = !1,
+  accessibilityText: u,
+  showWhen: T = !0,
+  inputPurpose: f,
+  characterLimit: a,
+  showCharacterCount: M = !0,
+  marginAbove: D = "NONE",
+  marginBelow: S = "STANDARD"
+}) => {
+  if (!T) return null;
+  const r = j.useMemo(() => `textfield-${Math.random().toString(36).substr(2, 9)}`, []), F = {
+    LEFT: "text-left",
+    CENTER: "text-center",
+    RIGHT: "text-right"
+  }, B = {
+    NAME: "name",
+    EMAIL: "email",
+    PHONE_NUMBER: "tel",
+    STREET_ADDRESS: "street-address",
+    POSTAL_CODE: "postal-code",
+    COUNTRY: "country",
+    CREDIT_CARD_NUMBER: "cc-number",
+    FIRST_NAME: "given-name",
+    LAST_NAME: "family-name",
+    DOB: "bday",
+    OFF: "off"
+  }, _ = [
+    "w-full",
+    "text-base",
+    F[b],
+    // ReadOnly mode: no border, no background, no padding (inline display)
+    e && "border-none bg-transparent p-0",
+    // Normal mode: standard input styling
+    !e && "px-3 py-2 border border-gray-200 rounded-sm bg-white",
+    !e && "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+    // Disabled state
+    p && "bg-gray-100 text-gray-700 cursor-not-allowed",
+    // Error state
+    t.length > 0 && "border-red-700 focus:ring-red-700"
+  ].filter(Boolean).join(" "), w = (l) => {
+    const s = x || E;
+    s && s(l.target.value);
+  }, L = () => {
+  }, y = t.length > 0 && n !== "", I = m && !n && g && t.length === 0, v = /* @__PURE__ */ d("div", { className: "relative", children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        id: r,
+        type: C ? "password" : "text",
+        value: n,
+        onChange: w,
+        onBlur: L,
+        placeholder: e ? void 0 : R,
+        disabled: p,
+        readOnly: e,
+        maxLength: a,
+        autoComplete: f ? B[f] : void 0,
+        className: _,
+        "aria-invalid": t.length > 0,
+        "aria-describedby": t.length > 0 ? `${r}-error` : i ? `${r}-instructions` : void 0,
+        "aria-label": u || (h === "COLLAPSED" ? c : void 0),
+        "data-validation-group": N
+      }
+    ),
+    a && M && !e && /* @__PURE__ */ d("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-700 pointer-events-none", children: [
+      n.length,
+      " / ",
+      a
+    ] })
+  ] }), O = /* @__PURE__ */ d($, { children: [
+    y && /* @__PURE__ */ o("div", { id: `${r}-error`, className: "mt-2", role: "alert", children: t.map((l, s) => /* @__PURE__ */ o("p", { className: "text-sm text-red-700", children: l }, s)) }),
+    I && /* @__PURE__ */ o("p", { className: "text-sm text-red-700 mt-2", role: "alert", children: g })
+  ] });
+  return /* @__PURE__ */ o(
+    U,
+    {
+      label: c,
+      labelPosition: h,
+      required: m,
+      instructions: i,
+      helpTooltip: A,
+      accessibilityText: u,
+      inputId: r,
+      marginAbove: D,
+      marginBelow: S,
+      footer: O,
+      children: v
+    }
+  );
+};
+export {
+  G as TextField
+};

package/dist/components/TextField/index.d.ts

@@ -0,0 +1,3 @@
+export { TextField } from './TextField';
+export type { TextFieldProps } from './TextField';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TextField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/Toggle/ToggleField.d.ts

@@ -0,0 +1,62 @@
+import { SAILLabelPosition, SAILMarginSize, SAILSize } from '../../types/sail';
+import * as React from 'react';
+type ToggleStyle = "SOLID" | "OUTLINE" | "GHOST";
+/**
+ * Displays a toggle button for boolean input (button-style on/off)
+ * Inspired by SAIL form field patterns (not an official SAIL component)
+ *
+ * This is a "new SAIL" component - not available in public SAIL but follows
+ * the same conventions and patterns for consistency with other Sailwind components.
+ *
+ * Use ToggleField for button-style toggles (e.g., toolbar buttons, filters)
+ * Use SwitchField for traditional on/off switches (e.g., settings)
+ */
+export interface ToggleFieldProps {
+    /** Text to display as the field label */
+    label?: string;
+    /** Text to display on the toggle button */
+    text?: string;
+    /** Supplemental text about this field */
+    instructions?: string;
+    /** Determines if a value is required to submit the form */
+    required?: boolean;
+    /** Determines if the field should display as grayed out */
+    disabled?: boolean;
+    /** Current pressed state (true = pressed, false = unpressed) */
+    value?: boolean;
+    /** Validation errors to display below the field */
+    validations?: string[];
+    /** Callback when the user toggles the button */
+    saveInto?: (value: boolean) => void;
+    /** Callback when the user toggles the button (React-style alias for saveInto) */
+    onChange?: (value: boolean) => void;
+    /** Validation group name (no spaces) */
+    validationGroup?: string;
+    /** Custom message when field is required and not provided */
+    requiredMessage?: string;
+    /** Determines where the label appears */
+    labelPosition?: SAILLabelPosition;
+    /** Displays a help icon with tooltip text */
+    helpTooltip?: string;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+    /** Determines whether component is displayed */
+    showWhen?: boolean;
+    /** Space added above component */
+    marginAbove?: SAILMarginSize;
+    /** Space added below component */
+    marginBelow?: SAILMarginSize;
+    /** Size of the toggle button */
+    size?: SAILSize;
+    /** Color when toggle is pressed (hex or semantic) */
+    color?: "ACCENT" | "POSITIVE" | "NEGATIVE" | "SECONDARY" | string;
+    /** Determines the button's appearance */
+    style?: ToggleStyle;
+    /** Icon to display in the button */
+    icon?: string;
+    /** Position of icon relative to text */
+    iconPosition?: "START" | "END";
+}
+export declare const ToggleField: React.FC<ToggleFieldProps>;
+export {};
+//# sourceMappingURL=ToggleField.d.ts.map

package/dist/components/Toggle/ToggleField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleField.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/ToggleField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEnF,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEhD;;;;;;;;;GASG;AACH,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACnC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACnC,wCAAwC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,gCAAgC;IAChC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,qDAAqD;IACrD,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CAAA;IACjE,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAC/B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwMlD,CAAA"}

package/dist/components/Toggle/ToggleField.js

@@ -0,0 +1,126 @@
+import { jsxs as I, jsx as t, Fragment as H } from "react/jsx-runtime";
+import * as N from "react";
+import * as _ from "@radix-ui/react-toggle";
+import * as a from "lucide-react";
+import { FieldWrapper as $ } from "../shared/FieldWrapper.js";
+const J = ({
+  label: l,
+  text: d,
+  instructions: h,
+  required: c = !1,
+  disabled: b = !1,
+  value: p = !1,
+  validations: u = [],
+  saveInto: S,
+  onChange: v,
+  validationGroup: z,
+  requiredMessage: m,
+  labelPosition: w = "ABOVE",
+  helpTooltip: O,
+  accessibilityText: A,
+  showWhen: y = !0,
+  marginAbove: D = "NONE",
+  marginBelow: L = "STANDARD",
+  size: G = "STANDARD",
+  color: E = "ACCENT",
+  style: n = "OUTLINE",
+  icon: s,
+  iconPosition: x = "START"
+}) => {
+  if (!y) return null;
+  const o = `togglefield-${Math.random().toString(36).substr(2, 9)}`, U = {
+    SMALL: "px-3 py-1.5 text-sm",
+    STANDARD: "px-4 py-2.5 text-base",
+    MEDIUM: "px-6 py-3 text-lg",
+    LARGE: "px-8 py-4 text-xl"
+  }, M = () => {
+    if (E.startsWith("#"))
+      return "border-2";
+    const e = E;
+    return n === "SOLID" ? {
+      ACCENT: "border-2 border-blue-500 bg-white text-blue-500 data-[state=on]:bg-blue-500 data-[state=on]:text-white data-[state=on]:border-blue-500 hover:bg-blue-50 data-[state=on]:hover:bg-blue-700",
+      POSITIVE: "border-2 border-green-700 bg-white text-green-700 data-[state=on]:bg-green-700 data-[state=on]:text-white data-[state=on]:border-green-700 hover:bg-green-50 data-[state=on]:hover:bg-green-900",
+      NEGATIVE: "border-2 border-red-700 bg-white text-red-700 data-[state=on]:bg-red-700 data-[state=on]:text-white data-[state=on]:border-red-700 hover:bg-red-50 data-[state=on]:hover:bg-red-900",
+      SECONDARY: "border-2 border-gray-700 bg-white text-gray-700 data-[state=on]:bg-gray-700 data-[state=on]:text-white data-[state=on]:border-gray-700 hover:bg-gray-50 data-[state=on]:hover:bg-gray-900"
+    }[e] : n === "OUTLINE" ? {
+      ACCENT: "border-2 border-blue-500 text-blue-500 bg-white data-[state=on]:bg-blue-100 hover:bg-blue-50",
+      POSITIVE: "border-2 border-green-700 text-green-700 bg-white data-[state=on]:bg-green-100 hover:bg-green-50",
+      NEGATIVE: "border-2 border-red-700 text-red-700 bg-white data-[state=on]:bg-red-100 hover:bg-red-50",
+      SECONDARY: "border-2 border-gray-700 text-gray-700 bg-white data-[state=on]:bg-gray-100 hover:bg-gray-50"
+    }[e] : n === "GHOST" ? {
+      ACCENT: "border-2 border-transparent text-blue-500 bg-transparent data-[state=on]:bg-blue-100 hover:bg-blue-50",
+      POSITIVE: "border-2 border-transparent text-green-700 bg-transparent data-[state=on]:bg-green-100 hover:bg-green-50",
+      NEGATIVE: "border-2 border-transparent text-red-700 bg-transparent data-[state=on]:bg-red-100 hover:bg-red-50",
+      SECONDARY: "border-2 border-transparent text-gray-700 bg-transparent data-[state=on]:bg-gray-100 hover:bg-gray-50"
+    }[e] : "";
+  }, V = (e) => {
+    const r = v || S;
+    r && !b && r(e);
+  }, C = (e) => {
+    const T = ((j) => j.split("-").map((f) => f.charAt(0).toUpperCase() + f.slice(1)).join(""))(e);
+    if (T in a)
+      return a[T];
+    const R = e.charAt(0).toUpperCase() + e.slice(1).toLowerCase();
+    if (R in a)
+      return a[R];
+    const i = {
+      STAR: "Star",
+      HOME: "Home",
+      USER: "User",
+      SETTINGS: "Settings",
+      SEARCH: "Search",
+      FILTER: "Filter",
+      ARROW_RIGHT: "ArrowRight",
+      ARROW_LEFT: "ArrowLeft",
+      ARROW_UP: "ArrowUp",
+      ARROW_DOWN: "ArrowDown"
+    }[e];
+    return i && i in a ? a[i] : a.Circle;
+  }, g = u.length > 0, W = c && !p && m, F = /* @__PURE__ */ I(
+    _.Root,
+    {
+      id: o,
+      pressed: p,
+      onPressedChange: V,
+      disabled: b,
+      className: [
+        "inline-flex items-center justify-center gap-2",
+        "font-medium transition-colors rounded-sm",
+        U[G],
+        M(),
+        b ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+      ].filter(Boolean).join(" "),
+      "aria-label": A || d || l,
+      "aria-describedby": h ? `${o}-instructions` : void 0,
+      "aria-invalid": g,
+      "aria-errormessage": g ? `${o}-error` : void 0,
+      children: [
+        s && x === "START" && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: N.createElement(C(s), { size: 16 }) }),
+        d && /* @__PURE__ */ t("span", { children: d }),
+        s && x === "END" && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: N.createElement(C(s), { size: 16 }) })
+      ]
+    }
+  ), P = /* @__PURE__ */ I(H, { children: [
+    g && /* @__PURE__ */ t("div", { id: `${o}-error`, className: "mt-2", role: "alert", children: u.map((e, r) => /* @__PURE__ */ t("p", { className: "text-sm text-red-700", children: e }, r)) }),
+    W && /* @__PURE__ */ t("p", { className: "text-sm text-red-700 mt-2", role: "alert", children: m })
+  ] });
+  return /* @__PURE__ */ t(
+    $,
+    {
+      label: l,
+      labelPosition: w,
+      required: c,
+      instructions: h,
+      helpTooltip: O,
+      accessibilityText: A,
+      inputId: o,
+      marginAbove: D,
+      marginBelow: L,
+      footer: P,
+      children: F
+    }
+  );
+};
+export {
+  J as ToggleField
+};

package/dist/components/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+export { ToggleField } from './ToggleField';
+export type { ToggleFieldProps } from './ToggleField';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/index.d.ts

@@ -0,0 +1,22 @@
+export * from './shared';
+export * from './Tag';
+export * from './Button';
+export * from './Card';
+export * from './Heading';
+export * from './MessageBanner';
+export * from './Milestone';
+export * from './ProgressBar';
+export * from './RichText';
+export * from './Stamp';
+export * from './TextField';
+export * from './Checkbox';
+export * from './RadioButton';
+export * from './Dropdown';
+export * from './Switch';
+export * from './Toggle';
+export * from './Slider';
+export * from './Tabs';
+export * from './Image';
+export * from './Dialog';
+export { TableOfContents } from './TableOfContents';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAA;AAGxB,cAAc,OAAO,CAAA;AAGrB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,WAAW,CAAA;AAGzB,cAAc,iBAAiB,CAAA;AAG/B,cAAc,aAAa,CAAA;AAG3B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,SAAS,CAAA;AAGvB,cAAc,aAAa,CAAA;AAG3B,cAAc,YAAY,CAAA;AAG1B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,SAAS,CAAA;AAGvB,cAAc,UAAU,CAAA;AAGxB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/components/shared/CollapsibleSection.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface CollapsibleSectionProps {
+    title: string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+}
+export declare const CollapsibleSection: React.FC<CollapsibleSectionProps>;
+export {};
+//# sourceMappingURL=CollapsibleSection.d.ts.map

package/dist/components/shared/CollapsibleSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleSection.d.ts","sourceRoot":"","sources":["../../../src/components/shared/CollapsibleSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkChE,CAAA"}

package/dist/components/shared/CollapsibleSection.js

@@ -0,0 +1,39 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useState as a } from "react";
+const c = ({
+  title: o,
+  children: s,
+  defaultOpen: n = !1
+}) => {
+  const [e, i] = a(n);
+  return /* @__PURE__ */ t("div", { className: "mb-4 border-2 border-gray-200 rounded-sm overflow-hidden", children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        onClick: () => i(!e),
+        className: "w-full flex items-center justify-between p-4 bg-white hover:bg-gray-50 transition-colors",
+        "aria-expanded": e,
+        children: [
+          /* @__PURE__ */ r("h2", { className: "text-xl font-semibold text-gray-900", children: o }),
+          /* @__PURE__ */ r(
+            "svg",
+            {
+              className: `w-6 h-6 text-gray-600 transition-transform ${e ? "rotate-180" : ""}`,
+              fill: "none",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ r("path", { d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    e && /* @__PURE__ */ r("div", { className: "p-6 bg-white border-t-2 border-gray-200", children: s })
+  ] });
+};
+export {
+  c as CollapsibleSection
+};

package/dist/components/shared/FieldLabel.d.ts

@@ -0,0 +1,27 @@
+import { SAILLabelPosition } from '../../types/sail';
+import * as React from 'react';
+export interface FieldLabelProps {
+    /** The label text to display */
+    label?: string;
+    /** Position of the label relative to the field */
+    labelPosition?: SAILLabelPosition;
+    /** Whether the field is required (shows asterisk) */
+    required?: boolean;
+    /** Helper text displayed below the input (not rendered by FieldLabel) */
+    instructions?: string;
+    /** Tooltip text for additional help */
+    helpTooltip?: string;
+    /** HTML for attribute to associate label with input */
+    htmlFor?: string;
+    /** Screen reader text when label is collapsed */
+    accessibilityText?: string;
+}
+/**
+ * Shared label component used across SAIL form fields
+ * Handles all label positioning modes: ABOVE, ADJACENT, COLLAPSED, JUSTIFIED
+ *
+ * Note: Instructions are NOT rendered by this component.
+ * They should be rendered by the parent component BELOW the input field.
+ */
+export declare const FieldLabel: React.FC<FieldLabelProps>;
+//# sourceMappingURL=FieldLabel.d.ts.map

package/dist/components/shared/FieldLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../../src/components/shared/FieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,eAAe;IAC9B,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kDAAkD;IAClD,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwChD,CAAA"}

package/dist/components/shared/FieldLabel.js

@@ -0,0 +1,40 @@
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import "react";
+const f = ({
+  label: r,
+  labelPosition: e = "ABOVE",
+  required: m = !1,
+  helpTooltip: l,
+  htmlFor: n,
+  accessibilityText: s
+}) => {
+  if (!r && !s) return null;
+  if (e === "COLLAPSED")
+    return /* @__PURE__ */ a("span", { className: "sr-only", children: r || s });
+  const t = [
+    "text-base",
+    "font-medium",
+    "text-gray-900",
+    e === "ABOVE" && "block mb-2",
+    e === "ADJACENT" && "mr-4",
+    // No inline-block needed, parent handles flex
+    e === "JUSTIFIED" && "block mb-2"
+    // Similar to ABOVE for now
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c("label", { htmlFor: n, className: t, children: [
+    r,
+    m && /* @__PURE__ */ a("span", { className: "text-red-700 ml-1", "aria-label": "required", children: "*" }),
+    l && /* @__PURE__ */ a(
+      "span",
+      {
+        className: "ml-2 text-gray-700 cursor-help",
+        title: l,
+        "aria-label": "help",
+        children: "ℹ️"
+      }
+    )
+  ] });
+};
+export {
+  f as FieldLabel
+};

package/dist/components/shared/FieldWrapper.d.ts

@@ -0,0 +1,35 @@
+import { SAILLabelPosition, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+export interface FieldWrapperProps {
+    /** The label text to display */
+    label?: string;
+    /** Position of the label relative to the field */
+    labelPosition?: SAILLabelPosition;
+    /** Whether the field is required (shows asterisk) */
+    required?: boolean;
+    /** Helper text displayed below the input */
+    instructions?: string;
+    /** Tooltip text for additional help */
+    helpTooltip?: string;
+    /** Screen reader text when label is collapsed */
+    accessibilityText?: string;
+    /** HTML ID for the input element (for label association) */
+    inputId: string;
+    /** Determines how much space is added above the component */
+    marginAbove?: SAILMarginSize;
+    /** Determines how much space is added below the component */
+    marginBelow?: SAILMarginSize;
+    /** The input/control element to render */
+    children: React.ReactNode;
+    /** Optional additional content below instructions (validation errors, etc.) */
+    footer?: React.ReactNode;
+}
+/**
+ * Shared wrapper component for all SAIL form fields
+ * Handles consistent layout for: label + input + instructions + validation
+ *
+ * This component is used internally by TextField, CheckboxField, DropdownField, etc.
+ * End users never see this - they just use the individual field components.
+ */
+export declare const FieldWrapper: React.FC<FieldWrapperProps>;
+//# sourceMappingURL=FieldWrapper.d.ts.map

package/dist/components/shared/FieldWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/shared/FieldWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEzE,MAAM,WAAW,iBAAiB;IAChC,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kDAAkD;IAClD,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAA;IACf,6DAA6D;IAC7D,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8FpD,CAAA"}

package/dist/components/shared/FieldWrapper.js

@@ -0,0 +1,71 @@
+import { jsxs as t, jsx as m } from "react/jsx-runtime";
+import "react";
+import { FieldLabel as A } from "./FieldLabel.js";
+const f = ({
+  label: E,
+  labelPosition: r = "ABOVE",
+  required: s = !1,
+  instructions: e,
+  helpTooltip: N,
+  accessibilityText: c,
+  inputId: a,
+  marginAbove: o = "NONE",
+  marginBelow: d = "STANDARD",
+  children: l,
+  footer: S
+}) => {
+  const i = {
+    NONE: "mt-0",
+    EVEN_LESS: "mt-1",
+    LESS: "mt-2",
+    STANDARD: "mt-4",
+    MORE: "mt-6",
+    EVEN_MORE: "mt-8"
+  }, x = {
+    NONE: "mb-0",
+    EVEN_LESS: "mb-1",
+    LESS: "mb-2",
+    STANDARD: "mb-4",
+    MORE: "mb-6",
+    EVEN_MORE: "mb-8"
+  }, n = [
+    i[o],
+    x[d]
+  ].filter(Boolean).join(" ");
+  return r === "ADJACENT" ? /* @__PURE__ */ t("div", { className: n, children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ m(
+        A,
+        {
+          label: E,
+          labelPosition: r,
+          required: s,
+          helpTooltip: N,
+          htmlFor: a,
+          accessibilityText: c
+        }
+      ),
+      /* @__PURE__ */ m("div", { className: "flex-1", children: l })
+    ] }),
+    e && /* @__PURE__ */ m("p", { id: `${a}-instructions`, className: "text-gray-700 text-sm mt-1", children: e }),
+    S
+  ] }) : /* @__PURE__ */ t("div", { className: n, children: [
+    /* @__PURE__ */ m(
+      A,
+      {
+        label: E,
+        labelPosition: r,
+        required: s,
+        helpTooltip: N,
+        htmlFor: a,
+        accessibilityText: c
+      }
+    ),
+    l,
+    e && /* @__PURE__ */ m("p", { id: `${a}-instructions`, className: "text-gray-700 text-sm mt-1", children: e }),
+    S
+  ] });
+};
+export {
+  f as FieldWrapper
+};

package/dist/components/shared/index.d.ts

@@ -0,0 +1,6 @@
+export { FieldLabel } from './FieldLabel';
+export type { FieldLabelProps } from './FieldLabel';
+export { FieldWrapper } from './FieldWrapper';
+export type { FieldWrapperProps } from './FieldWrapper';
+export { CollapsibleSection } from './CollapsibleSection';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/shared/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/shared/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Sailwind - Appian SAIL components for React
+ *
+ * A component library that brings Appian SAIL interface patterns to React,
+ * enabling rapid prototyping of Appian-style interfaces.
+ *
+ * @packageDocumentation
+ */
+export * from './components';
+export * from './types/sail';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,cAAc,cAAc,CAAA;AAG5B,cAAc,cAAc,CAAA"}