@pglevy/sailwind 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGzE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AACnF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,wDAAwD;IACxD,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oCAAoC;IACpC,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,gCAAgC;IAChC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,gCAAgC;IAChC,WAAW,CAAC,EAAE,cAAc,CAAA;CAC7B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgKlD,CAAA"}

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,117 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import * as R from "react";
+import * as b from "@radix-ui/react-progress";
+import { FieldLabel as O } from "../shared/FieldLabel.js";
+const V = ({
+  label: f,
+  instructions: n,
+  percentage: d,
+  labelPosition: p = "ABOVE",
+  helpTooltip: g,
+  accessibilityText: o,
+  color: r = "ACCENT",
+  showWhen: x = !0,
+  style: t = "THIN",
+  showPercentage: i = !0,
+  marginAbove: S = "NONE",
+  marginBelow: u = "STANDARD"
+}) => {
+  if (!x) return null;
+  const a = Math.max(0, Math.min(100, d)), m = Math.round(d), N = R.useId(), I = {
+    NONE: "mt-0",
+    EVEN_LESS: "mt-1",
+    LESS: "mt-2",
+    STANDARD: "mt-4",
+    MORE: "mt-6",
+    EVEN_MORE: "mt-8"
+  }, C = {
+    NONE: "mb-0",
+    EVEN_LESS: "mb-1",
+    LESS: "mb-2",
+    STANDARD: "mb-4",
+    MORE: "mb-6",
+    EVEN_MORE: "mb-8"
+  }, l = {
+    THIN: { height: "h-2", textSize: "text-sm" },
+    THICK: { height: "h-6", textSize: "text-base" }
+  }, h = {
+    ACCENT: "bg-blue-500",
+    POSITIVE: "bg-green-700",
+    NEGATIVE: "bg-red-700",
+    WARN: "bg-yellow-500"
+  }, c = r in h, v = c ? h[r] : "", A = [
+    I[S],
+    C[u]
+  ].filter(Boolean).join(" "), T = [
+    "relative",
+    "overflow-hidden",
+    "bg-gray-300",
+    "rounded-sm",
+    l[t].height
+  ].join(" "), M = [
+    "h-full",
+    "transition-transform",
+    "duration-300",
+    "ease-in-out",
+    c ? v : "bg-gray-500"
+  ].join(" "), E = {};
+  return !c && r && (E.backgroundColor = r), /* @__PURE__ */ s("div", { className: A, children: [
+    /* @__PURE__ */ e(
+      O,
+      {
+        label: f,
+        labelPosition: p,
+        helpTooltip: g,
+        htmlFor: N,
+        accessibilityText: o
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: "relative", children: [
+      /* @__PURE__ */ e(
+        b.Root,
+        {
+          id: N,
+          className: T,
+          value: a,
+          max: 100,
+          children: /* @__PURE__ */ e(
+            b.Indicator,
+            {
+              className: M,
+              style: {
+                width: `${a}%`,
+                ...E
+              }
+            }
+          )
+        }
+      ),
+      i && t === "THICK" && a > 15 && /* @__PURE__ */ e(
+        "div",
+        {
+          className: "absolute inset-y-0 flex items-center pr-2",
+          style: { left: "0", width: `${a}%` },
+          children: /* @__PURE__ */ e("div", { className: "w-full flex justify-end", children: /* @__PURE__ */ s("span", { className: `${l[t].textSize} font-semibold text-white`, children: [
+            m,
+            "%"
+          ] }) })
+        }
+      ),
+      i && t === "THICK" && a <= 15 && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-start pl-3", children: /* @__PURE__ */ s("span", { className: `${l[t].textSize} font-semibold text-black`, children: [
+        m,
+        "%"
+      ] }) })
+    ] }),
+    (n || i && t === "THIN") && /* @__PURE__ */ s("div", { className: "flex justify-between items-start mt-1", children: [
+      /* @__PURE__ */ e("div", { className: "flex-1", children: n && /* @__PURE__ */ e("p", { className: "text-gray-700 text-sm", children: n }) }),
+      i && t === "THIN" && /* @__PURE__ */ s("span", { className: `${l[t].textSize} font-semibold text-black ml-4`, children: [
+        m,
+        "%"
+      ] })
+    ] }),
+    o && /* @__PURE__ */ e("span", { className: "sr-only", children: o })
+  ] });
+};
+export {
+  V as ProgressBar
+};

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

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ProgressBar';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/RadioButton/RadioButtonField.d.ts

@@ -0,0 +1,63 @@
+import { SAILLabelPosition, SAILMarginSize } 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 radio buttons for single-select input
+ * Maps to SAIL a!radioButtonField()
+ */
+export interface RadioButtonFieldProps {
+    /** 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[];
+    /** Value of 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;
+    /** Determines where the label appears */
+    labelPosition?: SAILLabelPosition;
+    /** Determines the layout of choices */
+    choiceLayout?: ChoiceLayout;
+    /** Displays a help icon with tooltip text */
+    helpTooltip?: string;
+    /** 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 radio buttons appear on left or right */
+    choicePosition?: ChoicePosition;
+}
+export declare const RadioButtonField: React.FC<RadioButtonFieldProps>;
+export {};
+//# sourceMappingURL=RadioButtonField.d.ts.map

package/dist/components/RadioButton/RadioButtonField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonField.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEzE,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,qBAAqB;IACpC,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,6CAA6C;IAC7C,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,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,uCAAuC;IACvC,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,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,+DAA+D;IAC/D,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsK5D,CAAA"}

package/dist/components/RadioButton/RadioButtonField.js

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

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

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

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

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

package/dist/components/RichText/Icon.d.ts

@@ -0,0 +1,28 @@
+import { SAILSizeExtended, SAILSemanticColor } from '../../types/sail';
+import * as React from 'react';
+type LinkStyle = "INLINE" | "STANDALONE";
+export interface IconProps {
+    /** The key of the icon to display */
+    icon: string;
+    /** Alternative text for accessibility */
+    altText?: string;
+    /** Text to display on mouseover */
+    caption?: string;
+    /** Icon size */
+    size?: SAILSizeExtended;
+    /** Icon color - semantic color or hex value */
+    color?: SAILSemanticColor | string;
+    /** Link behavior when icon is clicked */
+    link?: () => void;
+    /** How the link is underlined */
+    linkStyle?: LinkStyle;
+    /** Whether to show this component */
+    showWhen?: boolean;
+}
+/**
+ * Icon component for use within Rich Text Display Field
+ * Displays icons with various formatting options
+ */
+export declare const Icon: React.FC<IconProps>;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/RichText/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,KAAK,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAExC,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gBAAgB;IAChB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAA;IAClC,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiIpC,CAAA"}

package/dist/components/RichText/Icon.js

@@ -0,0 +1,94 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import * as t from "lucide-react";
+const f = ({
+  icon: i,
+  altText: c,
+  caption: r,
+  size: p = "STANDARD",
+  color: o = "STANDARD",
+  link: n,
+  linkStyle: S = "INLINE",
+  // Note: linkStyle not implemented yet for icons
+  showWhen: C = !0
+}) => {
+  if (!C || !i) return null;
+  const T = {
+    SMALL: 12,
+    STANDARD: 16,
+    MEDIUM: 20,
+    MEDIUM_PLUS: 24,
+    LARGE: 28,
+    LARGE_PLUS: 32,
+    EXTRA_LARGE: 40
+  }, R = {
+    STANDARD: "text-gray-900",
+    ACCENT: "text-blue-500",
+    POSITIVE: "text-green-700",
+    NEGATIVE: "text-red-700",
+    SECONDARY: "text-gray-700"
+  }, m = [
+    "inline-block",
+    // Handle color - use semantic mapping or inline style for hex
+    o.startsWith("#") ? "" : R[o] || "text-gray-900",
+    // Link styles
+    n && "cursor-pointer",
+    n && "hover:opacity-75"
+  ].filter(Boolean).join(" "), u = o.startsWith("#") ? { color: o } : void 0, N = ((e) => {
+    const E = ((D) => D.split("-").map((I) => I.charAt(0).toUpperCase() + I.slice(1)).join(""))(e);
+    if (E in t)
+      return t[E];
+    const A = e.charAt(0).toUpperCase() + e.slice(1).toLowerCase();
+    if (A in t)
+      return t[A];
+    const s = {
+      USER: "User",
+      PHONE: "Phone",
+      "BUILDING-O": "Building",
+      HOME: "Home",
+      "CHECK-SQUARE-O": "SquareCheck",
+      "FILE-TEXT-O": "FileText",
+      "PICTURE-O": "Image",
+      HEADPHONES: "Headphones",
+      "VIDEO-CAMERA": "Video",
+      WRENCH: "Wrench",
+      EXCLAMATION: "AlertTriangle",
+      TICKET: "Ticket",
+      "ARROW-RIGHT": "ArrowRight",
+      CHECK: "Check"
+    }[e.toUpperCase()];
+    return s && s in t ? t[s] : t.Circle;
+  })(i), l = /* @__PURE__ */ a(
+    "span",
+    {
+      className: "inline-flex items-center translate-y-0.5",
+      title: r,
+      "aria-label": c || r,
+      role: c || r ? "img" : "presentation",
+      children: /* @__PURE__ */ a(
+        N,
+        {
+          size: T[p],
+          className: m,
+          style: u
+        }
+      )
+    }
+  );
+  return n ? /* @__PURE__ */ a(
+    "span",
+    {
+      onClick: n,
+      role: "button",
+      tabIndex: 0,
+      className: "inline-block",
+      onKeyDown: (e) => {
+        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n());
+      },
+      children: l
+    }
+  ) : l;
+};
+export {
+  f as Icon
+};

package/dist/components/RichText/RichTextDisplayField.d.ts

@@ -0,0 +1,36 @@
+import { SAILLabelPosition, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+type TextAlign = "LEFT" | "CENTER" | "RIGHT";
+export interface RichTextDisplayFieldProps {
+    /** Text to display as the field label */
+    label?: string;
+    /** Position of the label */
+    labelPosition?: SAILLabelPosition;
+    /** Supplemental text about this field */
+    instructions?: string;
+    /** Alignment of the text value */
+    align?: TextAlign;
+    /** Array of rich text to display */
+    value?: React.ReactNode[];
+    /** Help tooltip text */
+    helpTooltip?: string;
+    /** Screen reader text */
+    accessibilityText?: string;
+    /** Whether to show this component */
+    showWhen?: boolean;
+    /** Prevents wrapping to multiple lines */
+    preventWrapping?: boolean;
+    /** Tooltip text on mouseover */
+    tooltip?: string;
+    /** Margin above the component */
+    marginAbove?: SAILMarginSize;
+    /** Margin below the component */
+    marginBelow?: SAILMarginSize;
+}
+/**
+ * Rich Text Display Field component
+ * Displays text in variety of styles, including bold, italics, underline, links, and lists
+ */
+export declare const RichTextDisplayField: React.FC<RichTextDisplayFieldProps>;
+export {};
+//# sourceMappingURL=RichTextDisplayField.d.ts.map

package/dist/components/RichText/RichTextDisplayField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextDisplayField.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/RichTextDisplayField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEzE,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE5C,MAAM,WAAW,yBAAyB;IACxC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4BAA4B;IAC5B,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,oCAAoC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACzB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iCAAiC;IACjC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,iCAAiC;IACjC,WAAW,CAAC,EAAE,cAAc,CAAA;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAyFpE,CAAA"}

package/dist/components/RichText/RichTextDisplayField.js

@@ -0,0 +1,79 @@
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import * as o from "react";
+import { FieldLabel as A } from "../shared/FieldLabel.js";
+const L = ({
+  label: a,
+  labelPosition: l = "ABOVE",
+  instructions: i,
+  align: m = "LEFT",
+  value: n = [],
+  helpTooltip: s,
+  accessibilityText: e,
+  showWhen: E = !0,
+  preventWrapping: c = !1,
+  tooltip: N,
+  marginAbove: d = "NONE",
+  marginBelow: S = "STANDARD"
+}) => {
+  if (!E) return null;
+  const R = {
+    NONE: "mt-0",
+    EVEN_LESS: "mt-1",
+    LESS: "mt-2",
+    STANDARD: "mt-4",
+    MORE: "mt-6",
+    EVEN_MORE: "mt-8"
+  }, g = {
+    NONE: "mb-0",
+    EVEN_LESS: "mb-1",
+    LESS: "mb-2",
+    STANDARD: "mb-4",
+    MORE: "mb-6",
+    EVEN_MORE: "mb-8"
+  }, h = {
+    LEFT: "text-left",
+    CENTER: "text-center",
+    RIGHT: "text-right"
+  }, p = [
+    R[d],
+    g[S]
+  ].filter(Boolean).join(" "), f = [
+    h[m],
+    c && "truncate",
+    "leading-relaxed"
+    // Better line spacing for rich text
+  ].filter(Boolean).join(" "), r = o.useMemo(
+    () => `richtext-${Math.random().toString(36).substr(2, 9)}`,
+    []
+  );
+  return /* @__PURE__ */ x("div", { className: p, children: [
+    /* @__PURE__ */ t(
+      A,
+      {
+        label: a,
+        labelPosition: l,
+        instructions: i,
+        helpTooltip: s,
+        htmlFor: r,
+        accessibilityText: e
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        id: r,
+        className: f,
+        title: N,
+        role: e ? "region" : void 0,
+        "aria-label": e,
+        children: n.length > 0 ? n.map((M, b) => /* @__PURE__ */ t(o.Fragment, { children: M }, b)) : (
+          // Show empty state if no content
+          /* @__PURE__ */ t("span", { className: "text-gray-500 italic", children: "No content" })
+        )
+      }
+    )
+  ] });
+};
+export {
+  L as RichTextDisplayField
+};

package/dist/components/RichText/TextItem.d.ts

@@ -0,0 +1,27 @@
+import { SAILSizeExtended, SAILSemanticColor } from '../../types/sail';
+import * as React from 'react';
+type TextStyle = "PLAIN" | "EMPHASIS" | "STRONG" | "UNDERLINE" | "STRIKETHROUGH";
+type LinkStyle = "INLINE" | "STANDALONE";
+export interface TextItemProps {
+    /** Array of text to display as a rich text item */
+    text: string | React.ReactNode | (string | React.ReactNode)[];
+    /** Text style(s) to apply. Multiple styles may be applied */
+    style?: TextStyle | TextStyle[];
+    /** Text size */
+    size?: SAILSizeExtended;
+    /** Text color - semantic color or hex value */
+    color?: SAILSemanticColor | string;
+    /** Link to apply to the text */
+    link?: () => void;
+    /** How the link is underlined */
+    linkStyle?: LinkStyle;
+    /** Whether to show this component */
+    showWhen?: boolean;
+}
+/**
+ * Text Item component for use within Rich Text Display Field
+ * Displays styled text with various formatting options
+ */
+export declare const TextItem: React.FC<TextItemProps>;
+export {};
+//# sourceMappingURL=TextItem.d.ts.map

package/dist/components/RichText/TextItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextItem.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/TextItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,KAAK,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,eAAe,CAAA;AAChF,KAAK,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAExC,MAAM,WAAW,aAAa;IAC5B,mDAAmD;IACnD,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,CAAA;IAC7D,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAC/B,gBAAgB;IAChB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAA;IAClC,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0F5C,CAAA"}

package/dist/components/RichText/TextItem.js

@@ -0,0 +1,58 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as D from "react";
+const I = ({
+  text: s,
+  style: i = "PLAIN",
+  size: c = "STANDARD",
+  color: r = "STANDARD",
+  link: t,
+  linkStyle: a = "INLINE",
+  showWhen: d = !0
+}) => {
+  if (!d) return null;
+  const n = Array.isArray(i) ? i : [i], x = {
+    SMALL: "text-xs",
+    STANDARD: "text-base",
+    MEDIUM: "text-lg",
+    MEDIUM_PLUS: "text-xl",
+    LARGE: "text-2xl",
+    LARGE_PLUS: "text-3xl",
+    EXTRA_LARGE: "text-4xl"
+  }, E = {
+    STANDARD: "text-gray-900",
+    ACCENT: "text-blue-500",
+    POSITIVE: "text-green-700",
+    NEGATIVE: "text-red-700",
+    SECONDARY: "text-gray-700"
+  }, l = [
+    x[c],
+    // Handle color - use semantic mapping or inline style for hex
+    r.startsWith("#") ? "" : E[r] || "text-gray-900",
+    // Apply text styles
+    n.includes("STRONG") && "font-bold",
+    n.includes("EMPHASIS") && "italic",
+    n.includes("UNDERLINE") && "underline",
+    n.includes("STRIKETHROUGH") && "line-through",
+    // Link styles
+    t && a === "INLINE" && "underline decoration-dotted decoration-current/50 underline-offset-5 hover:no-underline",
+    t && a === "STANDALONE" && "no-underline decoration-current/50 underline-offset-5 hover:underline"
+  ].filter(Boolean).join(" "), u = r.startsWith("#") ? { color: r } : void 0, A = () => Array.isArray(s) ? s.map((e, N) => /* @__PURE__ */ o(D.Fragment, { children: e }, N)) : s;
+  return t ? /* @__PURE__ */ o(
+    "a",
+    {
+      href: "#",
+      className: l,
+      style: u,
+      onClick: (e) => {
+        e.preventDefault(), t();
+      },
+      onKeyDown: (e) => {
+        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t());
+      },
+      children: A()
+    }
+  ) : /* @__PURE__ */ o("span", { className: l, style: u, children: A() });
+};
+export {
+  I as TextItem
+};