@materi.ai/frame 1.0.0-rc.1

package/dist/ui/primitives/switch/Switch.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Utility to join classNames
+ */
+const cn = (...classes) => {
+    return classes.filter(Boolean).join(' ');
+};
+/**
+ * Switch component for boolean toggles
+ *
+ * @example
+ * ```tsx
+ * <Switch label="Enable notifications" />
+ * <Switch label="Dark mode" defaultChecked />
+ * ```
+ */
+export const Switch = forwardRef(({ label, helperText, ...rest }, ref) => {
+    const { className = '', id, disabled = false, ...props } = rest;
+    const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "relative", children: [_jsx("input", { ref: ref, type: "checkbox", id: switchId, disabled: disabled, "aria-describedby": helperText ? `${switchId}-helper` : undefined, className: cn('sr-only', className), ...props }), _jsx("label", { htmlFor: switchId, className: cn('block w-14 h-8 rounded-full cursor-pointer transition-colors', disabled ? 'bg-neutral-300 cursor-not-allowed' : 'bg-neutral-300', 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500'), children: _jsx("div", { className: cn('absolute top-1 left-1 w-6 h-6 rounded-full bg-white transition-transform', 'shadow-sm'), style: {
+                                        transform: 'translateX(0)',
+                                        transition: 'transform 200ms ease-in-out'
+                                    } }) })] }), label && (_jsx("label", { htmlFor: switchId, className: cn('ml-3 text-sm cursor-pointer', disabled ? 'text-neutral-400' : 'text-neutral-700'), children: label }))] }), helperText && (_jsx("p", { id: `${switchId}-helper`, className: "text-xs text-neutral-500 mt-1 ml-0", children: helperText }))] }));
+});
+Switch.displayName = 'Switch';
+//# sourceMappingURL=Switch.js.map

package/dist/ui/primitives/switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/primitives/switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAc1C;;GAEG;AACH,MAAM,EAAE,GAAG,CAAC,GAAG,OAAuC,EAAU,EAAE;IAChE,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,KAAK,EACL,UAAU,EACV,GAAG,IAAI,EACK,EACd,GAAG,EACH,EAAE;IACF,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;IAChE,MAAM,QAAQ,GAAG,EAAE,IAAI,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAE3E,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,eAAK,SAAS,EAAC,mBAAmB,aAChC,eAAK,SAAS,EAAC,UAAU,aACvB,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,QAAQ,sBACA,UAAU,CAAC,CAAC,CAAC,GAAG,QAAQ,SAAS,CAAC,CAAC,CAAC,SAAS,EAC/D,SAAS,EAAE,EAAE,CACX,SAAS,EACT,SAAS,CACV,KACG,KAAK,GACT,EACF,gBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,EAAE,CACX,8DAA8D,EAC9D,QAAQ,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,gBAAgB,EACjE,uFAAuF,CACxF,YAED,cACE,SAAS,EAAE,EAAE,CACX,0EAA0E,EAC1E,WAAW,CACZ,EACD,KAAK,EAAE;wCACL,SAAS,EAAE,eAAe;wCAC1B,UAAU,EAAE,6BAA6B;qCAC1C,GACD,GACI,IACJ,EACL,KAAK,IAAI,CACR,gBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,EAAE,CACX,6BAA6B,EAC7B,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CACnD,YAEA,KAAK,GACA,CACT,IACG,EACL,UAAU,IAAI,CACb,YACE,EAAE,EAAE,GAAG,QAAQ,SAAS,EACxB,SAAS,EAAC,oCAAoC,YAE7C,UAAU,GACT,CACL,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/ui/primitives/switch/index.d.ts

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

package/dist/ui/primitives/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/ui/primitives/switch/index.js

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+//# sourceMappingURL=index.js.map

package/dist/ui/primitives/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/ui/primitives/tabs/Tabs.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface TabItem {
+    label: string;
+    value: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The tab items
+     */
+    items: TabItem[];
+    /**
+     * The default active tab value
+     */
+    defaultValue?: string;
+    /**
+     * Callback when the active tab changes
+     */
+    onTabChange?: (value: string) => void;
+}
+/**
+ * Tabs component for organizing content
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   defaultValue="tab1"
+ *   items={[
+ *     { label: 'Tab 1', value: 'tab1', content: <div>Content 1</div> },
+ *     { label: 'Tab 2', value: 'tab2', content: <div>Content 2</div> },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/ui/primitives/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/primitives/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACvF;;OAEG;IACH,KAAK,EAAE,OAAO,EAAE,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AASD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI,kFAiEhB,CAAC"}

package/dist/ui/primitives/tabs/Tabs.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+/**
+ * Utility to join classNames
+ */
+const cn = (...classes) => {
+    return classes.filter(Boolean).join(' ');
+};
+/**
+ * Tabs component for organizing content
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   defaultValue="tab1"
+ *   items={[
+ *     { label: 'Tab 1', value: 'tab1', content: <div>Content 1</div> },
+ *     { label: 'Tab 2', value: 'tab2', content: <div>Content 2</div> },
+ *   ]}
+ * />
+ * ```
+ */
+export const Tabs = React.forwardRef(({ items, defaultValue, onTabChange, ...rest }, ref) => {
+    const { className = '', ...props } = rest;
+    const [activeTab, setActiveTab] = useState(defaultValue || items[0]?.value || '');
+    const handleTabChange = (value) => {
+        setActiveTab(value);
+        onTabChange?.(value);
+    };
+    const activeItem = items.find((item) => item.value === activeTab);
+    return (_jsxs("div", { ref: ref, className: cn('w-full', className), ...props, children: [_jsx("div", { role: "tablist", className: "flex border-b border-neutral-200", "aria-label": "Tabs", children: items.map((item) => (_jsx("button", { role: "tab", id: `tab-${item.value}`, "aria-selected": activeTab === item.value, "aria-controls": `tabpanel-${item.value}`, disabled: item.disabled, onClick: () => handleTabChange(item.value), className: cn('px-4 py-2 text-sm font-medium border-b-2 transition-colors', 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500', activeTab === item.value
+                        ? 'border-blue-500 text-blue-600'
+                        : 'border-transparent text-neutral-600 hover:text-neutral-900', item.disabled && 'opacity-50 cursor-not-allowed'), children: item.label }, item.value))) }), activeItem && (_jsx("div", { role: "tabpanel", id: `tabpanel-${activeItem.value}`, "aria-labelledby": `tab-${activeItem.value}`, className: "pt-4", children: activeItem.content }))] }));
+});
+Tabs.displayName = 'Tabs';
+//# sourceMappingURL=Tabs.js.map

package/dist/ui/primitives/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/primitives/tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AA0BxC;;GAEG;AACH,MAAM,EAAE,GAAG,CAAC,GAAG,OAAuC,EAAU,EAAE;IAChE,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,KAAK,EACL,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACG,EACZ,GAAG,EACH,EAAE;IACF,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;IAC1C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;IAElF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;QACxC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAElE,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAM,KAAK,aAE1D,cACE,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,kCAAkC,gBACjC,MAAM,YAEhB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,iBAEE,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,mBACR,SAAS,KAAK,IAAI,CAAC,KAAK,mBACxB,YAAY,IAAI,CAAC,KAAK,EAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,EAC1C,SAAS,EAAE,EAAE,CACX,4DAA4D,EAC5D,uFAAuF,EACvF,SAAS,KAAK,IAAI,CAAC,KAAK;wBACtB,CAAC,CAAC,+BAA+B;wBACjC,CAAC,CAAC,4DAA4D,EAChE,IAAI,CAAC,QAAQ,IAAI,+BAA+B,CACjD,YAEA,IAAI,CAAC,KAAK,IAhBN,IAAI,CAAC,KAAK,CAiBR,CACV,CAAC,GACE,EAGL,UAAU,IAAI,CACb,cACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,YAAY,UAAU,CAAC,KAAK,EAAE,qBACjB,OAAO,UAAU,CAAC,KAAK,EAAE,EAC1C,SAAS,EAAC,MAAM,YAEf,UAAU,CAAC,OAAO,GACf,CACP,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/ui/primitives/tabs/index.d.ts

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

package/dist/ui/primitives/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/ui/primitives/tabs/index.js

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+//# sourceMappingURL=index.js.map

package/dist/ui/primitives/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/ui/primitives/textarea/TextArea.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export type TextAreaSize = 'sm' | 'md' | 'lg';
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * The visual size of the textarea
+     * @default 'md'
+     */
+    size?: TextAreaSize;
+    /**
+     * The label for the textarea
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the textarea
+     */
+    helperText?: string;
+    /**
+     * Whether the textarea is required
+     */
+    isRequired?: boolean;
+    /**
+     * Whether to show a character counter
+     */
+    showCounter?: boolean;
+    /**
+     * Maximum character count
+     */
+    maxCharacters?: number;
+}
+/**
+ * TextArea component for multi-line text input
+ *
+ * @example
+ * ```tsx
+ * <TextArea label="Message" placeholder="Type your message..." />
+ * <TextArea label="Description" showCounter maxCharacters={500} />
+ * ```
+ */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/ui/primitives/textarea/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/primitives/textarea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAeD;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,2FAuEpB,CAAC"}

package/dist/ui/primitives/textarea/TextArea.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Utility to join classNames
+ */
+const cn = (...classes) => {
+    return classes.filter(Boolean).join(' ');
+};
+const sizeStyles = {
+    sm: 'px-2 py-1 text-sm min-h-20',
+    md: 'px-3 py-2 text-base min-h-32',
+    lg: 'px-4 py-3 text-lg min-h-48',
+};
+/**
+ * TextArea component for multi-line text input
+ *
+ * @example
+ * ```tsx
+ * <TextArea label="Message" placeholder="Type your message..." />
+ * <TextArea label="Description" showCounter maxCharacters={500} />
+ * ```
+ */
+export const TextArea = forwardRef(({ size = 'md', label, helperText, isRequired = false, showCounter = false, maxCharacters, ...rest }, ref) => {
+    const { className = '', id, disabled = false, value = '', ...props } = rest;
+    const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
+    const characterCount = String(value).length;
+    const isNearLimit = maxCharacters && characterCount > maxCharacters * 0.8;
+    const isAtLimit = maxCharacters && characterCount >= maxCharacters;
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsxs("label", { htmlFor: textareaId, className: cn('block text-sm font-medium mb-1', disabled ? 'text-neutral-400' : 'text-neutral-700'), children: [label, isRequired && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), _jsx("textarea", { ref: ref, id: textareaId, disabled: disabled, value: value, maxLength: maxCharacters, "aria-describedby": helperText || showCounter ? `${textareaId}-helper` : undefined, className: cn('w-full bg-white rounded border border-neutral-300', 'transition-colors resize-none', 'focus-visible:border-blue-500 focus-visible:outline-blue-500', 'disabled:bg-neutral-100 disabled:text-neutral-400 disabled:cursor-not-allowed', sizeStyles[size], className), ...props }), (helperText || showCounter) && (_jsxs("div", { id: `${textareaId}-helper`, className: "flex items-center justify-between text-xs mt-1", children: [_jsx("span", { className: "text-neutral-500", children: helperText }), showCounter && maxCharacters && (_jsxs("span", { className: cn(isAtLimit && 'text-red-500', isNearLimit && !isAtLimit && 'text-yellow-600'), children: [characterCount, " / ", maxCharacters] }))] }))] }));
+});
+TextArea.displayName = 'TextArea';
+//# sourceMappingURL=TextArea.js.map

package/dist/ui/primitives/textarea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/primitives/textarea/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAqC1C;;GAEG;AACH,MAAM,EAAE,GAAG,CAAC,GAAG,OAAuC,EAAU,EAAE;IAChE,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,UAAU,GAAiC;IAC/C,EAAE,EAAE,4BAA4B;IAChC,EAAE,EAAE,8BAA8B;IAClC,EAAE,EAAE,4BAA4B;CACjC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,IAAI,GAAG,IAAI,EACX,KAAK,EACL,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,aAAa,EACb,GAAG,IAAI,EACO,EAChB,GAAG,EACH,EAAE;IACF,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;IAC5E,MAAM,UAAU,GAAG,EAAE,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAC/E,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;IAC5C,MAAM,WAAW,GAAG,aAAa,IAAI,cAAc,GAAG,aAAa,GAAG,GAAG,CAAC;IAC1E,MAAM,SAAS,GAAG,aAAa,IAAI,cAAc,IAAI,aAAa,CAAC;IAEnE,OAAO,CACL,eAAK,SAAS,EAAC,QAAQ,aACpB,KAAK,IAAI,CACR,iBACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,EAAE,CACX,gCAAgC,EAChC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CACnD,aAEA,KAAK,EACL,UAAU,IAAI,eAAM,SAAS,EAAC,mBAAmB,kBAAS,IACrD,CACT,EACD,mBACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,UAAU,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,aAAa,sBACN,UAAU,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,SAAS,CAAC,CAAC,CAAC,SAAS,EAChF,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,+BAA+B,EAC/B,8DAA8D,EAC9D,+EAA+E,EAC/E,UAAU,CAAC,IAAoB,CAAC,EAChC,SAAS,CACV,KACG,KAAK,GACT,EACD,CAAC,UAAU,IAAI,WAAW,CAAC,IAAI,CAC9B,eACE,EAAE,EAAE,GAAG,UAAU,SAAS,EAC1B,SAAS,EAAC,gDAAgD,aAE1D,eAAM,SAAS,EAAC,kBAAkB,YAAE,UAAU,GAAQ,EACrD,WAAW,IAAI,aAAa,IAAI,CAC/B,gBACE,SAAS,EAAE,EAAE,CACX,SAAS,IAAI,cAAc,EAC3B,WAAW,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAC/C,aAEA,cAAc,SAAK,aAAa,IAC5B,CACR,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/ui/primitives/textarea/index.d.ts

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

package/dist/ui/primitives/textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/ui/primitives/textarea/index.js

@@ -0,0 +1,2 @@
+export { TextArea } from './TextArea';
+//# sourceMappingURL=index.js.map

package/dist/ui/primitives/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/ui/primitives/toast/Toast.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+export interface ToastMessage {
+    id: string;
+    title: string;
+    description?: string;
+    type: 'success' | 'error' | 'warning' | 'info';
+    duration?: number;
+}
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The toast message
+     */
+    message: ToastMessage;
+    /**
+     * Callback when the toast is closed
+     */
+    onClose: (id: string) => void;
+}
+/**
+ * Toast component for notifications
+ *
+ * @example
+ * ```tsx
+ * <Toast
+ *   message={{
+ *     id: '1',
+ *     title: 'Success',
+ *     description: 'Your action was successful',
+ *     type: 'success',
+ *   }}
+ *   onClose={(id) => console.log(id)}
+ * />
+ * ```
+ */
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Hook for managing multiple toasts
+ */
+export declare const useToast: () => {
+    toasts: ToastMessage[];
+    addToast: (title: string, options?: {
+        description?: string;
+        type?: "success" | "error" | "warning" | "info";
+        duration?: number;
+    }) => string;
+    removeToast: (id: string) => void;
+};
+//# sourceMappingURL=Toast.d.ts.map

package/dist/ui/primitives/toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/primitives/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAoCD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,KAAK,mFAkEjB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,QAAQ;;sBAKR,MAAM,YACH;QACR,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;QAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;sBAiBgC,MAAM;CAK5C,CAAC"}

package/dist/ui/primitives/toast/Toast.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+/**
+ * Utility to join classNames
+ */
+const cn = (...classes) => {
+    return classes.filter(Boolean).join(' ');
+};
+const typeStyles = {
+    success: {
+        bg: 'bg-green-50',
+        border: 'border-green-200',
+        text: 'text-green-800',
+        icon: 'text-green-600',
+    },
+    error: {
+        bg: 'bg-red-50',
+        border: 'border-red-200',
+        text: 'text-red-800',
+        icon: 'text-red-600',
+    },
+    warning: {
+        bg: 'bg-yellow-50',
+        border: 'border-yellow-200',
+        text: 'text-yellow-800',
+        icon: 'text-yellow-600',
+    },
+    info: {
+        bg: 'bg-blue-50',
+        border: 'border-blue-200',
+        text: 'text-blue-800',
+        icon: 'text-blue-600',
+    },
+};
+/**
+ * Toast component for notifications
+ *
+ * @example
+ * ```tsx
+ * <Toast
+ *   message={{
+ *     id: '1',
+ *     title: 'Success',
+ *     description: 'Your action was successful',
+ *     type: 'success',
+ *   }}
+ *   onClose={(id) => console.log(id)}
+ * />
+ * ```
+ */
+export const Toast = React.forwardRef(({ message, onClose, ...rest }, ref) => {
+    const { className = '', ...props } = rest;
+    const styles = typeStyles[message.type] || typeStyles.info;
+    React.useEffect(() => {
+        if (!message.duration)
+            return;
+        const timer = setTimeout(() => {
+            onClose(message.id);
+        }, message.duration);
+        return () => clearTimeout(timer);
+    }, [message.id, message.duration, onClose]);
+    return (_jsxs("div", { ref: ref, className: cn('rounded-lg border p-4 flex items-start gap-3', styles.bg, styles.border, styles.text, className), role: "alert", ...props, children: [_jsx("div", { className: cn('flex-shrink-0 mt-0.5', styles.icon), children: _jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "font-semibold text-sm", children: message.title }), message.description && (_jsx("p", { className: "text-sm opacity-90 mt-1", children: message.description }))] }), _jsx("button", { onClick: () => onClose(message.id), className: cn('flex-shrink-0 opacity-60 hover:opacity-100 transition-opacity', 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current'), "aria-label": "Close notification", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }));
+});
+Toast.displayName = 'Toast';
+/**
+ * Hook for managing multiple toasts
+ */
+export const useToast = () => {
+    const [toasts, setToasts] = useState([]);
+    const addToast = useCallback((title, options) => {
+        const id = Math.random().toString(36).substr(2, 9);
+        const toast = {
+            id,
+            title,
+            description: options?.description,
+            type: options?.type || 'info',
+            duration: options?.duration || 5000,
+        };
+        setToasts((prev) => [...prev, toast]);
+        return id;
+    }, []);
+    const removeToast = useCallback((id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    return { toasts, addToast, removeToast };
+};
+//# sourceMappingURL=Toast.js.map

package/dist/ui/primitives/toast/Toast.js.map

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

package/dist/ui/primitives/toast/index.d.ts

@@ -0,0 +1,3 @@
+export { Toast, useToast } from './Toast';
+export type { ToastMessage, ToastProps } from './Toast';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/primitives/toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/ui/primitives/toast/index.js

@@ -0,0 +1,2 @@
+export { Toast, useToast } from './Toast';
+//# sourceMappingURL=index.js.map

package/dist/ui/primitives/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC"}

package/dist/ui/styles/index.css

@@ -0,0 +1,193 @@
+/**
+ * MATERI GLOBAL STYLES
+ * Foundation CSS + Tailwind directives + Global custom properties
+ */
+
+/* ============================================================================
+   TAILWIND DIRECTIVES
+   ============================================================================ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ============================================================================
+   CSS CUSTOM PROPERTIES (Design Tokens as CSS Variables)
+   For use in CSS-in-JS and dynamic styling
+   ============================================================================ */
+
+:root {
+  /* Spacing */
+  --spacing-px: 1px;
+  --spacing-0: 0;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+
+  /* Colors - Neutral */
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #eeeeee;
+  --color-neutral-300: #e0e0e0;
+  --color-neutral-400: #bdbdbd;
+  --color-neutral-500: #9e9e9e;
+  --color-neutral-600: #757575;
+  --color-neutral-700: #616161;
+  --color-neutral-800: #424242;
+  --color-neutral-900: #212121;
+
+  /* Colors - Primary */
+  --color-primary-500: #4ba8ff;
+  --color-primary-600: #3184e6;
+  --color-primary-700: #2563cc;
+  --color-primary-800: #2050b3;
+
+  /* Colors - Semantic */
+  --color-text: #212121;
+  --color-text-secondary: #616161;
+  --color-text-tertiary: #9e9e9e;
+  --color-background: #fafafa;
+  --color-background-secondary: #f5f5f5;
+  --color-border: #eeeeee;
+  --color-interactive: #4ba8ff;
+
+  /* Colors - Status */
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-info: #06b6d4;
+
+  /* Typography */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+  --font-mono: Menlo, Monaco, 'Courier New', monospace;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  /* Motion */
+  --duration-fast: 75ms;
+  --duration-standard: 150ms;
+  --duration-slow: 300ms;
+  --easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ============================================================================
+   DARK MODE (Future enhancement with prefers-color-scheme)
+   ============================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-neutral-50: #121212;
+    --color-neutral-100: #212121;
+    --color-neutral-200: #424242;
+    --color-neutral-300: #616161;
+    --color-neutral-900: #fafafa;
+
+    --color-background: #121212;
+    --color-background-secondary: #212121;
+    --color-text: #fafafa;
+    --color-border: #424242;
+  }
+}
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+html {
+  /* Prevent font scaling on orientation change */
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-background);
+  transition: background-color var(--duration-standard) var(--easing-out);
+}
+
+/* ============================================================================
+   FOCUS STYLES (Accessibility)
+   ============================================================================ */
+
+:focus-visible {
+  outline: 2px solid var(--color-interactive);
+  outline-offset: 2px;
+}
+
+/* Remove focus outline for mouse users */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* ============================================================================
+   FORM ELEMENTS
+   ============================================================================ */
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: 16px; /* Prevents zoom on iOS */
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+/* ============================================================================
+   SCROLLBAR STYLING (Webkit browsers)
+   ============================================================================ */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-300);
+  border-radius: var(--spacing-1);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neutral-400);
+}
+
+/* ============================================================================
+   PRINT STYLES
+   ============================================================================ */
+
+@media print {
+  body {
+    background: white;
+    color: black;
+  }
+}