@pglevy/sailwind 0.1.0

package/dist/components/Image/ImageField.js

@@ -0,0 +1,159 @@
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import "react";
+import * as a from "@radix-ui/react-avatar";
+import { FieldWrapper as D } from "../shared/FieldWrapper.js";
+function z(l) {
+  return "imageType" in l && l.imageType === "user";
+}
+const W = ({
+  label: l,
+  labelPosition: d = "ABOVE",
+  instructions: u,
+  helpTooltip: f,
+  images: m,
+  showWhen: w = !0,
+  size: s = "MEDIUM",
+  isThumbnail: A = !1,
+  style: o = "STANDARD",
+  align: L = "START",
+  accessibilityText: p,
+  marginAbove: v = "NONE",
+  marginBelow: M = "STANDARD"
+}) => {
+  if (!w) return null;
+  const S = `imagefield-${Math.random().toString(36).substr(2, 9)}`, E = {
+    ICON: "w-5 h-5",
+    // 20x20px
+    ICON_PLUS: "w-10 h-10",
+    // 40x40px
+    TINY: "w-16 h-32",
+    // ~60x120px
+    EXTRA_SMALL: "w-20 h-40",
+    // ~80x160px
+    SMALL: "w-24 h-48",
+    // ~100x200px
+    SMALL_PLUS: "w-36 h-72",
+    // ~150x300px
+    MEDIUM: "w-48 h-96",
+    // ~200x400px
+    MEDIUM_PLUS: "w-72 h-96",
+    // ~300x500px (limited by h-96)
+    LARGE: "w-96 h-96",
+    // ~400x600px (limited by available classes)
+    LARGE_PLUS: "w-96 h-96",
+    // ~600x800px (limited by available classes)
+    EXTRA_LARGE: "w-96 h-96",
+    // ~800x1000px (limited by available classes)
+    GALLERY: "w-60 h-20",
+    // 240x80px
+    FIT: "max-w-full h-auto"
+    // Natural dimensions
+  }, r = {
+    ICON: "w-5 h-5",
+    // 20x20px
+    ICON_PLUS: "w-10 h-10",
+    // 40x40px
+    TINY: "w-16 h-16",
+    // 64x64px
+    EXTRA_SMALL: "w-20 h-20",
+    // 80x80px
+    SMALL: "w-24 h-24",
+    // 96x96px
+    SMALL_PLUS: "w-36 h-36",
+    // 144x144px
+    MEDIUM: "w-48 h-48",
+    // 192x192px
+    MEDIUM_PLUS: "w-72 h-72",
+    // 288x288px
+    LARGE: "w-96 h-96",
+    // 384x384px
+    LARGE_PLUS: "w-96 h-96",
+    // 384x384px (same as LARGE)
+    EXTRA_LARGE: "w-96 h-96",
+    // 384x384px (same as LARGE)
+    GALLERY: "w-20 h-20",
+    // 80x80px (square version of gallery)
+    FIT: "max-w-full h-auto aspect-square"
+    // Natural dimensions, square
+  }, N = {
+    START: "justify-start",
+    CENTER: "justify-center",
+    END: "justify-end"
+  }, R = () => [
+    (o === "AVATAR" ? r : E)[s],
+    "object-cover",
+    // Maintain aspect ratio
+    o === "AVATAR" ? "rounded-full" : "rounded-sm",
+    A ? "cursor-pointer hover:opacity-80 transition-opacity" : ""
+  ].filter(Boolean).join(" "), y = [
+    "flex flex-wrap gap-2",
+    N[L]
+  ].filter(Boolean).join(" "), T = m.filter((e) => e.showWhen !== !1), I = /* @__PURE__ */ t("div", { className: y, children: T.map((e, n) => {
+    if (z(e)) {
+      const { user: i, altText: b, caption: U, link: c } = e, k = b || i?.name || "User profile photo", j = r[s], _ = i?.initials ? /* @__PURE__ */ t("span", { className: "font-medium text-gray-700", children: i.initials }) : (
+        // Default user icon SVG
+        /* @__PURE__ */ t("svg", { className: "w-3/5 h-3/5 text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ t("path", { fillRule: "evenodd", d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z", clipRule: "evenodd" }) })
+      );
+      return /* @__PURE__ */ h(
+        a.Root,
+        {
+          className: `inline-flex items-center justify-center align-middle overflow-hidden select-none rounded-full bg-gray-100 ${j} ${c ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
+          title: U,
+          onClick: c,
+          children: [
+            /* @__PURE__ */ t(
+              a.Image,
+              {
+                className: "w-full h-full object-cover rounded-full",
+                src: i?.photoUrl,
+                alt: k
+              }
+            ),
+            /* @__PURE__ */ t(
+              a.Fallback,
+              {
+                className: "w-full h-full flex items-center justify-center bg-gray-100",
+                delayMs: 600,
+                children: _
+              }
+            )
+          ]
+        },
+        n
+      );
+    }
+    const g = e.document.startsWith("/") ? e.document : `/${e.document}`, x = R(), C = () => {
+      e.link && e.link();
+    };
+    return /* @__PURE__ */ h("div", { className: "relative", children: [
+      /* @__PURE__ */ t(
+        "img",
+        {
+          src: g,
+          alt: e.altText || "",
+          title: e.caption,
+          className: x,
+          onClick: e.link ? C : void 0
+        }
+      ),
+      e.link && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 bg-black bg-opacity-20 transition-opacity rounded-sm", children: /* @__PURE__ */ t("div", { className: "w-6 h-6 bg-white rounded-full flex items-center justify-center", children: /* @__PURE__ */ t("svg", { className: "w-4 h-4 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) }) }) })
+    ] }, n);
+  }) });
+  return /* @__PURE__ */ t(
+    D,
+    {
+      label: l,
+      labelPosition: d,
+      instructions: u,
+      helpTooltip: f,
+      accessibilityText: p,
+      inputId: S,
+      marginAbove: v,
+      marginBelow: M,
+      children: I
+    }
+  );
+};
+export {
+  W as ImageField
+};

package/dist/components/Image/UserImage.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Mock User type - in production, this would come from your data layer
+ * For prototyping, we just need a way to represent user data
+ */
+export interface User {
+    /** User's full name for display */
+    name?: string;
+    /** URL to user's profile photo */
+    photoUrl?: string;
+    /** User's initials for fallback display */
+    initials?: string;
+}
+export interface UserImageProps {
+    /** Discriminator to identify this as a user image */
+    imageType: 'user';
+    /** The user whose profile photo will be shown */
+    user?: User;
+    /** Alternate text for accessibility and screen readers */
+    altText?: string;
+    /** Optional caption text for mouseover (tooltip) */
+    caption?: string;
+    /** Link behavior when image is clicked */
+    link?: () => void;
+    /** Controls visibility of the image */
+    showWhen?: boolean;
+}
+/**
+ * User image interface for use within ImageField
+ * Maps to SAIL's a!userImage() function
+ *
+ * This is not a React component - it's a data structure
+ * that gets processed by ImageField for rendering with Radix Avatar
+ *
+ * @example
+ * <ImageField
+ *   label="Assigned To"
+ *   images={[
+ *     {
+ *       imageType: 'user',
+ *       user: { name: "John Smith", photoUrl: "/avatars/john.jpg", initials: "JS" },
+ *       altText: "John Smith profile photo",
+ *       caption: "Click to view profile"
+ *     }
+ *   ]}
+ *   style="AVATAR"
+ *   size="MEDIUM"
+ * />
+ */
+//# sourceMappingURL=UserImage.d.ts.map

package/dist/components/Image/UserImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserImage.d.ts","sourceRoot":"","sources":["../../../src/components/Image/UserImage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,IAAI;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,qDAAqD;IACrD,SAAS,EAAE,MAAM,CAAA;IACjB,iDAAiD;IACjD,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG"}

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

@@ -0,0 +1,5 @@
+export { ImageField } from './ImageField';
+export type { ImageFieldProps } from './ImageField';
+export type { DocumentImageProps } from './DocumentImage';
+export type { UserImageProps, User } from './UserImage';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/MessageBanner/MessageBanner.d.ts

@@ -0,0 +1,33 @@
+import { SAILShape, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+export type BackgroundColor = "INFO" | "SUCCESS" | "WARN" | "ERROR" | string;
+export type HighlightColor = "INFO" | "POSITIVE" | "WARN" | "NEGATIVE" | string;
+export type AnnounceBehavior = "DISPLAY_ONLY" | "DISPLAY_AND_ANNOUNCE" | "ANNOUNCE_ONLY";
+export interface MessageBannerProps {
+    /** Text to display on the first line inside the banner */
+    primaryText?: string;
+    /** Text to display beneath the primary text inside the banner */
+    secondaryText?: string;
+    /** Background color - semantic values or hex color (with optional transparency) */
+    backgroundColor?: BackgroundColor;
+    /** Color of the decorative bar and icon - semantic values or hex color */
+    highlightColor?: HighlightColor;
+    /** Icon to display before the primary text (decorative only) */
+    icon?: "info" | "success" | "warning" | "error";
+    /** Whether to show the decorative bar */
+    showDecorativeBar?: boolean;
+    /** Banner shape */
+    shape?: SAILShape;
+    /** Space above the banner */
+    marginAbove?: SAILMarginSize;
+    /** Space below the banner */
+    marginBelow?: SAILMarginSize;
+    /** Whether the component is evaluated */
+    showWhen?: boolean;
+    /** Screen reader behavior for announcing banner text */
+    announceBehavior?: AnnounceBehavior;
+    /** Additional text for screen readers only */
+    accessibilityText?: string;
+}
+export declare const MessageBanner: React.FC<MessageBannerProps>;
+//# sourceMappingURL=MessageBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBanner/MessageBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAC5E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;AAC/E,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,sBAAsB,GAAG,eAAe,CAAA;AAExF,MAAM,WAAW,kBAAkB;IACjC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mFAAmF;IACnF,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,0EAA0E;IAC1E,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAC/C,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB;IACnB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6JtD,CAAA"}

package/dist/components/MessageBanner/MessageBanner.js

@@ -0,0 +1,97 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import "react";
+import { AlertCircle as _, AlertTriangle as w, CheckCircle as L, Info as y } from "lucide-react";
+const F = ({
+  primaryText: r,
+  secondaryText: N,
+  backgroundColor: t = "INFO",
+  highlightColor: s = "INFO",
+  icon: m,
+  showDecorativeBar: O = !0,
+  shape: u = "SQUARED",
+  marginAbove: p = "NONE",
+  marginBelow: x = "STANDARD",
+  showWhen: f = !0,
+  announceBehavior: i = "DISPLAY_ONLY",
+  accessibilityText: c
+}) => {
+  if (!f) return null;
+  const R = i === "ANNOUNCE_ONLY", D = {
+    NONE: "mt-0",
+    EVEN_LESS: "mt-1",
+    LESS: "mt-2",
+    STANDARD: "mt-4",
+    MORE: "mt-6",
+    EVEN_MORE: "mt-8"
+  }, h = {
+    NONE: "mb-0",
+    EVEN_LESS: "mb-1",
+    LESS: "mb-2",
+    STANDARD: "mb-4",
+    MORE: "mb-6",
+    EVEN_MORE: "mb-8"
+  }, M = {
+    SQUARED: "rounded-none",
+    SEMI_ROUNDED: "rounded-sm",
+    ROUNDED: "rounded-md"
+  }, E = {
+    INFO: { bg: "bg-blue-100", text: "text-blue-900" },
+    SUCCESS: { bg: "bg-green-100", text: "text-green-900" },
+    WARN: { bg: "bg-yellow-100", text: "text-yellow-900" },
+    ERROR: { bg: "bg-red-100", text: "text-red-900" }
+  }, d = {
+    INFO: "bg-blue-500",
+    POSITIVE: "bg-green-700",
+    WARN: "bg-yellow-500",
+    NEGATIVE: "bg-red-700"
+  }, g = m ? {
+    info: y,
+    success: L,
+    warning: w,
+    error: _
+  }[m] : null, n = t in E, b = n ? E[t] : { bg: "", text: "text-gray-900" }, l = s in d, I = l ? d[s] : "", C = [
+    "relative",
+    "flex",
+    "items-start",
+    "p-4",
+    M[u],
+    D[p],
+    h[x],
+    n ? b.bg : "",
+    n ? b.text : "text-gray-900",
+    R && "sr-only"
+  ].filter(Boolean).join(" "), S = {};
+  !n && t && (S.backgroundColor = t);
+  const A = {};
+  !l && s && (A.backgroundColor = s);
+  const a = {};
+  return (i === "DISPLAY_AND_ANNOUNCE" || i === "ANNOUNCE_ONLY") && (a.role = "status", a["aria-live"] = "polite"), /* @__PURE__ */ o(
+    "div",
+    {
+      className: C,
+      style: S,
+      ...a,
+      children: [
+        O && /* @__PURE__ */ e(
+          "div",
+          {
+            className: `absolute left-0 top-0 bottom-0 w-1 ${l ? I : ""}`,
+            style: l ? void 0 : A,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: "flex items-start w-full pl-3", children: [
+          g && /* @__PURE__ */ e("div", { className: "flex-shrink-0 mr-3 mt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ e(g, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
+            r && /* @__PURE__ */ e("p", { className: "text-base font-medium leading-5", children: r }),
+            N && /* @__PURE__ */ e("p", { className: `text-sm leading-5 ${r ? "mt-1" : ""}`, children: N })
+          ] })
+        ] }),
+        c && /* @__PURE__ */ e("span", { className: "sr-only", children: c })
+      ]
+    }
+  );
+};
+export {
+  F as MessageBanner
+};

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

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

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

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

package/dist/components/Milestone/MilestoneField.d.ts

@@ -0,0 +1,50 @@
+import { SAILLabelPosition, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+type Orientation = "HORIZONTAL" | "VERTICAL";
+type StepStyle = "LINE" | "CHEVRON" | "DOT";
+type Color = "ACCENT" | "POSITIVE" | "NEGATIVE" | "WARN" | string;
+export interface MilestoneFieldProps {
+    /** Text to display as the field label */
+    label?: string;
+    /** Supplemental text about this field */
+    instructions?: string;
+    /** Array of labels describing the sequence of steps */
+    steps: string[];
+    /** Array of links to apply to the steps */
+    links?: any[];
+    /** Index of the current step. When null, all steps are future. When -1, all steps are completed */
+    active?: number | null;
+    /** Determines where the label appears */
+    labelPosition?: SAILLabelPosition;
+    /** Displays a help icon with tooltip text */
+    helpTooltip?: string;
+    /** Determines whether the component is displayed */
+    showWhen?: boolean;
+    /** Determines the layout of the milestone steps */
+    orientation?: Orientation;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+    /** Determines the fill color */
+    color?: Color;
+    /** Determines how much space is added above the layout */
+    marginAbove?: SAILMarginSize;
+    /** Determines how much space is added below the layout */
+    marginBelow?: SAILMarginSize;
+    /** Determines the style of the milestone steps */
+    stepStyle?: StepStyle;
+}
+/**
+ * Displays the completed, current, and future steps of a process or sequence
+ *
+ * @example
+ * <MilestoneField
+ *   label="Home Repair Claim Process"
+ *   instructions="Customer #2325691"
+ *   steps={["Submit Request", "Set Up Appointment", "File Assessment", "Submit Proposal"]}
+ *   active={2}
+ *   color="ACCENT"
+ * />
+ */
+export declare const MilestoneField: React.FC<MilestoneFieldProps>;
+export {};
+//# sourceMappingURL=MilestoneField.d.ts.map

package/dist/components/Milestone/MilestoneField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MilestoneField.d.ts","sourceRoot":"","sources":["../../../src/components/Milestone/MilestoneField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEzE,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAC5C,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAA;AAC3C,KAAK,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uDAAuD;IACvD,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,GAAG,EAAE,CAAA;IACb,mGAAmG;IACnG,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gCAAgC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,0DAA0D;IAC1D,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,0DAA0D;IAC1D,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsTxD,CAAA"}

package/dist/components/Milestone/MilestoneField.js

@@ -0,0 +1,206 @@
+import { jsxs as s, jsx as t, Fragment as I } from "react/jsx-runtime";
+import "react";
+import { FieldLabel as k } from "../shared/FieldLabel.js";
+const M = ({
+  label: x,
+  instructions: g,
+  steps: c,
+  links: f = [],
+  active: d = null,
+  labelPosition: y = "ABOVE",
+  helpTooltip: C,
+  showWhen: h = !0,
+  orientation: n = "HORIZONTAL",
+  accessibilityText: E,
+  color: v = "ACCENT",
+  marginAbove: O = "NONE",
+  marginBelow: p = "STANDARD",
+  stepStyle: a = "LINE"
+}) => {
+  if (!h) return null;
+  const u = `milestone-${Math.random().toString(36).slice(2, 11)}`, $ = {
+    NONE: "mt-0",
+    EVEN_LESS: "mt-1",
+    LESS: "mt-2",
+    STANDARD: "mt-4",
+    MORE: "mt-6",
+    EVEN_MORE: "mt-8"
+  }, R = {
+    NONE: "mb-0",
+    EVEN_LESS: "mb-1",
+    LESS: "mb-2",
+    STANDARD: "mb-4",
+    MORE: "mb-6",
+    EVEN_MORE: "mb-8"
+  }, r = ((l) => {
+    const o = {
+      ACCENT: { bg: "bg-blue-500", text: "text-blue-500", border: "border-blue-500" },
+      POSITIVE: { bg: "bg-green-700", text: "text-green-700", border: "border-green-700" },
+      NEGATIVE: { bg: "bg-red-700", text: "text-red-700", border: "border-red-700" },
+      WARN: { bg: "bg-yellow-500", text: "text-yellow-500", border: "border-yellow-500" }
+    };
+    return o[l] ? {
+      ...o[l],
+      style: void 0
+    } : {
+      bg: "",
+      text: "",
+      border: "",
+      style: { backgroundColor: l, borderColor: l, color: l }
+    };
+  })(v), A = (l) => d === null ? "future" : d === -1 || l < d ? "completed" : l === d ? "current" : "future", L = (l, o) => {
+    const e = A(o), b = f[o], m = o + 1, N = /* @__PURE__ */ s("div", { className: `flex ${a === "DOT" && n === "VERTICAL" ? "items-start" : a === "CHEVRON" ? "items-center" : "flex-col items-center"} ${n === "VERTICAL" ? "relative" : ""}`, children: [
+      /* @__PURE__ */ s("div", { className: "flex items-center justify-center relative", children: [
+        a === "DOT" && /* @__PURE__ */ s(I, { children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: `w-3 h-3 rounded-full border-2 relative z-10 flex-shrink-0 ${e === "completed" ? `${r.bg} ${r.border}` : e === "current" ? `bg-white ${r.border}` : "bg-gray-200 border-gray-300"}`,
+              style: r.style ? {
+                backgroundColor: e === "completed" ? r.style.backgroundColor : e === "current" ? "white" : void 0,
+                borderColor: e === "completed" || e === "current" ? r.style.borderColor : void 0
+              } : void 0
+            }
+          ),
+          n === "VERTICAL" && o < c.length - 1 && /* @__PURE__ */ t(
+            "div",
+            {
+              className: `absolute top-3 left-1.5 w-0.5 h-[32px] transform -translate-x-px ${e === "completed" ? r.bg || "bg-gray-400" : "bg-gray-200"}`,
+              style: r.style && e === "completed" ? {
+                backgroundColor: r.style.backgroundColor
+              } : void 0
+            }
+          )
+        ] }),
+        a === "LINE" && /* @__PURE__ */ t(
+          "div",
+          {
+            className: `w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-semibold relative z-10 ${e === "completed" || e === "current" ? `${r.bg} ${r.border} text-white` : "bg-gray-200 border-gray-300 text-gray-600"}`,
+            style: r.style ? {
+              backgroundColor: e === "completed" || e === "current" ? r.style.backgroundColor : void 0,
+              borderColor: e === "completed" || e === "current" ? r.style.borderColor : void 0,
+              color: e === "completed" || e === "current" ? "white" : void 0
+            } : void 0,
+            children: m
+          }
+        ),
+        a === "CHEVRON" && /* @__PURE__ */ s("div", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: `px-4 py-2 text-base font-medium relative ${e === "completed" || e === "current" ? `${r.bg} text-white` : "bg-gray-200 text-gray-600"}`,
+              style: r.style && (e === "completed" || e === "current") ? {
+                backgroundColor: r.style.backgroundColor,
+                color: "white"
+              } : void 0,
+              children: l
+            }
+          ),
+          n === "HORIZONTAL" && o < c.length - 1 && /* @__PURE__ */ t(
+            "div",
+            {
+              className: `w-0 h-0 border-l-[16px] border-y-[20px] border-y-transparent relative z-10 ${e === "completed" || e === "current" ? r.border : "border-l-gray-200"}`,
+              style: r.style && (e === "completed" || e === "current") ? {
+                borderLeftColor: r.style.backgroundColor
+              } : void 0
+            }
+          ),
+          n === "VERTICAL" && o < c.length - 1 && /* @__PURE__ */ t(
+            "div",
+            {
+              className: `absolute -bottom-2 left-4 w-0 h-0 border-t-[16px] border-x-[20px] border-x-transparent ${e === "completed" || e === "current" ? r.border : "border-t-gray-200"}`,
+              style: r.style && (e === "completed" || e === "current") ? {
+                borderTopColor: r.style.backgroundColor
+              } : void 0
+            }
+          )
+        ] })
+      ] }),
+      a !== "CHEVRON" && /* @__PURE__ */ t(
+        "span",
+        {
+          className: `${a === "DOT" && n === "VERTICAL" ? "ml-3 text-base leading-3" : "mt-2 text-base text-center"} ${e === "current" ? "font-semibold" : "font-normal"} ${e === "completed" || e === "current" ? r.text || "text-gray-900" : "text-gray-500"}`,
+          style: r.style && (e === "completed" || e === "current") ? {
+            color: r.style.color
+          } : void 0,
+          children: l
+        }
+      )
+    ] });
+    return b ? /* @__PURE__ */ t(
+      "button",
+      {
+        onClick: () => {
+          const i = b.onClick || b.saveInto;
+          i && typeof i == "function" && i(b.value);
+        },
+        className: `text-left hover:opacity-80 transition-opacity ${n === "HORIZONTAL" && a === "LINE" ? "flex-1" : ""}`,
+        "aria-label": `${l} - Step ${m}`,
+        children: N
+      },
+      o
+    ) : /* @__PURE__ */ t(
+      "div",
+      {
+        "aria-label": `${l} - Step ${m}`,
+        className: n === "HORIZONTAL" && a === "LINE" ? "flex-1" : "",
+        children: N
+      },
+      o
+    );
+  }, T = [
+    $[O],
+    R[p]
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s("div", { className: T, children: [
+    /* @__PURE__ */ t(
+      k,
+      {
+        label: x,
+        labelPosition: y,
+        helpTooltip: C,
+        htmlFor: u,
+        accessibilityText: E
+      }
+    ),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        id: u,
+        className: n === "HORIZONTAL" ? "relative" : "flex flex-col",
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": c.length - 1,
+        "aria-valuenow": d ?? 0,
+        "aria-valuetext": d !== null && d >= 0 && d < c.length ? c[d] : void 0,
+        children: [
+          n === "HORIZONTAL" && a === "LINE" && c.length > 1 && /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute top-3 h-0.5 bg-gray-200 z-0",
+              style: {
+                left: `calc(100% / ${c.length} / 2)`,
+                right: `calc(100% / ${c.length} / 2)`
+              },
+              children: /* @__PURE__ */ t(
+                "div",
+                {
+                  className: `h-full transition-all duration-300 ${r.bg || "bg-gray-400"}`,
+                  style: {
+                    width: d === null ? "0%" : d === -1 ? "100%" : `${d / (c.length - 1) * 100}%`,
+                    ...r.style ? { backgroundColor: r.style.backgroundColor } : {}
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: n === "HORIZONTAL" ? a === "CHEVRON" ? "flex items-center" : "flex items-start" : a === "CHEVRON" ? "flex flex-col space-y-4" : "flex flex-col space-y-8", children: c.map((l, o) => L(l, o)) })
+        ]
+      }
+    ),
+    g && /* @__PURE__ */ t("p", { className: "text-gray-700 text-sm mt-1", children: g })
+  ] });
+};
+export {
+  M as MilestoneField
+};

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { SAILLabelPosition, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+export type ProgressBarColor = "ACCENT" | "POSITIVE" | "NEGATIVE" | "WARN" | string;
+export type ProgressBarStyle = "THIN" | "THICK";
+export interface ProgressBarProps {
+    /** Text to display as the field label */
+    label?: string;
+    /** Supplemental text about this field */
+    instructions?: string;
+    /** Number to display between 0 and 100 */
+    percentage: number;
+    /** Determines where the label appears */
+    labelPosition?: SAILLabelPosition;
+    /** Help tooltip text */
+    helpTooltip?: string;
+    /** Additional text for screen readers only */
+    accessibilityText?: string;
+    /** Progress bar color - semantic values or hex color */
+    color?: ProgressBarColor;
+    /** Whether the component is displayed */
+    showWhen?: boolean;
+    /** Thickness of the progress bar */
+    style?: ProgressBarStyle;
+    /** Whether to display the percentage text */
+    showPercentage?: boolean;
+    /** Space above the component */
+    marginAbove?: SAILMarginSize;
+    /** Space below the component */
+    marginBelow?: SAILMarginSize;
+}
+export declare const ProgressBar: React.FC<ProgressBarProps>;
+//# sourceMappingURL=ProgressBar.d.ts.map