@pglevy/sailwind 0.1.0 → 0.2.0

package/dist/components/Button/ButtonWidget.d.ts

@@ -1,7 +1,6 @@
-import { SAILSize } from '../../types/sail';
+import { SAILSize, SAILSemanticColor } from '../../types/sail';
 import * as React from 'react';
 type ButtonStyle = "SOLID" | "OUTLINE" | "GHOST" | "LINK";
-type ButtonColor = "ACCENT" | "NEGATIVE" | "SECONDARY";
 type ButtonWidth = "MINIMIZE" | "FILL";
 type IconPosition = "START" | "END";
 /**
@@ -14,7 +13,8 @@ export interface ButtonWidgetProps {
     /** Determines the button's appearance */
     style?: ButtonStyle;
     /** Determines button color (hex or semantic) */
-    color?: ButtonColor | string;
+    /** Enhancement to SAIL */
+    color?: SAILSemanticColor | string;
     /** Determines size of the button */
     size?: SAILSize;
     /** Determines button width */

package/dist/components/Button/ButtonWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonWidget.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGhD,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AACzD,KAAK,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;AACtD,KAAK,WAAW,GAAG,UAAU,GAAG,MAAM,CAAA;AACtC,KAAK,YAAY,GAAG,OAAO,GAAG,KAAK,CAAA;AAEnC;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC5B,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC,qDAAqD;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgMpD,CAAA"}
+{"version":3,"file":"ButtonWidget.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGnE,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AACzD,KAAK,WAAW,GAAG,UAAU,GAAG,MAAM,CAAA;AACtC,KAAK,YAAY,GAAG,OAAO,GAAG,KAAK,CAAA;AAEnC;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,gDAAgD;IAChD,0BAA0B;IAC1B,KAAK,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAA;IAClC,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC,qDAAqD;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+LpD,CAAA"}

package/dist/components/Button/ButtonWidget.js

@@ -1,101 +1,110 @@
-import { jsxs as R, jsx as u } from "react/jsx-runtime";
+import { jsxs as R, jsx as l } from "react/jsx-runtime";
 import "react";
 import * as w from "lucide-react";
 import { mergeClasses as M } from "../../utils/classNames.js";
-const V = ({
-  label: i,
-  style: r = "OUTLINE",
+const j = ({
+  label: a,
+  style: e = "OUTLINE",
   color: t = "ACCENT",
-  size: b = "STANDARD",
-  width: d,
-  disabled: l = !1,
-  submit: p = !1,
-  showWhen: g = !0,
-  icon: a,
-  iconPosition: c = "START",
+  size: d = "STANDARD",
+  width: p,
+  disabled: b = !1,
+  submit: c = !1,
+  showWhen: f = !0,
+  icon: i,
+  iconPosition: g = "START",
   accessibilityText: h,
-  tooltip: E,
+  tooltip: C,
   loadingIndicator: o = !1,
   saveInto: A,
-  onClick: N,
-  value: x,
-  className: C
+  onClick: x,
+  value: E,
+  className: N
 }) => {
-  if (!g) return null;
-  const m = {
-    SMALL: "px-3 py-1.5 text-sm",
-    // SAIL SMALL: 12px horizontal, 6px vertical
-    STANDARD: "px-4 py-2.5 text-base",
-    // SAIL STANDARD: 16px horizontal, 10px vertical
+  if (!f) return null;
+  const T = {
+    SMALL: "px-3 py-2 text-sm",
+    // 12px horizontal, 8px vertical
+    STANDARD: "px-4 py-2 text-base",
+    // 16px horizontal, 8px vertical (matches input height)
     MEDIUM: "px-6 py-3 text-lg",
-    // SAIL MEDIUM: 24px horizontal, 12px vertical
-    LARGE: "px-8 py-4 text-xl"
-    // SAIL LARGE: 32px horizontal, 16px vertical
-  }, T = d === "FILL" ? "w-full" : "w-auto", S = () => {
+    // 24px horizontal, 12px vertical
+    LARGE: "px-10 py-4 text-xl"
+    // 40px horizontal, 16px vertical
+  }, S = p === "FILL" ? "w-full" : "w-auto", m = () => {
     if (!t.startsWith("#")) return;
-    const e = {};
-    return r === "SOLID" ? (e.backgroundColor = t, e.borderColor = "transparent", e.color = "#ffffff") : r === "OUTLINE" ? (e.borderColor = t, e.color = t, e.backgroundColor = "#ffffff") : (r === "GHOST" || r === "LINK") && (e.color = t, e.borderColor = "transparent"), Object.keys(e).length > 0 ? e : void 0;
-  }, L = () => {
+    const r = {};
+    return e === "SOLID" ? (r.backgroundColor = t, r.borderColor = "transparent", r.color = "#ffffff") : e === "OUTLINE" ? (r.borderColor = t, r.color = t, r.backgroundColor = "#ffffff") : (e === "GHOST" || e === "LINK") && (r.color = t, r.borderColor = "transparent"), Object.keys(r).length > 0 ? r : void 0;
+  }, I = () => {
     if (t.startsWith("#"))
-      return r === "OUTLINE" ? "border-2" : "";
-    const e = t;
-    return r === "SOLID" ? {
-      ACCENT: "bg-blue-500 text-white hover:bg-blue-700",
-      NEGATIVE: "bg-red-700 text-white hover:bg-red-900",
-      SECONDARY: "bg-gray-700 text-white hover:bg-gray-900"
-    }[e] : r === "OUTLINE" ? {
-      ACCENT: "border-2 border-blue-500 text-blue-500 bg-white hover:bg-blue-100",
-      NEGATIVE: "border-2 border-red-700 text-red-700 bg-white hover:bg-red-100",
-      SECONDARY: "border-2 border-gray-700 text-gray-700 bg-white hover:bg-gray-100"
-    }[e] : r === "GHOST" ? {
-      ACCENT: "text-blue-500 hover:bg-blue-100",
-      NEGATIVE: "text-red-700 hover:bg-red-100",
-      SECONDARY: "text-gray-700 hover:bg-gray-100"
-    }[e] : r === "LINK" ? {
-      ACCENT: "text-blue-500 hover:underline",
-      NEGATIVE: "text-red-700 hover:underline",
-      SECONDARY: "text-gray-700 hover:underline"
-    }[e] : "";
-  }, I = () => r === "OUTLINE" || C ? "" : "border-2 border-transparent", D = `
+      return "border";
+    const r = t;
+    return e === "SOLID" ? {
+      ACCENT: "border border-transparent bg-blue-500 text-white hover:bg-blue-700",
+      POSITIVE: "border border-transparent bg-green-700 text-white hover:bg-green-900",
+      NEGATIVE: "border border-transparent bg-red-700 text-white hover:bg-red-900",
+      SECONDARY: "border border-transparent bg-gray-700 text-white hover:bg-gray-900",
+      STANDARD: "border border-transparent bg-gray-900 text-white hover:bg-gray-700"
+    }[r] : e === "OUTLINE" ? {
+      ACCENT: "border border-blue-500 text-blue-500 bg-white hover:bg-blue-100",
+      POSITIVE: "border border-green-700 text-green-700 bg-white hover:bg-green-100",
+      NEGATIVE: "border border-red-700 text-red-700 bg-white hover:bg-red-100",
+      SECONDARY: "border border-gray-700 text-gray-700 bg-white hover:bg-gray-100",
+      STANDARD: "border border-gray-900 text-gray-900 bg-white hover:bg-gray-100"
+    }[r] : e === "GHOST" ? {
+      ACCENT: "border border-transparent text-blue-500 hover:bg-blue-100",
+      POSITIVE: "border border-transparent text-green-700 hover:bg-green-100",
+      NEGATIVE: "border border-transparent text-red-700 hover:bg-red-100",
+      SECONDARY: "border border-transparent text-gray-700 hover:bg-gray-100",
+      STANDARD: "border border-transparent text-gray-900 hover:bg-gray-100"
+    }[r] : e === "LINK" ? {
+      ACCENT: "border border-transparent text-blue-500 hover:underline",
+      POSITIVE: "border border-transparent text-green-700 hover:underline",
+      NEGATIVE: "border border-transparent text-red-700 hover:underline",
+      SECONDARY: "border border-transparent text-gray-700 hover:underline",
+      STANDARD: "border border-transparent text-gray-900 hover:underline"
+    }[r] : "";
+  }, D = () => "", v = `
     inline-flex items-center justify-center gap-1
     font-medium transition-colors h-auto rounded-sm
-    ${m[b]}
-    ${T}
+    focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2
+    ${T[d]}
+    ${S}
+    ${D()}
     ${I()}
-    ${L()}
-    ${l || o ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-  `.replace(/\s+/g, " ").trim(), v = M(D, C), O = () => {
-    const e = N || A;
-    e && !l && !o && e(x);
+    ${b || o ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+  `.replace(/\s+/g, " ").trim(), y = M(v, N), L = () => {
+    const r = x || A;
+    r && !b && !o && r(E);
   }, s = (() => {
-    if (!a) return null;
-    const e = a.split("-").map((f) => f.charAt(0).toUpperCase() + f.slice(1)).join(""), n = w[e];
-    return n ? /* @__PURE__ */ u(n, { size: {
+    if (!i) return null;
+    const r = i.split("-").map((u) => u.charAt(0).toUpperCase() + u.slice(1)).join(""), n = w[r];
+    return n ? /* @__PURE__ */ l(n, { size: {
       SMALL: 14,
       STANDARD: 16,
       MEDIUM: 18,
       LARGE: 20
-    }[b], "aria-hidden": "true" }) : (console.warn(`Icon "${a}" not found in Lucide icons`), null);
-  })(), y = S();
+    }[d], "aria-hidden": "true" }) : (console.warn(`Icon "${i}" not found in Lucide icons`), null);
+  })(), O = m();
   return /* @__PURE__ */ R(
     "button",
     {
-      type: p ? "submit" : "button",
-      onClick: O,
-      disabled: l || o,
-      className: v,
-      style: y,
-      "aria-label": h || i,
-      title: E,
+      type: c ? "submit" : "button",
+      onClick: L,
+      disabled: b || o,
+      className: y,
+      style: O,
+      "aria-label": h || a,
+      title: C,
       children: [
-        o && /* @__PURE__ */ u("span", { className: "animate-spin", "aria-label": "loading", children: "⟳" }),
-        !o && s && c === "START" && s,
-        i && /* @__PURE__ */ u("span", { children: i }),
-        !o && s && c === "END" && s
+        o && /* @__PURE__ */ l("span", { className: "animate-spin", "aria-label": "loading", children: "⟳" }),
+        !o && s && g === "START" && s,
+        a && /* @__PURE__ */ l("span", { children: a }),
+        !o && s && g === "END" && s
       ]
     }
   );
 };
 export {
-  V as ButtonWidget
+  j as ButtonWidget
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../src/components/TableOfContents.tsx"],"names":[],"mappings":"AA6HA,eAAO,MAAM,eAAe,+CA4B3B,CAAA"}
+{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../src/components/TableOfContents.tsx"],"names":[],"mappings":"AAkIA,eAAO,MAAM,eAAe,+CA4B3B,CAAA"}

package/dist/components/TableOfContents.js

@@ -6,7 +6,7 @@ import { RichTextDisplayField as l } from "./RichText/RichTextDisplayField.js";
 import { TextItem as r } from "./RichText/TextItem.js";
 import "react";
 import "lucide-react";
-const n = [
+const a = [
   {
     title: "Component Library",
     items: [
@@ -55,6 +55,11 @@ const n = [
   {
     title: "Pages",
     items: [
+      {
+        title: "Button + TextField Alignment Test",
+        path: "/buttontextfieldtest",
+        description: "Test page for TextField and button vertical alignment"
+      },
       {
         title: "ESG Conference Registration",
         path: "/esgconferenceregistration",
@@ -68,7 +73,7 @@ const n = [
     ]
   }
 ], m = ({ item: e }) => {
-  const [, a] = c();
+  const [, n] = c();
   return /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ t(
     l,
     {
@@ -79,7 +84,7 @@ const n = [
             text: e.title,
             color: "ACCENT",
             size: "MEDIUM",
-            link: () => a(e.path),
+            link: () => n(e.path),
             linkStyle: "STANDALONE"
           },
           "title"
@@ -109,8 +114,8 @@ const n = [
       marginBelow: "STANDARD"
     }
   ),
-  /* @__PURE__ */ t("div", { className: "space-y-2", children: e.items.map((a, p) => /* @__PURE__ */ t(m, { item: a }, p)) })
-] }), T = () => /* @__PURE__ */ i("div", { className: "max-w-4xl mx-auto", children: [
+  /* @__PURE__ */ t("div", { className: "space-y-2", children: e.items.map((n, p) => /* @__PURE__ */ t(m, { item: n }, p)) })
+] }), x = () => /* @__PURE__ */ i("div", { className: "max-w-4xl mx-auto", children: [
   /* @__PURE__ */ t(
     s,
     {
@@ -131,12 +136,12 @@ const n = [
   ),
   /* @__PURE__ */ t(d, { padding: "MORE", marginBelow: "NONE", showBorder: !1, showShadow: !0, children: /* @__PURE__ */ i("div", { className: "grid gap-8 md:grid-cols-2", children: [
     /* @__PURE__ */ i("div", { className: "space-y-8", children: [
-      /* @__PURE__ */ t(o, { group: n[0] }),
-      /* @__PURE__ */ t(o, { group: n[1] })
+      /* @__PURE__ */ t(o, { group: a[0] }),
+      /* @__PURE__ */ t(o, { group: a[1] })
     ] }),
-    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(o, { group: n[2] }) })
+    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(o, { group: a[2] }) })
   ] }) })
 ] });
 export {
-  T as TableOfContents
+  x as TableOfContents
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pglevy/sailwind",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Appian SAIL components for React - Pre-release version under active development",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,7 +44,11 @@
     "preview": "vite preview",
     "check-page": "node scripts/quick-check.cjs",
     "check-page:full": "node scripts/full-check.cjs",
-    "prepublishOnly": "npm run build:lib"
+    "prepublishOnly": "npm run build:lib",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "release": "npm run build:lib && npm publish"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",