@thewhateverapp/tile-sdk 0.13.31 → 0.13.33

package/dist/spec/registry/composites/Prediction.js

@@ -0,0 +1,116 @@
+/**
+ * Prediction Component
+ *
+ * Binary choice prediction with countdown and outcome reveal.
+ */
+import React, { useState, useCallback, useEffect } from 'react';
+const colorClasses = {
+    primary: { bg: 'bg-purple-500', hover: 'hover:bg-purple-600', ring: 'ring-purple-500' },
+    secondary: { bg: 'bg-gray-500', hover: 'hover:bg-gray-600', ring: 'ring-gray-500' },
+    success: { bg: 'bg-green-500', hover: 'hover:bg-green-600', ring: 'ring-green-500' },
+    warning: { bg: 'bg-yellow-500', hover: 'hover:bg-yellow-600', ring: 'ring-yellow-500' },
+    error: { bg: 'bg-red-500', hover: 'hover:bg-red-600', ring: 'ring-red-500' },
+    muted: { bg: 'bg-gray-400', hover: 'hover:bg-gray-500', ring: 'ring-gray-400' },
+    white: { bg: 'bg-white', hover: 'hover:bg-gray-100', ring: 'ring-white' },
+    black: { bg: 'bg-black', hover: 'hover:bg-gray-900', ring: 'ring-black' },
+};
+/**
+ * Normalizes options to a consistent format.
+ */
+function normalizeOptions(options) {
+    return options.map((opt, index) => {
+        if (typeof opt === 'string') {
+            return { id: String(index), label: opt };
+        }
+        return opt;
+    });
+}
+/**
+ * Formats remaining time.
+ */
+function formatTimeRemaining(ms) {
+    if (ms <= 0)
+        return '0:00';
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    if (hours > 0) {
+        return `${hours}:${String(minutes % 60).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
+    }
+    return `${minutes}:${String(seconds % 60).padStart(2, '0')}`;
+}
+export function Prediction({ question, options: rawOptions, status = 'open', winnerId, userPredictionId, locksAt, onPredict, colors = ['primary', 'error'], className = '', }) {
+    const [selectedId, setSelectedId] = useState(null);
+    const [timeRemaining, setTimeRemaining] = useState(null);
+    const options = normalizeOptions(rawOptions);
+    // Countdown timer
+    useEffect(() => {
+        if (!locksAt || status !== 'open') {
+            setTimeRemaining(null);
+            return;
+        }
+        const endTime = typeof locksAt === 'string' ? new Date(locksAt).getTime() : locksAt;
+        const update = () => {
+            const remaining = endTime - Date.now();
+            setTimeRemaining(remaining > 0 ? remaining : 0);
+        };
+        update();
+        const interval = setInterval(update, 1000);
+        return () => clearInterval(interval);
+    }, [locksAt, status]);
+    // Handle option click
+    const handleOptionClick = useCallback((optionId) => {
+        if (status !== 'open' || userPredictionId)
+            return;
+        setSelectedId(optionId);
+        onPredict?.(optionId);
+    }, [status, userPredictionId, onPredict]);
+    const isOpen = status === 'open';
+    const isLocked = status === 'locked';
+    const isResolved = status === 'resolved';
+    const hasPredicted = !!userPredictionId;
+    return (React.createElement("div", { className: `prediction-component bg-gray-800/90 backdrop-blur rounded-xl p-4 ${className}` },
+        React.createElement("div", { className: "flex items-center justify-between mb-2" },
+            React.createElement("span", { className: `
+            text-xs font-medium px-2 py-0.5 rounded-full
+            ${isOpen ? 'bg-green-500/20 text-green-400' : ''}
+            ${isLocked ? 'bg-yellow-500/20 text-yellow-400' : ''}
+            ${isResolved ? 'bg-purple-500/20 text-purple-400' : ''}
+          ` },
+                isOpen && 'OPEN',
+                isLocked && 'LOCKED',
+                isResolved && 'RESOLVED'),
+            timeRemaining !== null && timeRemaining > 0 && (React.createElement("span", { className: "text-gray-400 text-sm" }, formatTimeRemaining(timeRemaining)))),
+        React.createElement("h3", { className: "text-white font-semibold mb-4" }, question),
+        React.createElement("div", { className: "flex gap-2" }, options.map((option, index) => {
+            const color = colors[index];
+            const colorStyle = colorClasses[color];
+            const isSelected = option.id === selectedId;
+            const isUserPrediction = option.id === userPredictionId;
+            const isWinner = option.id === winnerId;
+            const canClick = isOpen && !hasPredicted;
+            return (React.createElement("button", { key: option.id, onClick: () => handleOptionClick(option.id), disabled: !canClick, className: `
+                flex-1 py-3 px-4 rounded-lg font-medium text-white
+                transition-all duration-200
+                ${canClick ? `${colorStyle.bg} ${colorStyle.hover}` : 'bg-gray-700'}
+                ${isSelected || isUserPrediction ? `ring-2 ${colorStyle.ring}` : ''}
+                ${isWinner ? 'ring-2 ring-green-400' : ''}
+                ${isResolved && !isWinner ? 'opacity-50' : ''}
+              ` },
+                React.createElement("div", { className: "text-center" },
+                    React.createElement("div", { className: "font-semibold" }, option.label),
+                    option.percentage !== undefined && (React.createElement("div", { className: "text-sm opacity-80 mt-1" },
+                        Math.round(option.percentage),
+                        "%")),
+                    option.odds !== undefined && (React.createElement("div", { className: "text-xs opacity-60 mt-0.5" },
+                        option.odds.toFixed(2),
+                        "x"))),
+                isUserPrediction && (React.createElement("div", { className: "text-xs mt-2 opacity-80" }, "Your pick")),
+                isWinner && isResolved && (React.createElement("div", { className: "text-xs mt-2 text-green-300" }, "Winner!"))));
+        })),
+        isResolved && userPredictionId && (React.createElement("div", { className: `
+            mt-3 text-center text-sm font-medium
+            ${userPredictionId === winnerId ? 'text-green-400' : 'text-red-400'}
+          ` }, userPredictionId === winnerId ? 'You predicted correctly!' : 'Better luck next time!'))));
+}
+export default Prediction;

package/dist/spec/registry/composites/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Composite Components Index
+ *
+ * Exports all composite components and registers them with the global registry.
+ */
+import { type PollProps } from './Poll';
+import { type PredictionProps } from './Prediction';
+import { type CountdownCTAProps } from './CountdownCTA';
+import { type BottomSheetProps } from './BottomSheet';
+export { Poll, type PollProps, type PollOption } from './Poll';
+export { Prediction, type PredictionProps, type PredictionOption, type PredictionStatus } from './Prediction';
+export { CountdownCTA, type CountdownCTAProps } from './CountdownCTA';
+export { BottomSheet, type BottomSheetProps } from './BottomSheet';
+/**
+ * Register all composite components with the global registry.
+ * This function should be called once at app initialization.
+ */
+export declare function registerComposites(): void;
+/**
+ * Component type to props mapping for type safety
+ */
+export interface CompositePropsMap {
+    'ui.poll': PollProps;
+    'ui.prediction': PredictionProps;
+    'ui.countdown': CountdownCTAProps;
+    'ui.bottomSheet': BottomSheetProps;
+}
+/**
+ * All composite component type IDs
+ */
+export declare const COMPOSITE_TYPES: readonly ["ui.poll", "ui.prediction", "ui.countdown", "ui.bottomSheet"];
+export type CompositeType = (typeof COMPOSITE_TYPES)[number];
+//# sourceMappingURL=index.d.ts.map

package/dist/spec/registry/composites/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/composites/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,EAAQ,KAAK,SAAS,EAAmB,MAAM,QAAQ,CAAC;AAC/D,OAAO,EAAc,KAAK,eAAe,EAAgD,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAMzC;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,eAAe,EAAE,eAAe,CAAC;IACjC,cAAc,EAAE,iBAAiB,CAAC;IAClC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,yEAKlB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/spec/registry/composites/index.js

@@ -0,0 +1,36 @@
+/**
+ * Composite Components Index
+ *
+ * Exports all composite components and registers them with the global registry.
+ */
+import { registerComponent } from '../ComponentRegistry';
+// Import all composites
+import { Poll } from './Poll';
+import { Prediction } from './Prediction';
+import { CountdownCTA } from './CountdownCTA';
+import { BottomSheet } from './BottomSheet';
+// Re-export components
+export { Poll } from './Poll';
+export { Prediction } from './Prediction';
+export { CountdownCTA } from './CountdownCTA';
+export { BottomSheet } from './BottomSheet';
+/**
+ * Register all composite components with the global registry.
+ * This function should be called once at app initialization.
+ */
+export function registerComposites() {
+    // Interactive composites
+    registerComponent('ui.poll', Poll);
+    registerComponent('ui.prediction', Prediction);
+    registerComponent('ui.countdown', CountdownCTA);
+    registerComponent('ui.bottomSheet', BottomSheet);
+}
+/**
+ * All composite component type IDs
+ */
+export const COMPOSITE_TYPES = [
+    'ui.poll',
+    'ui.prediction',
+    'ui.countdown',
+    'ui.bottomSheet',
+];

package/dist/spec/registry/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Component Registry Index
+ *
+ * Exports registry utilities and all component categories.
+ */
+export { ComponentRegistry, globalRegistry, registerComponent, getComponent, hasComponent, getAllComponentIds, type RegistryComponentProps, type ComponentWithAction, } from './ComponentRegistry';
+export { sizeClasses, colorClasses, weightClasses, alignClasses, justifyClasses, paddingClasses, gapClasses, } from './ComponentRegistry';
+export * from './primitives';
+export * from './composites';
+/**
+ * Register all components (primitives + composites) with the global registry.
+ * This function should be called once at app initialization.
+ */
+export declare function registerAllComponents(): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/spec/registry/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/spec/registry/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,GACzB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,cAAc,EACd,cAAc,EACd,UAAU,GACX,MAAM,qBAAqB,CAAC;AAG7B,cAAc,cAAc,CAAC;AAG7B,cAAc,cAAc,CAAC;AAM7B;;;GAGG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CAG5C"}

package/dist/spec/registry/index.js

@@ -0,0 +1,24 @@
+/**
+ * Component Registry Index
+ *
+ * Exports registry utilities and all component categories.
+ */
+// Core registry
+export { ComponentRegistry, globalRegistry, registerComponent, getComponent, hasComponent, getAllComponentIds, } from './ComponentRegistry';
+// Design tokens
+export { sizeClasses, colorClasses, weightClasses, alignClasses, justifyClasses, paddingClasses, gapClasses, } from './ComponentRegistry';
+// Primitives
+export * from './primitives';
+// Composites
+export * from './composites';
+// Import for combined registration
+import { registerPrimitives } from './primitives';
+import { registerComposites } from './composites';
+/**
+ * Register all components (primitives + composites) with the global registry.
+ * This function should be called once at app initialization.
+ */
+export function registerAllComponents() {
+    registerPrimitives();
+    registerComposites();
+}

package/dist/spec/registry/primitives/Button.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Button Component
+ *
+ * Interactive button with variant styling and action support.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Size, Variant, Action } from '../../types';
+export interface ButtonProps extends RegistryComponentProps {
+    /** Button label */
+    label: string;
+    /** Button variant */
+    variant?: Variant;
+    /** Button size */
+    size?: Size;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Icon (left side) */
+    icon?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Action to trigger on press */
+    onPress?: Action;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Button({ label, variant, size, disabled, fullWidth, icon, loading, onPress, onAction, className, }: ButtonProps): JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/spec/registry/primitives/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/primitives/Button.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzD,MAAM,WAAW,WAAY,SAAQ,sBAAsB;IACzD,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAiB,EACjB,IAAW,EACX,QAAgB,EAChB,SAAiB,EACjB,IAAI,EACJ,OAAe,EACf,OAAO,EACP,QAAQ,EACR,SAAc,GACf,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA2D3B;AAED,eAAe,MAAM,CAAC"}

package/dist/spec/registry/primitives/Button.js

@@ -0,0 +1,62 @@
+/**
+ * Button Component
+ *
+ * Interactive button with variant styling and action support.
+ */
+import React from 'react';
+const sizeStyles = {
+    xs: 'px-2 py-1 text-xs',
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-base',
+    lg: 'px-6 py-3 text-lg',
+    xl: 'px-8 py-4 text-xl',
+    '2xl': 'px-10 py-5 text-2xl',
+};
+const variantStyles = {
+    solid: {
+        base: 'bg-purple-500 text-white hover:bg-purple-600 active:bg-purple-700',
+        disabled: 'bg-gray-600 text-gray-400 cursor-not-allowed',
+    },
+    outline: {
+        base: 'border-2 border-purple-500 text-purple-500 hover:bg-purple-500/10 active:bg-purple-500/20',
+        disabled: 'border-gray-500 text-gray-500 cursor-not-allowed',
+    },
+    ghost: {
+        base: 'text-purple-500 hover:bg-purple-500/10 active:bg-purple-500/20',
+        disabled: 'text-gray-500 cursor-not-allowed',
+    },
+    link: {
+        base: 'text-purple-500 underline hover:text-purple-400',
+        disabled: 'text-gray-500 cursor-not-allowed no-underline',
+    },
+};
+export function Button({ label, variant = 'solid', size = 'md', disabled = false, fullWidth = false, icon, loading = false, onPress, onAction, className = '', }) {
+    const isDisabled = disabled || loading;
+    const handleClick = () => {
+        if (isDisabled)
+            return;
+        if (onPress && onAction) {
+            onAction(onPress);
+        }
+    };
+    const variantStyle = variantStyles[variant];
+    const classes = [
+        'inline-flex items-center justify-center',
+        'rounded-lg font-medium',
+        'transition-colors duration-150',
+        'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-black',
+        sizeStyles[size],
+        isDisabled ? variantStyle.disabled : variantStyle.base,
+        fullWidth ? 'w-full' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (React.createElement("button", { type: "button", className: classes, onClick: handleClick, disabled: isDisabled, "aria-disabled": isDisabled },
+        loading && (React.createElement("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" },
+            React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }))),
+        icon && !loading && React.createElement("span", { className: "mr-2" }, icon),
+        label));
+}
+export default Button;

package/dist/spec/registry/primitives/Divider.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Divider Component
+ *
+ * Horizontal or vertical divider line.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Color } from '../../types';
+export interface DividerProps extends RegistryComponentProps {
+    /** Divider orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Line color */
+    color?: Color;
+    /** Line thickness */
+    thickness?: 'thin' | 'medium' | 'thick';
+    /** Spacing around divider */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Divider({ orientation, color, thickness, spacing, className, }: DividerProps): JSX.Element;
+export default Divider;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/spec/registry/primitives/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/primitives/Divider.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,YAAa,SAAQ,sBAAsB;IAC1D,0BAA0B;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC,iBAAiB;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAExC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEtC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyCD,wBAAgB,OAAO,CAAC,EACtB,WAA0B,EAC1B,KAAe,EACf,SAAkB,EAClB,OAAc,EACd,SAAc,GACf,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAc5B;AAED,eAAe,OAAO,CAAC"}

package/dist/spec/registry/primitives/Divider.js

@@ -0,0 +1,56 @@
+/**
+ * Divider Component
+ *
+ * Horizontal or vertical divider line.
+ */
+import React from 'react';
+const colorClasses = {
+    primary: 'bg-purple-500',
+    secondary: 'bg-gray-500',
+    success: 'bg-green-500',
+    warning: 'bg-yellow-500',
+    error: 'bg-red-500',
+    muted: 'bg-gray-600',
+    white: 'bg-white',
+    black: 'bg-black',
+};
+const thicknessClasses = {
+    horizontal: {
+        thin: 'h-px',
+        medium: 'h-0.5',
+        thick: 'h-1',
+    },
+    vertical: {
+        thin: 'w-px',
+        medium: 'w-0.5',
+        thick: 'w-1',
+    },
+};
+const spacingClasses = {
+    horizontal: {
+        none: '',
+        sm: 'my-2',
+        md: 'my-4',
+        lg: 'my-6',
+    },
+    vertical: {
+        none: '',
+        sm: 'mx-2',
+        md: 'mx-4',
+        lg: 'mx-6',
+    },
+};
+export function Divider({ orientation = 'horizontal', color = 'muted', thickness = 'thin', spacing = 'md', className = '', }) {
+    const isHorizontal = orientation === 'horizontal';
+    const classes = [
+        colorClasses[color],
+        thicknessClasses[orientation][thickness],
+        spacingClasses[orientation][spacing],
+        isHorizontal ? 'w-full' : 'h-full',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return React.createElement("div", { className: classes, role: "separator", "aria-orientation": orientation });
+}
+export default Divider;

package/dist/spec/registry/primitives/Image.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Image Component
+ *
+ * Image display with fit and rounded options.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+export interface ImageProps extends RegistryComponentProps {
+    /** Image source URL */
+    src: string;
+    /** Alt text */
+    alt?: string;
+    /** Object fit */
+    fit?: 'cover' | 'contain' | 'fill' | 'none';
+    /** Border radius */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    /** Width (CSS value or pixels) */
+    width?: string | number;
+    /** Height (CSS value or pixels) */
+    height?: string | number;
+    /** Aspect ratio */
+    aspectRatio?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Image({ src, alt, fit, rounded, width, height, aspectRatio, className, }: ImageProps): JSX.Element;
+export default Image;
+//# sourceMappingURL=Image.d.ts.map

package/dist/spec/registry/primitives/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/primitives/Image.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAGnE,MAAM,WAAW,UAAW,SAAQ,sBAAsB;IACxD,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IAEZ,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,iBAAiB;IACjB,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAE5C,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAE/C,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,wBAAgB,KAAK,CAAC,EACpB,GAAG,EACH,GAAQ,EACR,GAAa,EACb,OAAgB,EAChB,KAAK,EACL,MAAM,EACN,WAAW,EACX,SAAc,GACf,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAoB1B;AAED,eAAe,KAAK,CAAC"}

package/dist/spec/registry/primitives/Image.js

@@ -0,0 +1,36 @@
+/**
+ * Image Component
+ *
+ * Image display with fit and rounded options.
+ */
+import React from 'react';
+const fitClasses = {
+    cover: 'object-cover',
+    contain: 'object-contain',
+    fill: 'object-fill',
+    none: 'object-none',
+};
+const roundedClasses = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    full: 'rounded-full',
+};
+export function Image({ src, alt = '', fit = 'cover', rounded = 'none', width, height, aspectRatio, className = '', }) {
+    const classes = [fitClasses[fit], roundedClasses[rounded], className]
+        .filter(Boolean)
+        .join(' ');
+    const style = {};
+    if (width !== undefined) {
+        style.width = typeof width === 'number' ? `${width}px` : width;
+    }
+    if (height !== undefined) {
+        style.height = typeof height === 'number' ? `${height}px` : height;
+    }
+    if (aspectRatio) {
+        style.aspectRatio = aspectRatio;
+    }
+    return React.createElement("img", { src: src, alt: alt, className: classes, style: style, loading: "lazy" });
+}
+export default Image;

package/dist/spec/registry/primitives/ProgressBar.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ProgressBar Component
+ *
+ * Animated progress bar with color variants.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Color, Size } from '../../types';
+export interface ProgressBarProps extends RegistryComponentProps {
+    /** Current value */
+    value: number;
+    /** Maximum value */
+    max?: number;
+    /** Bar color */
+    color?: Color;
+    /** Bar height */
+    size?: Size;
+    /** Show percentage label */
+    showLabel?: boolean;
+    /** Animate the bar */
+    animated?: boolean;
+    /** Border radius */
+    rounded?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function ProgressBar({ value, max, color, size, showLabel, animated, rounded, className, }: ProgressBarProps): JSX.Element;
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/spec/registry/primitives/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/primitives/ProgressBar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,gBAAgB;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAS,EACT,KAAiB,EACjB,IAAW,EACX,SAAiB,EACjB,QAAe,EACf,OAAc,EACd,SAAc,GACf,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAwChC;AAED,eAAe,WAAW,CAAC"}

package/dist/spec/registry/primitives/ProgressBar.js

@@ -0,0 +1,50 @@
+/**
+ * ProgressBar Component
+ *
+ * Animated progress bar with color variants.
+ */
+import React from 'react';
+const colorClasses = {
+    primary: 'bg-purple-500',
+    secondary: 'bg-gray-500',
+    success: 'bg-green-500',
+    warning: 'bg-yellow-500',
+    error: 'bg-red-500',
+    muted: 'bg-gray-400',
+    white: 'bg-white',
+    black: 'bg-black',
+};
+const sizeClasses = {
+    xs: 'h-1',
+    sm: 'h-2',
+    md: 'h-3',
+    lg: 'h-4',
+    xl: 'h-6',
+    '2xl': 'h-8',
+};
+export function ProgressBar({ value, max = 100, color = 'primary', size = 'md', showLabel = false, animated = true, rounded = true, className = '', }) {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    const containerClasses = [
+        'w-full bg-gray-700 overflow-hidden',
+        sizeClasses[size],
+        rounded ? 'rounded-full' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const barClasses = [
+        colorClasses[color],
+        'h-full',
+        animated ? 'transition-all duration-500 ease-out' : '',
+        rounded ? 'rounded-full' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (React.createElement("div", { className: "w-full" },
+        React.createElement("div", { className: containerClasses },
+            React.createElement("div", { className: barClasses, style: { width: `${percentage}%` }, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max })),
+        showLabel && (React.createElement("div", { className: "mt-1 text-center text-sm text-gray-400" },
+            Math.round(percentage),
+            "%"))));
+}
+export default ProgressBar;

package/dist/spec/registry/primitives/Row.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Row Component
+ *
+ * Horizontal flex container with gap, alignment, and justify options.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Size, Align, Justify } from '../../types';
+export interface RowProps extends RegistryComponentProps {
+    /** Gap between items */
+    gap?: Size;
+    /** Vertical alignment */
+    align?: Align;
+    /** Horizontal justification */
+    justify?: Justify;
+    /** Padding */
+    padding?: Size;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Wrap items */
+    wrap?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Row({ gap, align, justify, padding, fullWidth, wrap, className, children, }: RowProps): JSX.Element;
+export default Row;
+//# sourceMappingURL=Row.d.ts.map

package/dist/spec/registry/primitives/Row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/primitives/Row.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,QAAS,SAAQ,sBAAsB;IACtD,wBAAwB;IACxB,GAAG,CAAC,EAAE,IAAI,CAAC;IAEX,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,cAAc;IACd,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,iBAAiB;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD,wBAAgB,GAAG,CAAC,EAClB,GAAU,EACV,KAAgB,EAChB,OAAiB,EACjB,OAAO,EACP,SAAiB,EACjB,IAAY,EACZ,SAAc,EACd,QAAQ,GACT,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAexB;AAED,eAAe,GAAG,CAAC"}

package/dist/spec/registry/primitives/Row.js

@@ -0,0 +1,50 @@
+/**
+ * Row Component
+ *
+ * Horizontal flex container with gap, alignment, and justify options.
+ */
+import React from 'react';
+const gapClasses = {
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    '2xl': 'gap-10',
+};
+const alignClasses = {
+    left: 'items-start',
+    center: 'items-center',
+    right: 'items-end',
+};
+const justifyClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+};
+const paddingClasses = {
+    xs: 'p-1',
+    sm: 'p-2',
+    md: 'p-4',
+    lg: 'p-6',
+    xl: 'p-8',
+    '2xl': 'p-10',
+};
+export function Row({ gap = 'md', align = 'center', justify = 'start', padding, fullWidth = false, wrap = false, className = '', children, }) {
+    const classes = [
+        'flex flex-row',
+        gapClasses[gap],
+        alignClasses[align],
+        justifyClasses[justify],
+        padding ? paddingClasses[padding] : '',
+        fullWidth ? 'w-full' : '',
+        wrap ? 'flex-wrap' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return React.createElement("div", { className: classes }, children);
+}
+export default Row;