@pglevy/sailwind 0.4.0 → 0.5.1

package/dist/components/Stamp/StampField.js

@@ -3,7 +3,7 @@ import "react";
 import * as s from "lucide-react";
 const q = ({
   label: m,
-  labelPosition: D = "ABOVE",
+  labelPosition: g = "ABOVE",
   instructions: p,
   helpTooltip: A,
   icon: c,
@@ -12,7 +12,7 @@ const q = ({
   contentColor: i = "STANDARD",
   size: n = "MEDIUM",
   align: u = "CENTER",
-  tooltip: g,
+  tooltip: D,
   showWhen: C = !0,
   accessibilityText: N,
   link: o,
@@ -142,8 +142,8 @@ const q = ({
     {
       className: B,
       style: G,
-      title: g,
-      role: o ? "button" : void 0,
+      title: D,
+      role: o ? "button" : "img",
       tabIndex: o ? 0 : void 0,
       "aria-label": N || l || `${c} stamp`,
       children: Y()
@@ -152,7 +152,7 @@ const q = ({
     (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o?.onClick?.());
   }, children: T }) : T;
   return /* @__PURE__ */ d("div", { className: _, children: [
-    !m || D === "COLLAPSED" ? N ? /* @__PURE__ */ a("span", { className: "sr-only", children: m || N }) : null : /* @__PURE__ */ d("label", { className: "text-base font-medium text-gray-900 block mb-2", children: [
+    !m || g === "COLLAPSED" ? N ? /* @__PURE__ */ a("span", { className: "sr-only", children: m || N }) : null : /* @__PURE__ */ d("label", { className: "text-base font-medium text-gray-900 block mb-2", children: [
       m,
       A && /* @__PURE__ */ a(
         "span",

package/dist/components/Switch/Switch.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,QAAA,MAAM,IAAI;;;;;;;CAK0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA"}
+{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAK3D,QAAA,MAAM,IAAI;;;;;;;CAK0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA"}

package/dist/components/Tabs/Tabs.stories.d.ts

@@ -6,6 +6,23 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        color: {
+            control: "text";
+        };
+        orientation: {
+            control: "select";
+            options: string[];
+        };
+        activationMode: {
+            control: "select";
+            options: string[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Tabs/Tabs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,QAAA,MAAM,IAAI;;;;;;;CAKwB,CAAA;AAElC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAoBlC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KA8ExC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA6DjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAA"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAWwB,CAAA;AAElC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAoBlC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KA8ExC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA6DjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAA"}

package/dist/components/Tag/Tag.stories.d.ts

@@ -13,6 +13,16 @@ declare const meta: {
             backgroundColor: string;
         }[];
     };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        marginBelow: {
+            control: "select";
+            options: string[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Tag/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAWuB,CAAA;AAEjC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAA;AAEhC,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAeuB,CAAA;AAEjC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAA;AAEhC,eAAO,MAAM,cAAc,EAAE,KAS5B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA"}

package/dist/components/Tag/TagField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagField.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/TagField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAqB,MAAM,kBAAkB,CAAA;AAIjH;;GAEG;AACH,KAAK,OAAO,GAAG,OAAO,CAAC,QAAQ,EAAE,OAAO,GAAG,UAAU,CAAC,CAAA;AAEtD;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,IAAI,EAAE,YAAY,EAAE,CAAA;IACpB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,mCAAmC;IACnC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8I5C,CAAA"}
+{"version":3,"file":"TagField.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/TagField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAqB,MAAM,kBAAkB,CAAA;AAIjH;;GAEG;AACH,KAAK,OAAO,GAAG,OAAO,CAAC,QAAQ,EAAE,OAAO,GAAG,UAAU,CAAC,CAAA;AAEtD;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,IAAI,EAAE,YAAY,EAAE,CAAA;IACpB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,mCAAmC;IACnC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+I5C,CAAA"}

package/dist/components/Tag/TagField.js

@@ -73,6 +73,7 @@ const W = ({
       k,
       {
         ...y,
+        role: "listitem",
         className: `
           inline-block font-semibold max-w-full
           whitespace-nowrap overflow-hidden text-ellipsis

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

@@ -32,6 +32,16 @@ declare const meta: {
         marginAbove?: import('../..').SAILMarginSize | undefined;
         marginBelow?: import('../..').SAILMarginSize | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
+    argTypes: {
+        labelPosition: {
+            control: "select";
+            options: string[];
+        };
+        align: {
+            control: "select";
+            options: string[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYwB,CAAA;AAElC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAQhC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAkBjC,CAAA"}
+{"version":3,"file":"TextField.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBwB,CAAA;AAElC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAQhC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAsBjC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,QAAA,MAAM,IAAI;;;;;;;CAK0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAazB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAavB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAA"}
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAK3D,QAAA,MAAM,IAAI;;;;;;;CAK0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAazB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAavB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAA"}

package/dist/components/Toggle/ToggleField.js

@@ -8,7 +8,7 @@ const J = ({
   text: d,
   instructions: h,
   required: c = !1,
-  disabled: b = !1,
+  disabled: g = !1,
   value: p = !1,
   validations: u = [],
   saveInto: S,
@@ -23,12 +23,12 @@ const J = ({
   marginBelow: L = "STANDARD",
   size: G = "STANDARD",
   color: E = "ACCENT",
-  style: n = "OUTLINE",
-  icon: s,
+  style: s = "OUTLINE",
+  icon: o,
   iconPosition: x = "START"
 }) => {
   if (!y) return null;
-  const o = `togglefield-${Math.random().toString(36).substr(2, 9)}`, U = {
+  const n = `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",
@@ -37,17 +37,17 @@ const J = ({
     if (E.startsWith("#"))
       return "border-2";
     const e = E;
-    return n === "SOLID" ? {
+    return s === "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" ? {
+    }[e] : s === "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" ? {
+    }[e] : s === "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",
@@ -55,7 +55,7 @@ const J = ({
     }[e] : "";
   }, V = (e) => {
     const r = v || S;
-    r && !b && r(e);
+    r && !g && r(e);
   }, C = (e) => {
     const T = ((j) => j.split("-").map((f) => f.charAt(0).toUpperCase() + f.slice(1)).join(""))(e);
     if (T in a)
@@ -76,32 +76,32 @@ const J = ({
       ARROW_DOWN: "ArrowDown"
     }[e];
     return i && i in a ? a[i] : a.Circle;
-  }, g = u.length > 0, W = c && !p && m, F = /* @__PURE__ */ I(
+  }, b = u.length > 0, W = c && !p && m, F = /* @__PURE__ */ I(
     _.Root,
     {
-      id: o,
+      id: n,
       pressed: p,
       onPressedChange: V,
-      disabled: b,
+      disabled: g,
       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"
+        g ? "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,
+      "aria-label": A || d || l || (o ? o.replace(/-/g, " ") : void 0),
+      "aria-describedby": h ? `${n}-instructions` : void 0,
+      "aria-invalid": b,
+      "aria-errormessage": b ? `${n}-error` : void 0,
       children: [
-        s && x === "START" && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: N.createElement(C(s), { size: 16 }) }),
+        o && x === "START" && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: N.createElement(C(o), { size: 16 }) }),
         d && /* @__PURE__ */ t("span", { children: d }),
-        s && x === "END" && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: N.createElement(C(s), { size: 16 }) })
+        o && x === "END" && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: N.createElement(C(o), { 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)) }),
+    b && /* @__PURE__ */ t("div", { id: `${n}-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(
@@ -113,7 +113,7 @@ const J = ({
       instructions: h,
       helpTooltip: O,
       accessibilityText: A,
-      inputId: o,
+      inputId: n,
       marginAbove: D,
       marginBelow: L,
       footer: P,

package/dist/components/index.d.ts

@@ -20,4 +20,5 @@ export * from './Image';
 export * from './Dialog';
 export * from './ApplicationHeader';
 export * from './SideNavAdmin';
+export * from './ReadOnlyGrid';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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,cAAc,qBAAqB,CAAA;AAGnC,cAAc,gBAAgB,CAAA"}
+{"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,cAAc,qBAAqB,CAAA;AAGnC,cAAc,gBAAgB,CAAA;AAG9B,cAAc,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,60 +1,64 @@
-import { FieldLabel as r } from "./components/shared/FieldLabel.js";
+import { FieldLabel as e } from "./components/shared/FieldLabel.js";
 import { FieldWrapper as p } from "./components/shared/FieldWrapper.js";
-import { CollapsibleSection as m } from "./components/shared/CollapsibleSection.js";
+import { CollapsibleSection as i } from "./components/shared/CollapsibleSection.js";
 import { TagField as l } from "./components/Tag/TagField.js";
-import { TagItem as d } from "./components/Tag/TagItem.js";
+import { TagItem as f } from "./components/Tag/TagItem.js";
 import { ButtonWidget as F } from "./components/Button/ButtonWidget.js";
 import { ButtonArrayLayout as g } from "./components/Button/ButtonArrayLayout.js";
-import { CardLayout as T } from "./components/Card/CardLayout.js";
-import { HeadingField as u } from "./components/Heading/HeadingField.js";
-import { MessageBanner as S } from "./components/MessageBanner/MessageBanner.js";
-import { MilestoneField as y } from "./components/Milestone/MilestoneField.js";
-import { ProgressBar as I } from "./components/ProgressBar/ProgressBar.js";
-import { RichTextDisplayField as w } from "./components/RichText/RichTextDisplayField.js";
-import { TextItem as C } from "./components/RichText/TextItem.js";
+import { CardLayout as u } from "./components/Card/CardLayout.js";
+import { HeadingField as c } from "./components/Heading/HeadingField.js";
+import { MessageBanner as B } from "./components/MessageBanner/MessageBanner.js";
+import { MilestoneField as b } from "./components/Milestone/MilestoneField.js";
+import { ProgressBar as D } from "./components/ProgressBar/ProgressBar.js";
+import { RichTextDisplayField as h } from "./components/RichText/RichTextDisplayField.js";
+import { TextItem as A } from "./components/RichText/TextItem.js";
 import { Icon as M } from "./components/RichText/Icon.js";
-import { StampField as R } from "./components/Stamp/StampField.js";
-import { TextField as k } from "./components/TextField/TextField.js";
-import { CheckboxField as N } from "./components/Checkbox/CheckboxField.js";
-import { RadioButtonField as j } from "./components/RadioButton/RadioButtonField.js";
-import { DropdownField as z } from "./components/Dropdown/DropdownField.js";
-import { MultipleDropdownField as G } from "./components/Dropdown/MultipleDropdownField.js";
-import { SwitchField as K } from "./components/Switch/SwitchField.js";
+import { StampField as G } from "./components/Stamp/StampField.js";
+import { TextField as W } from "./components/TextField/TextField.js";
+import { CheckboxField as v } from "./components/Checkbox/CheckboxField.js";
+import { RadioButtonField as O } from "./components/RadioButton/RadioButtonField.js";
+import { DropdownField as j } from "./components/Dropdown/DropdownField.js";
+import { MultipleDropdownField as z } from "./components/Dropdown/MultipleDropdownField.js";
+import { SwitchField as J } from "./components/Switch/SwitchField.js";
 import { ToggleField as Q } from "./components/Toggle/ToggleField.js";
 import { SliderField as V } from "./components/Slider/SliderField.js";
 import { TabsField as Y } from "./components/Tabs/TabsField.js";
 import { ImageField as _ } from "./components/Image/ImageField.js";
 import { DialogField as oo } from "./components/Dialog/DialogField.js";
-import { ApplicationHeader as ro } from "./components/ApplicationHeader/ApplicationHeader.js";
+import { ApplicationHeader as eo } from "./components/ApplicationHeader/ApplicationHeader.js";
 import { SideNavAdmin as po } from "./components/SideNavAdmin/SideNavAdmin.js";
+import { ReadOnlyGrid as io } from "./components/ReadOnlyGrid/ReadOnlyGrid.js";
+import { GridColumn as lo } from "./components/ReadOnlyGrid/GridColumn.js";
 export {
-  ro as ApplicationHeader,
+  eo as ApplicationHeader,
   g as ButtonArrayLayout,
   F as ButtonWidget,
-  T as CardLayout,
-  N as CheckboxField,
-  m as CollapsibleSection,
+  u as CardLayout,
+  v as CheckboxField,
+  i as CollapsibleSection,
   oo as DialogField,
-  z as DropdownField,
-  r as FieldLabel,
+  j as DropdownField,
+  e as FieldLabel,
   p as FieldWrapper,
-  u as HeadingField,
+  lo as GridColumn,
+  c as HeadingField,
   M as Icon,
   _ as ImageField,
-  S as MessageBanner,
-  y as MilestoneField,
-  G as MultipleDropdownField,
-  I as ProgressBar,
-  j as RadioButtonField,
-  w as RichTextDisplayField,
+  B as MessageBanner,
+  b as MilestoneField,
+  z as MultipleDropdownField,
+  D as ProgressBar,
+  O as RadioButtonField,
+  io as ReadOnlyGrid,
+  h as RichTextDisplayField,
   po as SideNavAdmin,
   V as SliderField,
-  R as StampField,
-  K as SwitchField,
+  G as StampField,
+  J as SwitchField,
   Y as TabsField,
   l as TagField,
-  d as TagItem,
-  k as TextField,
-  C as TextItem,
+  f as TagItem,
+  W as TextField,
+  A as TextItem,
   Q as ToggleField
 };

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA"}

package/dist/types/sail.d.ts

@@ -34,4 +34,19 @@ export type SAILLabelPosition = "ABOVE" | "ADJACENT" | "COLLAPSED" | "JUSTIFIED"
  * Semantic color values matching SAIL's color constants
  */
 export type SAILSemanticColor = "ACCENT" | "POSITIVE" | "NEGATIVE" | "SECONDARY" | "STANDARD";
+/**
+ * Sort configuration for grid columns
+ */
+export interface SortInfo {
+    field: string;
+    ascending: boolean;
+}
+/**
+ * Grid height values matching SAIL's height parameter for grids
+ */
+export type SAILGridHeight = "SHORT" | "SHORT_PLUS" | "MEDIUM" | "MEDIUM_PLUS" | "TALL" | "TALL_PLUS" | "EXTRA_TALL" | "AUTO";
+/**
+ * Grid column width values matching SAIL's width parameter for grid columns
+ */
+export type SAILGridColumnWidth = "AUTO" | "ICON" | "ICON_PLUS" | "NARROW" | "NARROW_PLUS" | "MEDIUM" | "MEDIUM_PLUS" | "WIDE" | "1X" | "2X" | "3X" | "4X" | "5X" | "6X" | "7X" | "8X" | "9X" | "10X";
 //# sourceMappingURL=sail.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sail.d.ts","sourceRoot":"","sources":["../../src/types/sail.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CAAA;AAE9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE3F;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE9F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAA;AAEtF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAElD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAA;AAEhF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA"}
+{"version":3,"file":"sail.d.ts","sourceRoot":"","sources":["../../src/types/sail.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CAAA;AAE9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE3F;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE9F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAA;AAEtF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAElD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAA;AAEhF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA;AAE7F;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GACtB,OAAO,GAAG,YAAY,GACtB,QAAQ,GAAG,aAAa,GACxB,MAAM,GAAG,WAAW,GACpB,YAAY,GAAG,MAAM,CAAC;AAE1B;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAC3B,MAAM,GAAG,MAAM,GAAG,WAAW,GAC7B,QAAQ,GAAG,aAAa,GACxB,QAAQ,GAAG,aAAa,GACxB,MAAM,GACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAChC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pglevy/sailwind",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Appian SAIL components for React - Pre-release version under active development",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,7 +53,11 @@
     "version:patch": "npm version patch",
     "version:minor": "npm version minor",
     "version:major": "npm version major",
-    "release": "npm run build:lib && npm publish --access public"
+    "release": "npm run build:lib && npm publish --access public",
+    "test": "vitest --run",
+    "test-storybook": "vitest --run --project=storybook",
+    "test:unit": "vitest --run --project=unit",
+    "a11y-audit": "node scripts/a11y-audit.cjs"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -71,28 +75,39 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
-    "@storybook/addon-a11y": "^10.2.8",
-    "@storybook/addon-docs": "^10.2.8",
-    "@storybook/addon-themes": "^10.2.8",
-    "@storybook/react-vite": "^10.2.8",
+    "@storybook/addon-a11y": "^10.2.19",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/addon-themes": "^10.2.19",
+    "@storybook/addon-vitest": "^10.2.19",
+    "@storybook/react-vite": "^10.2.19",
     "@tailwindcss/postcss": "^4.1.14",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.3",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
     "autoprefixer": "^10.4.21",
+    "baseline-browser-mapping": "^2.10.8",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "fast-check": "^4.5.3",
     "globals": "^16.4.0",
+    "jsdom": "^28.1.0",
     "playwright": "^1.56.1",
     "postcss": "^8.5.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "storybook": "^10.2.8",
+    "storybook": "^10.2.19",
     "tailwindcss": "^4.1.14",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.44.0",
     "vite": "^7.1.7",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
+    "eslint-plugin-storybook": "10.2.19"
   }
 }