@glinui/ui 0.1.0

package/dist/components/command.d.ts

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { type VariantProps } from "class-variance-authority";
+declare const commandVariants: (props?: ({
+    variant?: "default" | "glass" | "frosted" | "outline" | "ghost" | "matte" | "liquid" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive> & VariantProps<typeof commandVariants>;
+export declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "glass" | "frosted" | "outline" | "ghost" | "matte" | "liquid" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=command.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;AAClD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,eAAe;;;8EA6BpB,CAAA;AA6FD,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,GAChF,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;sHAgBlB,CAAA;AAIF,eAAO,MAAM,YAAY;;;;;;;0FAqBvB,CAAA;AAIF,eAAO,MAAM,WAAW;;;;;;;;sFAStB,CAAA;AAIF,eAAO,MAAM,YAAY;;;;;;uJAKvB,CAAA;AAIF,eAAO,MAAM,YAAY;;;;;;;;;;sFAmBvB,CAAA;AAIF,eAAO,MAAM,gBAAgB;;;;;;sFAS3B,CAAA;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;;;sFAatB,CAAA;AAIF,eAAO,MAAM,eAAe;8BAA6B,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAE7F,CAAA"}

package/dist/components/command.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cva } from "class-variance-authority";
+import { Search } from "lucide-react";
+import { cn } from "../lib/cn";
+const commandVariants = cva("flex h-full w-full flex-col overflow-hidden rounded-xl border transition-[background-color,border-color,box-shadow] duration-fast ease-standard motion-reduce:transition-none", {
+    variants: {
+        variant: {
+            default: "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-foreground)] shadow-[0_12px_24px_-20px_rgb(2_6_23_/_0.28)] dark:shadow-[0_12px_24px_-18px_rgb(0_0_0_/_0.45)]",
+            glass: "bg-[var(--glass-2-surface)] backdrop-blur-xl backdrop-saturate-[180%] border-white/15 [border-top-color:var(--glass-refraction-top)] text-[var(--color-foreground)] shadow-[0_0_0_1px_rgb(255_255_255_/_0.08)_inset,var(--shadow-glass-sm)] dark:border-white/[0.1] dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.05)_inset,0_8px_24px_rgb(0_0_0_/_0.35)]",
+            frosted: "bg-[var(--glass-3-surface)] backdrop-blur-[40px] backdrop-saturate-[200%] border-white/25 [border-top-color:var(--glass-refraction-top)] text-[var(--color-foreground)] shadow-[0_0_0_1px_rgb(255_255_255_/_0.12)_inset,0_0_20px_rgb(255_255_255_/_0.1)_inset,var(--shadow-glass-md)] dark:border-white/[0.14] dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.07)_inset,0_0_20px_rgb(255_255_255_/_0.03)_inset,0_8px_24px_rgb(0_0_0_/_0.4)]",
+            outline: "border-[var(--color-border)] bg-transparent text-[var(--color-foreground)]",
+            ghost: "border-transparent bg-transparent text-[var(--color-foreground)]",
+            liquid: "border-white/25 [border-top-color:var(--glass-refraction-top)] bg-[radial-gradient(circle_at_16%_10%,rgb(255_255_255_/_0.74),transparent_45%),linear-gradient(162deg,rgb(255_255_255_/_0.62),rgb(236_236_236_/_0.35))] text-[var(--color-foreground)] backdrop-blur-xl backdrop-saturate-[180%] shadow-[0_0_0_1px_rgb(255_255_255_/_0.2)_inset,var(--shadow-glass-md)] dark:border-white/[0.14] dark:bg-[linear-gradient(162deg,rgb(255_255_255_/_0.12),rgb(255_255_255_/_0.05))] dark:shadow-[0_0_0_1px_rgb(255_255_255_/_0.06)_inset,0_12px_36px_rgb(0_0_0_/_0.4)]",
+            matte: "border-black/10 bg-[linear-gradient(180deg,rgb(250_250_250),rgb(236_236_238))] text-[var(--color-foreground)] dark:border-white/[0.14] dark:bg-[linear-gradient(180deg,rgb(55_60_70_/_0.9),rgb(37_42_50_/_0.9))]"
+        },
+        size: {
+            sm: "text-xs",
+            md: "text-sm",
+            lg: "text-base"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+const CommandContext = React.createContext({
+    variant: "default",
+    size: "md"
+});
+function useCommandContext() {
+    return React.useContext(CommandContext);
+}
+const commandInputWrapperVariants = cva("flex items-center border-b transition-[background-color,border-color] duration-fast ease-standard focus-within:bg-[var(--color-foreground)]/[0.03] dark:focus-within:bg-white/[0.05]", {
+    variants: {
+        variant: {
+            default: "border-[var(--color-border)]",
+            glass: "border-white/12 bg-[var(--glass-1-surface)]/60",
+            frosted: "border-white/16 bg-[var(--glass-2-surface)]/70",
+            outline: "border-[var(--color-border)]/80 bg-transparent",
+            ghost: "border-[var(--color-border)]/50 bg-transparent",
+            liquid: "border-white/20 bg-[linear-gradient(180deg,rgb(255_255_255_/_0.35),rgb(255_255_255_/_0.12))] dark:border-white/[0.12] dark:bg-white/[0.06]",
+            matte: "border-black/10 bg-black/[0.03] dark:border-white/[0.14] dark:bg-white/[0.05]"
+        },
+        size: {
+            sm: "px-2",
+            md: "px-3",
+            lg: "px-4"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+const commandInputVariants = cva("w-full rounded-md bg-transparent outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        size: {
+            sm: "h-8 py-2 text-xs",
+            md: "h-10 py-3 text-sm",
+            lg: "h-12 py-3 text-base"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+const commandItemVariants = cva("relative flex cursor-default select-none items-center gap-2 rounded-lg px-2.5 outline-none transition-[background-color,color,border-color,box-shadow] duration-fast ease-standard data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "data-[selected=true]:bg-[var(--color-foreground)]/[0.08] data-[selected=true]:text-[var(--color-foreground)] dark:data-[selected=true]:bg-white/[0.12]",
+            glass: "data-[selected=true]:border data-[selected=true]:border-white/18 data-[selected=true]:bg-white/40 data-[selected=true]:text-[var(--color-foreground)] dark:data-[selected=true]:border-white/[0.12] dark:data-[selected=true]:bg-white/[0.14]",
+            frosted: "data-[selected=true]:border data-[selected=true]:border-white/22 data-[selected=true]:bg-white/50 data-[selected=true]:text-[var(--color-foreground)] dark:data-[selected=true]:border-white/[0.14] dark:data-[selected=true]:bg-white/[0.16]",
+            outline: "data-[selected=true]:border data-[selected=true]:border-[var(--color-border)] data-[selected=true]:bg-[var(--color-surface)] dark:data-[selected=true]:border-white/20 dark:data-[selected=true]:bg-white/[0.06]",
+            ghost: "data-[selected=true]:bg-[var(--color-foreground)]/[0.07] dark:data-[selected=true]:bg-white/[0.1]",
+            liquid: "data-[selected=true]:border data-[selected=true]:border-white/25 data-[selected=true]:bg-[linear-gradient(165deg,rgb(255_255_255_/_0.6),rgb(242_242_242_/_0.34))] data-[selected=true]:shadow-[0_0_0_1px_rgb(255_255_255_/_0.2)_inset] dark:data-[selected=true]:border-white/[0.14] dark:data-[selected=true]:bg-[linear-gradient(165deg,rgb(255_255_255_/_0.14),rgb(255_255_255_/_0.06))]",
+            matte: "data-[selected=true]:bg-black/[0.06] dark:data-[selected=true]:bg-white/[0.11]"
+        },
+        size: {
+            sm: "py-1 text-xs",
+            md: "py-1.5 text-sm",
+            lg: "py-2 text-base"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+export const Command = React.forwardRef(({ className, variant, size, ...props }, ref) => {
+    const resolvedVariant = variant ?? "default";
+    const resolvedSize = size ?? "md";
+    return (_jsx(CommandContext.Provider, { value: { variant: resolvedVariant, size: resolvedSize }, children: _jsx(CommandPrimitive, { ref: ref, className: cn(commandVariants({ variant: resolvedVariant, size: resolvedSize }), className), ...props }) }));
+});
+Command.displayName = "Command";
+export const CommandInput = React.forwardRef(({ className, ...props }, ref) => {
+    const { size, variant } = useCommandContext();
+    return (_jsxs("div", { className: cn(commandInputWrapperVariants({ size, variant })), "cmdk-input-wrapper": "", children: [_jsx(Search, { className: cn("mr-2 shrink-0 text-neutral-500", size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4") }), _jsx(CommandPrimitive.Input, { ref: ref, className: cn(commandInputVariants({ size }), className), ...props })] }));
+});
+CommandInput.displayName = "CommandInput";
+export const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.List, { ref: ref, className: cn("max-h-[320px] overflow-y-auto overflow-x-hidden p-1.5", className), ...props })));
+CommandList.displayName = "CommandList";
+export const CommandEmpty = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, className: cn("py-8 text-center text-sm", className), ...props })));
+CommandEmpty.displayName = "CommandEmpty";
+export const CommandGroup = React.forwardRef(({ className, ...props }, ref) => {
+    const { variant } = useCommandContext();
+    return (_jsx(CommandPrimitive.Group, { ref: ref, className: cn("overflow-hidden p-1 text-[var(--color-foreground)] [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.08em]", variant === "glass" || variant === "liquid" || variant === "frosted"
+            ? "[&_[cmdk-group-heading]]:text-neutral-500 dark:[&_[cmdk-group-heading]]:text-neutral-300"
+            : "[&_[cmdk-group-heading]]:text-neutral-500 dark:[&_[cmdk-group-heading]]:text-neutral-400", className), ...props }));
+});
+CommandGroup.displayName = "CommandGroup";
+export const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Separator, { ref: ref, className: cn("my-1 h-px bg-[var(--color-border)]", className), ...props })));
+CommandSeparator.displayName = "CommandSeparator";
+export const CommandItem = React.forwardRef(({ className, ...props }, ref) => {
+    const { size, variant } = useCommandContext();
+    return (_jsx(CommandPrimitive.Item, { ref: ref, className: cn(commandItemVariants({ size, variant }), className), ...props }));
+});
+CommandItem.displayName = "CommandItem";
+export const CommandShortcut = ({ className, ...props }) => (_jsx("span", { className: cn("ml-auto text-[11px] tracking-[0.08em] text-neutral-400", className), ...props }));
+CommandShortcut.displayName = "CommandShortcut";

package/dist/components/counter.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const counterVariants: (props?: ({
+    variant?: "default" | "glass" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CounterProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof counterVariants> & {
+    value: number;
+    max?: number;
+};
+export declare const Counter: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<(props?: ({
+    variant?: "default" | "glass" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    value: number;
+    max?: number;
+} & React.RefAttributes<HTMLSpanElement>>;
+export {};
+//# sourceMappingURL=counter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../src/components/counter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,eAAe;;;8EAuBpB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAChF,YAAY,CAAC,OAAO,eAAe,CAAC,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAEH,eAAO,MAAM,OAAO;;;;WAJT,MAAM;UACP,MAAM;yCAaf,CAAA"}

package/dist/components/counter.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const counterVariants = cva("inline-flex items-center justify-center rounded-full border font-medium tabular-nums transition-[background-color,color,border-color] duration-fast ease-standard motion-reduce:transition-none", {
+    variants: {
+        variant: {
+            default: "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-foreground)] dark:border-white/20",
+            glass: "border-white/20 [border-top-color:var(--glass-refraction-top)] bg-[var(--glass-1-surface)] text-[var(--color-foreground)] dark:border-white/[0.14] dark:bg-white/[0.05]",
+            outline: "border-[var(--color-border)] bg-transparent text-[var(--color-foreground)] dark:border-white/20",
+            ghost: "border-transparent bg-[var(--color-foreground)]/[0.08] text-[var(--color-foreground)] dark:bg-white/[0.1]"
+        },
+        size: {
+            sm: "h-5 min-w-5 px-1.5 text-[10px]",
+            md: "h-6 min-w-6 px-2 text-xs",
+            lg: "h-7 min-w-7 px-2.5 text-sm"
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+});
+export const Counter = React.forwardRef(({ className, variant, size, value, max = 99, ...props }, ref) => {
+    const displayValue = value > max ? `${max}+` : `${value}`;
+    return (_jsx("span", { ref: ref, className: cn(counterVariants({ variant, size }), className), ...props, children: displayValue }));
+});
+Counter.displayName = "Counter";

package/dist/components/data-table.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { type TableProps, type TableRowTone } from "./table";
+type DataTableAccessor<TData> = keyof TData | ((row: TData) => unknown);
+export type DataTableColumn<TData> = {
+    id: string;
+    header: React.ReactNode;
+    accessor: DataTableAccessor<TData>;
+    cell?: (context: {
+        row: TData;
+        value: unknown;
+        rowId: string;
+    }) => React.ReactNode;
+    sortable?: boolean;
+    searchable?: boolean;
+    canHide?: boolean;
+    hidden?: boolean;
+    align?: "left" | "center" | "right";
+    className?: string;
+    headerClassName?: string;
+};
+export type DataTableProps<TData extends Record<string, unknown>> = {
+    columns: DataTableColumn<TData>[];
+    data: TData[];
+    getRowId?: (row: TData, index: number) => string;
+    rowTone?: (row: TData) => TableRowTone;
+    onRowClick?: (row: TData) => void;
+    onSelectionChange?: (rows: TData[]) => void;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    selectable?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    emptyMessage?: string;
+    className?: string;
+} & Omit<TableProps, "children">;
+export declare function DataTable<TData extends Record<string, unknown>>({ columns, data, getRowId, rowTone, onRowClick, onSelectionChange, searchable, searchPlaceholder, selectable, pageSize, pageSizeOptions, emptyMessage, className, ...tableProps }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,OAAO,EAQL,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,SAAS,CAAA;AAKhB,KAAK,iBAAiB,CAAC,KAAK,IAAI,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,OAAO,CAAC,CAAA;AAEvE,MAAM,MAAM,eAAe,CAAC,KAAK,IAAI;IACnC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAClC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,GAAG,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IAClE,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAA;IACjC,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChD,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,YAAY,CAAA;IACtC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IACjC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA;AAsDhC,wBAAgB,SAAS,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/D,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,UAAiB,EACjB,iBAAoC,EACpC,UAAkB,EAClB,QAAa,EACb,eAA8B,EAC9B,YAA4B,EAC5B,SAAS,EACT,GAAG,UAAU,EACd,EAAE,cAAc,CAAC,KAAK,CAAC,2CAmVvB"}

package/dist/components/data-table.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Columns3 } from "lucide-react";
+import { Button } from "./button";
+import { Checkbox } from "./checkbox";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu";
+import { Input } from "./input";
+import { Select } from "./select";
+import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "./table";
+import { cn } from "../lib/cn";
+function toComparable(value) {
+    if (typeof value === "number") {
+        return value;
+    }
+    if (value instanceof Date) {
+        return value.getTime();
+    }
+    if (typeof value === "boolean") {
+        return value ? 1 : 0;
+    }
+    return String(value ?? "").toLowerCase();
+}
+function resolveColumnValue(row, accessor) {
+    if (typeof accessor === "function") {
+        return accessor(row);
+    }
+    return row[accessor];
+}
+function stringValue(value) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (typeof value === "number" || typeof value === "boolean") {
+        return `${value}`;
+    }
+    if (value instanceof Date) {
+        return value.toISOString();
+    }
+    if (value == null) {
+        return "";
+    }
+    return String(value);
+}
+export function DataTable({ columns, data, getRowId, rowTone, onRowClick, onSelectionChange, searchable = true, searchPlaceholder = "Search rows...", selectable = false, pageSize = 10, pageSizeOptions = [10, 20, 50], emptyMessage = "No results.", className, ...tableProps }) {
+    const [query, setQuery] = React.useState("");
+    const [currentPage, setCurrentPage] = React.useState(1);
+    const [rowsPerPage, setRowsPerPage] = React.useState(pageSize);
+    const [selectedRowIds, setSelectedRowIds] = React.useState({});
+    const [sort, setSort] = React.useState(null);
+    const [columnVisibility, setColumnVisibility] = React.useState(() => {
+        return Object.fromEntries(columns.map((column) => [column.id, column.hidden !== true]));
+    });
+    React.useEffect(() => {
+        setColumnVisibility((prev) => {
+            const next = {};
+            for (const column of columns) {
+                if (Object.prototype.hasOwnProperty.call(prev, column.id)) {
+                    next[column.id] = prev[column.id];
+                }
+                else {
+                    next[column.id] = column.hidden !== true;
+                }
+            }
+            return next;
+        });
+    }, [columns]);
+    const rows = React.useMemo(() => {
+        return data.map((entry, index) => ({
+            id: getRowId ? getRowId(entry, index) : `${index}`,
+            data: entry
+        }));
+    }, [data, getRowId]);
+    const visibleColumns = React.useMemo(() => {
+        return columns.filter((column) => columnVisibility[column.id] !== false);
+    }, [columnVisibility, columns]);
+    const filteredRows = React.useMemo(() => {
+        if (!searchable || query.trim().length === 0) {
+            return rows;
+        }
+        const searchQuery = query.toLowerCase();
+        return rows.filter((row) => {
+            return visibleColumns.some((column) => {
+                if (column.searchable === false) {
+                    return false;
+                }
+                const raw = resolveColumnValue(row.data, column.accessor);
+                return stringValue(raw).toLowerCase().includes(searchQuery);
+            });
+        });
+    }, [query, rows, searchable, visibleColumns]);
+    const sortedRows = React.useMemo(() => {
+        if (!sort) {
+            return filteredRows;
+        }
+        const column = columns.find((item) => item.id === sort.id);
+        if (!column || column.sortable === false) {
+            return filteredRows;
+        }
+        return [...filteredRows].sort((a, b) => {
+            const left = toComparable(resolveColumnValue(a.data, column.accessor));
+            const right = toComparable(resolveColumnValue(b.data, column.accessor));
+            if (left === right) {
+                return 0;
+            }
+            if (left > right) {
+                return sort.direction === "asc" ? 1 : -1;
+            }
+            return sort.direction === "asc" ? -1 : 1;
+        });
+    }, [columns, filteredRows, sort]);
+    const totalPages = Math.max(1, Math.ceil(sortedRows.length / rowsPerPage));
+    React.useEffect(() => {
+        if (currentPage > totalPages) {
+            setCurrentPage(totalPages);
+        }
+    }, [currentPage, totalPages]);
+    React.useEffect(() => {
+        setCurrentPage(1);
+    }, [query, rowsPerPage, columnVisibility]);
+    const start = (currentPage - 1) * rowsPerPage;
+    const pageRows = sortedRows.slice(start, start + rowsPerPage);
+    const pageRowIds = pageRows.map((row) => row.id);
+    const selectedCount = Object.values(selectedRowIds).filter(Boolean).length;
+    const allPageSelected = pageRowIds.length > 0 && pageRowIds.every((id) => selectedRowIds[id]);
+    const somePageSelected = pageRowIds.some((id) => selectedRowIds[id]) && !allPageSelected;
+    React.useEffect(() => {
+        if (!onSelectionChange) {
+            return;
+        }
+        const selectedRows = rows.filter((row) => selectedRowIds[row.id]).map((row) => row.data);
+        onSelectionChange(selectedRows);
+    }, [onSelectionChange, rows, selectedRowIds]);
+    function toggleSort(columnId, sortable) {
+        if (sortable === false) {
+            return;
+        }
+        setSort((current) => {
+            if (!current || current.id !== columnId) {
+                return { id: columnId, direction: "asc" };
+            }
+            return {
+                id: columnId,
+                direction: current.direction === "asc" ? "desc" : "asc"
+            };
+        });
+    }
+    function renderSortIcon(columnId, sortable) {
+        if (sortable === false) {
+            return null;
+        }
+        if (sort?.id !== columnId) {
+            return _jsx(ArrowUpDown, { className: "h-3.5 w-3.5 opacity-70", "aria-hidden": true });
+        }
+        return sort.direction === "asc" ? (_jsx(ArrowUp, { className: "h-3.5 w-3.5", "aria-hidden": true })) : (_jsx(ArrowDown, { className: "h-3.5 w-3.5", "aria-hidden": true }));
+    }
+    const hidableColumns = columns.filter((column) => column.canHide !== false);
+    return (_jsxs("div", { className: cn("space-y-4", className), children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [searchable ? (_jsx(Input, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, "aria-label": "Search table rows", className: "w-full sm:max-w-xs" })) : null, selectable && selectedCount > 0 ? (_jsxs("p", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: [selectedCount, " selected"] })) : null] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [hidableColumns.length > 0 ? (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { variant: "outline", size: "sm", className: "gap-1.5", children: [_jsx(Columns3, { className: "h-3.5 w-3.5" }), "Columns"] }), _jsxs(DropdownMenuContent, { align: "end", variant: "glass", className: "w-48", children: [_jsx(DropdownMenuLabel, { children: "Toggle columns" }), _jsx(DropdownMenuSeparator, {}), hidableColumns.map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: columnVisibility[column.id] !== false, onCheckedChange: (checked) => {
+                                                    setColumnVisibility((prev) => ({
+                                                        ...prev,
+                                                        [column.id]: checked === true
+                                                    }));
+                                                }, children: typeof column.header === "string" ? column.header : column.id }, column.id)))] })] })) : null, _jsxs("div", { className: "flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400", children: [_jsx("span", { children: "Rows" }), _jsx(Select, { size: "sm", value: `${rowsPerPage}`, onChange: (event) => setRowsPerPage(Number(event.target.value)), options: pageSizeOptions.map((option) => ({ value: `${option}`, label: `${option}` })), className: "w-20", "aria-label": "Rows per page" })] })] })] }), _jsxs(Table, { ...tableProps, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable ? (_jsx(TableHead, { className: "w-10", sticky: tableProps.stickyFirstColumn, children: _jsx(Checkbox, { "aria-label": "Select all page rows", checked: allPageSelected ? true : somePageSelected ? "indeterminate" : false, onCheckedChange: (checked) => {
+                                            setSelectedRowIds((prev) => {
+                                                const next = { ...prev };
+                                                for (const rowId of pageRowIds) {
+                                                    next[rowId] = checked === true;
+                                                }
+                                                return next;
+                                            });
+                                        } }) })) : null, visibleColumns.map((column) => (_jsx(TableHead, { align: column.align, className: column.headerClassName, sticky: tableProps.stickyFirstColumn && selectable && column === visibleColumns[0], children: _jsxs("button", { type: "button", onClick: () => toggleSort(column.id, column.sortable), className: cn("inline-flex items-center gap-1.5", column.sortable !== false && "transition-colors hover:text-[var(--color-foreground)]"), "aria-label": `Sort by ${typeof column.header === "string" ? column.header : column.id}`, children: [_jsx("span", { children: column.header }), renderSortIcon(column.id, column.sortable)] }) }, column.id)))] }) }), _jsx(TableBody, { children: pageRows.length === 0 ? (_jsx(TableEmpty, { colSpan: visibleColumns.length + (selectable ? 1 : 0), children: emptyMessage })) : (pageRows.map((row) => (_jsxs(TableRow, { tone: rowTone ? rowTone(row.data) : "default", "data-state": selectedRowIds[row.id] ? "selected" : undefined, className: cn(onRowClick && "cursor-pointer"), onClick: () => onRowClick?.(row.data), children: [selectable ? (_jsx(TableCell, { sticky: tableProps.stickyFirstColumn, className: "w-10", children: _jsx(Checkbox, { "aria-label": `Select row ${row.id}`, checked: selectedRowIds[row.id] === true, onCheckedChange: (checked) => {
+                                            setSelectedRowIds((prev) => ({
+                                                ...prev,
+                                                [row.id]: checked === true
+                                            }));
+                                        }, onClick: (event) => event.stopPropagation() }) })) : null, visibleColumns.map((column, index) => {
+                                    const value = resolveColumnValue(row.data, column.accessor);
+                                    const content = column.cell
+                                        ? column.cell({ row: row.data, value, rowId: row.id })
+                                        : value;
+                                    return (_jsx(TableCell, { align: column.align, className: column.className, sticky: tableProps.stickyFirstColumn && !selectable && index === 0, children: content }, `${row.id}-${column.id}`));
+                                })] }, row.id)))) })] }), _jsxs("div", { className: "flex flex-col gap-2 text-xs text-neutral-500 dark:text-neutral-400 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("p", { children: ["Showing ", pageRows.length === 0 ? 0 : start + 1, "-", Math.min(start + rowsPerPage, sortedRows.length), " of", " ", sortedRows.length] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("p", { children: ["Page ", currentPage, " of ", totalPages] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setCurrentPage((page) => Math.max(1, page - 1)), disabled: currentPage <= 1, className: "gap-1", children: [_jsx(ChevronLeft, { className: "h-3.5 w-3.5" }), "Previous"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setCurrentPage((page) => Math.min(totalPages, page + 1)), disabled: currentPage >= totalPages, className: "gap-1", children: ["Next", _jsx(ChevronRight, { className: "h-3.5 w-3.5" })] })] })] })] }));
+}

package/dist/components/depth-card.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface DepthCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum tilt angle in degrees */
+    maxTilt?: number;
+    /** Perspective distance in px */
+    perspective?: number;
+    /** Scale on hover */
+    hoverScale?: number;
+    /** Glare effect */
+    glare?: boolean;
+    /** Glare max opacity */
+    glareOpacity?: number;
+}
+export declare const DepthCard: React.ForwardRefExoticComponent<DepthCardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=depth-card.d.ts.map

package/dist/components/depth-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"depth-card.d.ts","sourceRoot":"","sources":["../../src/components/depth-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,SAAS,uFA2FrB,CAAA"}

package/dist/components/depth-card.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { usePrefersReducedMotion } from "../lib/use-prefers-reduced-motion";
+export const DepthCard = React.forwardRef(({ className, children, maxTilt = 15, perspective = 800, hoverScale = 1.02, glare = true, glareOpacity = 0.2, onMouseMove, onMouseLeave, style, ...props }, ref) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const localRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        localRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+            return;
+        }
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    const handleMouseMove = React.useCallback((event) => {
+        if (prefersReducedMotion || !localRef.current) {
+            onMouseMove?.(event);
+            return;
+        }
+        const rect = localRef.current.getBoundingClientRect();
+        const x = (event.clientX - rect.left) / rect.width;
+        const y = (event.clientY - rect.top) / rect.height;
+        const tiltX = (0.5 - y) * maxTilt;
+        const tiltY = (x - 0.5) * maxTilt;
+        localRef.current.style.setProperty("--depth-tilt-x", `${tiltX.toFixed(2)}deg`);
+        localRef.current.style.setProperty("--depth-tilt-y", `${tiltY.toFixed(2)}deg`);
+        localRef.current.style.setProperty("--depth-scale", `${hoverScale}`);
+        if (glare) {
+            localRef.current.style.setProperty("--glare-x", `${(x * 100).toFixed(1)}%`);
+            localRef.current.style.setProperty("--glare-y", `${(y * 100).toFixed(1)}%`);
+            localRef.current.style.setProperty("--glare-opacity", `${glareOpacity}`);
+        }
+        onMouseMove?.(event);
+    }, [maxTilt, hoverScale, glare, glareOpacity, onMouseMove, prefersReducedMotion]);
+    const handleMouseLeave = React.useCallback((event) => {
+        if (localRef.current) {
+            localRef.current.style.setProperty("--depth-tilt-x", "0deg");
+            localRef.current.style.setProperty("--depth-tilt-y", "0deg");
+            localRef.current.style.setProperty("--depth-scale", "1");
+            localRef.current.style.setProperty("--glare-opacity", "0");
+        }
+        onMouseLeave?.(event);
+    }, [onMouseLeave]);
+    return (_jsxs("div", { ref: setRefs, className: cn("relative overflow-hidden rounded-xl border border-white/10 bg-white/5 p-6 shadow-lg backdrop-blur-md transition-transform duration-300 ease-out [transform:perspective(var(--depth-perspective,800px))_rotateX(var(--depth-tilt-x,0deg))_rotateY(var(--depth-tilt-y,0deg))_scale(var(--depth-scale,1))] motion-reduce:transform-none", className), style: {
+            "--depth-perspective": `${perspective}px`,
+            ...style,
+        }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, ...props, children: [glare && (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 opacity-[var(--glare-opacity,0)] transition-opacity duration-300 [background:radial-gradient(300px_circle_at_var(--glare-x,50%)_var(--glare-y,50%),rgb(255_255_255_/_0.4),transparent_70%)] motion-reduce:hidden" })), _jsx("div", { className: "relative z-[1]", children: children })] }));
+});
+DepthCard.displayName = "DepthCard";

package/dist/components/dot-pattern.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface DotPatternProps extends React.SVGAttributes<SVGSVGElement> {
+    dotSize?: number;
+    gap?: number;
+    dotColor?: string;
+    dotOpacity?: number;
+    cr?: number;
+}
+export declare const DotPattern: React.ForwardRefExoticComponent<DotPatternProps & React.RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=dot-pattern.d.ts.map

package/dist/components/dot-pattern.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot-pattern.d.ts","sourceRoot":"","sources":["../../src/components/dot-pattern.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,eAAO,MAAM,UAAU,uFAiDtB,CAAA"}

package/dist/components/dot-pattern.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export const DotPattern = React.forwardRef(({ className, dotSize = 1.5, gap = 20, dotColor = "currentColor", dotOpacity = 0.2, cr, ...props }, ref) => {
+    const id = React.useId();
+    const patternId = `dot-pattern-${id}`;
+    const radius = cr ?? dotSize;
+    return (_jsxs("svg", { ref: ref, "aria-hidden": true, className: cn("pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/40", className), ...props, children: [_jsx("defs", { children: _jsx("pattern", { id: patternId, x: 0, y: 0, width: gap, height: gap, patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: dotSize, cy: dotSize, r: radius, fill: dotColor, fillOpacity: dotOpacity }) }) }), _jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }));
+});
+DotPattern.displayName = "DotPattern";