@pglevy/sailwind 0.2.0 → 0.4.0

package/README.md

@@ -1,219 +1,130 @@
 # 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.
+
+### Installation
 
-### Option 2: Clone Directly
 ```bash
-git clone https://github.com/pglevy/sailwind.git
-cd sailwind
-npm install
-npm run dev
+npm install @pglevy/sailwind
 ```
 
-### 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:
+### Setup
+
+Import the CSS in your main entry file (e.g., `main.tsx` or `App.tsx`):
 
 ```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>
-  )
-}
+import '@pglevy/sailwind/index.css'
 ```
 
-4. **Navigate to** `/#/my-prototype` to see your page
-5. **Translate to SAIL** when ready for production using the exact same parameter names
+### Using Images
 
-### 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
+If your components need the included icons, reference them like this:
 
-## Component Comparison
-
-**React Prototype:**
 ```tsx
-<TagField
-  size="STANDARD"
-  tags={[
-    { text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019" }
-  ]}
-/>
-```
+import iconApp from '@pglevy/sailwind/images/icon-app.svg'
+import iconInterface from '@pglevy/sailwind/images/icon-interface.svg'
 
-**SAIL Production:**
-```sail
-a!tagField(
-  size: "STANDARD",
-  tags: {
-    a!tagItem(text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019")
-  }
-)
+<img src={iconApp} alt="App icon" />
 ```
 
-## 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
+Available images:
+- `icon-app.svg`
+- `icon-appian-header.png`
+- `icon-expression-rule.svg`
+- `icon-interface.svg`
+- `icon-record-type.svg`
 
-## Icon Library
+## For Contributors
 
-Sailwind uses **Lucide React** for icons with simplified names that map to SAIL:
+### Setup
 
-| 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`
+```bash
+git clone https://github.com/pglevy/sailwind.git
+cd sailwind
+npm install
+```
 
-**Usage:**
-```tsx
-// Light backgrounds
-<div className="bg-blue-100 text-blue-700">Tag</div>
+### Development
 
-// Primary actions
-<button className="bg-blue-500 hover:bg-blue-700">Submit</button>
+Storybook is the primary development environment:
 
-// Text hierarchy
-<h1 className="text-gray-900">Heading</h1>
-<p className="text-gray-700">Body</p>
+```bash
+npm run storybook     # Start Storybook at http://localhost:6006
 ```
 
-### 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` |
+Every component has a `.stories.tsx` file for documentation and interactive testing. When adding or modifying components, update the corresponding stories.
 
-## Development
+### Build
 
-### 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
+```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
 
 ```
-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
+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
 ```
 
-## Documentation
+### Publishing to npm
 
-- **[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
+```bash
+npm run build:lib
+npm publish --access public
+```
 
-## Related Resources
+See [PUBLISHING.md](PUBLISHING.md) for detailed release instructions.
 
-- **Radix UI** - https://www.radix-ui.com/
-- **Tailwind CSS** - https://tailwindcss.com/
-- **Aurora Design System** - Color palette and branding
+## Component Comparison
 
-## Contributing
+**React (Sailwind):**
+```tsx
+<TagField
+  size="STANDARD"
+  tags={[
+    { text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019" }
+  ]}
+/>
+```
 
-This is a proof-of-concept for rapid Appian prototyping. Contributions welcome!
+**SAIL (Production):**
+```sail
+a!tagField(
+  size: "STANDARD",
+  tags: {
+    a!tagItem(text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019")
+  }
+)
+```
 
-### Guidelines
+## Documentation
 
-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,42 @@
+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;
+    /** Additional buttons to display before the right-side controls */
+    additionalButtons?: Array<{
+        label: string;
+        style?: "SOLID" | "OUTLINE" | "GHOST" | "LINK";
+        size?: "SMALL" | "STANDARD" | "MEDIUM" | "LARGE";
+        color?: string;
+        onClick?: () => void;
+    }>;
+}
+/**
+ * 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;IACtB,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,KAAK,CAAC;QACxB,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;QAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;QAChD,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KACrB,CAAC,CAAA;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmO9D,CAAA"}

package/dist/components/ApplicationHeader/ApplicationHeader.js

@@ -0,0 +1,251 @@
+import { jsx as e, jsxs as a, Fragment as c } from "react/jsx-runtime";
+import "react";
+import { ButtonWidget as s } from "../Button/ButtonWidget.js";
+import { ButtonArrayLayout as o } from "../Button/ButtonArrayLayout.js";
+import { SwitchField as T } from "../Switch/SwitchField.js";
+import { ToggleField as t } from "../Toggle/ToggleField.js";
+const y = {
+  app: "images/icon-app.svg",
+  interface: "images/icon-interface.svg",
+  "record-type": "images/icon-record-type.svg",
+  "expression-rule": "images/icon-expression-rule.svg"
+}, z = ({
+  name: p = "Application",
+  userInitials: A = "U",
+  showDesignerControls: i = !1,
+  objectType: n = "app",
+  iconSrc: S,
+  previewEnabled: L = !1,
+  showStoriesView: l = !1,
+  onPreviewToggle: g,
+  onStoryToggle: m,
+  onBackClick: d,
+  appianLogoSrc: v = "images/icon-appian-header.png",
+  additionalButtons: N = []
+}) => {
+  const u = S || y[n];
+  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 min-w-0 overflow-x-auto", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-3 shrink-0", children: [
+      i && d && /* @__PURE__ */ e(
+        s,
+        {
+          icon: "ChevronLeft",
+          style: "GHOST",
+          size: "SMALL",
+          onClick: d,
+          className: "aspect-square"
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ e(
+          "img",
+          {
+            src: u,
+            alt: n,
+            className: "h-8 w-8 mr-2"
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "text-gray-800 font-bold", children: p })
+      ] }),
+      i && /* @__PURE__ */ a(c, { children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-0 ml-4 bg-gray-50 p-1 rounded-sm", children: [
+          /* @__PURE__ */ e(
+            t,
+            {
+              icon: "square-dashed-mouse-pointer",
+              style: "GHOST",
+              size: "SMALL",
+              value: !l,
+              saveInto: l ? m : void 0,
+              marginBelow: "NONE"
+            }
+          ),
+          /* @__PURE__ */ e(
+            t,
+            {
+              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(
+          T,
+          {
+            label: "Preview",
+            labelPosition: "ADJACENT",
+            value: L,
+            saveInto: g,
+            marginBelow: "NONE"
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "flex items-center gap-0 shrink-0", children: i && /* @__PURE__ */ a(c, { children: [
+      /* @__PURE__ */ e("div", { className: "[&>div]:gap-1 mr-0", children: /* @__PURE__ */ e(
+        o,
+        {
+          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(
+        t,
+        {
+          icon: "book-open-text",
+          style: l ? "SOLID" : "GHOST",
+          size: "SMALL",
+          value: l,
+          saveInto: m,
+          marginBelow: "NONE",
+          color: l ? "ACCENT" : "STANDARD"
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-0 shrink-0", children: [
+      N.length > 0 && /* @__PURE__ */ e("div", { className: "[&>div]:gap-1 mr-3", children: /* @__PURE__ */ e(
+        o,
+        {
+          buttons: N.map((r) => ({
+            label: r.label,
+            style: r.style || "OUTLINE",
+            size: r.size || "SMALL",
+            color: r.color || "STANDARD",
+            onClick: r.onClick,
+            className: "border-1"
+          })),
+          marginBelow: "NONE"
+        }
+      ) }),
+      i && /* @__PURE__ */ a(c, { 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(
+          o,
+          {
+            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: A }) }),
+      /* @__PURE__ */ e(
+        "img",
+        {
+          src: v,
+          alt: "Appian",
+          className: "h-6 w-auto"
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  z as ApplicationHeader
+};

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

@@ -0,0 +1,19 @@
+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;
+export declare const AdminConsole: 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;AAED,eAAO,MAAM,YAAY,EAAE,KAsB1B,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