@pglevy/sailwind 0.1.0

package/dist/components/Card/CardLayout.js

@@ -0,0 +1,139 @@
+import { jsxs as L, jsx as N } from "react/jsx-runtime";
+import "react";
+import { mergeClasses as _ } from "../../utils/classNames.js";
+const v = ({
+  children: l,
+  height: b = "AUTO",
+  style: e = "NONE",
+  shape: m = "SEMI_ROUNDED",
+  padding: c = "STANDARD",
+  marginAbove: A = "NONE",
+  marginBelow: d = "STANDARD",
+  showBorder: S = !0,
+  showShadow: i = !1,
+  borderColor: r = "STANDARD",
+  decorativeBarPosition: a = "NONE",
+  decorativeBarColor: s,
+  showWhen: u = !0,
+  className: R
+}) => {
+  if (!u) return null;
+  const p = {
+    AUTO: "h-auto",
+    SHORT: "h-32",
+    MEDIUM: "h-48",
+    TALL: "h-64",
+    EXTRA_TALL: "h-96"
+  }, O = {
+    SQUARED: "rounded-none",
+    // SAIL SQUARED: 0
+    SEMI_ROUNDED: "rounded-sm",
+    // SAIL SEMI_ROUNDED: 4px
+    ROUNDED: "rounded-md"
+    // SAIL ROUNDED: 8px
+  }, C = {
+    NONE: "p-0",
+    // SAIL NONE: 0
+    EVEN_LESS: "p-1",
+    // SAIL EVEN_LESS: 4px
+    LESS: "p-2",
+    // SAIL LESS: 8px
+    STANDARD: "p-4",
+    // SAIL STANDARD: 16px
+    MORE: "p-6",
+    // SAIL MORE: 24px
+    EVEN_MORE: "p-8"
+    // SAIL EVEN_MORE: 32px
+  }, T = {
+    NONE: "mt-0",
+    // SAIL NONE: 0
+    EVEN_LESS: "mt-1",
+    // SAIL EVEN_LESS: 4px
+    LESS: "mt-2",
+    // SAIL LESS: 8px
+    STANDARD: "mt-4",
+    // SAIL STANDARD: 16px
+    MORE: "mt-6",
+    // SAIL MORE: 24px
+    EVEN_MORE: "mt-8"
+    // SAIL EVEN_MORE: 32px
+  }, D = {
+    NONE: "mb-0",
+    // SAIL NONE: 0
+    EVEN_LESS: "mb-1",
+    // SAIL EVEN_LESS: 4px
+    LESS: "mb-2",
+    // SAIL LESS: 8px
+    STANDARD: "mb-4",
+    // SAIL STANDARD: 16px
+    MORE: "mb-6",
+    // SAIL MORE: 24px
+    EVEN_MORE: "mb-8"
+    // SAIL EVEN_MORE: 32px
+  }, h = {
+    NONE: "bg-white",
+    TRANSPARENT: "bg-transparent",
+    STANDARD: "bg-white",
+    ACCENT: "bg-blue-50",
+    SUCCESS: "bg-green-50",
+    WARN: "bg-orange-50",
+    ERROR: "bg-red-50",
+    INFO: "bg-sky-50",
+    CHARCOAL_SCHEME: "bg-gray-900",
+    NAVY_SCHEME: "bg-blue-900",
+    PLUM_SCHEME: "bg-purple-900"
+  }, E = !e || e === "NONE" ? { className: "bg-white" } : typeof e == "string" && e.startsWith("#") ? { style: { backgroundColor: e } } : { className: h[e] || "bg-white" }, M = {
+    STANDARD: "border-gray-200",
+    ACCENT: "border-blue-500",
+    POSITIVE: "border-green-700",
+    WARN: "border-orange-500",
+    NEGATIVE: "border-red-700"
+  }, n = r ? r.startsWith("#") ? { style: { borderColor: r } } : { className: M[r] || "border-gray-200" } : { className: "border-gray-200" }, o = {
+    ACCENT: "bg-blue-500",
+    // Blue 3 (Aurora)
+    SUCCESS: "bg-green-500",
+    // Green 3 (Aurora)
+    WARN: "bg-orange-500",
+    // Orange 3 (Aurora)
+    ERROR: "bg-red-500",
+    // Red 3 (Aurora)
+    INFO: "bg-sky-500"
+    // Sky 3 (Aurora)
+  }, t = s ? s.startsWith("#") ? { style: { backgroundColor: s } } : { className: o[s] || o.ACCENT } : { className: o.ACCENT }, f = `
+    ${E.className || ""}
+    ${p[b]}
+    ${O[m]}
+    ${C[c]}
+    ${T[A]}
+    ${D[d]}
+    ${S ? `border-2 ${n.className || ""}` : ""}
+    ${i ? "shadow-md" : ""}
+    overflow-hidden
+    relative
+  `.replace(/\s+/g, " ").trim(), y = _(f, R), g = {
+    ...E.style || {},
+    ...n.style || {}
+  };
+  return /* @__PURE__ */ L("div", { className: y, style: Object.keys(g).length > 0 ? g : void 0, children: [
+    a === "TOP" && /* @__PURE__ */ N(
+      "div",
+      {
+        className: `absolute top-0 left-0 right-0 h-1 ${t.className || ""}`,
+        style: t.style,
+        "aria-hidden": "true"
+      }
+    ),
+    a === "START" && /* @__PURE__ */ N(
+      "div",
+      {
+        className: `absolute top-0 left-0 bottom-0 w-1 ${t.className || ""}`,
+        style: t.style,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ N("div", { className: a === "TOP" ? "pt-1" : "", children: l })
+  ] });
+};
+export {
+  v as CardLayout
+};

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

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

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

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

package/dist/components/Checkbox/CheckboxField.d.ts

@@ -0,0 +1,65 @@
+import { SAILLabelPosition, SAILMarginSize, SAILAlign } from '../../types/sail';
+import * as React from 'react';
+type ChoiceLayout = "STACKED" | "COMPACT";
+type ChoiceStyle = "STANDARD" | "CARDS";
+type Spacing = "STANDARD" | "MORE" | "EVEN_MORE";
+type ChoicePosition = "START" | "END";
+/**
+ * Displays a set of checkboxes for multi-select input
+ * Maps to SAIL a!checkboxField()
+ */
+export interface CheckboxFieldProps {
+    /** Text to display as the field label */
+    label?: 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;
+    /** Array of options for the user to select */
+    choiceLabels: any[];
+    /** Array of values associated with the corresponding choices */
+    choiceValues: any[];
+    /** Values of choices to display as selected */
+    value?: any[];
+    /** Validation errors to display below the field */
+    validations?: string[];
+    /** Callback when the user changes the selections */
+    saveInto?: (value: any[]) => void;
+    /** Callback when the user changes the selections (React-style alias for saveInto) */
+    onChange?: (value: any[]) => void;
+    /** Validation group name (no spaces) */
+    validationGroup?: string;
+    /** Custom message when field is required and not provided */
+    requiredMessage?: string;
+    /** Determines alignment of choice labels. Use with Grid Layout */
+    align?: SAILAlign | "LEFT" | "CENTER" | "RIGHT";
+    /** Determines where the label appears */
+    labelPosition?: SAILLabelPosition;
+    /** Displays a help icon with tooltip text */
+    helpTooltip?: string;
+    /** Determines the layout of choices */
+    choiceLayout?: ChoiceLayout;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+    /** Determines whether component is displayed */
+    showWhen?: boolean;
+    /** Determines how choices are displayed */
+    choiceStyle?: ChoiceStyle;
+    /** Determines space between options */
+    spacing?: Spacing;
+    /** Data source (record type) - not implemented in prototype */
+    data?: any;
+    /** Sort configurations - not implemented in prototype */
+    sort?: any[];
+    /** Space added above component */
+    marginAbove?: SAILMarginSize;
+    /** Space added below component */
+    marginBelow?: SAILMarginSize;
+    /** Determines whether checkboxes appear on left or right */
+    choicePosition?: ChoicePosition;
+}
+export declare const CheckboxField: React.FC<CheckboxFieldProps>;
+export {};
+//# sourceMappingURL=CheckboxField.d.ts.map

package/dist/components/Checkbox/CheckboxField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEpF,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,CAAA;AACzC,KAAK,WAAW,GAAG,UAAU,GAAG,OAAO,CAAA;AACvC,KAAK,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAChD,KAAK,cAAc,GAAG,OAAO,GAAG,KAAK,CAAA;AAErC;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,YAAY,EAAE,GAAG,EAAE,CAAA;IACnB,gEAAgE;IAChE,YAAY,EAAE,GAAG,EAAE,CAAA;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,GAAG,EAAE,CAAA;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;IACjC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;IACjC,wCAAwC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,yDAAyD;IACzD,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA;IACZ,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,4DAA4D;IAC5D,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoLtD,CAAA"}

package/dist/components/Checkbox/CheckboxField.js

@@ -0,0 +1,136 @@
+import { jsx as r, jsxs as N, Fragment as y } from "react/jsx-runtime";
+import "react";
+import { FieldWrapper as P } from "../shared/FieldWrapper.js";
+const Y = ({
+  label: C,
+  instructions: g,
+  required: m = !1,
+  disabled: a = !1,
+  choiceLabels: x,
+  choiceValues: R,
+  value: i = [],
+  validations: u = [],
+  saveInto: b,
+  onChange: T,
+  validationGroup: H,
+  requiredMessage: A,
+  align: D,
+  labelPosition: S = "ABOVE",
+  helpTooltip: j,
+  choiceLayout: c = "STACKED",
+  accessibilityText: k,
+  showWhen: w = !0,
+  choiceStyle: t = "STANDARD",
+  spacing: h = "STANDARD",
+  data: U,
+  sort: W,
+  marginAbove: v = "NONE",
+  marginBelow: M = "STANDARD",
+  choicePosition: O
+}) => {
+  if (!w) return null;
+  const s = `checkboxfield-${Math.random().toString(36).substr(2, 9)}`, $ = O ?? (t === "CARDS" ? "END" : "START"), B = {
+    STANDARD: c === "STACKED" ? "gap-2" : "gap-4",
+    MORE: c === "STACKED" ? "gap-4" : "gap-6",
+    EVEN_MORE: c === "STACKED" ? "gap-6" : "gap-8"
+  }, F = {
+    STANDARD: "gap-2",
+    MORE: "gap-4",
+    EVEN_MORE: "gap-6"
+  }, K = {
+    LEFT: "justify-start",
+    START: "justify-start",
+    CENTER: "justify-center",
+    RIGHT: "justify-end",
+    END: "justify-end"
+  }, E = (o, e) => {
+    const n = T || b;
+    if (!n) return;
+    const l = e ? [...i, o] : i.filter((d) => d !== o);
+    n(l);
+  }, p = u.length > 0, V = m && !i.length && A, _ = /* @__PURE__ */ r(
+    "div",
+    {
+      className: [
+        c === "STACKED" ? "flex flex-col" : "flex flex-wrap",
+        B[h],
+        D && K[D]
+      ].filter(Boolean).join(" "),
+      role: "group",
+      "aria-describedby": g ? `${s}-instructions` : void 0,
+      children: x.map((o, e) => {
+        const n = R[e], l = i.includes(n), d = `${s}-choice-${e}`, I = [
+          "flex",
+          "items-center",
+          F[h],
+          $ === "END" && "flex-row-reverse",
+          t === "CARDS" && "border border-gray-200 rounded-sm p-4 hover:border-blue-500 transition-colors cursor-pointer",
+          t === "CARDS" && l && "border-blue-500 bg-blue-50",
+          a && "opacity-50 cursor-not-allowed"
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ N(
+          "div",
+          {
+            className: I,
+            onClick: (f) => {
+              t === "CARDS" && !a && f.target.tagName !== "INPUT" && E(n, !l);
+            },
+            children: [
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  id: d,
+                  type: "checkbox",
+                  checked: l,
+                  disabled: a,
+                  onChange: (f) => E(n, f.target.checked),
+                  className: [
+                    "h-4 w-4 rounded border-gray-200 text-blue-500 focus:ring-blue-500",
+                    a ? "cursor-not-allowed" : "cursor-pointer"
+                  ].filter(Boolean).join(" "),
+                  "aria-invalid": p,
+                  "aria-errormessage": p ? `${s}-error` : void 0
+                }
+              ),
+              /* @__PURE__ */ r(
+                "label",
+                {
+                  htmlFor: t === "CARDS" ? void 0 : d,
+                  className: [
+                    "text-base text-gray-900",
+                    t === "CARDS" && "flex-1",
+                    a ? "cursor-not-allowed" : "cursor-pointer"
+                  ].filter(Boolean).join(" "),
+                  children: o
+                }
+              )
+            ]
+          },
+          e
+        );
+      })
+    }
+  ), G = /* @__PURE__ */ N(y, { children: [
+    p && /* @__PURE__ */ r("div", { id: `${s}-error`, className: "mt-2", role: "alert", children: u.map((o, e) => /* @__PURE__ */ r("p", { className: "text-sm text-red-700", children: o }, e)) }),
+    V && /* @__PURE__ */ r("p", { className: "text-sm text-red-700 mt-2", role: "alert", children: A })
+  ] });
+  return /* @__PURE__ */ r(
+    P,
+    {
+      label: C,
+      labelPosition: S,
+      required: m,
+      instructions: g,
+      helpTooltip: j,
+      accessibilityText: k,
+      inputId: s,
+      marginAbove: v,
+      marginBelow: M,
+      footer: G,
+      children: _
+    }
+  );
+};
+export {
+  Y as CheckboxField
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/components/Dialog/DialogField.d.ts

@@ -0,0 +1,51 @@
+import { SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+/**
+ * Width options for dialog sizing
+ */
+export type DialogWidth = "NARROW" | "MEDIUM" | "MEDIUM_PLUS" | "WIDE" | "FIT";
+/**
+ * Height options for dialog sizing
+ */
+export type DialogHeight = "AUTO" | "FIT" | "SHORT" | "MEDIUM" | "TALL" | "EXTRA_TALL";
+/**
+ * Displays a modal dialog overlay with customizable content
+ * 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.
+ */
+export interface DialogFieldProps {
+    /** Whether the dialog is open */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Element that triggers the dialog (usually a button) */
+    trigger?: React.ReactNode;
+    /** Dialog title text */
+    title?: string;
+    /** Dialog description text */
+    description?: string;
+    /** Main content of the dialog */
+    children: React.ReactNode;
+    /** Width of the dialog */
+    width?: DialogWidth;
+    /** Height of the dialog */
+    height?: DialogHeight;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Whether clicking outside closes the dialog */
+    closeOnOutsideClick?: boolean;
+    /** Whether pressing escape closes the dialog */
+    closeOnEscape?: boolean;
+    /** Determines whether component is displayed */
+    showWhen?: boolean;
+    /** Space added above component */
+    marginAbove?: SAILMarginSize;
+    /** Space added below component */
+    marginBelow?: SAILMarginSize;
+    /** Callback when dialog is closed */
+    onClose?: () => void;
+}
+export declare const DialogField: React.FC<DialogFieldProps>;
+//# sourceMappingURL=DialogField.d.ts.map

package/dist/components/Dialog/DialogField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogField.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEtD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,GAAG,MAAM,GAAG,KAAK,CAAA;AAE9E;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,CAAA;AAEtF;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iDAAiD;IACjD,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0JlD,CAAA"}

package/dist/components/Dialog/DialogField.js

@@ -0,0 +1,113 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import "react";
+import * as t from "@radix-ui/react-dialog";
+import { X as T } from "lucide-react";
+const y = ({
+  open: i,
+  onOpenChange: d,
+  trigger: r,
+  title: s,
+  description: n,
+  children: p,
+  width: E = "MEDIUM",
+  height: l = "AUTO",
+  showCloseButton: m = !0,
+  closeOnOutsideClick: N = !0,
+  closeOnEscape: x = !0,
+  showWhen: g = !0,
+  marginAbove: v = "NONE",
+  marginBelow: w = "STANDARD",
+  onClose: c
+}) => {
+  if (!g) return null;
+  const b = {
+    NONE: "",
+    EVEN_LESS: "mt-1",
+    LESS: "mt-2",
+    STANDARD: "mt-4",
+    MORE: "mt-6",
+    EVEN_MORE: "mt-8"
+  }, D = {
+    NONE: "",
+    EVEN_LESS: "mb-1",
+    LESS: "mb-2",
+    STANDARD: "mb-4",
+    MORE: "mb-6",
+    EVEN_MORE: "mb-8"
+  }, M = {
+    NARROW: "w-[90vw] max-w-sm",
+    // ~384px max
+    MEDIUM: "w-[90vw] max-w-md",
+    // ~448px max
+    MEDIUM_PLUS: "w-[90vw] max-w-lg",
+    // ~512px max
+    WIDE: "w-[90vw] max-w-2xl",
+    // ~672px max
+    FIT: "w-[95vw]"
+    // Full screen width (with small margin)
+  }, O = {
+    AUTO: "h-auto",
+    // Content-based height
+    FIT: "h-auto max-h-[85vh]",
+    // Content-based with max
+    SHORT: "h-[300px]",
+    // Fixed short height
+    MEDIUM: "h-[500px]",
+    // Fixed medium height
+    TALL: "h-[700px]",
+    // Fixed tall height
+    EXTRA_TALL: "h-[85vh]"
+    // Very tall, viewport-based
+  }, u = [
+    b[v],
+    D[w]
+  ].filter(Boolean).join(" "), f = (a) => {
+    d && d(a), !a && c && c();
+  }, h = /* @__PURE__ */ o(t.Portal, { children: [
+    /* @__PURE__ */ e(t.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
+    /* @__PURE__ */ o(
+      t.Content,
+      {
+        className: [
+          "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+          "bg-white rounded-md shadow-lg border border-gray-200",
+          "p-6",
+          M[E],
+          O[l],
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "focus:outline-none"
+        ].filter(Boolean).join(" "),
+        onPointerDownOutside: N ? void 0 : (a) => a.preventDefault(),
+        onEscapeKeyDown: x ? void 0 : (a) => a.preventDefault(),
+        children: [
+          (s || n || m) && /* @__PURE__ */ e("div", { className: "mb-4", children: /* @__PURE__ */ o("div", { className: "flex items-start justify-between", children: [
+            /* @__PURE__ */ o("div", { className: "flex-1", children: [
+              s && /* @__PURE__ */ e(t.Title, { className: "text-lg font-semibold text-gray-900 mb-2", children: s }),
+              n && /* @__PURE__ */ e(t.Description, { className: "text-sm text-gray-700", children: n })
+            ] }),
+            m && /* @__PURE__ */ e(t.Close, { asChild: !0, children: /* @__PURE__ */ e(
+              "button",
+              {
+                className: "ml-4 p-1 rounded-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
+                "aria-label": "Close dialog",
+                children: /* @__PURE__ */ e(T, { className: "h-4 w-4" })
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ e("div", { className: l !== "AUTO" && l !== "FIT" ? "overflow-y-auto" : "", children: p })
+        ]
+      }
+    )
+  ] });
+  return r ? /* @__PURE__ */ e("div", { className: u, children: /* @__PURE__ */ o(t.Root, { open: i, onOpenChange: f, children: [
+    /* @__PURE__ */ e(t.Trigger, { asChild: !0, children: r }),
+    h
+  ] }) }) : /* @__PURE__ */ e("div", { className: u, children: /* @__PURE__ */ e(t.Root, { open: i, onOpenChange: f, children: h }) });
+};
+export {
+  y as DialogField
+};

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

@@ -0,0 +1,3 @@
+export { DialogField } from './DialogField';
+export type { DialogFieldProps, DialogWidth, DialogHeight } from './DialogField';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Dropdown/DropdownField.d.ts

@@ -0,0 +1,87 @@
+import { SAILLabelPosition, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+type SearchDisplay = "AUTO" | "ON" | "OFF";
+/**
+ * Displays a list of choices for the user to select one item
+ * Maps to SAIL a!dropdownField()
+ */
+export interface DropdownFieldProps {
+    /** Text to display as the field label */
+    label?: string;
+    /** Determines where the label appears */
+    labelPosition?: SAILLabelPosition;
+    /** 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;
+    /** Array of options for the user to select */
+    choiceLabels: any[];
+    /** Array of values associated with the corresponding choices */
+    choiceValues: any[];
+    /** Text to display when nothing is selected and value is null */
+    placeholder?: string;
+    /** Value of the choice to display as selected */
+    value?: any;
+    /** Validation errors to display below the field */
+    validations?: string[];
+    /** Callback when the user changes the selection */
+    saveInto?: (value: any) => void;
+    /** Callback when the user changes the selection (React-style alias for saveInto) */
+    onChange?: (value: any) => void;
+    /** Validation group name (no spaces) */
+    validationGroup?: string;
+    /** Custom message when field is required and not provided */
+    requiredMessage?: string;
+    /** Displays a help icon with tooltip text */
+    helpTooltip?: string;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+    /** Determines whether component is displayed */
+    showWhen?: boolean;
+    /** Determines when a search box displays above options */
+    searchDisplay?: SearchDisplay;
+    /** Data source (record type) - not implemented in prototype */
+    data?: any;
+    /** Sort configurations - not implemented in prototype */
+    sort?: any[];
+    /** Space added above component */
+    marginAbove?: SAILMarginSize;
+    /** Space added below component */
+    marginBelow?: SAILMarginSize;
+}
+/**
+ * Single-select dropdown field component
+ *
+ * @example
+ * ```tsx
+ * <DropdownField
+ *   label="Language"
+ *   instructions="In which language are you most proficient?"
+ *   choiceLabels={["English", "Spanish", "French", "German"]}
+ *   choiceValues={["en_US", "es_ES", "fr_FR", "de_DE"]}
+ *   value={selectedLanguage}
+ *   saveInto={(value) => setSelectedLanguage(value)}
+ *   placeholder="Select a language"
+ *   searchDisplay="AUTO"
+ * />
+ * ```
+ *
+ * SAIL Translation:
+ * ```sail
+ * a!dropdownField(
+ *   label: "Language",
+ *   instructions: "In which language are you most proficient?",
+ *   choiceLabels: {"English", "Spanish", "French", "German"},
+ *   choiceValues: {"en_US", "es_ES", "fr_FR", "de_DE"},
+ *   value: local!language,
+ *   saveInto: local!language,
+ *   placeholder: "Select a language",
+ *   searchDisplay: "AUTO"
+ * )
+ * ```
+ */
+export declare const DropdownField: React.FC<DropdownFieldProps>;
+export {};
+//# sourceMappingURL=DropdownField.d.ts.map

package/dist/components/Dropdown/DropdownField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownField.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEzE,KAAK,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;AAE1C;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,YAAY,EAAE,GAAG,EAAE,CAAA;IACnB,gEAAgE;IAChE,YAAY,EAAE,GAAG,EAAE,CAAA;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iDAAiD;IACjD,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,wCAAwC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,yDAAyD;IACzD,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA;IACZ,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,kCAAkC;IAClC,WAAW,CAAC,EAAE,cAAc,CAAA;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAA"}

package/dist/components/Dropdown/DropdownField.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { DropdownFieldBase as e } from "./DropdownFieldBase.js";
+const m = (o) => /* @__PURE__ */ r(e, { multiple: !1, ...o });
+export {
+  m as DropdownField
+};