@openuidev/react-ui 0.9.16

package/dist/components/Input/stories/Input.stories.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Input } from "../Input";
+const meta = {
+    title: "Components/Input",
+    component: Input,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { Input } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: "400px" }, children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        size: {
+            control: "radio",
+            options: ["small", "medium", "large"],
+            description: "The size of the input",
+            table: {
+                category: "Appearance",
+                type: { summary: "string" },
+                defaultValue: { summary: "medium" },
+            },
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the input is disabled",
+            table: {
+                category: "Behavior",
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        hasError: {
+            control: "boolean",
+            description: "Whether the input is in an error state",
+            table: {
+                category: "Behavior",
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        placeholder: {
+            control: "text",
+            description: "The placeholder text for the input",
+            table: {
+                category: "Content",
+                type: { summary: "string" },
+            },
+        },
+        value: {
+            control: "text",
+            description: "The value of the input",
+            table: {
+                category: "Content",
+                type: { summary: "string" },
+            },
+        },
+        onChange: {
+            control: false,
+            description: "The function to call when the input value changes",
+            table: {
+                category: "Behavior",
+                type: { summary: "function" },
+            },
+        },
+        styles: {
+            control: false,
+            description: "Additional CSS styles to apply to the input",
+            table: {
+                category: "Styling",
+            },
+        },
+        className: {
+            control: false,
+            description: "Additional CSS classes to apply to the input",
+            table: {
+                category: "Styling",
+            },
+        },
+    },
+    tags: ["!dev", "autodocs"],
+};
+export default meta;
+export const Default = {
+    args: {
+        size: "medium",
+        placeholder: "Enter text...",
+        disabled: false,
+    },
+    render: (args) => (_jsx(Input, { size: args.size, placeholder: args.placeholder, disabled: args.disabled, value: args.value, onChange: args.onChange, hasError: args.hasError })),
+};
+export const ErrorState = {
+    args: {
+        size: "medium",
+        placeholder: "Enter text...",
+        disabled: false,
+        hasError: true,
+    },
+    render: (args) => (_jsx(Input, { size: args.size, placeholder: args.placeholder, disabled: args.disabled, value: args.value, onChange: args.onChange, hasError: args.hasError })),
+};
+const ControlledInput = () => {
+    const [value, setValue] = useState();
+    return (_jsx(Input, { size: "medium", value: value, onChange: (e) => setValue(e.target.value), placeholder: "Enter text..." }));
+};
+export const Controlled = {
+    render: () => _jsx(ControlledInput, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: "This is a controlled input example. The input value is managed by the component's state.",
+            },
+            source: {
+                code: `
+import { useState } from "react";
+
+const ControlledInput = () => {
+  const [value, setValue] = useState<string | undefined>();
+
+  return <Input size="medium" value={value} onChange={(e) => setValue(e.target.value)} placeholder="Enter text..." />;
+};`,
+            },
+        },
+    },
+};
+const ValidatedInput = () => {
+    const [value, setValue] = useState("");
+    const hasError = value.length > 0 && (value.length < 3 || value.length > 10);
+    return (_jsx(Input, { size: "medium", value: value, onChange: (e) => setValue(e.target.value), placeholder: "Enter 3-10 characters", hasError: hasError }));
+};
+export const LengthValidation = {
+    render: () => _jsx(ValidatedInput, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: "Shows error when the value length is 1-2 or greater than 10 characters.",
+            },
+            source: {
+                code: `
+import { useState } from "react";
+
+const ValidatedInput = () => {
+  const [value, setValue] = useState<string>("");
+  const hasError = value.length > 0 && (value.length < 3 || value.length > 10);
+  return (
+    <Input
+      size="medium"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      placeholder="Enter 3-10 characters"
+      isError={hasError}
+    />
+  );
+};`,
+            },
+        },
+    },
+};
+//# sourceMappingURL=Input.stories.js.map

package/dist/components/Input/stories/Input.stories.js.map

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

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,12 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import React from "react";
+export interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    required?: boolean;
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export { Label };
+//# sourceMappingURL=Label.d.ts.map

package/dist/components/Label/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,qFAoBV,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Label/Label.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import clsx from "clsx";
+import { forwardRef } from "react";
+const Label = forwardRef(({ children, className, style, disabled, required, ...props }, ref) => {
+    return (_jsxs(LabelPrimitive.Root, { ref: ref, className: clsx("openui-label", {
+            "openui-label-disabled": disabled,
+        }, className), style: style, ...props, children: [children, required && _jsx("span", { className: "openui-label-required-asterisk", children: "*" })] }));
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label };
+//# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAU1C,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpE,OAAO,CACL,MAAC,cAAc,CAAC,IAAI,IAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,cAAc,EACd;YACE,uBAAuB,EAAE,QAAQ;SAClC,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,KACR,KAAK,aAER,QAAQ,EACR,QAAQ,IAAI,eAAM,SAAS,EAAC,gCAAgC,kBAAS,IAClD,CACvB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC;AAEpD,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from "./Label";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Label/index.js

@@ -0,0 +1,2 @@
+export * from "./Label";
+//# sourceMappingURL=index.js.map

package/dist/components/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Label/label.css

@@ -0,0 +1 @@
+.openui-label{box-sizing:border-box;color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg))}.openui-label-disabled{color:var(--openui-text-neutral-tertiary, oklch(9.7% 0 0deg / 0.2));cursor:not-allowed}.openui-label-required-asterisk{margin-left:var(--openui-space-3xs, 2px)}

package/dist/components/ListBlock/ListBlock.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactElement } from "react";
+import { ListItemProps, ListItemVariant } from "../ListItem";
+export interface ListBlockProps {
+    /** Controls the indicator shown on every ListItem. Defaults to "number". */
+    variant?: ListItemVariant;
+    children: ReactElement<ListItemProps> | ReactElement<ListItemProps>[];
+    className?: string;
+    style?: CSSProperties;
+}
+declare const ListBlock: import("react").ForwardRefExoticComponent<ListBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ListBlock };
+//# sourceMappingURL=ListBlock.d.ts.map

package/dist/components/ListBlock/ListBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBlock.d.ts","sourceRoot":"","sources":["../../../src/components/ListBlock/ListBlock.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,aAAa,EAGb,YAAY,EACb,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,YAAY,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,2GAwBb,CAAC;AAIH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ListBlock/ListBlock.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Children, cloneElement, forwardRef, isValidElement, } from "react";
+const ListBlock = forwardRef((props, ref) => {
+    const { children, variant = "number", className, style } = props;
+    const childArray = Children.toArray(children);
+    const listHasSubtitle = childArray.some((child) => isValidElement(child) && !!child.props.subtitle);
+    const enhancedChildren = Children.map(children, (child, index) => {
+        if (isValidElement(child)) {
+            return cloneElement(child, {
+                variant,
+                listHasSubtitle,
+                index,
+            });
+        }
+        return child;
+    });
+    return (_jsx("div", { ref: ref, className: clsx("openui-list-block", className), style: style, children: enhancedChildren }));
+});
+ListBlock.displayName = "ListBlock";
+export { ListBlock };
+//# sourceMappingURL=ListBlock.js.map

package/dist/components/ListBlock/ListBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBlock.js","sourceRoot":"","sources":["../../../src/components/ListBlock/ListBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACL,QAAQ,EACR,YAAY,EAEZ,UAAU,EACV,cAAc,GAEf,MAAM,OAAO,CAAC;AAWf,MAAM,SAAS,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1E,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEjE,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,eAAe,GAAG,UAAU,CAAC,IAAI,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAE,KAAqC,CAAC,KAAK,CAAC,QAAQ,CAC5F,CAAC;IAEF,MAAM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC/D,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,OAAO,YAAY,CAAC,KAAoC,EAAE;gBACxD,OAAO;gBACP,eAAe;gBACf,KAAK;aACN,CAAC,CAAC;QACL,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YACzE,gBAAgB,GACb,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ListBlock/dependencies.d.ts

@@ -0,0 +1,3 @@
+declare const dependencies: string[];
+export default dependencies;
+//# sourceMappingURL=dependencies.d.ts.map

package/dist/components/ListBlock/dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.d.ts","sourceRoot":"","sources":["../../../src/components/ListBlock/dependencies.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,UAAgB,CAAC;AACnC,eAAe,YAAY,CAAC"}

package/dist/components/ListBlock/dependencies.js

@@ -0,0 +1,3 @@
+const dependencies = ["ListBlock"];
+export default dependencies;
+//# sourceMappingURL=dependencies.js.map

package/dist/components/ListBlock/dependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../src/components/ListBlock/dependencies.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,WAAW,CAAC,CAAC;AACnC,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from "./ListBlock";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ListBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ListBlock/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/ListBlock/index.js

@@ -0,0 +1,2 @@
+export * from "./ListBlock";
+//# sourceMappingURL=index.js.map

package/dist/components/ListBlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ListBlock/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/ListBlock/listBlock.css

@@ -0,0 +1 @@
+.openui-list-block{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:var(--openui-space-l, 18px)}

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ListBlock } from "../ListBlock";
+declare const meta: Meta<typeof ListBlock>;
+export default meta;
+type Story = StoryObj<typeof ListBlock>;
+export declare const NumberWithSubtitle: Story;
+export declare const NumberNoSubtitle: Story;
+export declare const NumberClickable: Story;
+export declare const IconWithSubtitle: Story;
+export declare const IconNoSubtitle: Story;
+export declare const IconClickable: Story;
+export declare const ImageWithSubtitle: Story;
+export declare const ImageNoSubtitle: Story;
+export declare const ImageClickable: Story;
+//# sourceMappingURL=ListBlock.stories.d.ts.map

package/dist/components/ListBlock/stories/ListBlock.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBlock.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ListBlock/stories/ListBlock.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAC"}

package/dist/components/ListBlock/stories/ListBlock.stories.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight, User } from "lucide-react";
+import { ListItem } from "../../ListItem";
+import { ListBlock } from "../ListBlock";
+const meta = {
+    title: "Components/ListBlock",
+    component: ListBlock,
+    subcomponents: {
+        ListItem: ListItem,
+    },
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { ListBlock, ListItem } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: "400px" }, children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["number", "icon", "image"],
+            description: "Controls the indicator type for every ListItem in the list.",
+            table: { category: "Appearance", defaultValue: { summary: "number" } },
+        },
+        children: { control: false, table: { category: "Content" } },
+        className: { control: false, table: { category: "Appearance" } },
+        style: { control: false, table: { category: "Appearance" } },
+    },
+    tags: ["!dev", "autodocs"],
+};
+export default meta;
+export const NumberWithSubtitle = {
+    render: () => (_jsxs(ListBlock, { variant: "number", children: [_jsx(ListItem, { title: "Set up your workspace", subtitle: "Install dependencies and configure your environment" }), _jsx(ListItem, { title: "Create your first component", subtitle: "Build a reusable UI element" }), _jsx(ListItem, { title: "Publish to production", subtitle: "Deploy and share your work" })] })),
+};
+export const NumberNoSubtitle = {
+    render: () => (_jsxs(ListBlock, { variant: "number", children: [_jsx(ListItem, { title: "Set up your workspace" }), _jsx(ListItem, { title: "Create your first component" }), _jsx(ListItem, { title: "Publish to production" })] })),
+};
+export const NumberClickable = {
+    render: () => (_jsxs(ListBlock, { variant: "number", children: [_jsx(ListItem, { title: "Set up your workspace", subtitle: "Install dependencies and configure your environment", actionLabel: "Start", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Step 1") }), _jsx(ListItem, { title: "Create your first component", subtitle: "Build a reusable UI element", actionLabel: "Start", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Step 2") }), _jsx(ListItem, { title: "Publish to production", subtitle: "Deploy and share your work", actionLabel: "Start", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Step 3") })] })),
+};
+export const IconWithSubtitle = {
+    render: () => (_jsxs(ListBlock, { variant: "icon", children: [_jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "John Doe", subtitle: "Software Engineer" }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Jane Smith", subtitle: "Product Designer" }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Ankit Das", subtitle: "Software Developer" })] })),
+};
+export const IconNoSubtitle = {
+    render: () => (_jsxs(ListBlock, { variant: "icon", children: [_jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "John Doe" }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Jane Smith" }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Ankit Das" })] })),
+};
+export const IconClickable = {
+    render: () => (_jsxs(ListBlock, { variant: "icon", children: [_jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "John Doe", subtitle: "Software Engineer", actionLabel: "View Profile", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("John Doe") }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Jane Smith", subtitle: "Product Designer", actionLabel: "View Profile", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Jane Smith") }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Ankit Das", subtitle: "Software Developer", actionLabel: "View Profile", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Ankit Das") })] })),
+};
+export const ImageWithSubtitle = {
+    render: () => (_jsxs(ListBlock, { variant: "image", children: [_jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=1", alt: "John" }, title: "John Doe", subtitle: "Software Engineer" }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=2", alt: "Jane" }, title: "Jane Smith", subtitle: "Product Designer" }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=3", alt: "Ankit" }, title: "Ankit Das", subtitle: "Software Developer" })] })),
+};
+export const ImageNoSubtitle = {
+    render: () => (_jsxs(ListBlock, { variant: "image", children: [_jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=1", alt: "John" }, title: "John Doe" }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=2", alt: "Jane" }, title: "Jane Smith" }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=3", alt: "Ankit" }, title: "Ankit Das" })] })),
+};
+export const ImageClickable = {
+    render: () => (_jsxs(ListBlock, { variant: "image", children: [_jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=1", alt: "John" }, title: "John Doe", subtitle: "Software Engineer", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("John Doe") }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=2", alt: "Jane" }, title: "Jane Smith", subtitle: "Product Designer", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Jane Smith") }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=3", alt: "Ankit" }, title: "Ankit Das", subtitle: "Software Developer", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Ankit Das") })] })),
+};
+//# sourceMappingURL=ListBlock.stories.js.map

package/dist/components/ListBlock/stories/ListBlock.stories.js.map

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

package/dist/components/ListItem/ListItem.d.ts

@@ -0,0 +1,22 @@
+import React, { CSSProperties, ReactNode } from "react";
+export type ListItemVariant = "icon" | "image" | "number";
+export interface ListItemProps {
+    className?: string;
+    style?: CSSProperties;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    variant?: ListItemVariant;
+    icon?: ReactNode;
+    image?: {
+        src?: string;
+        alt: string;
+    };
+    index?: number;
+    listHasSubtitle?: boolean;
+    actionLabel?: ReactNode;
+    actionIcon?: ReactNode;
+    onClick?: () => void;
+}
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;
+export { ListItem };
+//# sourceMappingURL=ListItem.d.ts.map

package/dist/components/ListItem/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,sFAoEZ,CAAC;AAIH,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ListItem/ListItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import React from "react";
+const ListItem = React.forwardRef((props, ref) => {
+    const { className, style, variant = "number", icon, image, index = 0, listHasSubtitle, title, subtitle, actionIcon, actionLabel, onClick, ...rest } = props;
+    const hasAction = !!onClick;
+    return (_jsx("div", { ref: ref, className: clsx("openui-list-item-wrapper", hasAction && "openui-list-item-wrapper-with-action", className), style: style, ...rest, children: _jsxs("div", { className: clsx("openui-list-item", hasAction && "openui-list-item-clickable"), onClick: onClick, role: hasAction ? "button" : undefined, tabIndex: hasAction ? 0 : undefined, children: [_jsxs("div", { className: clsx("openui-list-item-indicator", !listHasSubtitle && "openui-list-item-indicator-no-subtitle", hasAction && "openui-list-item-indicator-clickable"), children: [variant === "number" && (_jsx("div", { className: "openui-list-item-indicator-number", children: index + 1 })), variant === "icon" && icon, variant === "image" && image && (image.src || image.alt) && (_jsx("div", { className: "openui-list-item-indicator-image", children: _jsx("img", { src: image.src, alt: image.alt, width: 40, height: 40 }) }))] }), _jsxs("div", { className: "openui-list-item-content-wrapper", children: [_jsxs("div", { className: "openui-list-item-content", children: [title && _jsx("div", { className: "openui-list-item-title", children: title }), subtitle && _jsx("div", { className: "openui-list-item-subtitle", children: subtitle })] }), hasAction && (actionIcon || actionLabel) && (_jsxs("div", { className: "openui-list-item-action", children: [actionLabel && _jsx("div", { className: "openui-list-item-action-label", children: actionLabel }), actionIcon && _jsx("div", { className: "openui-list-item-action-icon", children: actionIcon })] }))] })] }) }));
+});
+ListItem.displayName = "ListItem";
+export { ListItem };
+//# sourceMappingURL=ListItem.js.map

package/dist/components/ListItem/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAmC,MAAM,OAAO,CAAC;AAmBxD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9E,MAAM,EACJ,SAAS,EACT,KAAK,EACL,OAAO,GAAG,QAAQ,EAClB,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,CAAC,EACT,eAAe,EACf,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,OAAO,EACP,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC;IAE5B,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,0BAA0B,EAC1B,SAAS,IAAI,sCAAsC,EACnD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,KACR,IAAI,YAER,eACE,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,IAAI,4BAA4B,CAAC,EAC9E,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACtC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,aAEnC,eACE,SAAS,EAAE,IAAI,CACb,4BAA4B,EAC5B,CAAC,eAAe,IAAI,wCAAwC,EAC5D,SAAS,IAAI,sCAAsC,CACpD,aAEA,OAAO,KAAK,QAAQ,IAAI,CACvB,cAAK,SAAS,EAAC,mCAAmC,YAAE,KAAK,GAAG,CAAC,GAAO,CACrE,EACA,OAAO,KAAK,MAAM,IAAI,IAAI,EAC1B,OAAO,KAAK,OAAO,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAC3D,cAAK,SAAS,EAAC,kCAAkC,YAC/C,cAAK,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC1D,CACP,IACG,EACN,eAAK,SAAS,EAAC,kCAAkC,aAC/C,eAAK,SAAS,EAAC,0BAA0B,aACtC,KAAK,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAO,EAC9D,QAAQ,IAAI,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAO,IACpE,EACL,SAAS,IAAI,CAAC,UAAU,IAAI,WAAW,CAAC,IAAI,CAC3C,eAAK,SAAS,EAAC,yBAAyB,aACrC,WAAW,IAAI,cAAK,SAAS,EAAC,+BAA+B,YAAE,WAAW,GAAO,EACjF,UAAU,IAAI,cAAK,SAAS,EAAC,8BAA8B,YAAE,UAAU,GAAO,IAC3E,CACP,IACG,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ListItem/dependencies.d.ts

@@ -0,0 +1,3 @@
+declare const dependencies: string[];
+export default dependencies;
+//# sourceMappingURL=dependencies.d.ts.map

package/dist/components/ListItem/dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.d.ts","sourceRoot":"","sources":["../../../src/components/ListItem/dependencies.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,UAAe,CAAC;AAClC,eAAe,YAAY,CAAC"}

package/dist/components/ListItem/dependencies.js

@@ -0,0 +1,3 @@
+const dependencies = ["ListItem"];
+export default dependencies;
+//# sourceMappingURL=dependencies.js.map

package/dist/components/ListItem/dependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../src/components/ListItem/dependencies.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,UAAU,CAAC,CAAC;AAClC,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from "./ListItem";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ListItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/ListItem/index.js

@@ -0,0 +1,2 @@
+export * from "./ListItem";
+//# sourceMappingURL=index.js.map

package/dist/components/ListItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/ListItem/listItem.css

@@ -0,0 +1 @@
+.openui-list-item-wrapper{display:flex;flex-direction:column;gap:var(--openui-space-m, 12px);width:100%}.openui-list-item-wrapper-with-action{border-bottom:1px solid var(--openui-border-default, oklch(9.7% 0 0deg / 0.06));padding-bottom:var(--openui-space-m, 12px)}.openui-list-item-wrapper-with-action:hover .openui-list-item-indicator{scale:1.1}.openui-list-item-wrapper-with-action:last-child{border-bottom:none;padding-bottom:0}.openui-list-item{display:flex;flex-direction:row;align-items:flex-start;gap:var(--openui-space-m, 12px)}.openui-list-item-clickable{cursor:pointer}.openui-list-item:not(:has(.openui-list-item-subtitle)){align-items:center}.openui-list-item-indicator{margin-top:var(--openui-space-2xs, 4px);display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--openui-sunk, oklch(9.7% 0 0deg / 0.04));border-radius:var(--openui-radius-m, 8px);color:var(--openui-text-neutral-secondary, oklch(9.7% 0 0deg / 0.5));overflow:hidden;transition:background-color .2s ease;flex-shrink:0}.openui-list-item-indicator-no-subtitle{height:24px;width:24px;margin-top:0;border-radius:var(--openui-radius-s, 6px)}.openui-list-item-indicator-clickable{background-color:var(--openui-sunk, oklch(9.7% 0 0deg / 0.04))}.openui-list-item-indicator-number{color:var(--openui-text-neutral-secondary, oklch(9.7% 0 0deg / 0.5));font:var(--openui-text-label-default);letter-spacing:var(--openui-text-label-default-letter-spacing)}.openui-list-item-indicator-image{border-radius:var(--openui-radius-s, 6px);overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.openui-list-item-indicator-image img{width:100%;height:100%;object-fit:cover;display:block}.openui-list-item-content-wrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}.openui-list-item-content{display:flex;flex-direction:column;flex:1}.openui-list-item-title{color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg));font:var(--openui-text-body-default);letter-spacing:var(--openui-text-body-default-letter-spacing)}.openui-list-item-subtitle{color:var(--openui-text-neutral-secondary, oklch(9.7% 0 0deg / 0.5));font:var(--openui-text-body-default);letter-spacing:var(--openui-text-body-default-letter-spacing)}.openui-list-item-action{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--openui-space-2xs, 4px);flex-shrink:0}.openui-list-item-action-label{color:var(--openui-text-neutral-secondary, oklch(9.7% 0 0deg / 0.5));font:var(--openui-text-body-default);letter-spacing:var(--openui-text-body-default-letter-spacing)}.openui-list-item-action-icon{color:var(--openui-text-neutral-secondary, oklch(9.7% 0 0deg / 0.5));font:var(--openui-text-body-default);letter-spacing:var(--openui-text-body-default-letter-spacing)}.openui-list-item:hover .openui-list-item-indicator-clickable,.openui-list-item:focus .openui-list-item-indicator-clickable{background-color:var(--openui-highlight-strong, oklch(9.7% 0 0deg / 0.08))}.openui-list-item:hover .openui-list-item-action-label,.openui-list-item:focus .openui-list-item-action-label{color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg))}.openui-list-item:hover .openui-list-item-action-icon,.openui-list-item:focus .openui-list-item-action-icon{color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg))}

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ListItem } from "../ListItem";
+declare const meta: Meta<typeof ListItem>;
+export default meta;
+type Story = StoryObj<typeof ListItem>;
+export declare const Number: Story;
+export declare const NumberClickable: Story;
+export declare const Icon: Story;
+export declare const IconClickable: Story;
+export declare const Image: Story;
+export declare const ImageClickable: Story;
+//# sourceMappingURL=ListItem.stories.d.ts.map

package/dist/components/ListItem/stories/ListItem.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/stories/ListItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAmC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}

package/dist/components/ListItem/stories/ListItem.stories.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronRight, User } from "lucide-react";
+import { ListItem } from "../ListItem";
+const meta = {
+    title: "Components/ListItem",
+    component: ListItem,
+    tags: ["!dev", "!autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { ListItem } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: "400px" }, children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["number", "icon", "image"],
+            table: { category: "Appearance", defaultValue: { summary: "number" } },
+        },
+        title: { control: "text", table: { category: "Content" } },
+        subtitle: { control: "text", table: { category: "Content" } },
+        icon: { control: false, table: { category: "Content" } },
+        image: { control: false, table: { category: "Content" } },
+        index: { control: "number", table: { category: "Behavior" } },
+        listHasSubtitle: { control: "boolean", table: { category: "Behavior" } },
+        actionLabel: { control: "text", table: { category: "Content" } },
+        actionIcon: { control: false, table: { category: "Content" } },
+        onClick: { control: false, table: { category: "Behavior" } },
+    },
+};
+export default meta;
+export const Number = {
+    args: {
+        variant: "number",
+        index: 0,
+        listHasSubtitle: true,
+        title: "Numbered List Item",
+        subtitle: "The indicator shows index + 1",
+    },
+};
+export const NumberClickable = {
+    args: {
+        variant: "number",
+        index: 0,
+        listHasSubtitle: true,
+        title: "Clickable Numbered Item",
+        subtitle: "Click me to trigger an action",
+        actionLabel: "Start",
+        actionIcon: _jsx(ChevronRight, { size: 16 }),
+        onClick: () => alert("Clicked!"),
+    },
+};
+export const Icon = {
+    args: {
+        variant: "icon",
+        icon: _jsx(User, { size: 16 }),
+        listHasSubtitle: true,
+        title: "Icon List Item",
+        subtitle: "The indicator shows an icon",
+    },
+};
+export const IconClickable = {
+    args: {
+        variant: "icon",
+        icon: _jsx(User, { size: 16 }),
+        listHasSubtitle: true,
+        title: "Clickable Icon Item",
+        subtitle: "Click me to trigger an action",
+        actionLabel: "View",
+        actionIcon: _jsx(ChevronRight, { size: 16 }),
+        onClick: () => alert("Clicked!"),
+    },
+};
+export const Image = {
+    args: {
+        variant: "image",
+        image: { src: "https://i.pravatar.cc/40", alt: "Avatar" },
+        listHasSubtitle: true,
+        title: "Image List Item",
+        subtitle: "The indicator shows a thumbnail",
+    },
+};
+export const ImageClickable = {
+    args: {
+        variant: "image",
+        image: { src: "https://i.pravatar.cc/40", alt: "Avatar" },
+        listHasSubtitle: true,
+        title: "Clickable Image Item",
+        subtitle: "Click me to trigger an action",
+        actionIcon: _jsx(ChevronRight, { size: 16 }),
+        onClick: () => alert("Clicked!"),
+    },
+};
+//# sourceMappingURL=ListItem.stories.js.map