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

package/dist/components/scroll-area/scroll-area.stories.js

@@ -81,31 +81,31 @@ export const Styled = {
  */
 export const CodeBlock = {
     args: {},
-    render: () => (_jsxs(ScrollArea, { className: "h-[300px] w-[500px] rounded-md border", children: [_jsx("div", { className: "bg-muted/50 p-4", children: _jsx("pre", { className: "text-sm", children: _jsx("code", { children: `import { ScrollArea } from '@repo/ui/scroll-area';
-
-export function Example() {
-  return (
-    <ScrollArea className="h-72 w-48 rounded-md border">
-      <div className="p-4">
-        <h4>Title</h4>
-        {/* Your scrollable content */}
-      </div>
-    </ScrollArea>
-  );
-}
-
-// Advanced usage with horizontal scrolling
-export function HorizontalExample() {
-  return (
-    <ScrollArea className="w-96 whitespace-nowrap">
-      <div className="flex w-max space-x-4 p-4">
-        {items.map((item) => (
-          <div key={item.id}>{item.content}</div>
-        ))}
-      </div>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
+    render: () => (_jsxs(ScrollArea, { className: "h-[300px] w-[500px] rounded-md border", children: [_jsx("div", { className: "bg-muted/50 p-4", children: _jsx("pre", { className: "text-sm", children: _jsx("code", { children: `import { ScrollArea } from '@repo/ui/scroll-area';
+
+export function Example() {
+  return (
+    <ScrollArea className="h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4>Title</h4>
+        {/* Your scrollable content */}
+      </div>
+    </ScrollArea>
+  );
+}
+
+// Advanced usage with horizontal scrolling
+export function HorizontalExample() {
+  return (
+    <ScrollArea className="w-96 whitespace-nowrap">
+      <div className="flex w-max space-x-4 p-4">
+        {items.map((item) => (
+          <div key={item.id}>{item.content}</div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  );
 }` }) }) }), _jsx(ScrollBar, { orientation: "horizontal" })] })),
 };
 /**

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

@@ -0,0 +1 @@
+export * from './stack';

package/dist/components/stack/index.js

@@ -0,0 +1 @@
+export * from './stack';

package/dist/components/stack/stack.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type FlexProps } from "../flex/flex";
+export interface StackProps extends Omit<FlexProps, "direction"> {
+    direction?: "column" | "columnReverse";
+}
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export { Stack };

package/dist/components/stack/stack.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Flex } from "../flex/flex";
+const Stack = React.forwardRef(({ className, direction = "column", gap = 4, align = "stretch", ...props }, ref) => {
+    return (_jsx(Flex, { ref: ref, direction: direction, gap: gap, align: align, className: cn("w-full", className), ...props }));
+});
+Stack.displayName = "Stack";
+export { Stack };

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack } from "./stack";
+declare const meta: Meta<typeof Stack>;
+export default meta;
+type Story = StoryObj<typeof Stack>;
+export declare const Default: Story;
+export declare const Reverse: Story;
+export declare const Vertical: Story;

package/dist/components/stack/stack.stories.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from "./stack";
+const meta = {
+    title: "Components/Stack",
+    component: Stack,
+    tags: ["autodocs"],
+    argTypes: {
+        direction: {
+            control: "select",
+            options: ["column", "columnReverse"],
+        },
+        gap: {
+            control: "select",
+            options: [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16],
+        },
+        align: {
+            control: "select",
+            options: ["start", "center", "end", "baseline", "stretch"],
+        },
+        justify: {
+            control: "select",
+            options: ["start", "center", "end", "between", "around", "evenly"],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-20 h-20 bg-primary rounded" }), _jsx("div", { className: "w-20 h-20 bg-secondary rounded" }), _jsx("div", { className: "w-20 h-20 bg-accent rounded" })] })),
+        gap: 4,
+    },
+};
+export const Reverse = {
+    args: {
+        ...Default.args,
+        direction: "columnReverse",
+    },
+};
+export const Vertical = {
+    args: {
+        ...Default.args,
+        direction: "column",
+    },
+};

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

@@ -0,0 +1 @@
+export * from './text';

package/dist/components/text/index.js

@@ -0,0 +1 @@
+export * from './text';

package/dist/components/text/text.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const textVariants: (props?: ({
+    size?: "base" | "sm" | "lg" | "xl" | "xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null | undefined;
+    weight?: "bold" | "black" | "normal" | "medium" | "thin" | "light" | "semibold" | "extrabold" | "extralight" | null | undefined;
+    align?: "center" | "end" | "start" | "left" | "right" | "justify" | null | undefined;
+    color?: "default" | "primary" | "secondary" | "destructive" | "muted" | "accent" | null | undefined;
+    truncate?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TextProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">, VariantProps<typeof textVariants> {
+    asChild?: boolean;
+}
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLParagraphElement>>;
+export { Text, textVariants };

package/dist/components/text/text.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const textVariants = cva("text-foreground", {
+    variants: {
+        size: {
+            xs: "text-xs",
+            sm: "text-sm",
+            base: "text-base",
+            lg: "text-lg",
+            xl: "text-xl",
+            "2xl": "text-2xl",
+            "3xl": "text-3xl",
+            "4xl": "text-4xl",
+            "5xl": "text-5xl",
+            "6xl": "text-6xl",
+            "7xl": "text-7xl",
+            "8xl": "text-8xl",
+            "9xl": "text-9xl",
+        },
+        weight: {
+            thin: "font-thin",
+            extralight: "font-extralight",
+            light: "font-light",
+            normal: "font-normal",
+            medium: "font-medium",
+            semibold: "font-semibold",
+            bold: "font-bold",
+            extrabold: "font-extrabold",
+            black: "font-black",
+        },
+        align: {
+            left: "text-left",
+            center: "text-center",
+            right: "text-right",
+            justify: "text-justify",
+            start: "text-start",
+            end: "text-end",
+        },
+        color: {
+            default: "text-foreground",
+            muted: "text-muted-foreground",
+            primary: "text-primary",
+            secondary: "text-secondary-foreground",
+            destructive: "text-destructive",
+            accent: "text-accent-foreground",
+        },
+        truncate: {
+            true: "truncate",
+        },
+    },
+    defaultVariants: {
+        size: "base",
+        weight: "normal",
+        align: "left",
+        color: "default",
+    },
+});
+const Text = React.forwardRef(({ className, size, weight, align, color, truncate, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "p";
+    return (_jsx(Comp, { className: cn(textVariants({ size, weight, align, color, truncate, className })), ref: ref, ...props }));
+});
+Text.displayName = "Text";
+export { Text, textVariants };

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

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

package/dist/components/text/text.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "./text";
+const meta = {
+    title: "Components/Text",
+    component: Text,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: "select",
+            options: ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"],
+        },
+        weight: {
+            control: "select",
+            options: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
+        },
+        align: {
+            control: "select",
+            options: ["left", "center", "right", "justify", "start", "end"],
+        },
+        color: {
+            control: "select",
+            options: ["default", "muted", "primary", "secondary", "destructive", "accent"],
+        },
+        truncate: {
+            control: "boolean",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: "The quick brown fox jumps over the lazy dog",
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Text, { size: "xs", children: "Extra Small Text" }), _jsx(Text, { size: "sm", children: "Small Text" }), _jsx(Text, { size: "base", children: "Base Text" }), _jsx(Text, { size: "lg", children: "Large Text" }), _jsx(Text, { size: "xl", children: "Extra Large Text" }), _jsx(Text, { size: "2xl", children: "2XL Text" })] })),
+};
+export const Colors = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Text, { color: "default", children: "Default Color" }), _jsx(Text, { color: "muted", children: "Muted Color" }), _jsx(Text, { color: "primary", children: "Primary Color" }), _jsx(Text, { color: "secondary", children: "Secondary Color" }), _jsx(Text, { color: "destructive", children: "Destructive Color" })] })),
+};

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from "./components/charts";
 export * from "./components/checkbox";
 export * from "./components/combobox";
 export * from "./components/command";
+export * from "./components/container";
 export * from "./components/data-table";
 export * from "./components/date-picker";
 export * from "./components/dialog";
@@ -24,8 +25,11 @@ export * from "./components/empty-state";
 export * from "./components/error-boundary";
 export * from "./components/field";
 export * from "./components/file-upload";
+export * from "./components/flex";
 export * from "./components/footer";
+export * from "./components/group";
 export * from "./components/header";
+export * from "./components/heading";
 export * from "./components/input";
 export * from "./components/input-group";
 export * from "./components/input-otp";
@@ -52,10 +56,12 @@ export * from "./components/sidebar";
 export * from "./components/slider";
 export * from "./components/social-login-button";
 export * from "./components/sparkline-chart";
+export * from "./components/stack";
 export * from "./components/switch";
 export * from "./components/table";
 export * from "./components/tabs";
 export * from "./components/tag-input";
+export * from "./components/text";
 export * from "./components/textarea";
 export * from "./components/toast";
 export * from "./components/tooltip";

package/dist/index.js

@@ -16,6 +16,7 @@ export * from "./components/charts";
 export * from "./components/checkbox";
 export * from "./components/combobox";
 export * from "./components/command";
+export * from "./components/container";
 export * from "./components/data-table";
 export * from "./components/date-picker";
 // export * from "./components/design-system"; // No index
@@ -27,8 +28,11 @@ export * from "./components/empty-state";
 export * from "./components/error-boundary";
 export * from "./components/field";
 export * from "./components/file-upload";
+export * from "./components/flex";
 export * from "./components/footer";
+export * from "./components/group";
 export * from "./components/header";
+export * from "./components/heading";
 export * from "./components/input";
 export * from "./components/input-group";
 export * from "./components/input-otp";
@@ -56,10 +60,12 @@ export * from "./components/sidebar";
 export * from "./components/slider";
 export * from "./components/social-login-button";
 export * from "./components/sparkline-chart";
+export * from "./components/stack";
 export * from "./components/switch";
 export * from "./components/table";
 export * from "./components/tabs";
 export * from "./components/tag-input";
+export * from "./components/text";
 export * from "./components/textarea";
 export * from "./components/toast";
 export * from "./components/tooltip";

package/dist/lib/animations.js

@@ -94,100 +94,100 @@ export const transitionClasses = {
  * Define the actual CSS keyframes in your global styles or Tailwind config.
  * These values match the keyframes from design tokens.
  */
-export const keyframesCSS = `
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  @keyframes fade-out {
-    from { opacity: 1; }
-    to { opacity: 0; }
-  }
-
-  @keyframes slide-in-from-top {
-    from { transform: translateY(-100%); }
-    to { transform: translateY(0); }
-  }
-
-  @keyframes slide-in-from-bottom {
-    from { transform: translateY(100%); }
-    to { transform: translateY(0); }
-  }
-
-  @keyframes slide-in-from-left {
-    from { transform: translateX(-100%); }
-    to { transform: translateX(0); }
-  }
-
-  @keyframes slide-in-from-right {
-    from { transform: translateX(100%); }
-    to { transform: translateX(0); }
-  }
-
-  @keyframes slide-out-to-top {
-    from { transform: translateY(0); }
-    to { transform: translateY(-100%); }
-  }
-
-  @keyframes slide-out-to-bottom {
-    from { transform: translateY(0); }
-    to { transform: translateY(100%); }
-  }
-
-  @keyframes slide-out-to-left {
-    from { transform: translateX(0); }
-    to { transform: translateX(-100%); }
-  }
-
-  @keyframes slide-out-to-right {
-    from { transform: translateX(0); }
-    to { transform: translateX(100%); }
-  }
-
-  @keyframes scale-in {
-    from { transform: scale(0.95); opacity: 0; }
-    to { transform: scale(1); opacity: 1; }
-  }
-
-  @keyframes scale-out {
-    from { transform: scale(1); opacity: 1; }
-    to { transform: scale(0.95); opacity: 0; }
-  }
-
-  @keyframes expand-vertical {
-    from {
-      max-height: 0;
-      opacity: 0;
-    }
-    to {
-      max-height: var(--max-height, 1000px);
-      opacity: 1;
-    }
-  }
-
-  @keyframes collapse-vertical {
-    from {
-      max-height: var(--max-height, 1000px);
-      opacity: 1;
-    }
-    to {
-      max-height: 0;
-      opacity: 0;
-    }
-  }
-
-  /* Respect prefers-reduced-motion */
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
+export const keyframesCSS = `
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  @keyframes slide-in-from-top {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+
+  @keyframes slide-in-from-bottom {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  @keyframes slide-in-from-left {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes slide-in-from-right {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes slide-out-to-top {
+    from { transform: translateY(0); }
+    to { transform: translateY(-100%); }
+  }
+
+  @keyframes slide-out-to-bottom {
+    from { transform: translateY(0); }
+    to { transform: translateY(100%); }
+  }
+
+  @keyframes slide-out-to-left {
+    from { transform: translateX(0); }
+    to { transform: translateX(-100%); }
+  }
+
+  @keyframes slide-out-to-right {
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
+  }
+
+  @keyframes scale-in {
+    from { transform: scale(0.95); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+  }
+
+  @keyframes scale-out {
+    from { transform: scale(1); opacity: 1; }
+    to { transform: scale(0.95); opacity: 0; }
+  }
+
+  @keyframes expand-vertical {
+    from {
+      max-height: 0;
+      opacity: 0;
+    }
+    to {
+      max-height: var(--max-height, 1000px);
+      opacity: 1;
+    }
+  }
+
+  @keyframes collapse-vertical {
+    from {
+      max-height: var(--max-height, 1000px);
+      opacity: 1;
+    }
+    to {
+      max-height: 0;
+      opacity: 0;
+    }
+  }
+
+  /* Respect prefers-reduced-motion */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 `;
 /**
  * Utility function to build animation class string