@pglevy/sailwind 0.1.0 → 0.3.0

package/README.md

@@ -1,77 +1,72 @@
 # Sailwind
 
-**React component library for rapid prototyping of Appian applications with SAIL-compatible syntax.**
+React component library for prototyping Appian applications with SAIL-compatible syntax.
 
 ## Overview
 
-Sailwind enables UX designers to rapidly prototype Appian applications using React and LLMs (like Claude) before committing to SAIL development. Components look like Appian, use exact SAIL parameter names, and translate directly to production code.
+Sailwind provides React components that mirror Appian SAIL parameter names and conventions. Components use exact SAIL syntax (`size="STANDARD"`, `color="ACCENT"`) so prototype code translates almost directly to production SAIL.
 
-## Key Features
+Built on Radix UI primitives, Tailwind CSS, and TypeScript.
 
-- **SAIL-Exact Parameters** - Use UPPERCASE values matching SAIL: `size="STANDARD"` not `size="standard"`
-- **Backwards Compatible** - React code translates almost directly to SAIL
-- **LLM-Friendly** - Clear patterns for AI-assisted development
-- **Accessible** - All components meet WCAG 2.1 AA standards
-- **Production-Ready Foundation** - Built on Radix UI primitives + Tailwind CSS
+## For Prototypers
 
-## Quickstart
+Use the **[sailwind-starter](https://github.com/pglevy/sailwind-starter)** template to start building prototypes. It comes pre-configured with Sailwind and is ready for LLM-assisted development (Kiro, Cursor, Claude Code, etc.).
 
-### Option 1: Use This Template (Recommended)
-1. Click **"Use this template"** button above
-2. Clone your new repository
-3. Install dependencies: `npm install`
-4. Start development server: `npm run dev`
-5. Open `http://localhost:5173` to see the component library and examples
+Browse the **[Component Reference](https://pglevy.github.io/sailwind/)** to see what's available.
+
+## For Contributors
+
+### Setup
 
-### Option 2: Clone Directly
 ```bash
 git clone https://github.com/pglevy/sailwind.git
 cd sailwind
 npm install
-npm run dev
 ```
 
-### Creating Your First Prototype
-1. **Browse examples** at `/#/examples/taskdashboard` to see what's possible
-2. **Explore components** at `/#/components` to understand available building blocks
-3. **Create new pages** by adding `.tsx` files to `src/pages/` - they'll automatically become routes
-4. **Import components** using exact SAIL parameter names:
+### Development
+
+Storybook is the primary development environment:
+
+```bash
+npm run storybook     # Start Storybook at http://localhost:6006
+```
+
+Every component has a `.stories.tsx` file for documentation and interactive testing. When adding or modifying components, update the corresponding stories.
+
+### Build
+
+```bash
+npm run build:lib         # Build the npm package (dist/)
+npm run build-storybook   # Build the Storybook site (storybook-static/)
+npm run lint              # Run ESLint
+```
+
+### Project Structure
 
-```tsx
-// src/pages/my-prototype.tsx
-import { CardLayout, HeadingField, TagField, ButtonArrayLayout } from '../components'
-
-export default function MyPrototype() {
-  return (
-    <CardLayout padding="STANDARD">
-      <HeadingField text="My Prototype" size="LARGE" />
-      <TagField 
-        tags={[{ text: "DRAFT", backgroundColor: "ACCENT" }]}
-        size="STANDARD" 
-      />
-      <ButtonArrayLayout
-        buttons={[
-          { label: "Save", style: "SOLID", color: "ACCENT" },
-          { label: "Cancel", style: "OUTLINE", color: "SECONDARY" }
-        ]}
-        align="END"
-      />
-    </CardLayout>
-  )
-}
 ```
+src/
+├── components/         # SAIL components (Button, Card, Dropdown, etc.)
+│   └── */              # Each component has its own directory with stories
+├── stories/
+│   ├── pages/          # Full page examples (realistic Appian interfaces)
+│   └── patterns/       # Common UI patterns (forms, grids, data displays)
+├── types/              # Shared TypeScript types (SAILSize, SAILAlign, etc.)
+└── index.css           # Tailwind v4 theme configuration
+```
+
+### Publishing to npm
 
-4. **Navigate to** `/#/my-prototype` to see your page
-5. **Translate to SAIL** when ready for production using the exact same parameter names
+```bash
+npm run build:lib
+npm publish --access public
+```
 
-### Next Steps
-- Check out `src/pages/examples/` for complete interface examples
-- Read the component documentation below for detailed usage
-- Use the table of contents on the home page to navigate between examples
+See [PUBLISHING.md](PUBLISHING.md) for detailed release instructions.
 
 ## Component Comparison
 
-**React Prototype:**
+**React (Sailwind):**
 ```tsx
 <TagField
   size="STANDARD"
@@ -81,7 +76,7 @@ export default function MyPrototype() {
 />
 ```
 
-**SAIL Production:**
+**SAIL (Production):**
 ```sail
 a!tagField(
   size: "STANDARD",
@@ -91,129 +86,13 @@ a!tagField(
 )
 ```
 
-## Architecture
-
-### Foundation Stack
-- **Base:** Radix UI (unstyled, accessible primitives)
-- **Styling:** Tailwind CSS with Aurora color palette
-- **Language:** TypeScript (enforces SAIL conventions)
-
-### Two-Layer Approach
-
-Sailwind uses a clear separation:
-
-1. **Layer 1: SAIL API** - Component props use SAIL parameter names (UPPERCASE values)
-2. **Layer 2: Implementation** - Standard Tailwind classes for styling
-
-## Icon Library
-
-Sailwind uses **Lucide React** for icons with simplified names that map to SAIL:
-
-| React Icon | SAIL Icon | Lucide Component |
-|------------|-----------|------------------|
-| "info" | "info-circle" | Info |
-| "success" | "check-circle" | CheckCircle |
-| "warning" | "exclamation-triangle" | AlertTriangle |
-| "error" | "exclamation-circle" | AlertCircle |
-
-## Styling Approach
-
-Sailwind uses **standard Tailwind classes** internally while maintaining SAIL-exact component APIs:
-
-### Text Sizes
-- **SMALL** → `text-xs` (12px)
-- **STANDARD** → `text-base` (16px)
-- **MEDIUM** → `text-lg` (18px)
-- **LARGE** → `text-2xl` (24px)
-
-### Spacing
-- **NONE** → `p-0` / `m-0` (0)
-- **EVEN_LESS** → `p-1` / `m-1` (4px)
-- **LESS** → `p-2` / `m-2` (8px)
-- **STANDARD** → `p-4` / `m-4` (16px)
-- **MORE** → `p-6` / `m-6` (24px)
-- **EVEN_MORE** → `p-8` / `m-8` (32px)
-
-### Aurora Color Palette
-
-All colors use consistent Tailwind steps: **50, 100, 200, 500, 700, 900**
-
-**Available colors:** `red`, `orange`, `yellow`, `green`, `teal`, `sky`, `blue`, `purple`, `pink`, `gray`
-
-**Usage:**
-```tsx
-// Light backgrounds
-<div className="bg-blue-100 text-blue-700">Tag</div>
-
-// Primary actions
-<button className="bg-blue-500 hover:bg-blue-700">Submit</button>
-
-// Text hierarchy
-<h1 className="text-gray-900">Heading</h1>
-<p className="text-gray-700">Body</p>
-```
-
-### Semantic Colors
-
-| Semantic | Usage | Tailwind |
-|----------|-------|----------|
-| ACCENT | Primary actions | `blue-500` |
-| POSITIVE | Success states | `green-700` |
-| NEGATIVE | Error states | `red-700` |
-| SECONDARY | Secondary actions | `gray-700` |
-| STANDARD | Default text | `gray-900` |
-
-## Development
-
-### Available Scripts
-
-- `npm run dev` - Start development server with HMR
-- `npm run build` - Build for production
-- `npm run lint` - Run ESLint
-- `npm run preview` - Preview production build
-
-### Project Structure
-
-```
-sailwind/
-├── src/
-│   ├── components/         # SAIL components (Button, Tag, Card, etc.)
-│   ├── types/             # Shared TypeScript types (SAILSize, SAILAlign, etc.)
-│   ├── index.css          # Tailwind v4 theme configuration
-│   └── App.tsx            # Demo/playground
-├── TAILWIND-SAIL-MAPPING.md  # Complete styling reference
-├── CLAUDE.md              # LLM instructions
-└── package.json
-```
-
 ## Documentation
 
-- **[TAILWIND-SAIL-MAPPING.md](TAILWIND-SAIL-MAPPING.md)** - Complete reference for Tailwind to SAIL mappings
-- **[CLAUDE.md](CLAUDE.md)** - Instructions for LLM-assisted development
-- **[SAIL Official Docs](https://docs.appian.com/suite/help/25.3/)** - Appian SAIL reference
-
-## Related Resources
-
-- **Radix UI** - https://www.radix-ui.com/
-- **Tailwind CSS** - https://tailwindcss.com/
-- **Aurora Design System** - Color palette and branding
-
-## Contributing
-
-This is a proof-of-concept for rapid Appian prototyping. Contributions welcome!
-
-### Guidelines
-
-1. Use exact SAIL parameter names (UPPERCASE values)
-2. Follow Item + Field component pattern
-3. Include SAIL translation examples in documentation
-4. Ensure WCAG 2.1 AA accessibility compliance
-5. Use standard Tailwind classes internally
+- **[Component Reference](https://pglevy.github.io/sailwind/)** — Live Storybook with all components
+- **[TAILWIND-SAIL-MAPPING.md](TAILWIND-SAIL-MAPPING.md)** — Tailwind to SAIL style mappings
+- **[CLAUDE.md](CLAUDE.md)** — Instructions for LLM-assisted development
+- **[SAIL Docs](https://docs.appian.com/suite/help/25.3/)** — Official Appian SAIL reference
 
 ## License
 
-TBD
-
----
-
-**Status:** Active development - 20 components implemented (15 SAIL + 5 "New SAIL") including form inputs, selections, toggles, sliders, tabs, dialogs, and display components
+MIT

package/dist/components/ApplicationHeader/ApplicationHeader.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+type ObjectType = 'app' | 'interface' | 'record-type' | 'expression-rule';
+export interface ApplicationHeaderProps {
+    /** Name of the application or object */
+    name?: string;
+    /** User initials to display in avatar */
+    userInitials?: string;
+    /** Show interface designer controls */
+    showDesignerControls?: boolean;
+    /** Type of object being displayed */
+    objectType?: ObjectType;
+    /** Path to custom icon image */
+    iconSrc?: string;
+    /** Preview mode enabled */
+    previewEnabled?: boolean;
+    /** Stories view enabled */
+    showStoriesView?: boolean;
+    /** Callback when preview toggle changes */
+    onPreviewToggle?: (enabled: boolean) => void;
+    /** Callback when stories toggle changes */
+    onStoryToggle?: () => void;
+    /** Callback when back button clicked */
+    onBackClick?: () => void;
+    /** Path to Appian logo image */
+    appianLogoSrc?: string;
+}
+/**
+ * ApplicationHeader Component
+ * Displays the main application header with navigation, controls, and user info
+ *
+ */
+export declare const ApplicationHeader: React.FC<ApplicationHeaderProps>;
+export {};
+//# sourceMappingURL=ApplicationHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ApplicationHeader/ApplicationHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAA;AASzE,MAAM,WAAW,sBAAsB;IACrC,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,qCAAqC;IACrC,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,2BAA2B;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkN9D,CAAA"}

package/dist/components/ApplicationHeader/ApplicationHeader.js

@@ -0,0 +1,236 @@
+import { jsx as e, jsxs as a, Fragment as r } from "react/jsx-runtime";
+import "react";
+import { ButtonWidget as s } from "../Button/ButtonWidget.js";
+import { ButtonArrayLayout as m } from "../Button/ButtonArrayLayout.js";
+import { SwitchField as u } from "../Switch/SwitchField.js";
+import { ToggleField as c } from "../Toggle/ToggleField.js";
+const v = {
+  app: "images/icon-app.svg",
+  interface: "images/icon-interface.svg",
+  "record-type": "images/icon-record-type.svg",
+  "expression-rule": "images/icon-expression-rule.svg"
+}, h = ({
+  name: d = "Application",
+  userInitials: N = "U",
+  showDesignerControls: i = !1,
+  objectType: t = "app",
+  iconSrc: p,
+  previewEnabled: A = !1,
+  showStoriesView: l = !1,
+  onPreviewToggle: S,
+  onStoryToggle: o,
+  onBackClick: n,
+  appianLogoSrc: L = "images/icon-appian-header.png"
+}) => {
+  const g = p || v[t];
+  return /* @__PURE__ */ e("div", { className: "application-header-gradient border-b border-gray-200", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-6 pt-4 pb-3", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+      i && n && /* @__PURE__ */ e(
+        s,
+        {
+          icon: "ChevronLeft",
+          style: "GHOST",
+          size: "SMALL",
+          onClick: n,
+          className: "aspect-square"
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ e(
+          "img",
+          {
+            src: g,
+            alt: t,
+            className: "h-8 w-8 mr-2"
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "text-gray-800 font-bold", children: d })
+      ] }),
+      i && /* @__PURE__ */ a(r, { children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-0 ml-4 bg-gray-50 p-1 rounded-sm", children: [
+          /* @__PURE__ */ e(
+            c,
+            {
+              icon: "square-dashed-mouse-pointer",
+              style: "GHOST",
+              size: "SMALL",
+              value: !l,
+              saveInto: l ? o : void 0,
+              marginBelow: "NONE"
+            }
+          ),
+          /* @__PURE__ */ e(
+            c,
+            {
+              icon: "code",
+              style: "GHOST",
+              size: "SMALL",
+              value: !1,
+              marginBelow: "NONE"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { className: "mt-1 [&>div>div]:flex-row-reverse [&>div>div]:gap-2 [&_label]:mb-1 scale-75", children: /* @__PURE__ */ e(
+          u,
+          {
+            label: "Preview",
+            labelPosition: "ADJACENT",
+            value: A,
+            saveInto: S,
+            marginBelow: "NONE"
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "flex items-center gap-0", children: i && /* @__PURE__ */ a(r, { children: [
+      /* @__PURE__ */ e("div", { className: "[&>div]:gap-1 mr-0", children: /* @__PURE__ */ e(
+        m,
+        {
+          buttons: [
+            {
+              icon: "palette",
+              style: "GHOST",
+              size: "SMALL",
+              color: "STANDARD",
+              className: "aspect-square"
+            },
+            {
+              icon: "monitor",
+              style: "GHOST",
+              size: "SMALL",
+              color: "STANDARD",
+              className: "aspect-square"
+            },
+            {
+              icon: "globe",
+              style: "GHOST",
+              size: "SMALL",
+              color: "STANDARD",
+              className: "aspect-square"
+            }
+          ],
+          marginBelow: "NONE"
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "[&_button]:border-0", children: /* @__PURE__ */ e(
+        c,
+        {
+          icon: "book-open-text",
+          style: l ? "SOLID" : "GHOST",
+          size: "SMALL",
+          value: l,
+          saveInto: o,
+          marginBelow: "NONE",
+          color: l ? "ACCENT" : "STANDARD"
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-0", children: [
+      i && /* @__PURE__ */ a(r, { children: [
+        /* @__PURE__ */ e(
+          s,
+          {
+            icon: "Lightbulb",
+            style: "GHOST",
+            size: "SMALL",
+            color: "STANDARD",
+            className: "aspect-square"
+          }
+        ),
+        /* @__PURE__ */ e(
+          s,
+          {
+            icon: "Undo",
+            style: "GHOST",
+            size: "SMALL",
+            color: "STANDARD",
+            className: "aspect-square"
+          }
+        ),
+        /* @__PURE__ */ e(
+          s,
+          {
+            icon: "Redo",
+            style: "GHOST",
+            size: "SMALL",
+            color: "STANDARD",
+            className: "aspect-square mr-3"
+          }
+        ),
+        /* @__PURE__ */ e(
+          s,
+          {
+            icon: "PieChart",
+            style: "GHOST",
+            size: "SMALL",
+            color: "STANDARD",
+            className: "aspect-square mr-3"
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "[&>div]:gap-1 mr-3", children: /* @__PURE__ */ e(
+          m,
+          {
+            buttons: [
+              {
+                label: "TEST",
+                style: "OUTLINE",
+                size: "SMALL",
+                className: "border-1"
+              },
+              {
+                label: "SAVE",
+                style: "SOLID",
+                color: "ACCENT",
+                size: "SMALL",
+                className: "border-1"
+              }
+            ],
+            marginBelow: "NONE"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          icon: "Search",
+          style: "GHOST",
+          size: "SMALL",
+          color: "STANDARD",
+          className: "aspect-square"
+        }
+      ),
+      /* @__PURE__ */ e(
+        s,
+        {
+          icon: "Settings",
+          style: "GHOST",
+          size: "SMALL",
+          color: "STANDARD",
+          className: "aspect-square"
+        }
+      ),
+      /* @__PURE__ */ e(
+        s,
+        {
+          icon: "Grid3X3",
+          style: "GHOST",
+          size: "SMALL",
+          color: "STANDARD",
+          className: "aspect-square mr-3"
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center mr-3", children: /* @__PURE__ */ e("span", { className: "text-gray-700 text-sm font-medium", children: N }) }),
+      /* @__PURE__ */ e(
+        "img",
+        {
+          src: L,
+          alt: "Appian",
+          className: "h-6 w-auto"
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  h as ApplicationHeader
+};

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

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./ApplicationHeader').ApplicationHeaderProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDesignerControls: Story;
+export declare const RecordType: Story;
+export declare const ExpressionRule: Story;
+export declare const PreviewEnabled: Story;
+export declare const StoriesViewActive: Story;
+//# sourceMappingURL=ApplicationHeader.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ApplicationHeader/ApplicationHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;CAKgC,CAAA;AAE1C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAA"}

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./ButtonWidget').ButtonWidgetProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SemanticColorsSolid: Story;
+export declare const SemanticColorsOutline: Story;
+export declare const ButtonStyles: Story;
+export declare const ButtonSizes: Story;
+export declare const HexColorsSolid: Story;
+export declare const HexColorsOutline: Story;
+export declare const WithActions: Story;
+export declare const LinkStyle: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,QAAA,MAAM,IAAI;;;;;;;CAK2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA"}

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

@@ -24,14 +24,6 @@ export interface ButtonArrayLayoutProps {
  * In SAIL, a!buttonWidget must be used within a!buttonArrayLayout.
  * This component wraps buttons and provides layout/alignment.
  *
- * @example
- * <ButtonArrayLayout
- *   align="END"
- *   buttons={[
- *     { label: "Cancel", style: "OUTLINE", color: "SECONDARY" },
- *     { label: "Submit", style: "SOLID", color: "ACCENT", submit: true }
- *   ]}
- * />
  */
 export declare const ButtonArrayLayout: React.FC<ButtonArrayLayoutProps>;
 //# sourceMappingURL=ButtonArrayLayout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonArrayLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonArrayLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAEvD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjE;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,oCAAoC;IACpC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6C9D,CAAA"}
+{"version":3,"file":"ButtonArrayLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonArrayLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAEvD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjE;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,oCAAoC;IACpC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6C9D,CAAA"}

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 */
@@ -62,13 +62,6 @@ export interface ButtonWidgetProps {
  *
  * Note: In SAIL, a!buttonWidget must be used within a!buttonArrayLayout.
  * For standalone use in React, wrap with ButtonArrayLayout component.
- *
- * @example
- * <ButtonArrayLayout
- *   buttons={[
- *     { label: "Submit", style: "SOLID", color: "ACCENT" }
- *   ]}
- * />
  */
 export declare const ButtonWidget: React.FC<ButtonWidgetProps>;
 export {};

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;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+LpD,CAAA"}