@getgreenline/blaze-ui 1.0.2 → 1.0.3-3.0-beta

package/dist/components/input-group.js

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/utils.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Textarea } from './textarea.js';
+
+function InputGroup({ className, ...props }) {
+    return (jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group tw:border-input dark:tw:bg-input/30 tw:relative tw:flex tw:w-full tw:items-center tw:rounded-md tw:border tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none", "tw:h-9 tw:min-w-0 has-[>textarea]:tw:h-auto", 
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:tw:pl-2", "has-[>[data-align=inline-end]]:[&>input]:tw:pr-2", "has-[>[data-align=block-start]]:tw:h-auto has-[>[data-align=block-start]]:tw:flex-col has-[>[data-align=block-start]]:[&>input]:tw:pb-3", "has-[>[data-align=block-end]]:tw:h-auto has-[>[data-align=block-end]]:tw:flex-col has-[>[data-align=block-end]]:[&>input]:tw:pt-3", 
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:tw:border-ring has-[[data-slot=input-group-control]:focus-visible]:tw:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:tw:ring-[3px]", 
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:tw:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:tw:border-destructive dark:has-[[data-slot][aria-invalid=true]]:tw:ring-destructive/40", className), ...props }));
+}
+const inputGroupAddonVariants = cva("tw:text-muted-foreground tw:flex tw:h-auto tw:cursor-text tw:items-center tw:justify-center tw:gap-2 tw:py-1.5 tw:text-sm tw:font-medium tw:select-none [&>svg:not([class*='size-'])]:tw:size-4 [&>kbd]:tw:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:tw:opacity-50", {
+    variants: {
+        align: {
+            "inline-start": "tw:order-first tw:pl-3 has-[>button]:tw:ml-[-0.45rem] has-[>kbd]:tw:ml-[-0.35rem]",
+            "inline-end": "tw:order-last tw:pr-3 has-[>button]:tw:mr-[-0.45rem] has-[>kbd]:tw:mr-[-0.35rem]",
+            "block-start": "tw:order-first tw:w-full tw:justify-start tw:px-3 tw:pt-3 [.tw:border-b]:tw:pb-3 group-has-[>input]/input-group:tw:pt-2.5",
+            "block-end": "tw:order-last tw:w-full tw:justify-start tw:px-3 tw:pb-3 [.tw:border-t]:tw:pt-3 group-has-[>input]/input-group:tw:pb-2.5",
+        },
+    },
+    defaultVariants: {
+        align: "inline-start",
+    },
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+    return (jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest("button")) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector("input")?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva("tw:text-sm tw:shadow-none tw:flex tw:gap-2 tw:items-center", {
+    variants: {
+        size: {
+            xs: "tw:h-6 tw:gap-1 tw:px-2 tw:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:tw:size-3.5 has-[>svg]:tw:px-2",
+            sm: "tw:h-8 tw:px-2.5 tw:gap-1.5 tw:rounded-md has-[>svg]:tw:px-2.5",
+            "icon-xs": "tw:size-6 tw:rounded-[calc(var(--radius)-5px)] tw:p-0 has-[>svg]:tw:p-0",
+            "icon-sm": "tw:size-8 tw:p-0 has-[>svg]:tw:p-0",
+        },
+    },
+    defaultVariants: {
+        size: "xs",
+    },
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+    return (jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (jsx("span", { className: cn("tw:text-muted-foreground tw:flex tw:items-center tw:gap-2 tw:text-sm [&_svg]:tw:pointer-events-none [&_svg:not([class*='size-'])]:tw:size-4", className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (jsx(Input, { "data-slot": "input-group-control", className: cn("tw:flex-1 tw:rounded-none tw:border-0 tw:bg-transparent tw:shadow-none focus-visible:tw:ring-0 dark:tw:bg-transparent", className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (jsx(Textarea, { "data-slot": "input-group-control", className: cn("tw:flex-1 tw:resize-none tw:rounded-none tw:border-0 tw:bg-transparent tw:py-3 tw:shadow-none focus-visible:tw:ring-0 dark:tw:bg-transparent", className), ...props }));
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { OTPInput } from "input-otp";
+declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+//# sourceMappingURL=input-otp.d.ts.map

package/dist/components/input-otp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../src/components/input-otp.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAA;AAKrD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,2CAYA;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ1E;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;CACd,2CAsBA;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAMnE;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/input-otp.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+
+function InputOTP({ className, containerClassName, ...props }) {
+    return (jsx(OTPInput, { "data-slot": "input-otp", containerClassName: cn("tw:flex tw:items-center tw:gap-2 tw:has-disabled:opacity-50", containerClassName), className: cn("tw:disabled:cursor-not-allowed", className), ...props }));
+}
+function InputOTPGroup({ className, ...props }) {
+    return (jsx("div", { "data-slot": "input-otp-group", className: cn("tw:flex tw:items-center", className), ...props }));
+}
+function InputOTPSlot({ index, className, ...props }) {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+    return (jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("tw:data-[active=true]:border-ring tw:data-[active=true]:ring-ring/50 tw:data-[active=true]:aria-invalid:ring-destructive/20 tw:dark:data-[active=true]:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:data-[active=true]:aria-invalid:border-destructive tw:dark:bg-input/30 tw:border-input tw:relative tw:flex tw:h-9 tw:w-9 tw:items-center tw:justify-center tw:border-y tw:border-r tw:text-sm tw:shadow-xs tw:transition-all tw:outline-none tw:first:rounded-l-md tw:first:border-l tw:last:rounded-r-md tw:data-[active=true]:z-10 tw:data-[active=true]:ring-[3px]", className), ...props, children: [char, hasFakeCaret && (jsx("div", { className: "tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center", children: jsx("div", { className: "tw:animate-caret-blink tw:bg-foreground tw:h-4 tw:w-px tw:duration-1000" }) }))] }));
+}
+function InputOTPSeparator({ ...props }) {
+    return (jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: jsx(MinusIcon, {}) }));
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAc1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/input.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.js';
+
+function Input({ className, type, ...props }) {
+    return (jsx("input", { type: type, "data-slot": "input", className: cn("tw:file:text-foreground tw:placeholder:text-muted-foreground tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/30 tw:border-input tw:h-10 tw:w-full tw:min-w-0 tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:file:inline-flex tw:file:h-7 tw:file:border-0 tw:file:bg-transparent tw:file:text-sm tw:file:font-medium tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50 tw:md:text-sm", "tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", "tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", className), ...props }));
+}
+
+export { Input };

package/dist/components/item.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Separator } from "../components/separator";
+declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "default" | "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };
+//# sourceMappingURL=item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/components/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAEnD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAStE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CASxC;AAED,QAAA,MAAM,YAAY;;;8EAmBjB,CAAA;AAED,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAC5B,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,2CAW1D;AAED,QAAA,MAAM,iBAAiB;;8EAetB,CAAA;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,2CAStE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWxE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAY1E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,OAAO,EACL,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,GACX,CAAA"}

package/dist/components/item.js

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/utils.js';
+import { Separator } from './separator.js';
+
+function ItemGroup({ className, ...props }) {
+    return (jsx("div", { role: "list", "data-slot": "item-group", className: cn("group/item-group tw:flex tw:flex-col", className), ...props }));
+}
+function ItemSeparator({ className, ...props }) {
+    return (jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn("tw:my-0", className), ...props }));
+}
+const itemVariants = cva("group/item tw:flex tw:items-center tw:border tw:border-transparent tw:text-sm tw:rounded-md tw:transition-colors [a]:hover:tw:bg-accent/50 [a]:tw:transition-colors tw:duration-100 tw:flex-wrap tw:outline-none focus-visible:tw:border-ring focus-visible:tw:ring-ring/50 focus-visible:tw:ring-[3px]", {
+    variants: {
+        variant: {
+            default: "tw:bg-transparent",
+            outline: "tw:border-border",
+            muted: "tw:bg-muted/50",
+        },
+        size: {
+            default: "tw:p-4 tw:gap-4 ",
+            sm: "tw:py-3 tw:px-4 tw:gap-2.5",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Item({ className, variant = "default", size = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "div";
+    return (jsx(Comp, { "data-slot": "item", "data-variant": variant, "data-size": size, className: cn(itemVariants({ variant, size, className })), ...props }));
+}
+const itemMediaVariants = cva("tw:flex tw:shrink-0 tw:items-center tw:justify-center tw:gap-2 group-has-[[data-slot=item-description]]/item:tw:self-start [&_svg]:tw:pointer-events-none group-has-[[data-slot=item-description]]/item:tw:translate-y-0.5", {
+    variants: {
+        variant: {
+            default: "tw:bg-transparent",
+            icon: "tw:size-8 tw:border tw:rounded-sm tw:bg-muted [&_svg:not([class*='size-'])]:tw:size-4",
+            image: "tw:size-10 tw:rounded-sm tw:overflow-hidden [&_img]:tw:size-full [&_img]:tw:object-cover",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function ItemMedia({ className, variant = "default", ...props }) {
+    return (jsx("div", { "data-slot": "item-media", "data-variant": variant, className: cn(itemMediaVariants({ variant, className })), ...props }));
+}
+function ItemContent({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-content", className: cn("tw:flex tw:flex-1 tw:flex-col tw:gap-1 [&+[data-slot=item-content]]:tw:flex-none", className), ...props }));
+}
+function ItemTitle({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-title", className: cn("tw:flex tw:w-fit tw:items-center tw:gap-2 tw:text-sm tw:leading-snug tw:font-medium", className), ...props }));
+}
+function ItemDescription({ className, ...props }) {
+    return (jsx("p", { "data-slot": "item-description", className: cn("tw:text-muted-foreground tw:line-clamp-2 tw:text-sm tw:leading-normal tw:font-normal tw:text-balance", "[&>a:hover]:tw:text-primary [&>a]:tw:underline [&>a]:tw:underline-offset-4", className), ...props }));
+}
+function ItemActions({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-actions", className: cn("tw:flex tw:items-center tw:gap-2", className), ...props }));
+}
+function ItemHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-header", className: cn("tw:flex tw:basis-full tw:items-center tw:justify-between tw:gap-2", className), ...props }));
+}
+function ItemFooter({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-footer", className: cn("tw:flex tw:basis-full tw:items-center tw:justify-between tw:gap-2", className), ...props }));
+}
+
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/components/kbd.d.ts

@@ -0,0 +1,4 @@
+declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): import("react/jsx-runtime").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Kbd, KbdGroup };
+//# sourceMappingURL=kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../src/components/kbd.tsx"],"names":[],"mappings":"AAEA,iBAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAahE;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQrE;AAED,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/kbd.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.js';
+
+function Kbd({ className, ...props }) {
+    return (jsx("kbd", { "data-slot": "kbd", className: cn("tw:bg-muted tw:text-muted-foreground tw:pointer-events-none tw:inline-flex tw:h-5 tw:w-fit tw:min-w-5 tw:items-center tw:justify-center tw:gap-1 tw:rounded-sm tw:px-1 tw:font-sans tw:text-xs tw:font-medium tw:select-none", "tw:[&_svg:not([class*='size-'])]:size-3", "tw:[[data-slot=tooltip-content]_&]:bg-background/20 tw:[[data-slot=tooltip-content]_&]:text-background tw:dark:[[data-slot=tooltip-content]_&]:bg-background/10", className), ...props }));
+}
+function KbdGroup({ className, ...props }) {
+    return (jsx("kbd", { "data-slot": "kbd-group", className: cn("tw:inline-flex tw:items-center tw:gap-1", className), ...props }));
+}
+
+export { Kbd, KbdGroup };

package/dist/components/label.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+interface LabelProps extends React.ComponentProps<typeof LabelPrimitive.Root> {
+    isRequired?: boolean;
+}
+declare function Label({ className, isRequired, children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAIvD,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAmBvE;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/label.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../lib/utils.js';
+
+function Label({ className, isRequired, children, ...props }) {
+    return (jsxs(LabelPrimitive.Root, { "data-slot": "label", className: cn("tw:flex tw:items-center tw:gap-2 tw:text-sm tw:leading-none tw:font-medium tw:select-none tw:group-data-[disabled=true]:pointer-events-none tw:group-data-[disabled=true]:opacity-50 tw:peer-disabled:cursor-not-allowed tw:peer-disabled:opacity-50", className), "aria-required": isRequired, ...props, children: [children, isRequired && (jsx("span", { className: "tw:text-destructive", "aria-hidden": "true", children: "*" }))] }));
+}
+
+export { Label };

package/dist/components/login-screen.d.ts

@@ -0,0 +1,4 @@
+import type { LoginScreenProps } from "./login-screen.types";
+export type { LoginScreenIdentifierMode, LoginScreenTab, LoginScreenFooterLink, LoginScreenSubmitPayload, LoginScreenTestimonial, LoginScreenProps, } from "./login-screen.types";
+export declare function LoginScreen({ className, splitLayout, splitImageWidthPercent, imageSrc, imageAlt, imageOverlayContent, testimonial, imageOverlayOpacity, logo, title, description, tabs, defaultTabId, tabId, onTabChange, identifierMode, identifierLabel, identifierPlaceholder, passwordLabel, passwordPlaceholder, rememberMeLabel, forgotPasswordLabel, forgotPasswordTitle, forgotPasswordDescription, forgotPasswordEmailLabel, forgotPasswordEmailPlaceholder, forgotPasswordSubmitLabel, forgotPasswordBackLabel, forgotPasswordSentTitle, forgotPasswordSentDescriptionPrefix, forgotPasswordSentInstructions, forgotPasswordResendLabel, forgotPasswordResendDelaySeconds, submitLabel, submitLoadingLabel, ssoLabel, ssoButtonLabel, ssoEmailTitle, ssoEmailDescription, ssoEmailLabel, ssoEmailPlaceholder, ssoEmailSubmitLabel, ssoEmailHint, ssoEmailBackAriaLabel, legalNotice, footerLinks, isSubmitting, isForgotPasswordSubmitting, isSsoSubmitting, onSubmit, onForgotPasswordSubmit, onSsoClick, onSsoSubmit, }: LoginScreenProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=login-screen.d.ts.map

package/dist/components/login-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"login-screen.d.ts","sourceRoot":"","sources":["../../src/components/login-screen.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAEV,gBAAgB,EAGjB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EACV,yBAAyB,EACzB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,sBAAsB,CAAA;AAwF7B,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,WAAkB,EAClB,sBAA2B,EAC3B,QAA0B,EAC1B,QAA6B,EAC7B,mBAAmB,EACnB,WAAiC,EACjC,mBAA0B,EAC1B,IAAI,EACJ,KAA0B,EAC1B,WAAoD,EACpD,IAAS,EACT,YAAY,EACZ,KAAK,EACL,WAAW,EACX,cAAwB,EACxB,eAAe,EACf,qBAAqB,EACrB,aAA0B,EAC1B,mBAA2C,EAC3C,eAA+B,EAC/B,mBAAwC,EACxC,mBAA2C,EAC3C,yBAAmF,EACnF,wBAAkC,EAClC,8BAA2D,EAC3D,yBAA6C,EAC7C,uBAA2C,EAC3C,uBAA4C,EAC5C,mCAAwE,EACxE,8BAAmI,EACnI,yBAA0C,EAC1C,gCAAqC,EACrC,WAAsB,EACtB,kBAAoC,EACpC,QAAe,EACf,cAA+C,EAC/C,aAAkC,EAClC,mBAAyF,EACzF,aAA+B,EAC/B,mBAAwC,EACxC,mBAAgC,EAChC,YAAkF,EAClF,qBAAiC,EACjC,WAAW,EACX,WAAkC,EAClC,YAAoB,EACpB,0BAAkC,EAClC,eAAuB,EACvB,QAAQ,EACR,sBAAsB,EACtB,UAAU,EACV,WAAW,GACZ,EAAE,gBAAgB,2CA+clB"}

package/dist/components/login-screen.js

@@ -0,0 +1,300 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+import { SignInView, ForgotPasswordView, ForgotPasswordSentView, SsoEmailView, FooterLinks, SplitMediaPane } from './login-screen.views.js';
+
+const DEFAULT_FOOTER_LINKS = [
+    { label: "Help", href: "#" },
+    { label: "Privacy", href: "#" },
+    { label: "Terms", href: "#" },
+];
+const DEFAULT_TESTIMONIAL = {
+    quote: '"BLAZE has completely transformed how we manage our dispensary. The platform is intuitive, fast, and our team loves it."',
+    authorName: "Sarah Johnson",
+    authorTitle: "Operations Director, Green Valley Dispensary",
+};
+const DEFAULT_LEGAL_NOTICE = (jsxs(Fragment, { children: ["By continuing, you agree to our", " ", jsx("a", { href: "#", className: "tw:underline tw:hover:text-foreground", children: "Terms of Service" }), " ", "and", " ", jsx("a", { href: "#", className: "tw:underline tw:hover:text-foreground", children: "Privacy Policy" })] }));
+function clampPercent(value) {
+    if (Number.isNaN(value)) {
+        return 40;
+    }
+    return Math.min(100, Math.max(0, value));
+}
+function clampOpacity(value) {
+    if (Number.isNaN(value)) {
+        return 0.35;
+    }
+    return Math.min(1, Math.max(0, value));
+}
+function getIdentifierInputType(mode) {
+    if (mode === "phone") {
+        return "tel";
+    }
+    if (mode === "email-or-phone") {
+        return "text";
+    }
+    return "email";
+}
+function getIdentifierDefaults(mode) {
+    if (mode === "phone") {
+        return {
+            label: "Phone number",
+            placeholder: "Enter your phone number",
+        };
+    }
+    if (mode === "email-or-phone") {
+        return {
+            label: "Email or phone",
+            placeholder: "Enter your email or phone number",
+        };
+    }
+    return {
+        label: "Email",
+        placeholder: "Enter your email address",
+    };
+}
+function LoginScreen({ className, splitLayout = true, splitImageWidthPercent = 40, imageSrc = "/login-bg.jpg", imageAlt = "Login background", imageOverlayContent, testimonial = DEFAULT_TESTIMONIAL, imageOverlayOpacity = 0.35, logo, title = "Welcome to Blaze", description = "Sign in with your email and password", tabs = [], defaultTabId, tabId, onTabChange, identifierMode = "email", identifierLabel, identifierPlaceholder, passwordLabel = "Password", passwordPlaceholder = "Enter your password", rememberMeLabel = "Remember Me", forgotPasswordLabel = "Forgot Password?", forgotPasswordTitle = "Reset your password", forgotPasswordDescription = "Enter your email and we will send reset instructions.", forgotPasswordEmailLabel = "Email", forgotPasswordEmailPlaceholder = "Enter your email address", forgotPasswordSubmitLabel = "Send Reset Link", forgotPasswordBackLabel = "Back to sign in", forgotPasswordSentTitle = "Check your email", forgotPasswordSentDescriptionPrefix = "We sent a password reset link to", forgotPasswordSentInstructions = "Click the link in the email to reset your password. If you don't see it, check your spam folder.", forgotPasswordResendLabel = "Resend email", forgotPasswordResendDelaySeconds = 60, submitLabel = "Log In", submitLoadingLabel = "Signing in...", ssoLabel = "Or", ssoButtonLabel = "Continue with Enterprise SSO", ssoEmailTitle = "Enter your email", ssoEmailDescription = "We'll check if you have an existing account or need to create one", ssoEmailLabel = "Email address", ssoEmailPlaceholder = "name@company.com", ssoEmailSubmitLabel = "Continue", ssoEmailHint = "Enterprise users will be redirected to their company's SSO portal", ssoEmailBackAriaLabel = "Go back", legalNotice, footerLinks = DEFAULT_FOOTER_LINKS, isSubmitting = false, isForgotPasswordSubmitting = false, isSsoSubmitting = false, onSubmit, onForgotPasswordSubmit, onSsoClick, onSsoSubmit, }) {
+    const id = React.useId();
+    const identifierId = `${id}-identifier`;
+    const passwordId = `${id}-password`;
+    const rememberId = `${id}-remember`;
+    const forgotEmailId = `${id}-forgot-email`;
+    const ssoEmailId = `${id}-sso-email`;
+    const [mode, setMode] = React.useState("sign-in");
+    const [identifier, setIdentifier] = React.useState("");
+    const [password, setPassword] = React.useState("");
+    const [forgotEmail, setForgotEmail] = React.useState("");
+    const [ssoEmail, setSsoEmail] = React.useState("");
+    const [rememberMe, setRememberMe] = React.useState(false);
+    const [showPassword, setShowPassword] = React.useState(false);
+    const [isResending, setIsResending] = React.useState(false);
+    const [imageLoadError, setImageLoadError] = React.useState(false);
+    const [logoLoadError, setLogoLoadError] = React.useState(false);
+    const [isSplitViewport, setIsSplitViewport] = React.useState(true);
+    const [forgotPasswordError, setForgotPasswordError] = React.useState(null);
+    const tabListRef = React.useRef(null);
+    const resendDelaySeconds = React.useMemo(() => {
+        if (Number.isNaN(forgotPasswordResendDelaySeconds)) {
+            return 60;
+        }
+        return Math.max(0, Math.floor(forgotPasswordResendDelaySeconds));
+    }, [forgotPasswordResendDelaySeconds]);
+    const [resendCountdown, setResendCountdown] = React.useState(resendDelaySeconds);
+    const firstTabId = tabs[0]?.id ?? null;
+    const [internalTabId, setInternalTabId] = React.useState(defaultTabId ?? firstTabId);
+    React.useEffect(() => {
+        if (tabId !== undefined) {
+            return;
+        }
+        if (!internalTabId && firstTabId) {
+            setInternalTabId(firstTabId);
+        }
+    }, [firstTabId, internalTabId, tabId]);
+    React.useEffect(() => {
+        setImageLoadError(false);
+    }, [imageSrc]);
+    React.useEffect(() => {
+        const handleResize = () => {
+            setIsSplitViewport(window.innerWidth >= 768);
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    const activeTabId = tabId ?? internalTabId ?? firstTabId;
+    const shouldShowSplitPane = splitLayout && isSplitViewport;
+    const hasSplitImage = Boolean(imageSrc) && !imageLoadError;
+    const imageWidth = clampPercent(splitImageWidthPercent);
+    const overlayOpacity = clampOpacity(imageOverlayOpacity);
+    const resolvedTestimonial = testimonial === null
+        ? null
+        : {
+            quote: testimonial?.quote || DEFAULT_TESTIMONIAL.quote,
+            authorName: testimonial?.authorName || DEFAULT_TESTIMONIAL.authorName,
+            authorTitle: testimonial?.authorTitle === undefined
+                ? DEFAULT_TESTIMONIAL.authorTitle
+                : testimonial.authorTitle,
+        };
+    const identifierDefaults = React.useMemo(() => getIdentifierDefaults(identifierMode), [identifierMode]);
+    const resolvedIdentifierLabel = identifierLabel ?? identifierDefaults.label;
+    const resolvedIdentifierPlaceholder = identifierPlaceholder ?? identifierDefaults.placeholder;
+    const setTabSelection = React.useCallback((tab) => {
+        if (tab.disabled) {
+            return;
+        }
+        if (tabId === undefined) {
+            setInternalTabId(tab.id);
+        }
+        onTabChange?.(tab.id);
+    }, [onTabChange, tabId]);
+    const handleTabClick = React.useCallback((tab, options = {}) => {
+        if (tab.disabled) {
+            return;
+        }
+        setTabSelection(tab);
+        if (tab.onSelect) {
+            tab.onSelect(tab.id);
+            return;
+        }
+        if (options.allowNavigation === false ||
+            !tab.href ||
+            typeof window === "undefined") {
+            return;
+        }
+        if (tab.external) {
+            window.open(tab.href, "_blank", "noopener,noreferrer");
+            return;
+        }
+        window.location.assign(tab.href);
+    }, [setTabSelection]);
+    const handleTabKeyDown = React.useCallback((event, currentIndex) => {
+        const enabledTabIndices = tabs.reduce((acc, tab, index) => {
+            if (!tab.disabled) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        if (enabledTabIndices.length === 0) {
+            return;
+        }
+        const isPrev = event.key === "ArrowLeft" || event.key === "ArrowUp";
+        const isNext = event.key === "ArrowRight" || event.key === "ArrowDown";
+        const isHome = event.key === "Home";
+        const isEnd = event.key === "End";
+        if (!isPrev && !isNext && !isHome && !isEnd) {
+            return;
+        }
+        event.preventDefault();
+        let nextIndex = currentIndex;
+        if (isHome) {
+            nextIndex = enabledTabIndices[0] ?? currentIndex;
+        }
+        else if (isEnd) {
+            nextIndex =
+                enabledTabIndices[enabledTabIndices.length - 1] ?? currentIndex;
+        }
+        else {
+            const enabledPosition = enabledTabIndices.indexOf(currentIndex);
+            const currentEnabledPosition = enabledPosition === -1 ? 0 : enabledPosition;
+            const delta = isNext ? 1 : -1;
+            const nextEnabledPosition = (currentEnabledPosition + delta + enabledTabIndices.length) %
+                enabledTabIndices.length;
+            nextIndex = enabledTabIndices[nextEnabledPosition] ?? currentIndex;
+        }
+        const nextTab = tabs[nextIndex];
+        if (!nextTab) {
+            return;
+        }
+        handleTabClick(nextTab, { allowNavigation: false });
+        const tabButtons = tabListRef.current?.querySelectorAll('[role="tab"]');
+        tabButtons?.[nextIndex]?.focus();
+    }, [handleTabClick, tabs]);
+    const handleSignInSubmit = async (event) => {
+        event.preventDefault();
+        const nextIdentifier = identifier.trim();
+        const nextPassword = password.trim();
+        if (!nextIdentifier || !nextPassword) {
+            return;
+        }
+        await onSubmit?.({
+            identifier: nextIdentifier,
+            password: nextPassword,
+            rememberMe,
+            tabId: activeTabId,
+        });
+    };
+    const handleForgotPasswordClick = () => {
+        if (identifier.includes("@")) {
+            setForgotEmail(identifier.trim());
+        }
+        setForgotPasswordError(null);
+        setMode("forgot-password");
+    };
+    const handleBackToSignIn = () => {
+        setForgotPasswordError(null);
+        setMode("sign-in");
+    };
+    const handleForgotPasswordSubmit = async (event) => {
+        event.preventDefault();
+        const nextForgotEmail = forgotEmail.trim();
+        if (!nextForgotEmail) {
+            return;
+        }
+        setForgotPasswordError(null);
+        try {
+            await onForgotPasswordSubmit?.(nextForgotEmail);
+        }
+        catch (error) {
+            const message = error instanceof Error && error.message
+                ? error.message
+                : "Failed to send reset email. Please try again.";
+            setForgotPasswordError(message);
+            return;
+        }
+        setResendCountdown(resendDelaySeconds);
+        setMode("forgot-password-sent");
+    };
+    const handleSsoClick = async () => {
+        if (onSsoClick) {
+            await onSsoClick();
+            return;
+        }
+        if (identifier.includes("@")) {
+            setSsoEmail(identifier.trim());
+        }
+        setMode("sso-email");
+    };
+    const handleSsoEmailSubmit = async (event) => {
+        event.preventDefault();
+        const nextSsoEmail = ssoEmail.trim();
+        if (!nextSsoEmail) {
+            return;
+        }
+        await onSsoSubmit?.(nextSsoEmail);
+    };
+    const handleResendEmail = async () => {
+        const nextForgotEmail = forgotEmail.trim();
+        if (!nextForgotEmail) {
+            return;
+        }
+        setForgotPasswordError(null);
+        setIsResending(true);
+        try {
+            await onForgotPasswordSubmit?.(nextForgotEmail);
+            setResendCountdown(resendDelaySeconds);
+        }
+        catch (error) {
+            const message = error instanceof Error && error.message
+                ? error.message
+                : "Failed to resend reset email. Please try again.";
+            setForgotPasswordError(message);
+        }
+        finally {
+            setIsResending(false);
+        }
+    };
+    React.useEffect(() => {
+        if (mode !== "forgot-password-sent") {
+            return;
+        }
+        if (resendCountdown <= 0) {
+            return;
+        }
+        const timeoutId = window.setTimeout(() => {
+            setResendCountdown((previous) => Math.max(0, previous - 1));
+        }, 1000);
+        return () => {
+            window.clearTimeout(timeoutId);
+        };
+    }, [mode, resendCountdown]);
+    const modeView = mode === "sign-in" ? (jsx(SignInView, { tabs: tabs, activeTabId: activeTabId, tabListRef: tabListRef, onTabClick: (tab) => handleTabClick(tab), onTabKeyDown: handleTabKeyDown, identifierId: identifierId, identifierLabel: resolvedIdentifierLabel, identifierType: getIdentifierInputType(identifierMode), identifierPlaceholder: resolvedIdentifierPlaceholder, identifier: identifier, onIdentifierChange: setIdentifier, passwordId: passwordId, passwordLabel: passwordLabel, passwordPlaceholder: passwordPlaceholder, password: password, onPasswordChange: setPassword, showPassword: showPassword, onTogglePassword: () => setShowPassword((previous) => !previous), rememberId: rememberId, rememberMe: rememberMe, onRememberMeChange: setRememberMe, rememberMeLabel: rememberMeLabel, forgotPasswordLabel: forgotPasswordLabel, onForgotPasswordClick: handleForgotPasswordClick, isSubmitting: isSubmitting, submitLabel: submitLabel, submitLoadingLabel: submitLoadingLabel, onSubmit: handleSignInSubmit, ssoLabel: ssoLabel, ssoButtonLabel: ssoButtonLabel, onSsoClick: handleSsoClick, legalNotice: legalNotice ?? DEFAULT_LEGAL_NOTICE, logo: logo, logoLoadError: logoLoadError, onLogoError: () => setLogoLoadError(true), title: title, description: description, autoCompleteIdentifier: identifierMode === "phone" ? "tel" : "email" })) : mode === "forgot-password" ? (jsx(ForgotPasswordView, { title: forgotPasswordTitle, description: forgotPasswordDescription, emailId: forgotEmailId, emailLabel: forgotPasswordEmailLabel, email: forgotEmail, onEmailChange: setForgotEmail, emailPlaceholder: forgotPasswordEmailPlaceholder, submitLabel: forgotPasswordSubmitLabel, backLabel: forgotPasswordBackLabel, isSubmitting: isForgotPasswordSubmitting, onSubmit: handleForgotPasswordSubmit, onBack: handleBackToSignIn, error: forgotPasswordError })) : mode === "forgot-password-sent" ? (jsx(ForgotPasswordSentView, { backAriaLabel: ssoEmailBackAriaLabel, onBack: handleBackToSignIn, title: forgotPasswordSentTitle, descriptionPrefix: forgotPasswordSentDescriptionPrefix, email: forgotEmail, instructions: forgotPasswordSentInstructions, resendLabel: forgotPasswordResendLabel, resendCountdown: resendCountdown, onResend: handleResendEmail, isResending: isResending, error: forgotPasswordError, backLabel: forgotPasswordBackLabel })) : (jsx(SsoEmailView, { backAriaLabel: ssoEmailBackAriaLabel, onBack: () => setMode("sign-in"), title: ssoEmailTitle, description: ssoEmailDescription, emailId: ssoEmailId, emailLabel: ssoEmailLabel, email: ssoEmail, onEmailChange: setSsoEmail, emailPlaceholder: ssoEmailPlaceholder, submitLabel: ssoEmailSubmitLabel, isSubmitting: isSsoSubmitting, onSubmit: handleSsoEmailSubmit, hint: ssoEmailHint }));
+    const content = (jsxs("div", { className: "tw:w-full tw:max-w-md", children: [jsx("div", { className: "tw:rounded-xl tw:border tw:border-border tw:bg-card tw:p-6 tw:shadow-sm sm:tw:p-8", children: jsx("div", { className: "tw:flex tw:flex-col tw:gap-8", children: modeView }) }), jsx(FooterLinks, { links: footerLinks })] }));
+    if (!splitLayout) {
+        return (jsx("div", { className: cn("tw:min-h-svh tw:w-full tw:bg-background", className), children: jsx("div", { className: "tw:flex tw:min-h-svh tw:w-full tw:items-center tw:justify-center tw:p-6 sm:tw:p-12", children: content }) }));
+    }
+    return (jsx("div", { className: cn("tw:min-h-svh tw:w-full tw:bg-background", className), children: jsxs("div", { className: "tw:flex tw:min-h-svh tw:w-full", children: [shouldShowSplitPane ? (jsx(SplitMediaPane, { widthPercent: imageWidth, hasSplitImage: hasSplitImage, imageSrc: imageSrc, imageAlt: imageAlt, onImageError: () => setImageLoadError(true), overlayOpacity: overlayOpacity, imageOverlayContent: imageOverlayContent, testimonial: resolvedTestimonial })) : null, jsx("div", { className: cn("tw:flex tw:w-full tw:items-center tw:justify-center tw:p-6 sm:tw:p-12", shouldShowSplitPane && "tw:flex-1"), children: content })] }) }));
+}
+
+export { LoginScreen };