@damarkuncoro/ui-library 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Damar Kuncoro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,122 @@
+# @damarkuncoro/ui-library
+
+A strict Meta-Architecture compliant UI library focusing on Separation of Concerns, Zero Hardcoding, and Contract-Driven Development.
+
+## Features
+
+- **Meta Architecture**: Strict separation between Logic (Base) and Visuals (Skin).
+- **Contract-Driven**: All component APIs and Visual Styles are defined by rigid Contracts.
+- **Zero Hardcoding**: Every visual value (color, spacing, size) is derived from Design Tokens or Contracts.
+- **Multi-Skin Support**: Comes with Tailwind CSS skin by default, but supports framework-agnostic implementations.
+- **TypeScript First**: Built with strict type safety and `as const` assertions.
+
+## Installation
+
+```bash
+pnpm add @damarkuncoro/ui-library
+```
+
+## Setup
+
+Wrap your application with the `ThemeProvider` to inject the design tokens (CSS Variables).
+
+```tsx
+import { ThemeProvider } from '@damarkuncoro/ui-library';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Usage
+
+### Button
+
+```tsx
+import { Button } from '@damarkuncoro/ui-library';
+
+// Standard usage (Tailwind Skin)
+<Button variant="primary" size="md" onClick={() => console.log('Clicked')}>
+  Click Me
+</Button>
+
+// With Icons
+<Button leftIcon={<span>👈</span>} variant="outline">
+  Go Back
+</Button>
+```
+
+### Input
+
+```tsx
+import { Input } from '@damarkuncoro/ui-library';
+
+<Input 
+  placeholder="Enter your name" 
+  variant="filled" 
+  onChange={(e) => console.log(e.target.value)} 
+/>
+```
+
+## Customization
+
+### 1. Theming (Easy)
+
+You can override the default design tokens (colors, etc.) by passing a `themeOverrides` prop to `ThemeProvider`.
+
+```tsx
+const myBrandTheme = {
+  light: {
+    '--color-primary-main': '#ff4757', // Change primary color to Red
+    '--color-primary-hover': '#ff6b81',
+  },
+  dark: {
+    '--color-primary-main': '#ff6b81',
+  }
+};
+
+function App() {
+  return (
+    <ThemeProvider themeOverrides={myBrandTheme}>
+      <Button variant="primary">Branded Button</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+### 2. Custom Skins (Advanced)
+
+If you need complete control over the visual implementation (e.g., using a different CSS framework like Emotion or Styled Components), you can build your own **Skin** on top of our **Base** components.
+
+This library follows a strict dependency rule:
+1.  **Contracts**: JSON/TS definitions of Logic (Props) and Visuals (Tokens).
+2.  **Base UI**: Functional components (Logic, ARIA, DOM). Depends only on Logic Contracts.
+3.  **Skins**: Visual implementations. Depend on Base UI + Visual Contracts.
+
+To create your own skin:
+
+1.  Import `ButtonBase` and `buttonSkinContractDef`.
+2.  Create a wrapper that styles `ButtonBase` using values from `buttonSkinContractDef`.
+3.  Pass styles via `className` or `style` prop.
+
+```tsx
+import { ButtonBase, buttonSkinContractDef } from '@damarkuncoro/ui-library';
+import styled from 'styled-components'; // Example
+
+// 1. Read values from the Contract (Single Source of Truth)
+const { variants } = buttonSkinContractDef;
+
+// 2. Build your Styled Component
+const MyStyledButton = styled(ButtonBase)`
+  background-color: ${variants.primary.backgroundColor};
+  color: ${variants.primary.color};
+  /* ... map other contract values ... */
+`;
+
+// 3. Use it!
+<MyStyledButton variant="primary">Custom Skin</MyStyledButton>
+```

package/lib/cjs/components/button/button-base.d.ts

@@ -0,0 +1,3 @@
+import { ButtonContract } from './button-contract';
+export declare const ButtonBase: import("react").ForwardRefExoticComponent<ButtonContract & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=button-base.d.ts.map

package/lib/cjs/components/button/button-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-base.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button-base.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAanD,eAAO,MAAM,UAAU,8GAuEtB,CAAC"}

package/lib/cjs/components/button/button-base.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const button_skin_contract_1 = require("./button-skin-contract");
+exports.ButtonBase = (0, react_1.forwardRef)(({ children, disabled, isLoading, leftIcon, rightIcon, type = 'button', className, ...props }, ref) => {
+    const isDisabled = disabled || isLoading;
+    const handleKeyDown = (event) => {
+        if (isDisabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+        props.onKeyDown?.(event);
+    };
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: type, disabled: isDisabled, "aria-disabled": isDisabled, "aria-busy": isLoading, className: className, onKeyDown: handleKeyDown, ...props, children: [isLoading && ((0, jsx_runtime_1.jsx)("span", { className: "button-loader-wrapper", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("span", { className: "button-loader" }) })), !isLoading && leftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "button-icon-left", "aria-hidden": button_skin_contract_1.buttonSkinContractDef.icons.ariaHidden, children: leftIcon })), (0, jsx_runtime_1.jsx)("span", { className: "button-content", children: children }), !isLoading && rightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "button-icon-right", "aria-hidden": button_skin_contract_1.buttonSkinContractDef.icons.ariaHidden, children: rightIcon }))] }));
+});
+exports.ButtonBase.displayName = 'ButtonBase';
+//# sourceMappingURL=button-base.js.map

package/lib/cjs/components/button/button-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../../../src/components/button/button-base.tsx"],"names":[],"mappings":";;;;AAAA,iCAAmC;AAEnC,iEAA+D;AAYlD,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IAEF,MAAM,UAAU,GAAG,QAAQ,IAAI,SAAS,CAAC;IAGzC,MAAM,aAAa,GAAG,CAAC,KAA6C,EAAE,EAAE;QACtE,IAAI,UAAU;YAAE,OAAO;QAGvB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAC9B,CAAC;QAGD,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,UAAU,mBACL,UAAU,eACd,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,aAAa,KACpB,KAAK,aAER,SAAS,IAAI,CACZ,iCAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YAExD,iCAAM,SAAS,EAAC,eAAe,GAAG,GAC7B,CACR,EAEA,CAAC,SAAS,IAAI,QAAQ,IAAI,CACzB,iCACE,SAAS,EAAC,kBAAkB,iBACf,4CAAqB,CAAC,KAAK,CAAC,UAAU,YAElD,QAAQ,GACJ,CACR,EAED,iCAAM,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAQ,EAEjD,CAAC,SAAS,IAAI,SAAS,IAAI,CAC1B,iCACE,SAAS,EAAC,mBAAmB,iBAChB,4CAAqB,CAAC,KAAK,CAAC,UAAU,YAElD,SAAS,GACL,CACR,IACM,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/lib/cjs/components/button/button-contract.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+export declare const buttonContractDef: {
+    readonly id: "contract_button_v1";
+    readonly name: "button";
+    readonly category: "ui.component";
+    readonly description: "A button component with various variants and sizes";
+    readonly variants: readonly [{
+        readonly name: "variant";
+        readonly type: "intent";
+        readonly values: readonly ["primary", "secondary", "outline", "ghost", "danger"];
+        readonly defaultValue: "primary";
+        readonly description: "Visual style of the button";
+    }, {
+        readonly name: "size";
+        readonly type: "size";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly defaultValue: "md";
+        readonly description: "Size of the button";
+    }];
+    readonly props: readonly [{
+        readonly name: "children";
+        readonly type: "object";
+        readonly required: true;
+    }, {
+        readonly name: "isLoading";
+        readonly type: "boolean";
+        readonly required: false;
+        readonly defaultValue: false;
+    }, {
+        readonly name: "leftIcon";
+        readonly type: "object";
+        readonly required: false;
+    }, {
+        readonly name: "rightIcon";
+        readonly type: "object";
+        readonly required: false;
+    }];
+};
+type ExtractValues<T, Name> = T extends ReadonlyArray<infer U> ? U extends {
+    name: Name;
+    values: ReadonlyArray<infer V>;
+} ? V : never : never;
+export type ButtonVariant = ExtractValues<typeof buttonContractDef.variants, "variant">;
+export type ButtonSize = ExtractValues<typeof buttonContractDef.variants, "size">;
+export interface ButtonContract extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+}
+export {};
+//# sourceMappingURL=button-contract.d.ts.map

package/lib/cjs/components/button/button-contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-contract.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button-contract.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMxD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BpB,CAAC;AAoBX,KAAK,aAAa,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,GAC1D,CAAC,SAAS;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;AAMjF,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AAMxF,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,iBAAiB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;AAKlF,MAAM,WAAW,cAAe,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAI7E,QAAQ,EAAE,SAAS,CAAC;IAMpB,OAAO,CAAC,EAAE,aAAa,CAAC;IAMxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAKlB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}

package/lib/cjs/components/button/button-contract.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonContractDef = void 0;
+exports.buttonContractDef = {
+    id: "contract_button_v1",
+    name: "button",
+    category: "ui.component",
+    description: "A button component with various variants and sizes",
+    variants: [
+        {
+            name: "variant",
+            type: "intent",
+            values: ["primary", "secondary", "outline", "ghost", "danger"],
+            defaultValue: "primary",
+            description: "Visual style of the button"
+        },
+        {
+            name: "size",
+            type: "size",
+            values: ["sm", "md", "lg"],
+            defaultValue: "md",
+            description: "Size of the button"
+        }
+    ],
+    props: [
+        { name: "children", type: "object", required: true },
+        { name: "isLoading", type: "boolean", required: false, defaultValue: false },
+        { name: "leftIcon", type: "object", required: false },
+        { name: "rightIcon", type: "object", required: false }
+    ]
+};
+//# sourceMappingURL=button-contract.js.map

package/lib/cjs/components/button/button-contract.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-contract.js","sourceRoot":"","sources":["../../../../src/components/button/button-contract.ts"],"names":[],"mappings":";;;AAMa,QAAA,iBAAiB,GAAG;IAC/B,EAAE,EAAE,oBAAoB;IACxB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,cAAc;IACxB,WAAW,EAAE,oDAAoD;IACjE,QAAQ,EAAE;QACR;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC;YAC9D,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,4BAA4B;SAC1C;QACD;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC1B,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,oBAAoB;SAClC;KACF;IACD,KAAK,EAAE;QACL,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;QACpD,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE;QAC5E,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACrD,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;KACvD;CACO,CAAC"}

package/lib/cjs/components/button/button-examples.d.ts

@@ -0,0 +1,11 @@
+export declare function ButtonVariantExamples(): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonSizeExamples(): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonIconExamples(): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonStateExamples(): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonCombinedExamples(): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonNativeSkinExamples(): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonInteractiveExamples(): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonAccessibilityExamples(): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonCustomStylingExamples(): import("react/jsx-runtime").JSX.Element;
+export declare function AllButtonExamples(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button-examples.d.ts.map

package/lib/cjs/components/button/button-examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-examples.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button-examples.tsx"],"names":[],"mappings":"AAeA,wBAAgB,qBAAqB,4CAUpC;AAMD,wBAAgB,kBAAkB,4CAQjC;AAMD,wBAAgB,kBAAkB,4CAajC;AAMD,wBAAgB,mBAAmB,4CAQlC;AAMD,wBAAgB,sBAAsB,4CA8BrC;AAMD,wBAAgB,wBAAwB,4CA4BvC;AAMD,wBAAgB,yBAAyB,4CAwCxC;AAMD,wBAAgB,2BAA2B,4CAgB1C;AAMD,wBAAgB,2BAA2B,4CA4B1C;AAMD,wBAAgB,iBAAiB,4CAiDhC"}

package/lib/cjs/components/button/button-examples.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonVariantExamples = ButtonVariantExamples;
+exports.ButtonSizeExamples = ButtonSizeExamples;
+exports.ButtonIconExamples = ButtonIconExamples;
+exports.ButtonStateExamples = ButtonStateExamples;
+exports.ButtonCombinedExamples = ButtonCombinedExamples;
+exports.ButtonNativeSkinExamples = ButtonNativeSkinExamples;
+exports.ButtonInteractiveExamples = ButtonInteractiveExamples;
+exports.ButtonAccessibilityExamples = ButtonAccessibilityExamples;
+exports.ButtonCustomStylingExamples = ButtonCustomStylingExamples;
+exports.AllButtonExamples = AllButtonExamples;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const button_skin_tailwind_1 = require("./button-skin-tailwind");
+const button_skin_native_1 = require("./button-skin-native");
+function ButtonVariantExamples() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "primary", children: "Primary" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "secondary", children: "Secondary" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "outline", children: "Outline" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "ghost", children: "Ghost" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "danger", children: "Danger" })] }));
+}
+function ButtonSizeExamples() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 items-center flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { size: "sm", children: "Small" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { size: "md", children: "Medium" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { size: "lg", children: "Large" })] }));
+}
+function ButtonIconExamples() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2190" }), children: "Back" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2192" }), children: "Next" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2193" }), children: "Confirm" })] }));
+}
+function ButtonStateExamples() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { children: "Normal" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { disabled: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { isLoading: true, children: "Loading..." })] }));
+}
+function ButtonCombinedExamples() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 items-center flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "primary", size: "sm", children: "Small Primary" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "primary", size: "md", children: "Medium Primary" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "primary", size: "lg", children: "Large Primary" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "secondary", leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "+" }), children: "Add" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "secondary", rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2715" }), children: "Close" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "outline", children: "Normal" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "outline", disabled: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "outline", isLoading: true, children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "danger", leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u26A0" }), children: "Warning" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "danger", rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDDD1" }), children: "Delete" })] })] }));
+}
+function ButtonNativeSkinExamples() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { variant: "primary", children: "Primary Native" }), (0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { variant: "secondary", children: "Secondary Native" }), (0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { variant: "outline", children: "Outline Native" }), (0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { variant: "ghost", children: "Ghost Native" }), (0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { variant: "danger", children: "Danger Native" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 items-center flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { size: "sm", children: "Small" }), (0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { size: "md", children: "Medium" }), (0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { size: "lg", children: "Large" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2190" }), children: "Back" }), (0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2192" }), children: "Next" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { disabled: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(button_skin_native_1.ButtonNative, { isLoading: true, children: "Loading..." })] })] }));
+}
+function ButtonInteractiveExamples() {
+    const [isLoading, setIsLoading] = react_1.default.useState(false);
+    const [count, setCount] = react_1.default.useState(0);
+    const handleClick = () => {
+        setIsLoading(true);
+        setTimeout(() => {
+            setIsLoading(false);
+            setCount(c => c + 1);
+        }, 1000);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 items-center flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { onClick: () => alert('Clicked!'), children: "Click Me" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { isLoading: isLoading, onClick: handleClick, children: isLoading ? 'Loading...' : `Click to increment (${count})` })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-4 items-center flex-wrap", children: (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { variant: "danger", onClick: () => {
+                        if (confirm('Are you sure?')) {
+                            alert('Deleted!');
+                        }
+                    }, children: "Delete with Confirmation" }) })] }));
+}
+function ButtonAccessibilityExamples() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { "aria-label": "Close dialog", children: "\u2715" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { "aria-describedby": "help-text", children: "Submit" })] }), (0, jsx_runtime_1.jsx)("p", { id: "help-text", className: "text-sm text-gray-600", children: "This button submits the form" })] }));
+}
+function ButtonCustomStylingExamples() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-wrap", children: [(0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { className: "shadow-lg", children: "With Shadow" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { className: "rounded-full", children: "Rounded Full" }), (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { className: "w-full", children: "Full Width" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-4 items-center flex-wrap", children: (0, jsx_runtime_1.jsx)(button_skin_tailwind_1.ButtonTailwind, { style: {
+                        backgroundColor: '#8B5CF6',
+                        color: 'white',
+                        borderRadius: '8px',
+                    }, children: "Custom Style" }) })] }));
+}
+function AllButtonExamples() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-8 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Variants" }), (0, jsx_runtime_1.jsx)(ButtonVariantExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Sizes" }), (0, jsx_runtime_1.jsx)(ButtonSizeExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Icons" }), (0, jsx_runtime_1.jsx)(ButtonIconExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "States" }), (0, jsx_runtime_1.jsx)(ButtonStateExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Combined" }), (0, jsx_runtime_1.jsx)(ButtonCombinedExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Native Skin" }), (0, jsx_runtime_1.jsx)(ButtonNativeSkinExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Interactive" }), (0, jsx_runtime_1.jsx)(ButtonInteractiveExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Accessibility" }), (0, jsx_runtime_1.jsx)(ButtonAccessibilityExamples, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-bold", children: "Custom Styling" }), (0, jsx_runtime_1.jsx)(ButtonCustomStylingExamples, {})] })] }));
+}
+//# sourceMappingURL=button-examples.js.map

package/lib/cjs/components/button/button-examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-examples.js","sourceRoot":"","sources":["../../../../src/components/button/button-examples.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/button/button-skin-contract.d.ts

@@ -0,0 +1,133 @@
+import { ReactNode } from 'react';
+export declare const buttonSkinContractDef: {
+    readonly id: "contract_button_skin_v1";
+    readonly name: "button-skin";
+    readonly category: "ui.skin";
+    readonly description: "Visual contract for button skin implementations";
+    readonly variants: {
+        readonly primary: {
+            readonly backgroundColor: "var(--color-primary-main)";
+            readonly color: "var(--color-primary-contrast)";
+            readonly hover: {
+                readonly backgroundColor: "var(--color-primary-hover)";
+            };
+            readonly focus: {
+                readonly outline: "var(--shadow-focus-ring) var(--color-primary-focus)";
+                readonly outlineOffset: "2px";
+                readonly ringColor: "var(--color-primary-focus)";
+            };
+        };
+        readonly secondary: {
+            readonly backgroundColor: "var(--color-secondary-main)";
+            readonly color: "var(--color-secondary-contrast)";
+            readonly hover: {
+                readonly backgroundColor: "var(--color-secondary-hover)";
+            };
+            readonly focus: {
+                readonly outline: "var(--shadow-focus-ring) var(--color-secondary-focus)";
+                readonly outlineOffset: "2px";
+                readonly ringColor: "var(--color-secondary-focus)";
+            };
+        };
+        readonly outline: {
+            readonly backgroundColor: "transparent";
+            readonly borderColor: "var(--color-neutral-border)";
+            readonly color: "var(--color-neutral-text)";
+            readonly hover: {
+                readonly backgroundColor: "var(--color-neutral-bg)";
+            };
+            readonly focus: {
+                readonly outline: "var(--shadow-focus-ring) var(--color-primary-focus)";
+                readonly outlineOffset: "2px";
+                readonly ringColor: "var(--color-primary-focus)";
+            };
+        };
+        readonly ghost: {
+            readonly backgroundColor: "transparent";
+            readonly color: "var(--color-neutral-text)";
+            readonly hover: {
+                readonly backgroundColor: "var(--color-secondary-main)";
+            };
+            readonly focus: {
+                readonly outline: "var(--shadow-focus-ring) var(--color-secondary-focus)";
+                readonly outlineOffset: "2px";
+                readonly ringColor: "var(--color-secondary-focus)";
+            };
+        };
+        readonly danger: {
+            readonly backgroundColor: "var(--color-danger-main)";
+            readonly color: "var(--color-danger-contrast)";
+            readonly hover: {
+                readonly backgroundColor: "var(--color-danger-hover)";
+            };
+            readonly focus: {
+                readonly outline: "var(--shadow-focus-ring) var(--color-danger-focus)";
+                readonly outlineOffset: "2px";
+                readonly ringColor: "var(--color-danger-focus)";
+            };
+        };
+    };
+    readonly sizes: {
+        readonly sm: {
+            readonly height: "32px";
+            readonly padding: "0 12px";
+            readonly fontSize: "0.75rem";
+            readonly iconSize: "14px";
+        };
+        readonly md: {
+            readonly height: "40px";
+            readonly padding: "0 16px";
+            readonly fontSize: "0.875rem";
+            readonly iconSize: "16px";
+        };
+        readonly lg: {
+            readonly height: "48px";
+            readonly padding: "0 24px";
+            readonly fontSize: "1rem";
+            readonly iconSize: "20px";
+        };
+    };
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly borderRadius: "6px";
+        readonly border: "1px solid transparent";
+        readonly cursor: "pointer";
+        readonly transition: "all 0.2s ease";
+        readonly fontWeight: "500";
+    };
+    readonly disabled: {
+        readonly opacity: "0.5";
+        readonly cursor: "not-allowed";
+    };
+    readonly icons: {
+        readonly leftSpacing: "8px";
+        readonly rightSpacing: "8px";
+        readonly ariaHidden: true;
+    };
+    readonly loader: {
+        readonly size: "16px";
+        readonly borderWidth: "2px";
+        readonly animation: "spin";
+    };
+};
+export type ButtonSkinVariant = keyof typeof buttonSkinContractDef.variants;
+export type ButtonSkinSize = keyof typeof buttonSkinContractDef.sizes;
+export type VariantVisualProperties = typeof buttonSkinContractDef.variants[ButtonSkinVariant];
+export type SizeSpecifications = typeof buttonSkinContractDef.sizes[ButtonSkinSize];
+export type BaseStyles = typeof buttonSkinContractDef.base;
+export type DisabledStyles = typeof buttonSkinContractDef.disabled;
+export type IconBehavior = typeof buttonSkinContractDef.icons;
+export type LoaderBehavior = typeof buttonSkinContractDef.loader;
+export interface ButtonSkinContract {
+    variant?: ButtonSkinVariant;
+    size?: ButtonSkinSize;
+    disabled?: boolean;
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=button-skin-contract.d.ts.map

package/lib/cjs/components/button/button-skin-contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-skin-contract.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button-skin-contract.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAalC,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HxB,CAAC;AAOX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,qBAAqB,CAAC,QAAQ,CAAC;AAK5E,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,qBAAqB,CAAC,KAAK,CAAC;AAKtE,MAAM,MAAM,uBAAuB,GAAG,OAAO,qBAAqB,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAK/F,MAAM,MAAM,kBAAkB,GAAG,OAAO,qBAAqB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;AAKpF,MAAM,MAAM,UAAU,GAAG,OAAO,qBAAqB,CAAC,IAAI,CAAC;AAK3D,MAAM,MAAM,cAAc,GAAG,OAAO,qBAAqB,CAAC,QAAQ,CAAC;AAKnE,MAAM,MAAM,YAAY,GAAG,OAAO,qBAAqB,CAAC,KAAK,CAAC;AAK9D,MAAM,MAAM,cAAc,GAAG,OAAO,qBAAqB,CAAC,MAAM,CAAC;AAQjE,MAAM,WAAW,kBAAkB;IAIjC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAK5B,IAAI,CAAC,EAAE,cAAc,CAAC;IAKtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,SAAS,CAAC,EAAE,SAAS,CAAC;IAKtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}

package/lib/cjs/components/button/button-skin-contract.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonSkinContractDef = void 0;
+const design_tokens_1 = require("../../theme/design-tokens");
+exports.buttonSkinContractDef = {
+    id: "contract_button_skin_v1",
+    name: "button-skin",
+    category: "ui.skin",
+    description: "Visual contract for button skin implementations",
+    variants: {
+        primary: {
+            backgroundColor: design_tokens_1.tokens.colors.primary.main,
+            color: design_tokens_1.tokens.colors.primary.contrastText,
+            hover: {
+                backgroundColor: design_tokens_1.tokens.colors.primary.hover,
+            },
+            focus: {
+                outline: `${design_tokens_1.tokens.shadows.focusRing} ${design_tokens_1.tokens.colors.primary.focus}`,
+                outlineOffset: design_tokens_1.tokens.ui.outlineOffset,
+                ringColor: design_tokens_1.tokens.colors.primary.focus,
+            },
+        },
+        secondary: {
+            backgroundColor: design_tokens_1.tokens.colors.secondary.main,
+            color: design_tokens_1.tokens.colors.secondary.contrastText,
+            hover: {
+                backgroundColor: design_tokens_1.tokens.colors.secondary.hover,
+            },
+            focus: {
+                outline: `${design_tokens_1.tokens.shadows.focusRing} ${design_tokens_1.tokens.colors.secondary.focus}`,
+                outlineOffset: design_tokens_1.tokens.ui.outlineOffset,
+                ringColor: design_tokens_1.tokens.colors.secondary.focus,
+            },
+        },
+        outline: {
+            backgroundColor: design_tokens_1.tokens.colors.transparent,
+            borderColor: design_tokens_1.tokens.colors.neutral.border,
+            color: design_tokens_1.tokens.colors.neutral.text,
+            hover: {
+                backgroundColor: design_tokens_1.tokens.colors.neutral.bg,
+            },
+            focus: {
+                outline: `${design_tokens_1.tokens.shadows.focusRing} ${design_tokens_1.tokens.colors.primary.focus}`,
+                outlineOffset: design_tokens_1.tokens.ui.outlineOffset,
+                ringColor: design_tokens_1.tokens.colors.primary.focus,
+            },
+        },
+        ghost: {
+            backgroundColor: design_tokens_1.tokens.colors.transparent,
+            color: design_tokens_1.tokens.colors.neutral.text,
+            hover: {
+                backgroundColor: design_tokens_1.tokens.colors.secondary.main,
+            },
+            focus: {
+                outline: `${design_tokens_1.tokens.shadows.focusRing} ${design_tokens_1.tokens.colors.secondary.focus}`,
+                outlineOffset: design_tokens_1.tokens.ui.outlineOffset,
+                ringColor: design_tokens_1.tokens.colors.secondary.focus,
+            },
+        },
+        danger: {
+            backgroundColor: design_tokens_1.tokens.colors.danger.main,
+            color: design_tokens_1.tokens.colors.danger.contrastText,
+            hover: {
+                backgroundColor: design_tokens_1.tokens.colors.danger.hover,
+            },
+            focus: {
+                outline: `${design_tokens_1.tokens.shadows.focusRing} ${design_tokens_1.tokens.colors.danger.focus}`,
+                outlineOffset: design_tokens_1.tokens.ui.outlineOffset,
+                ringColor: design_tokens_1.tokens.colors.danger.focus,
+            },
+        },
+    },
+    sizes: {
+        sm: {
+            height: design_tokens_1.tokens.sizing[8],
+            padding: `0 ${design_tokens_1.tokens.spacing[3]}`,
+            fontSize: design_tokens_1.tokens.typography.fontSize.xs,
+            iconSize: design_tokens_1.tokens.sizing.icon.sm,
+        },
+        md: {
+            height: design_tokens_1.tokens.sizing[10],
+            padding: `0 ${design_tokens_1.tokens.spacing[4]}`,
+            fontSize: design_tokens_1.tokens.typography.fontSize.sm,
+            iconSize: design_tokens_1.tokens.sizing.icon.md,
+        },
+        lg: {
+            height: design_tokens_1.tokens.sizing[12],
+            padding: `0 ${design_tokens_1.tokens.spacing[6]}`,
+            fontSize: design_tokens_1.tokens.typography.fontSize.base,
+            iconSize: design_tokens_1.tokens.sizing.icon.lg,
+        },
+    },
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: design_tokens_1.tokens.borderRadius.md,
+        border: `1px solid ${design_tokens_1.tokens.colors.transparent}`,
+        cursor: 'pointer',
+        transition: design_tokens_1.tokens.transition.base,
+        fontWeight: design_tokens_1.tokens.typography.fontWeight.medium,
+    },
+    disabled: {
+        opacity: design_tokens_1.tokens.opacity.disabled,
+        cursor: 'not-allowed',
+    },
+    icons: {
+        leftSpacing: design_tokens_1.tokens.spacing[2],
+        rightSpacing: design_tokens_1.tokens.spacing[2],
+        ariaHidden: true,
+    },
+    loader: {
+        size: design_tokens_1.tokens.sizing.icon.md,
+        borderWidth: design_tokens_1.tokens.ui.outlineWidth,
+        animation: 'spin',
+    },
+};
+//# sourceMappingURL=button-skin-contract.js.map