@pglevy/sailwind 0.1.0

package/README.md

@@ -0,0 +1,219 @@
+# Sailwind
+
+**React component library for rapid prototyping of 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.
+
+## Key Features
+
+- **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
+
+## Quickstart
+
+### 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
+
+### 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:
+
+```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>
+  )
+}
+```
+
+4. **Navigate to** `/#/my-prototype` to see your page
+5. **Translate to SAIL** when ready for production using the exact same parameter names
+
+### 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
+
+## Component Comparison
+
+**React Prototype:**
+```tsx
+<TagField
+  size="STANDARD"
+  tags={[
+    { text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019" }
+  ]}
+/>
+```
+
+**SAIL Production:**
+```sail
+a!tagField(
+  size: "STANDARD",
+  tags: {
+    a!tagItem(text: "URGENT", backgroundColor: "#FED7DE", textColor: "#9F0019")
+  }
+)
+```
+
+## 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
+
+## License
+
+TBD
+
+---
+
+**Status:** Active development - 20 components implemented (15 SAIL + 5 "New SAIL") including form inputs, selections, toggles, sliders, tabs, dialogs, and display components

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

@@ -0,0 +1,37 @@
+import { ButtonWidgetProps } from './ButtonWidget';
+import { SAILAlign, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+/**
+ * Props for the ButtonArrayLayout component
+ * Maps to SAIL's a!buttonArrayLayout() function
+ */
+export interface ButtonArrayLayoutProps {
+    /** Array of button configurations */
+    buttons: ButtonWidgetProps[];
+    /** Controls layout visibility */
+    showWhen?: boolean;
+    /** Determines alignment of buttons */
+    align?: SAILAlign;
+    /** Space added below the buttons */
+    marginBelow?: SAILMarginSize;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+}
+/**
+ * ButtonArrayLayout Component
+ * Displays a list of buttons in the order they are specified
+ *
+ * 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

@@ -0,0 +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"}

package/dist/components/Button/ButtonArrayLayout.js

@@ -0,0 +1,42 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { ButtonWidget as E } from "./ButtonWidget.js";
+const g = ({
+  buttons: i,
+  showWhen: n = !0,
+  align: o = "START",
+  marginBelow: l = "STANDARD",
+  accessibilityText: s
+}) => {
+  if (!n) return null;
+  const e = i.filter((t) => t.showWhen !== !1), a = {
+    START: "justify-start",
+    CENTER: "justify-center",
+    END: "justify-end"
+  }, f = {
+    NONE: "mb-0",
+    // SAIL NONE: 0
+    EVEN_LESS: "mb-1",
+    // SAIL EVEN_LESS: 4px
+    LESS: "mb-2",
+    // SAIL LESS: 8px
+    STANDARD: "mb-4",
+    // SAIL STANDARD: 16px
+    MORE: "mb-6",
+    // SAIL MORE: 24px
+    EVEN_MORE: "mb-8"
+    // SAIL EVEN_MORE: 32px
+  }, m = e.length === 1 ? "END" : "START";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `flex flex-wrap gap-4 items-start ${a[o || m]} ${f[l]}`,
+      role: "group",
+      "aria-label": s,
+      children: e.map((t, u) => /* @__PURE__ */ r(E, { ...t }, u))
+    }
+  );
+};
+export {
+  g as ButtonArrayLayout
+};

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

@@ -0,0 +1,75 @@
+import { SAILSize } 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";
+/**
+ * Props for the ButtonWidget component
+ * Maps to SAIL's a!buttonWidget() function
+ */
+export interface ButtonWidgetProps {
+    /** Text to display on the button */
+    label?: string;
+    /** Determines the button's appearance */
+    style?: ButtonStyle;
+    /** Determines button color (hex or semantic) */
+    color?: ButtonColor | string;
+    /** Determines size of the button */
+    size?: SAILSize;
+    /** Determines button width */
+    width?: ButtonWidth;
+    /** Prevents user from clicking the button */
+    disabled?: boolean;
+    /** Whether this button submits a form */
+    submit?: boolean;
+    /** Determines whether button performs validation */
+    validate?: boolean;
+    /** Validation group identifier */
+    validationGroup?: string;
+    /** Text for confirmation dialog */
+    confirmMessage?: string;
+    /** Text for confirmation dialog header */
+    confirmHeader?: string;
+    /** Text for confirmation button */
+    confirmButtonLabel?: string;
+    /** Text for cancel button */
+    cancelButtonLabel?: string;
+    /** Controls button visibility */
+    showWhen?: boolean;
+    /** Icon to display */
+    icon?: string;
+    /** Position of icon */
+    iconPosition?: IconPosition;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+    /** Tooltip text on hover */
+    tooltip?: string;
+    /** Loading indicator on press */
+    loadingIndicator?: boolean;
+    /** Value associated with this button */
+    value?: any;
+    /** Click handler (maps to saveInto in SAIL) */
+    saveInto?: (value?: any) => void;
+    /** Click handler (React-style alias for saveInto) */
+    onClick?: (value?: any) => void;
+    /** Additional Tailwind classes for prototype-specific styling (not part of SAIL API) */
+    className?: string;
+}
+/**
+ * ButtonWidget Component
+ * Displays a button that can conditionally be used to submit a form
+ *
+ * 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 {};
+//# sourceMappingURL=ButtonWidget.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Button/ButtonWidget.js

@@ -0,0 +1,101 @@
+import { jsxs as R, jsx as u } 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",
+  color: t = "ACCENT",
+  size: b = "STANDARD",
+  width: d,
+  disabled: l = !1,
+  submit: p = !1,
+  showWhen: g = !0,
+  icon: a,
+  iconPosition: c = "START",
+  accessibilityText: h,
+  tooltip: E,
+  loadingIndicator: o = !1,
+  saveInto: A,
+  onClick: N,
+  value: x,
+  className: C
+}) => {
+  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
+    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 = () => {
+    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 = () => {
+    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 = `
+    inline-flex items-center justify-center gap-1
+    font-medium transition-colors h-auto rounded-sm
+    ${m[b]}
+    ${T}
+    ${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);
+  }, 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: {
+      SMALL: 14,
+      STANDARD: 16,
+      MEDIUM: 18,
+      LARGE: 20
+    }[b], "aria-hidden": "true" }) : (console.warn(`Icon "${a}" not found in Lucide icons`), null);
+  })(), y = S();
+  return /* @__PURE__ */ R(
+    "button",
+    {
+      type: p ? "submit" : "button",
+      onClick: O,
+      disabled: l || o,
+      className: v,
+      style: y,
+      "aria-label": h || i,
+      title: E,
+      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
+      ]
+    }
+  );
+};
+export {
+  V as ButtonWidget
+};

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

@@ -0,0 +1,5 @@
+export { ButtonWidget } from './ButtonWidget';
+export { ButtonArrayLayout } from './ButtonArrayLayout';
+export type { ButtonWidgetProps } from './ButtonWidget';
+export type { ButtonArrayLayoutProps } from './ButtonArrayLayout';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Card/CardLayout.d.ts

@@ -0,0 +1,55 @@
+import { SAILShape, SAILPadding, SAILMarginSize } from '../../types/sail';
+import * as React from 'react';
+type CardHeight = "AUTO" | "SHORT" | "MEDIUM" | "TALL" | "EXTRA_TALL";
+type CardStyle = "NONE" | "TRANSPARENT" | "STANDARD" | "ACCENT" | "SUCCESS" | "WARN" | "ERROR" | "INFO" | "CHARCOAL_SCHEME" | "NAVY_SCHEME" | "PLUM_SCHEME";
+type DecorativeBarPosition = "TOP" | "START" | "NONE";
+/**
+ * Props for the CardLayout component
+ * Maps to SAIL's a!cardLayout() function
+ */
+export interface CardLayoutProps {
+    /** Content to display inside the card */
+    children: React.ReactNode;
+    /** Determines the height of the card */
+    height?: CardHeight;
+    /** Determines the card background color. Valid values: Any hex color (including transparency with 8 digits), or semantic values */
+    style?: CardStyle | string;
+    /** Determines the border radius */
+    shape?: SAILShape;
+    /** Determines the padding inside the card */
+    padding?: SAILPadding;
+    /** Space added above the card */
+    marginAbove?: SAILMarginSize;
+    /** Space added below the card */
+    marginBelow?: SAILMarginSize;
+    /** Whether to show card border */
+    showBorder?: boolean;
+    /** Whether to show card shadow */
+    showShadow?: boolean;
+    /** Determines the border color. Valid values: Any hex color (including transparency), or "STANDARD" (default), "ACCENT", "POSITIVE", "WARN", "NEGATIVE" */
+    borderColor?: string;
+    /** Position of decorative bar */
+    decorativeBarPosition?: DecorativeBarPosition;
+    /** Color of decorative bar (hex or semantic) */
+    decorativeBarColor?: string;
+    /** Controls card visibility */
+    showWhen?: boolean;
+    /** Additional Tailwind classes for prototype-specific styling (not part of SAIL API) */
+    className?: string;
+}
+/**
+ * CardLayout Component
+ * Displays content within a card container
+ *
+ * @example
+ * <CardLayout
+ *   shape="SEMI_ROUNDED"
+ *   padding="STANDARD"
+ *   showBorder={true}
+ * >
+ *   <p>Card content here</p>
+ * </CardLayout>
+ */
+export declare const CardLayout: React.FC<CardLayoutProps>;
+export {};
+//# sourceMappingURL=CardLayout.d.ts.map

package/dist/components/Card/CardLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAG9E,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,CAAA;AACrE,KAAK,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,iBAAiB,GAAG,aAAa,GAAG,aAAa,CAAA;AAC3J,KAAK,qBAAqB,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAA;AAErD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,mIAAmI;IACnI,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,iCAAiC;IACjC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,iCAAiC;IACjC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2JAA2J;IAC3J,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,qBAAqB,CAAC,EAAE,qBAAqB,CAAA;IAC7C,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6LhD,CAAA"}