@kala-ui/react 0.0.1-beta.7 → 0.0.2

package/dist/components/charts/use-theme-aware-chart.js

@@ -33,7 +33,8 @@ export function useThemeAwareChart() {
             return;
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
-                if (mutation.type === "attributes" && mutation.attributeName === "class") {
+                if (mutation.type === "attributes" &&
+                    mutation.attributeName === "class") {
                     const element = document.documentElement;
                     const classList = element.classList;
                     let newTheme = "light";

package/dist/components/checkbox/checkbox.js

@@ -4,7 +4,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, Minus } from "lucide-react";
 import { checkboxIndicatorStyles, checkboxStyles } from "../../config/checkbox";
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 function Checkbox({ className, isLoading = false, ...props }) {
     if (isLoading) {
         return _jsx(Skeleton, { className: cn("h-4 w-4 rounded", className) });

package/dist/components/checkbox/checkbox.stories.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Box } from "../box";
+import { Flex } from "../flex";
 import { Label } from "../label";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
+import { Stack } from "../stack";
+import { Text } from "../text";
 import { Checkbox } from "./checkbox";
 const meta = {
     title: "Forms/Checkbox",
@@ -23,19 +27,19 @@ const meta = {
 export default meta;
 // All States Showcase
 export const AllStates = {
-    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Unchecked:" }), _jsx(Checkbox, { "aria-label": "Unchecked checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Checked:" }), _jsx(Checkbox, { defaultChecked: true, "aria-label": "Checked checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Indeterminate:" }), _jsx(Checkbox, { checked: "indeterminate", "aria-label": "Indeterminate checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Disabled:" }), _jsx(Checkbox, { disabled: true, "aria-label": "Disabled unchecked checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Disabled Checked:" }), _jsx(Checkbox, { disabled: true, defaultChecked: true, "aria-label": "Disabled checked checkbox" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-40 text-sm font-medium", children: "Disabled Indeterminate:" }), _jsx(Checkbox, { disabled: true, checked: "indeterminate", "aria-label": "Disabled indeterminate checkbox" })] })] })),
+    render: () => (_jsxs(Stack, { gap: 4, children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Text, { size: "sm", weight: "medium", className: "w-40", children: "Unchecked:" }), _jsx(Checkbox, { "aria-label": "Unchecked checkbox" })] }), _jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Text, { size: "sm", weight: "medium", className: "w-40", children: "Checked:" }), _jsx(Checkbox, { defaultChecked: true, "aria-label": "Checked checkbox" })] }), _jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Text, { size: "sm", weight: "medium", className: "w-40", children: "Indeterminate:" }), _jsx(Checkbox, { checked: "indeterminate", "aria-label": "Indeterminate checkbox" })] }), _jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Text, { size: "sm", weight: "medium", className: "w-40", children: "Disabled:" }), _jsx(Checkbox, { disabled: true, "aria-label": "Disabled unchecked checkbox" })] }), _jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Text, { size: "sm", weight: "medium", className: "w-40", children: "Disabled Checked:" }), _jsx(Checkbox, { disabled: true, defaultChecked: true, "aria-label": "Disabled checked checkbox" })] }), _jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Text, { size: "sm", weight: "medium", className: "w-40", children: "Disabled Indeterminate:" }), _jsx(Checkbox, { disabled: true, checked: "indeterminate", "aria-label": "Disabled indeterminate checkbox" })] })] })),
 };
 // With Labels and Descriptions
 export const WithLabels = {
-    render: () => (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "simple-label" }), _jsx(Label, { htmlFor: "simple-label", children: "Accept terms and conditions" })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Checkbox, { id: "with-description", defaultChecked: true }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "with-description", children: "Enable notifications" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "You can enable or disable notifications at any time in your settings." })] })] }), _jsxs(Label, { htmlFor: "interactive-card", className: "flex cursor-pointer items-start gap-3 rounded-lg border border-input p-4 transition-all hover:bg-accent hover:text-accent-foreground has-aria-checked:border-primary has-aria-checked:bg-primary/10 h-auto", children: [_jsx(Checkbox, { id: "interactive-card", defaultChecked: true }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx("p", { className: "text-sm font-medium leading-none", children: "Marketing emails" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Receive emails about new products, features, and updates." })] })] })] })),
+    render: () => (_jsxs(Stack, { gap: 6, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "simple-label" }), _jsx(Label, { htmlFor: "simple-label", children: "Accept terms and conditions" })] }), _jsxs(Flex, { align: "start", gap: 3, children: [_jsx(Checkbox, { id: "with-description", defaultChecked: true }), _jsxs(Box, { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "with-description", children: "Enable notifications" }), _jsx(Text, { size: "sm", className: "text-muted-foreground", children: "You can enable or disable notifications at any time in your settings." })] })] }), _jsxs(Label, { htmlFor: "interactive-card", className: "flex cursor-pointer items-start gap-3 rounded-lg border border-input p-4 transition-all hover:bg-accent hover:text-accent-foreground has-aria-checked:border-primary has-aria-checked:bg-primary/10 h-auto", children: [_jsx(Checkbox, { id: "interactive-card", defaultChecked: true }), _jsxs(Box, { className: "grid gap-1.5", children: [_jsx(Text, { size: "sm", weight: "medium", className: "leading-none", children: "Marketing emails" }), _jsx(Text, { size: "sm", className: "text-muted-foreground", children: "Receive emails about new products, features, and updates." })] })] })] })),
 };
 // Multiple Options and Layouts
 export const MultipleOptions = {
-    render: () => (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { children: [_jsx("h4", { className: "mb-3 text-sm font-semibold", children: "Vertical Layout" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "option1", defaultChecked: true }), _jsx(Label, { htmlFor: "option1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "option2" }), _jsx(Label, { htmlFor: "option2", children: "Option 2" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "option3", defaultChecked: true }), _jsx(Label, { htmlFor: "option3", children: "Option 3" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "option4", disabled: true }), _jsx(Label, { htmlFor: "option4", className: "text-muted-foreground", children: "Disabled option" })] })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "mb-3 text-sm font-semibold", children: "Inline Layout" }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "inline1", defaultChecked: true }), _jsx(Label, { htmlFor: "inline1", children: "Option A" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "inline2" }), _jsx(Label, { htmlFor: "inline2", children: "Option B" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "inline3", defaultChecked: true }), _jsx(Label, { htmlFor: "inline3", children: "Option C" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "inline4" }), _jsx(Label, { htmlFor: "inline4", children: "Option D" })] })] })] })] })),
+    render: () => (_jsxs(Stack, { gap: 8, children: [_jsxs(Box, { children: [_jsx(Text, { weight: "semibold", size: "sm", className: "mb-3", children: "Vertical Layout" }), _jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "option1", defaultChecked: true }), _jsx(Label, { htmlFor: "option1", children: "Option 1" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "option2" }), _jsx(Label, { htmlFor: "option2", children: "Option 2" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "option3", defaultChecked: true }), _jsx(Label, { htmlFor: "option3", children: "Option 3" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "option4", disabled: true }), _jsx(Label, { htmlFor: "option4", className: "text-muted-foreground", children: "Disabled option" })] })] })] }), _jsxs(Box, { children: [_jsx(Text, { weight: "semibold", size: "sm", className: "mb-3", children: "Inline Layout" }), _jsxs(Flex, { wrap: "wrap", align: "center", gap: 4, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "inline1", defaultChecked: true }), _jsx(Label, { htmlFor: "inline1", children: "Option A" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "inline2" }), _jsx(Label, { htmlFor: "inline2", children: "Option B" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "inline3", defaultChecked: true }), _jsx(Label, { htmlFor: "inline3", children: "Option C" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "inline4" }), _jsx(Label, { htmlFor: "inline4", children: "Option D" })] })] })] })] })),
 };
 // Form Examples
 export const FormExamples = {
-    render: () => (_jsxs("div", { className: "flex gap-6", children: [_jsxs("div", { className: "w-72 rounded-md border p-4", children: [_jsx("h4", { className: "mb-4 text-base font-semibold", children: "Notification Preferences" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "email-pref", defaultChecked: true }), _jsx(Label, { htmlFor: "email-pref", children: "Email notifications" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "push-pref", defaultChecked: true }), _jsx(Label, { htmlFor: "push-pref", children: "Push notifications" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "sms-pref" }), _jsx(Label, { htmlFor: "sms-pref", children: "SMS notifications" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "marketing-pref" }), _jsx(Label, { htmlFor: "marketing-pref", children: "Marketing emails" })] })] })] }), _jsxs("div", { className: "w-80 space-y-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "mb-3 text-sm font-semibold", children: "Account Settings" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "public-profile" }), _jsx(Label, { htmlFor: "public-profile", children: "Make profile public" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "show-email" }), _jsx(Label, { htmlFor: "show-email", children: "Show email address" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "searchable", defaultChecked: true }), _jsx(Label, { htmlFor: "searchable", children: "Searchable by others" })] })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "mb-3 text-sm font-semibold", children: "Privacy" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "analytics", defaultChecked: true }), _jsx(Label, { htmlFor: "analytics", children: "Analytics cookies" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "cookies" }), _jsx(Label, { htmlFor: "cookies", children: "Marketing cookies" })] })] })] })] })] })),
+    render: () => (_jsxs(Flex, { gap: 6, children: [_jsxs(Box, { className: "w-72 rounded-md border p-4", children: [_jsx(Text, { weight: "semibold", className: "mb-4 text-base", children: "Notification Preferences" }), _jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "email-pref", defaultChecked: true }), _jsx(Label, { htmlFor: "email-pref", children: "Email notifications" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "push-pref", defaultChecked: true }), _jsx(Label, { htmlFor: "push-pref", children: "Push notifications" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "sms-pref" }), _jsx(Label, { htmlFor: "sms-pref", children: "SMS notifications" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "marketing-pref" }), _jsx(Label, { htmlFor: "marketing-pref", children: "Marketing emails" })] })] })] }), _jsxs(Stack, { gap: 6, className: "w-80", children: [_jsxs(Box, { children: [_jsx(Text, { weight: "semibold", size: "sm", className: "mb-3", children: "Account Settings" }), _jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "public-profile" }), _jsx(Label, { htmlFor: "public-profile", children: "Make profile public" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "show-email" }), _jsx(Label, { htmlFor: "show-email", children: "Show email address" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "searchable", defaultChecked: true }), _jsx(Label, { htmlFor: "searchable", children: "Searchable by others" })] })] })] }), _jsxs(Box, { children: [_jsx(Text, { weight: "semibold", size: "sm", className: "mb-3", children: "Privacy" }), _jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "analytics", defaultChecked: true }), _jsx(Label, { htmlFor: "analytics", children: "Analytics cookies" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: "cookies" }), _jsx(Label, { htmlFor: "cookies", children: "Marketing cookies" })] })] })] })] })] })),
 };
 // Select All with Indeterminate (Interactive)
 export const SelectAllInteractive = {
@@ -55,15 +59,15 @@ export const SelectAllInteractive = {
         const handleItemChange = (id) => {
             setItems(items.map((item) => item.id === id ? { ...item, checked: !item.checked } : item));
         };
-        return (_jsxs("div", { className: "w-80 rounded-md border p-4", children: [_jsxs("div", { className: "mb-4 flex items-center gap-2 border-b pb-3", children: [_jsx(Checkbox, { id: "select-all", checked: allChecked ? true : someChecked ? "indeterminate" : false, onCheckedChange: handleSelectAll, "aria-label": allChecked
+        return (_jsxs(Box, { className: "w-80 rounded-md border p-4", children: [_jsxs(Flex, { align: "center", gap: 2, className: "mb-4 border-b pb-3", children: [_jsx(Checkbox, { id: "select-all", checked: allChecked ? true : someChecked ? "indeterminate" : false, onCheckedChange: handleSelectAll, "aria-label": allChecked
                                 ? "Deselect all items"
                                 : someChecked
                                     ? "Select all items (partial selection)"
-                                    : "Select all items" }), _jsxs(Label, { htmlFor: "select-all", className: "font-semibold", children: ["Select All (", checkedCount, "/", items.length, ")"] })] }), _jsx("div", { className: "flex flex-col gap-3", children: items.map((item) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: `item-${item.id}`, checked: item.checked, onCheckedChange: () => handleItemChange(item.id), "aria-label": `${item.checked ? "Deselect" : "Select"} ${item.label}` }), _jsx(Label, { htmlFor: `item-${item.id}`, children: item.label })] }, item.id))) })] }));
+                                    : "Select all items" }), _jsxs(Label, { htmlFor: "select-all", className: "font-semibold", children: ["Select All (", checkedCount, "/", items.length, ")"] })] }), _jsx(Stack, { gap: 3, children: items.map((item) => (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: `item-${item.id}`, checked: item.checked, onCheckedChange: () => handleItemChange(item.id), "aria-label": `${item.checked ? "Deselect" : "Select"} ${item.label}` }), _jsx(Label, { htmlFor: `item-${item.id}`, children: item.label })] }, item.id))) })] }));
     },
 };
 export const LoadingSkeleton = {
-    render: () => (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-32" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-40" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-36" })] })] })),
+    render: () => (_jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-32" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-40" })] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Skeleton, { className: "h-4 w-4 rounded" }), _jsx(Skeleton, { className: "h-4 w-36" })] })] })),
     parameters: {
         docs: {
             description: {

package/dist/components/close-button/close-button.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type ActionIconProps } from "../action-icon/action-icon";
+export interface CloseButtonProps extends Omit<ActionIconProps, "children"> {
+    iconSize?: number;
+}
+declare const CloseButton: React.ForwardRefExoticComponent<CloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { CloseButton };

package/dist/components/close-button/close-button.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import * as React from "react";
+import { ActionIcon } from "../action-icon/action-icon";
+const CloseButton = React.forwardRef(({ iconSize = 16, ...props }, ref) => {
+    return (_jsx(ActionIcon, { ref: ref, ...props, children: _jsx(X, { size: iconSize }) }));
+});
+CloseButton.displayName = "CloseButton";
+export { CloseButton };

package/dist/components/close-button/close-button.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CloseButton } from "./close-button";
+declare const meta: Meta<typeof CloseButton>;
+export default meta;
+type Story = StoryObj<typeof CloseButton>;
+export declare const Default: Story;
+export declare const Sizes: Story;

package/dist/components/close-button/close-button.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseButton } from "./close-button";
+const meta = {
+    title: "Components/CloseButton",
+    component: CloseButton,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: "select",
+            options: ["xs", "sm", "md", "lg", "xl"],
+        },
+    },
+};
+export default meta;
+export const Default = {};
+export const Sizes = {
+    render: () => (_jsxs("div", { className: "flex gap-4", children: [_jsx(CloseButton, { size: "xs" }), _jsx(CloseButton, { size: "sm" }), _jsx(CloseButton, { size: "md" }), _jsx(CloseButton, { size: "lg" }), _jsx(CloseButton, { size: "xl" })] })),
+};

package/dist/components/close-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./close-button";

package/dist/components/close-button/index.js

@@ -0,0 +1 @@
+export * from "./close-button";

package/dist/components/code/code.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+    /** Whether to render as a block (pre) or inline (code) */
+    block?: boolean;
+    /** Color scheme (class name for text/bg, e.g. "text-blue-600 bg-blue-50") */
+    color?: string;
+}
+export declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLElement>>;

package/dist/components/code/code.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+export const Code = React.forwardRef(({ className, block = false, color, children, ...props }, ref) => {
+    const Comp = block ? "pre" : "code";
+    return (_jsx(Comp
+    // biome-ignore lint/suspicious/noExplicitAny: polymorphic ref
+    , { 
+        // biome-ignore lint/suspicious/noExplicitAny: polymorphic ref
+        ref: ref, className: cn("font-mono text-sm", block
+            ? "block w-full overflow-x-auto rounded-lg bg-muted p-4"
+            : "rounded bg-muted px-1.5 py-0.5", color, className), ...props, children: children }));
+});
+Code.displayName = "Code";

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Code } from "./code";
+declare const meta: Meta<typeof Code>;
+export default meta;
+type Story = StoryObj<typeof Code>;
+export declare const Inline: Story;
+export declare const Block: Story;
+export declare const CustomColor: Story;

package/dist/components/code/code.stories.js

@@ -0,0 +1,31 @@
+import { Code } from "./code";
+const meta = {
+    title: "Components/Code",
+    component: Code,
+    tags: ["autodocs"],
+    argTypes: {
+        block: { control: "boolean" },
+    },
+};
+export default meta;
+export const Inline = {
+    args: {
+        children: "npm install @kala-ui/react",
+    },
+};
+export const Block = {
+    args: {
+        block: true,
+        children: `import { Button } from '@kala-ui/react';
+
+function App() {
+  return <Button>Click me</Button>;
+}`,
+    },
+};
+export const CustomColor = {
+    args: {
+        children: "console.log('Hello world')",
+        color: "bg-blue-100 text-blue-900 dark:bg-blue-900/30 dark:text-blue-100",
+    },
+};

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

@@ -0,0 +1 @@
+export * from "./code";

package/dist/components/code/index.js

@@ -0,0 +1 @@
+export * from "./code";

package/dist/components/collapse/collapse.d.ts

@@ -0,0 +1,17 @@
+import type { Easing } from "framer-motion";
+import * as React from "react";
+export interface CollapseProps {
+    /** If true, the content will be visible */
+    in: boolean;
+    /** The content to be collapsed */
+    children: React.ReactNode;
+    /** Transition duration in seconds */
+    transitionDuration?: number;
+    /** Transition timing function */
+    transitionTimingFunction?: Easing | Easing[];
+    /** Called when transition starts */
+    onTransitionEnd?: () => void;
+    /** If true, opacity will be animated */
+    animateOpacity?: boolean;
+}
+export declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/collapse/collapse.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import * as React from "react";
+export const Collapse = React.forwardRef(({ children, in: opened, transitionDuration = 0.2, transitionTimingFunction = "ease", onTransitionEnd, animateOpacity = true, }, ref) => {
+    return (_jsx(AnimatePresence, { initial: false, children: opened && (_jsx(motion.div, { ref: ref, initial: { height: 0, opacity: animateOpacity ? 0 : 1 }, animate: {
+                height: "auto",
+                opacity: 1,
+                transition: {
+                    height: {
+                        duration: transitionDuration,
+                        ease: transitionTimingFunction,
+                    },
+                    opacity: {
+                        duration: transitionDuration,
+                        ease: transitionTimingFunction,
+                    },
+                },
+            }, exit: {
+                height: 0,
+                opacity: animateOpacity ? 0 : 1,
+                transition: {
+                    height: {
+                        duration: transitionDuration,
+                        ease: transitionTimingFunction,
+                    },
+                    opacity: {
+                        duration: transitionDuration,
+                        ease: transitionTimingFunction,
+                    },
+                },
+            }, onAnimationComplete: onTransitionEnd, style: { overflow: "hidden" }, children: children })) }));
+});
+Collapse.displayName = "Collapse";

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

@@ -0,0 +1 @@
+export { Collapse, type CollapseProps } from "./collapse";

package/dist/components/collapse/index.js

@@ -0,0 +1 @@
+export { Collapse } from "./collapse";

package/dist/components/color-input/color-input.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export interface ColorInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    /**
+     * Value for controlled component
+     */
+    value?: string;
+    /**
+     * Default value for uncontrolled component
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * If true, renders with error styles
+     */
+    error?: boolean;
+    /**
+     * If true, renders with success styles
+     */
+    success?: boolean;
+    /**
+     * If true, hides the color preview swatch
+     */
+    withPreview?: boolean;
+}
+export declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/color-input/color-input.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { inputStyles } from "../../config/input";
+import { cn } from "../../lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+export const ColorInput = React.forwardRef(({ className, value: valueProp, defaultValue, onChange, error, success, withPreview = true, disabled, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(valueProp ?? defaultValue ?? "");
+    React.useEffect(() => {
+        if (valueProp !== undefined) {
+            setInternalValue(valueProp);
+        }
+    }, [valueProp]);
+    const handleChange = (e) => {
+        const val = e.target.value;
+        setInternalValue(val);
+        onChange?.(val);
+    };
+    const handleColorChange = (e) => {
+        const val = e.target.value;
+        setInternalValue(val);
+        onChange?.(val);
+    };
+    return (_jsxs("div", { className: "relative flex items-center", children: [withPreview && (_jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 z-10", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "h-5 w-5 rounded border shadow-sm cursor-pointer overflow-hidden p-0 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", style: { backgroundColor: internalValue || "transparent" }, disabled: disabled, children: _jsx("span", { className: "sr-only", children: "Pick a color" }) }) }), _jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex gap-2", children: [
+                                            "#000000",
+                                            "#ffffff",
+                                            "#ef4444",
+                                            "#22c55e",
+                                            "#3b82f6",
+                                            "#f59e0b",
+                                        ].map((color) => (_jsx("button", { type: "button", className: "h-6 w-6 rounded border shadow-sm hover:scale-110 transition-transform", style: { backgroundColor: color }, onClick: () => {
+                                                setInternalValue(color);
+                                                onChange?.(color);
+                                            } }, color))) }), _jsx("input", { type: "color", value: internalValue.length === 7 ? internalValue : "#000000", onChange: handleColorChange, className: "h-8 w-full cursor-pointer" })] }) })] }) })), _jsx("input", { type: "text", ref: ref, value: internalValue, onChange: handleChange, disabled: disabled, className: cn(inputStyles.base, error && inputStyles.error, success && inputStyles.success, withPreview && "pl-10", className), placeholder: "#000000", ...props })] }));
+});
+ColorInput.displayName = "ColorInput";

package/dist/components/color-input/color-input.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ColorInput } from "./color-input";
+declare const meta: Meta<typeof ColorInput>;
+export default meta;
+type Story = StoryObj<typeof ColorInput>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const NoPreview: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;

package/dist/components/color-input/color-input.stories.js

@@ -0,0 +1,41 @@
+import { ColorInput } from "./color-input";
+const meta = {
+    title: "Components/ColorInput",
+    component: ColorInput,
+    tags: ["autodocs"],
+    argTypes: {
+        error: { control: "boolean" },
+        success: { control: "boolean" },
+        withPreview: { control: "boolean" },
+        disabled: { control: "boolean" },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        placeholder: "Pick a color",
+    },
+};
+export const WithValue = {
+    args: {
+        defaultValue: "#3b82f6",
+    },
+};
+export const NoPreview = {
+    args: {
+        defaultValue: "#ef4444",
+        withPreview: false,
+    },
+};
+export const Disabled = {
+    args: {
+        defaultValue: "#22c55e",
+        disabled: true,
+    },
+};
+export const WithError = {
+    args: {
+        defaultValue: "invalid-color",
+        error: true,
+    },
+};

package/dist/components/color-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./color-input";

package/dist/components/color-input/index.js

@@ -0,0 +1 @@
+export * from "./color-input";

package/dist/components/combobox/combobox-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Supports both single and multi-select appearances.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Combobox skeleton component
  *

package/dist/components/combobox/combobox.d.ts

@@ -52,4 +52,4 @@ export interface ComboboxProps {
     matchTriggerWidth?: boolean;
 }
 declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;
-export { Combobox, };
+export { Combobox };

package/dist/components/combobox/combobox.js

@@ -1,25 +1,34 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDisclosure } from "@kala-ui/react-hooks";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Check, ChevronsUpDown } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../lib/utils";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../../primitives/command";
+import { Button } from "../button";
+import { Text } from "../text";
 const Combobox = React.forwardRef(({ options, value, onValueChange, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No results found.", disabled = false, className, size = "default", matchTriggerWidth = true, }, ref) => {
-    const [open, setOpen] = React.useState(false);
+    const [open, { set: setOpen }] = useDisclosure(false);
     const [search, setSearch] = React.useState("");
     const selectedOption = options.find((option) => option.value === value);
-    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", role: "combobox", "aria-expanded": open, "aria-disabled": disabled, disabled: disabled, className: cn("flex w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm transition-colors theme-input", "hover:bg-accent hover:text-accent-foreground", "focus-ring", "disabled:pointer-events-none disabled:opacity-50", {
-                        "h-8 px-2 py-1 text-xs": size === "sm",
-                        "h-10": size === "default",
-                    }, className), children: [_jsx("span", { className: cn("truncate", !selectedOption && "text-muted-foreground"), children: selectedOption ? selectedOption.label : placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50", "aria-hidden": "true" })] }) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { className: "p-0 z-30", align: "start", sideOffset: 4, style: matchTriggerWidth
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs(Button, { ref: ref, variant: "outline", role: "combobox", "aria-expanded": open, disabled: disabled, className: cn("w-full justify-between font-normal", size === "sm" ? "h-8 px-3 text-xs" : "h-10 px-4", !value && "text-muted-foreground", className), children: [_jsx(Text, { className: cn("truncate", matchTriggerWidth && "flex-1 text-left"), children: selectedOption ? selectedOption.label : placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { className: "p-0 z-30", align: "start", sideOffset: 4, style: matchTriggerWidth
                         ? { width: "var(--radix-popover-trigger-width)" }
-                        : undefined, children: _jsxs(Command, { className: cn("rounded-lg border bg-popover text-popover-foreground theme-dropdown", matchTriggerWidth ? "w-full" : "min-w-[200px]"), children: [_jsx(CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch }), _jsxs(CommandList, { className: "max-h-[300px] overflow-y-auto scrollbar-hide", children: [_jsx(CommandEmpty, { children: emptyText }), _jsx(CommandGroup, { children: options.map((option) => (_jsxs(CommandItem, { value: option.label, disabled: option.disabled ?? false, onSelect: () => {
+                        : undefined, children: _jsxs(Command, { className: cn("rounded-lg border bg-popover text-popover-foreground theme-dropdown", matchTriggerWidth ? "w-full" : "min-w-[200px]"), filter: (value, search) => {
+                            const option = options.find((opt) => opt.value === value);
+                            const label = option?.label ?? "";
+                            const searchLower = search.toLowerCase();
+                            if (value.toLowerCase().includes(searchLower) ||
+                                label.toLowerCase().includes(searchLower)) {
+                                return 1;
+                            }
+                            return 0;
+                        }, children: [_jsx(CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch }), _jsxs(CommandList, { className: "max-h-[300px] overflow-y-auto scrollbar-hide", children: [_jsx(CommandEmpty, { children: emptyText }), _jsx(CommandGroup, { children: options.map((option) => (_jsxs(CommandItem, { value: option.value, disabled: option.disabled ?? false, onSelect: () => {
                                                 const newValue = option.value === value ? "" : option.value;
                                                 onValueChange?.(newValue);
                                                 setOpen(false);
                                                 setSearch("");
-                                            }, children: [_jsx(Check, { className: cn("mr-2 size-4", value === option.value ? "opacity-100" : "opacity-0"), "aria-hidden": "true" }), _jsx("span", { className: cn(!matchTriggerWidth && "truncate", "text-foreground"), children: option.label })] }, option.value))) })] })] }) }) })] }));
+                                            }, children: [_jsx(Check, { className: cn("mr-2 size-4", value === option.value ? "opacity-100" : "opacity-0"), "aria-hidden": "true" }), _jsx(Text, { className: cn(!matchTriggerWidth && "truncate", "text-foreground"), children: option.label })] }, option.value))) })] })] }) }) })] }));
 });
 Combobox.displayName = "Combobox";
-export { Combobox, };
+export { Combobox };

package/dist/components/combobox/combobox.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Combobox } from "./combobox";
 const meta = {
     title: "Forms/Combobox",

package/dist/components/command/command.d.ts

@@ -24,7 +24,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -50,7 +50,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;