@verbb/plugin-kit-react 1.0.0

package/dist/components/InputGroup.js

@@ -0,0 +1,111 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { Input } from "./Input.js";
+import { Textarea } from "./Textarea.js";
+import "./index.js";
+import { Button } from "./Button.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/InputGroup.tsx
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group outline-none relative flex w-full min-w-0 items-center", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col", "has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=inline-end]]:[&>input]:pr-1.5", "has-[>[data-align=inline-start]]:[&>input]:pl-1.5", "rounded-sm", "border border-[rgba(96,125,159,0.4)]", "bg-[rgb(251,252,254)] bg-clip-padding", "has-[[data-slot=input-group-control]:focus-visible]:border-sky-600", "has-[[data-slot=field-control]:focus-visible]:border-sky-600", "has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "has-[[data-slot=field-control]:focus-visible]:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "has-[[data-slot][aria-invalid=true]]:border-rose-600!", "has-disabled:opacity-50", className),
+		...props
+	});
+}
+var inputGroupAddonVariants = cva([
+	"flex h-auto items-center justify-center gap-2",
+	"px-2 text-sm",
+	"cursor-text select-none",
+	"group-data-[disabled=true]/input-group:opacity-50",
+	"[&>svg:not([class*='size-'])]:size-3",
+	"[&>kbd]:rounded-[calc(var(--radius)-5px)]"
+].join(" "), {
+	variants: { align: {
+		"inline-start": [
+			"order-first pl-2",
+			"has-[>button]:ml-[-0.3rem]",
+			"has-[>kbd]:ml-[-0.15rem]"
+		].join(" "),
+		"inline-end": [
+			"order-last pr-2",
+			"has-[>button]:mr-[-0.3rem]",
+			"has-[>kbd]:mr-[-0.15rem]"
+		].join(" "),
+		"block-start": [
+			"order-first w-full justify-start",
+			"px-2.5 pt-2",
+			"group-has-[>input]/input-group:pt-2",
+			"[.border-b]:pb-2"
+		].join(" "),
+		"block-end": [
+			"order-last w-full justify-start",
+			"px-2.5 pb-2",
+			"group-has-[>input]/input-group:pb-2",
+			"[.border-t]:pt-2"
+		].join(" ")
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ 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
+	});
+}
+var inputGroupButtonVariants = cva([
+	"flex items-center gap-2",
+	"text-gray-500 text-sm",
+	"shadow-none rounded-sm",
+	"hover:bg-slate-100"
+].join(" "), {
+	variants: { size: {
+		xs: "",
+		sm: "",
+		"icon-xs": "size-6 [&>svg]:size-3.5 p-0 has-[>svg]:p-0",
+		"icon-sm": ""
+	} },
+	defaultVariants: { size: "xs" }
+});
+function InputGroupButton({ className, type = "button", variant = "none", size = "xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-2 text-sm", "text-gray-500", "[&_svg:not([class*='size-'])]:size-3", "[&_svg]:pointer-events-none", className),
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1", "rounded-none border-0", "bg-transparent", "shadow-none!", "disabled:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1", "rounded-none border-0 py-2", "resize-none", "bg-transparent", "shadow-none!", "disabled:bg-transparent", className),
+		...props
+	});
+}
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+
+//# sourceMappingURL=InputGroup.js.map

package/dist/components/InputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.js","names":[],"sources":["../../src/components/InputGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { Button } from '@verbb/plugin-kit-react/components';\nimport { Input } from '@verbb/plugin-kit-react/components';\nimport { Textarea } from '@verbb/plugin-kit-react/components';\n\nfunction InputGroup({ className, ...props }: ComponentProps<'div'>) {\n    return (\n        <div\n            data-slot=\"input-group\"\n            role=\"group\"\n            className={cn(\n                // Layout\n                'group/input-group outline-none relative flex w-full min-w-0 items-center',\n                'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n                'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n                'has-[>[data-align=block-end]]:[&>input]:pt-3',\n                'has-[>[data-align=block-start]]:[&>input]:pb-3',\n                'has-[>[data-align=inline-end]]:[&>input]:pr-1.5',\n                'has-[>[data-align=inline-start]]:[&>input]:pl-1.5',\n\n                // Theme\n                'rounded-sm',\n                'border border-[rgba(96,125,159,0.4)]',\n                'bg-[rgb(251,252,254)] bg-clip-padding',\n\n                // Focus and validation\n                'has-[[data-slot=input-group-control]:focus-visible]:border-sky-600',\n                'has-[[data-slot=field-control]:focus-visible]:border-sky-600',\n                'has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'has-[[data-slot=field-control]:focus-visible]:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'has-[[data-slot][aria-invalid=true]]:border-rose-600!',\n\n                // Disabled\n                'has-disabled:opacity-50',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nconst inputGroupAddonVariants = cva(\n    [\n        // Layout\n        'flex h-auto items-center justify-center gap-2',\n        'px-2 text-sm',\n\n        // Interaction\n        'cursor-text select-none',\n\n        // Disabled\n        'group-data-[disabled=true]/input-group:opacity-50',\n\n        // Children\n        \"[&>svg:not([class*='size-'])]:size-3\",\n        '[&>kbd]:rounded-[calc(var(--radius)-5px)]',\n    ].join(' '),\n    {\n        variants: {\n            align: {\n                'inline-start': [\n                    // Layout\n                    'order-first pl-2',\n\n                    // Child offsets\n                    'has-[>button]:ml-[-0.3rem]',\n                    'has-[>kbd]:ml-[-0.15rem]',\n                ].join(' '),\n                'inline-end': [\n                    // Layout\n                    'order-last pr-2',\n\n                    // Child offsets\n                    'has-[>button]:mr-[-0.3rem]',\n                    'has-[>kbd]:mr-[-0.15rem]',\n                ].join(' '),\n                'block-start': [\n                    // Layout\n                    'order-first w-full justify-start',\n                    'px-2.5 pt-2',\n\n                    // State\n                    'group-has-[>input]/input-group:pt-2',\n                    '[.border-b]:pb-2',\n                ].join(' '),\n                'block-end': [\n                    // Layout\n                    'order-last w-full justify-start',\n                    'px-2.5 pb-2',\n\n                    // State\n                    'group-has-[>input]/input-group:pb-2',\n                    '[.border-t]:pt-2',\n                ].join(' '),\n            },\n        },\n        defaultVariants: {\n            align: 'inline-start',\n        },\n    },\n);\n\nfunction InputGroupAddon({\n    className,\n    align = 'inline-start',\n    ...props\n}: ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n    return (\n        <div\n            role=\"group\"\n            data-slot=\"input-group-addon\"\n            data-align={align}\n            className={cn(inputGroupAddonVariants({ align }), className)}\n            onClick={(e) => {\n                if ((e.target as HTMLElement).closest('button')) {\n                    return;\n                }\n                e.currentTarget.parentElement?.querySelector('input')?.focus();\n            }}\n            {...props}\n        />\n    );\n}\n\nconst inputGroupButtonVariants = cva(\n    [\n        // Layout\n        'flex items-center gap-2',\n        'text-gray-500 text-sm',\n\n        // Theme\n        'shadow-none rounded-sm',\n\n        'hover:bg-slate-100',\n    ].join(' '),\n    {\n        variants: {\n            size: {\n                // xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3\",\n                xs: '',\n                sm: '',\n                'icon-xs': 'size-6 [&>svg]:size-3.5 p-0 has-[>svg]:p-0',\n                'icon-sm': '',\n                // 'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n            },\n        },\n        defaultVariants: {\n            size: 'xs',\n        },\n    },\n);\n\nfunction InputGroupButton({\n    className,\n    type = 'button',\n    variant = 'none',\n    size = 'xs',\n    ...props\n}: Omit<ComponentProps<typeof Button>, 'size' | 'type'> &\n    VariantProps<typeof inputGroupButtonVariants> & {\n        type?: 'button' | 'submit' | 'reset'\n        disabled?: boolean\n    }) {\n    return (\n        <Button\n            type={type}\n            data-size={size}\n            variant={variant}\n            className={cn(inputGroupButtonVariants({ size }), className)}\n            {...props}\n        />\n    );\n}\n\nfunction InputGroupText({ className, ...props }: ComponentProps<'span'>) {\n    return (\n        <span\n            className={cn(\n                // Layout\n                'flex items-center gap-2 text-sm',\n\n                // Theme\n                'text-gray-500',\n\n                // Icons\n                \"[&_svg:not([class*='size-'])]:size-3\",\n                '[&_svg]:pointer-events-none',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction InputGroupInput({\n    className,\n    ...props\n}: Omit<ComponentProps<'input'>, 'size' | 'width'>) {\n    return (\n        <Input\n            data-slot=\"input-group-control\"\n            className={cn(\n                // Layout\n                'flex-1',\n                'rounded-none border-0',\n\n                // Theme\n                'bg-transparent',\n                'shadow-none!',\n\n                // Disabled\n                'disabled:bg-transparent',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction InputGroupTextarea({\n    className,\n    ...props\n}: ComponentProps<'textarea'>) {\n    return (\n        <Textarea\n            data-slot=\"input-group-control\"\n            className={cn(\n                // Layout\n                'flex-1',\n                'rounded-none border-0 py-2',\n                'resize-none',\n\n                // Theme\n                'bg-transparent',\n                'shadow-none!',\n\n                // Disabled\n                'disabled:bg-transparent',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport {\n    InputGroup,\n    InputGroupAddon,\n    InputGroupButton,\n    InputGroupText,\n    InputGroupInput,\n    InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;;AAQA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAgC;AAChE,QACI,oBAAC,OAAD;EACI,aAAU;EACV,MAAK;EACL,WAAW,GAEP,4EACA,+EACA,mFACA,gDACA,kDACA,mDACA,qDAGA,cACA,wCACA,yCAGA,sEACA,gEACA,kJACA,4IACA,yDAGA,2BAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,IAAM,0BAA0B,IAC5B;CAEI;CACA;CAGA;CAGA;CAGA;CACA;CACH,CAAC,KAAK,IAAI,EACX;CACI,UAAU,EACN,OAAO;EACH,gBAAgB;GAEZ;GAGA;GACA;GACH,CAAC,KAAK,IAAI;EACX,cAAc;GAEV;GAGA;GACA;GACH,CAAC,KAAK,IAAI;EACX,eAAe;GAEX;GACA;GAGA;GACA;GACH,CAAC,KAAK,IAAI;EACX,aAAa;GAET;GACA;GAGA;GACA;GACH,CAAC,KAAK,IAAI;EACd,EACJ;CACD,iBAAiB,EACb,OAAO,gBACV;CACJ,CACJ;AAED,SAAS,gBAAgB,EACrB,WACA,QAAQ,gBACR,GAAG,SACkE;AACrE,QACI,oBAAC,OAAD;EACI,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,MAAM;AACZ,OAAK,EAAE,OAAuB,QAAQ,SAAS,CAC3C;AAEJ,KAAE,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAElE,GAAI;EACN,CAAA;;AAIV,IAAM,2BAA2B,IAC7B;CAEI;CACA;CAGA;CAEA;CACH,CAAC,KAAK,IAAI,EACX;CACI,UAAU,EACN,MAAM;EAEF,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;EAEd,EACJ;CACD,iBAAiB,EACb,MAAM,MACT;CACJ,CACJ;AAED,SAAS,iBAAiB,EACtB,WACA,OAAO,UACP,UAAU,QACV,OAAO,MACP,GAAG,SAKA;AACH,QACI,oBAAC,QAAD;EACU;EACN,aAAW;EACF;EACT,WAAW,GAAG,yBAAyB,EAAE,MAAM,CAAC,EAAE,UAAU;EAC5D,GAAI;EACN,CAAA;;AAIV,SAAS,eAAe,EAAE,WAAW,GAAG,SAAiC;AACrE,QACI,oBAAC,QAAD;EACI,WAAW,GAEP,mCAGA,iBAGA,wCACA,+BAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,gBAAgB,EACrB,WACA,GAAG,SAC6C;AAChD,QACI,oBAAC,OAAD;EACI,aAAU;EACV,WAAW,GAEP,UACA,yBAGA,kBACA,gBAGA,2BAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,mBAAmB,EACxB,WACA,GAAG,SACwB;AAC3B,QACI,oBAAC,UAAD;EACI,aAAU;EACV,WAAW,GAEP,UACA,8BACA,eAGA,kBACA,gBAGA,2BAEA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/Label.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from 'react';
+declare function Label({ className, ...props }: ComponentProps<'label'>): 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":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,iBAAS,KAAK,CAAC,EACX,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,CAAC,2CAQzB;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Label.js

@@ -0,0 +1,15 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Label.tsx
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn("text-sm font-bold leading-none", className),
+		...props
+	});
+}
+//#endregion
+export { Label };
+
+//# sourceMappingURL=Label.js.map

package/dist/components/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","names":[],"sources":["../../src/components/Label.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction Label({\n    className,\n    ...props\n}: ComponentProps<'label'>) {\n    return (\n        <label\n            data-slot=\"label\"\n            className={cn('text-sm font-bold leading-none', className)}\n            {...props}\n        />\n    );\n};\n\nexport { Label };\n"],"mappings":";;;;AAIA,SAAS,MAAM,EACX,WACA,GAAG,SACqB;AACxB,QACI,oBAAC,SAAD;EACI,aAAU;EACV,WAAW,GAAG,kCAAkC,UAAU;EAC1D,GAAI;EACN,CAAA"}

package/dist/components/Lightswitch.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { VariantProps } from 'class-variance-authority';
+declare const lightswitchVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Lightswitch({ className, size, ...props }: ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof lightswitchVariants>): import("react/jsx-runtime").JSX.Element;
+export { Lightswitch };
+//# sourceMappingURL=Lightswitch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightswitch.d.ts","sourceRoot":"","sources":["../../src/components/Lightswitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,mBAAmB;;8EAWvB,CAAC;AA4BH,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,2CAmExF;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Lightswitch.js

@@ -0,0 +1,56 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/Lightswitch.tsx
+var lightswitchVariants = cva("", {
+	variants: { size: {
+		xs: "h-[16px] w-[24px] rounded-[8px]",
+		sm: "h-[18px] w-[28px] rounded-[9px]",
+		default: "h-[22px] w-[34px] rounded-[11px]"
+	} },
+	defaultVariants: { size: "default" }
+});
+var lightswitchThumbVariants = cva("", {
+	variants: { size: {
+		xs: "size-[12px] translate-x-[2px] data-checked:translate-x-[calc(100%-2px)]",
+		sm: "size-[14px] translate-x-[2px] data-checked:translate-x-[calc(100%-2px)]",
+		default: "size-[18px] translate-x-[2px] data-checked:translate-x-[calc(100%-4px)]"
+	} },
+	defaultVariants: { size: "default" }
+});
+var lightswitchIconVariants = cva("", {
+	variants: { size: {
+		xs: "hidden",
+		sm: "size-[10px]",
+		default: "size-[14px]"
+	} },
+	defaultVariants: { size: "default" }
+});
+function Lightswitch({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		className: cn("peer outline-none inline-flex shrink-0 items-center cursor-pointer select-none", lightswitchVariants({ size }), "shadow-[inset_0_0_0_1px_rgba(96,126,160,0.8)]", "bg-gray-200", "data-checked:bg-teal-550", "data-checked:shadow-[inset_0_0_0_1px_#008779]", "focus-visible:!shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_6px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.8)]", "aria-invalid:!shadow-[0_0_0_1px_#ffffff,0_0_0_2.5px_var(--color-rose-600)]", "aria-invalid:focus-visible:!shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-rose-600),0_0_6px_1px_hsl(from_var(--color-rose-600)_h_s_l/0.8)]", "disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, {
+			"data-slot": "switch-thumb",
+			className: cn("pointer-events-none block rounded-full", "flex items-center justify-center", lightswitchThumbVariants({ size }), "bg-white", "shadow-[inset_0_0_0_1px_rgba(96,126,160,0.8)]", "transition-transform", "data-checked:shadow-[inset_0_0_0_1px_#008779]"),
+			children: /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				role: "img",
+				"aria-hidden": "true",
+				viewBox: "0 0 640 640",
+				className: cn(lightswitchIconVariants({ size }), "text-teal-550", "opacity-0", "translate-y-[1px]", "transition-opacity", "[[data-checked]_&]:opacity-100"),
+				children: /* @__PURE__ */ jsx("path", {
+					fill: "currentColor",
+					d: "M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z"
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { Lightswitch };
+
+//# sourceMappingURL=Lightswitch.js.map

package/dist/components/Lightswitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightswitch.js","names":[],"sources":["../../src/components/Lightswitch.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst lightswitchVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'h-[16px] w-[24px] rounded-[8px]',\n            sm: 'h-[18px] w-[28px] rounded-[9px]',\n            default: 'h-[22px] w-[34px] rounded-[11px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst lightswitchThumbVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'size-[12px] translate-x-[2px] data-checked:translate-x-[calc(100%-2px)]',\n            sm: 'size-[14px] translate-x-[2px] data-checked:translate-x-[calc(100%-2px)]',\n            default: 'size-[18px] translate-x-[2px] data-checked:translate-x-[calc(100%-4px)]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst lightswitchIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'hidden',\n            sm: 'size-[10px]',\n            default: 'size-[14px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nfunction Lightswitch({\n    className,\n    size = 'default',\n    ...props\n}: ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof lightswitchVariants>) {\n    return (\n        <SwitchPrimitive.Root\n            data-slot=\"switch\"\n            className={cn(\n                // Reset\n                'peer outline-none inline-flex shrink-0 items-center cursor-pointer select-none',\n\n                // Theme\n                lightswitchVariants({ size }),\n                'shadow-[inset_0_0_0_1px_rgba(96,126,160,0.8)]',\n                'bg-gray-200',\n\n                // State\n                'data-checked:bg-teal-550',\n                'data-checked:shadow-[inset_0_0_0_1px_#008779]',\n\n                // Hover & Focus\n                'focus-visible:!shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_6px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.8)]',\n                'aria-invalid:!shadow-[0_0_0_1px_#ffffff,0_0_0_2.5px_var(--color-rose-600)]',\n                'aria-invalid:focus-visible:!shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-rose-600),0_0_6px_1px_hsl(from_var(--color-rose-600)_h_s_l/0.8)]',\n\n                // Disabled styles\n                'disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n\n                className,\n            )}\n            {...props}\n        >\n            <SwitchPrimitive.Thumb\n                data-slot=\"switch-thumb\"\n                className={cn(\n                    // Reset\n                    'pointer-events-none block rounded-full',\n                    'flex items-center justify-center',\n\n                    // Theme\n                    lightswitchThumbVariants({ size }),\n                    'bg-white',\n                    'shadow-[inset_0_0_0_1px_rgba(96,126,160,0.8)]',\n\n                    // Transitions and state changes\n                    'transition-transform',\n                    'data-checked:shadow-[inset_0_0_0_1px_#008779]',\n                )}\n            >\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    role=\"img\"\n                    aria-hidden=\"true\"\n                    viewBox=\"0 0 640 640\"\n                    className={cn(\n                        lightswitchIconVariants({ size }),\n                        'text-teal-550',\n                        'opacity-0',\n                        'translate-y-[1px]',\n\n                        // Transitions and state changes\n                        'transition-opacity',\n                        '[[data-checked]_&]:opacity-100',\n                    )}\n                >\n                    <path fill=\"currentColor\" d=\"M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z\" />\n                </svg>\n            </SwitchPrimitive.Thumb>\n        </SwitchPrimitive.Root>\n    );\n};\n\nexport { Lightswitch };\n"],"mappings":";;;;;;AAMA,IAAM,sBAAsB,IAAI,IAAI;CAChC,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACZ,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAEF,IAAM,2BAA2B,IAAI,IAAI;CACrC,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACZ,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAEF,IAAM,0BAA0B,IAAI,IAAI;CACpC,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACZ,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAEF,SAAS,YAAY,EACjB,WACA,OAAO,WACP,GAAG,SACoF;AACvF,QACI,oBAAC,OAAgB,MAAjB;EACI,aAAU;EACV,WAAW,GAEP,kFAGA,oBAAoB,EAAE,MAAM,CAAC,EAC7B,iDACA,eAGA,4BACA,iDAGA,iIACA,8EACA,gJAGA,6GAEA,UACH;EACD,GAAI;YAEJ,oBAAC,OAAgB,OAAjB;GACI,aAAU;GACV,WAAW,GAEP,0CACA,oCAGA,yBAAyB,EAAE,MAAM,CAAC,EAClC,YACA,iDAGA,wBACA,gDACH;aAED,oBAAC,OAAD;IACI,OAAM;IACN,MAAK;IACL,eAAY;IACZ,SAAQ;IACR,WAAW,GACP,wBAAwB,EAAE,MAAM,CAAC,EACjC,iBACA,aACA,qBAGA,sBACA,iCACH;cAED,oBAAC,QAAD;KAAM,MAAK;KAAe,GAAE;KAA+K,CAAA;IACzM,CAAA;GACc,CAAA;EACL,CAAA"}

package/dist/components/Markdown.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+type MarkdownProps = Omit<ComponentProps<'div'>, 'dangerouslySetInnerHTML' | 'children'> & {
+    content: string;
+    /** When true (default), only inline markdown (bold, italic, links) is rendered. When false, full block markdown (headers, lists, etc.) is supported. */
+    inline?: boolean;
+    /** The HTML element to render as. Defaults to 'div' for block, 'span' for inline. */
+    as?: 'div' | 'span' | 'p';
+};
+export declare const Markdown: import('react').ForwardRefExoticComponent<Omit<MarkdownProps, "ref"> & import('react').RefAttributes<HTMLDivElement | HTMLParagraphElement | HTMLSpanElement>>;
+export {};
+//# sourceMappingURL=Markdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/components/Markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAwB,MAAM,OAAO,CAAC;AAIlE,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,UAAU,CAAC,GAAG;IACvF,OAAO,EAAE,MAAM,CAAC;IAChB,wJAAwJ;IACxJ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qFAAqF;IACrF,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,GAAG,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,QAAQ,gKA6DpB,CAAC"}

package/dist/components/Markdown.js

@@ -0,0 +1,46 @@
+import { cn } from "../utils/classes.js";
+import { utils_exports } from "../utils/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Markdown.tsx
+var Markdown = forwardRef(({ content, inline = true, as, className, ...props }, ref) => {
+	let html = "";
+	if (content) html = inline ? (0, utils_exports.renderInlineMarkdown)(content) : (0, utils_exports.renderMarkdown)(content);
+	const Component = as ?? (inline ? "span" : "div");
+	if (!html) return null;
+	if (Component === "span") return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cn([
+			"[&_a]:text-blue-500 [&_a]:hover:underline",
+			"[&_code]:rounded [&_code]:border [&_code]:border-slate-200 [&_code]:bg-slate-150 [&_code]:px-[3px] [&_code]:py-[1px] [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-gray-700",
+			className
+		]),
+		dangerouslySetInnerHTML: { __html: html },
+		...props
+	});
+	if (Component === "p") return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: cn([
+			"[&_a]:text-blue-500 [&_a]:hover:underline",
+			"[&_code]:rounded [&_code]:border [&_code]:border-slate-200 [&_code]:bg-slate-150 [&_code]:px-[3px] [&_code]:py-[1px] [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-gray-700",
+			className
+		]),
+		dangerouslySetInnerHTML: { __html: html },
+		...props
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn([
+			"[&_a]:text-blue-500 [&_a]:hover:underline",
+			"[&_code]:rounded [&_code]:border [&_code]:border-slate-200 [&_code]:bg-slate-150 [&_code]:px-[3px] [&_code]:py-[1px] [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-gray-700",
+			className
+		]),
+		dangerouslySetInnerHTML: { __html: html },
+		...props
+	});
+});
+Markdown.displayName = "Markdown";
+//#endregion
+export { Markdown };
+
+//# sourceMappingURL=Markdown.js.map

package/dist/components/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.js","names":[],"sources":["../../src/components/Markdown.tsx"],"sourcesContent":["import { type ComponentProps, type Ref, forwardRef } from 'react';\nimport { renderMarkdown, renderInlineMarkdown } from '@verbb/plugin-kit-react/utils';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\ntype MarkdownProps = Omit<ComponentProps<'div'>, 'dangerouslySetInnerHTML' | 'children'> & {\n    content: string;\n    /** When true (default), only inline markdown (bold, italic, links) is rendered. When false, full block markdown (headers, lists, etc.) is supported. */\n    inline?: boolean;\n    /** The HTML element to render as. Defaults to 'div' for block, 'span' for inline. */\n    as?: 'div' | 'span' | 'p';\n};\n\nexport const Markdown = forwardRef<HTMLDivElement | HTMLSpanElement | HTMLParagraphElement, MarkdownProps>(\n    ({\n        content, inline = true, as, className, ...props\n    }, ref) => {\n        let html = '';\n        if (content) {\n            html = inline ? renderInlineMarkdown(content) : renderMarkdown(content);\n        }\n\n        const Component = as ?? (inline ? 'span' : 'div');\n\n        if (!html) {\n            return null;\n        }\n\n        if (Component === 'span') {\n            return (\n                <span\n                    ref={ref as Ref<HTMLSpanElement>}\n                    className={cn([\n                        '[&_a]:text-blue-500 [&_a]:hover:underline',\n                        '[&_code]:rounded [&_code]:border [&_code]:border-slate-200 [&_code]:bg-slate-150 [&_code]:px-[3px] [&_code]:py-[1px] [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-gray-700',\n\n                        className,\n                    ])}\n                    dangerouslySetInnerHTML={{ __html: html }}\n                    {...props}\n                />\n            );\n        }\n\n        if (Component === 'p') {\n            return (\n                <p\n                    ref={ref as Ref<HTMLParagraphElement>}\n                    className={cn([\n                        '[&_a]:text-blue-500 [&_a]:hover:underline',\n                        '[&_code]:rounded [&_code]:border [&_code]:border-slate-200 [&_code]:bg-slate-150 [&_code]:px-[3px] [&_code]:py-[1px] [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-gray-700',\n\n                        className,\n                    ])}\n                    dangerouslySetInnerHTML={{ __html: html }}\n                    {...props}\n                />\n            );\n        }\n\n        return (\n            <div\n                ref={ref as Ref<HTMLDivElement>}\n                className={cn([\n                    '[&_a]:text-blue-500 [&_a]:hover:underline',\n                    '[&_code]:rounded [&_code]:border [&_code]:border-slate-200 [&_code]:bg-slate-150 [&_code]:px-[3px] [&_code]:py-[1px] [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-gray-700',\n\n                    className,\n                ])}\n                dangerouslySetInnerHTML={{ __html: html }}\n                {...props}\n            />\n        );\n    },\n);\n\nMarkdown.displayName = 'Markdown';\n"],"mappings":";;;;;AAYA,IAAa,WAAW,YACnB,EACG,SAAS,SAAS,MAAM,IAAI,WAAW,GAAG,SAC3C,QAAQ;CACP,IAAI,OAAO;AACX,KAAI,QACA,QAAO,UAAA,GAAA,cAAA,sBAA8B,QAAQ,IAAA,GAAA,cAAA,gBAAkB,QAAQ;CAG3E,MAAM,YAAY,OAAO,SAAS,SAAS;AAE3C,KAAI,CAAC,KACD,QAAO;AAGX,KAAI,cAAc,OACd,QACI,oBAAC,QAAD;EACS;EACL,WAAW,GAAG;GACV;GACA;GAEA;GACH,CAAC;EACF,yBAAyB,EAAE,QAAQ,MAAM;EACzC,GAAI;EACN,CAAA;AAIV,KAAI,cAAc,IACd,QACI,oBAAC,KAAD;EACS;EACL,WAAW,GAAG;GACV;GACA;GAEA;GACH,CAAC;EACF,yBAAyB,EAAE,QAAQ,MAAM;EACzC,GAAI;EACN,CAAA;AAIV,QACI,oBAAC,OAAD;EACS;EACL,WAAW,GAAG;GACV;GACA;GAEA;GACH,CAAC;EACF,yBAAyB,EAAE,QAAQ,MAAM;EACzC,GAAI;EACN,CAAA;EAGb;AAED,SAAS,cAAc"}

package/dist/components/MenuButton.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './Button.jsx';
+declare const menuTriggerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    split?: "split" | "none" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type MenuButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+type MenuButtonSize = VariantProps<typeof menuTriggerVariants>['size'];
+type MenuMainAction = {
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    iconPosition?: 'start' | 'end' | 'overlay';
+    iconClassName?: string;
+    labelClassName?: string;
+    onClick?: () => void;
+};
+type MenuActionItem = {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    variant?: 'default' | 'destructive';
+    onClick?: () => void;
+};
+type MenuSeparatorItem = {
+    type: 'separator';
+};
+type MenuItem = MenuActionItem | MenuSeparatorItem;
+type MenuButtonProps = React.ComponentProps<'div'> & {
+    mainAction?: MenuMainAction;
+    menuItems?: MenuItem[];
+    variant?: MenuButtonVariant;
+    size?: MenuButtonSize;
+    loading?: boolean;
+    disabled?: boolean;
+    defaultOpen?: boolean;
+    modal?: boolean;
+};
+export declare const MenuButton: ({ mainAction, menuItems, variant, size, loading, disabled, className, defaultOpen, modal, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MenuButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../src/components/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAU,cAAc,EAAE,MAAM,cAAc,CAAC;AAwBtD,QAAA,MAAM,mBAAmB;;;8EAkBvB,CAAC;AAiBH,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;AACxE,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvE,KAAK,cAAc,GAAG;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,cAAc,GAAG;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACrB,IAAI,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,KAAK,QAAQ,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAEnD,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACjD,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,sGAWxB,eAAe,4CA4FjB,CAAC"}

package/dist/components/MenuButton.js

@@ -0,0 +1,122 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { useTranslation } from "../hooks/useTranslation.js";
+import "../hooks/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./DropdownMenu.js";
+import { Button } from "./Button.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown } from "@fortawesome/pro-solid-svg-icons";
+//#region src/components/MenuButton.tsx
+var menuMainButtonVariants = cva("!rounded-r-none", {
+	variants: { split: {
+		split: null,
+		none: "!border-r-0"
+	} },
+	defaultVariants: { split: "none" }
+});
+var menuTriggerVariants = cva("!rounded-l-none !border-l-0", {
+	variants: {
+		size: {
+			xs: "px-1.5 py-[3px]",
+			sm: "px-1.5 py-[5px]",
+			default: "px-1.5 py-[7px]",
+			lg: "px-2 py-[9px]",
+			xl: "px-2.5 py-[10px]"
+		},
+		split: {
+			split: "-ml-px",
+			none: "ml-[1px]"
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		split: "none"
+	}
+});
+var menuTriggerIconVariants = cva("", {
+	variants: { size: {
+		xs: "size-2.5",
+		sm: "size-3",
+		default: "size-3",
+		lg: "size-3.5",
+		xl: "size-4"
+	} },
+	defaultVariants: { size: "default" }
+});
+var MenuButton = ({ mainAction, menuItems = [], variant = "default", size = "default", loading = false, disabled = false, className = "", defaultOpen = false, modal = true, ...props }) => {
+	const t = useTranslation();
+	const splitBorderVariant = variant === "outline" || variant === "dashed" ? "split" : "none";
+	const triggerClass = menuTriggerVariants({
+		size,
+		split: splitBorderVariant
+	});
+	const mainButtonClass = menuMainButtonVariants({ split: splitBorderVariant });
+	const handleMainAction = () => {
+		mainAction?.onClick?.();
+	};
+	const renderMenuItems = () => {
+		return menuItems.map((item, index) => {
+			if ("type" in item && item.type === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, `separator-${index}`);
+			const actionItem = item;
+			return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: () => {
+					actionItem.onClick?.();
+				},
+				variant: actionItem.variant,
+				children: [actionItem.icon && /* @__PURE__ */ jsx("span", {
+					className: cn("mr-2"),
+					children: actionItem.icon
+				}), actionItem.label]
+			}, index);
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant,
+			size,
+			loading,
+			disabled,
+			onClick: handleMainAction,
+			className: mainButtonClass,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: cn("inline-flex items-center", mainAction?.icon && mainAction?.label && mainAction?.iconPosition !== "overlay" ? "gap-2" : "", mainAction?.iconPosition === "overlay" ? "relative" : ""),
+				children: [mainAction?.icon ? /* @__PURE__ */ jsx("span", {
+					className: cn(mainAction?.iconPosition === "overlay" ? "absolute inset-0 flex items-center justify-center pointer-events-none" : "", mainAction?.iconClassName || ""),
+					children: mainAction.icon
+				}) : null, mainAction?.label ? /* @__PURE__ */ jsx("span", {
+					className: mainAction?.labelClassName || "",
+					children: mainAction.label
+				}) : null]
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenu, {
+			size,
+			defaultOpen,
+			modal,
+			children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				disabled,
+				render: /* @__PURE__ */ jsx(Button, {
+					variant,
+					size: "none",
+					disabled,
+					className: triggerClass,
+					"aria-label": t("Open menu")
+				}),
+				children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faChevronDown,
+					className: cn(menuTriggerIconVariants({ size }), "transition-transform data-[popup-open]:rotate-180")
+				})
+			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "end",
+				children: renderMenuItems()
+			})]
+		})]
+	});
+};
+//#endregion
+export { MenuButton };
+
+//# sourceMappingURL=MenuButton.js.map

package/dist/components/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","names":[],"sources":["../../src/components/MenuButton.tsx"],"sourcesContent":["import type React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown } from '@fortawesome/pro-solid-svg-icons';\n\nimport { Button, buttonVariants } from './Button.jsx';\nimport {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuSeparator,\n    DropdownMenuTrigger,\n} from './DropdownMenu.jsx';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\nconst menuMainButtonVariants = cva('!rounded-r-none', {\n    variants: {\n        split: {\n            split: null,\n            none: '!border-r-0',\n        },\n    },\n    defaultVariants: {\n        split: 'none',\n    },\n});\n\nconst menuTriggerVariants = cva('!rounded-l-none !border-l-0', {\n    variants: {\n        size: {\n            xs: 'px-1.5 py-[3px]',\n            sm: 'px-1.5 py-[5px]',\n            default: 'px-1.5 py-[7px]',\n            lg: 'px-2 py-[9px]',\n            xl: 'px-2.5 py-[10px]',\n        },\n        split: {\n            split: '-ml-px',\n            none: 'ml-[1px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        split: 'none',\n    },\n});\n\nconst menuTriggerIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'size-2.5',\n            sm: 'size-3',\n            default: 'size-3',\n            lg: 'size-3.5',\n            xl: 'size-4',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\ntype MenuButtonVariant = VariantProps<typeof buttonVariants>['variant'];\ntype MenuButtonSize = VariantProps<typeof menuTriggerVariants>['size'];\n\ntype MenuMainAction = {\n    label?: React.ReactNode;\n    icon?: React.ReactNode;\n    iconPosition?: 'start' | 'end' | 'overlay';\n    iconClassName?: string;\n    labelClassName?: string;\n    onClick?: () => void;\n};\n\ntype MenuActionItem = {\n    label: React.ReactNode;\n    icon?: React.ReactNode;\n    variant?: 'default' | 'destructive';\n    onClick?: () => void;\n};\n\ntype MenuSeparatorItem = {\n    type: 'separator';\n};\n\ntype MenuItem = MenuActionItem | MenuSeparatorItem;\n\ntype MenuButtonProps = React.ComponentProps<'div'> & {\n    mainAction?: MenuMainAction;\n    menuItems?: MenuItem[];\n    variant?: MenuButtonVariant;\n    size?: MenuButtonSize;\n    loading?: boolean;\n    disabled?: boolean;\n    defaultOpen?: boolean;\n    modal?: boolean;\n};\n\nexport const MenuButton = ({\n    mainAction,\n    menuItems = [],\n    variant = 'default',\n    size = 'default',\n    loading = false,\n    disabled = false,\n    className = '',\n    defaultOpen = false,\n    modal = true,\n    ...props\n}: MenuButtonProps) => {\n    const t = useTranslation();\n    const hasSplitBorder = variant === 'outline' || variant === 'dashed';\n    const splitBorderVariant = hasSplitBorder ? 'split' : 'none';\n\n    const triggerClass = menuTriggerVariants({ size, split: splitBorderVariant });\n    const mainButtonClass = menuMainButtonVariants({ split: splitBorderVariant });\n\n    const handleMainAction = () => {\n        mainAction?.onClick?.();\n    };\n\n    const renderMenuItems = () => {\n        return menuItems.map((item, index) => {\n            if ('type' in item && item.type === 'separator') {\n                return <DropdownMenuSeparator key={`separator-${index}`} />;\n            }\n\n            const actionItem = item as MenuActionItem;\n\n            return (\n                <DropdownMenuItem\n                    key={index}\n                    onClick={() => { actionItem.onClick?.(); }}\n                    variant={actionItem.variant}\n                >\n                    {actionItem.icon && (\n                        <span className={cn('mr-2')}>{actionItem.icon}</span>\n                    )}\n                    {actionItem.label}\n                </DropdownMenuItem>\n            );\n        });\n    };\n\n    return (\n        <div className={cn('inline-flex', className)} {...props}>\n            <Button\n                variant={variant}\n                size={size}\n                loading={loading}\n                disabled={disabled}\n                onClick={handleMainAction}\n                className={mainButtonClass}\n            >\n                <span className={cn(\n                    'inline-flex items-center',\n                    mainAction?.icon && mainAction?.label && mainAction?.iconPosition !== 'overlay' ? 'gap-2' : '',\n                    mainAction?.iconPosition === 'overlay' ? 'relative' : '',\n                )}>\n                    {mainAction?.icon ? (\n                        <span className={cn(\n                            mainAction?.iconPosition === 'overlay'\n                                ? 'absolute inset-0 flex items-center justify-center pointer-events-none'\n                                : '',\n                            mainAction?.iconClassName || '',\n                        )}>{mainAction.icon}</span>\n                    ) : null}\n                    {mainAction?.label ? (\n                        <span className={mainAction?.labelClassName || ''}>{mainAction.label}</span>\n                    ) : null}\n                </span>\n            </Button>\n\n            <DropdownMenu size={size} defaultOpen={defaultOpen} modal={modal}>\n                <DropdownMenuTrigger\n                    disabled={disabled}\n                    render={(\n                        <Button\n                            variant={variant}\n                            size=\"none\"\n                            disabled={disabled}\n                            className={triggerClass}\n                            aria-label={t('Open menu')}\n                        />\n                    )}\n                >\n                    <FontAwesomeIcon\n                        icon={faChevronDown}\n                        className={cn(\n                            menuTriggerIconVariants({ size }),\n                            'transition-transform data-[popup-open]:rotate-180',\n                        )}\n                    />\n                </DropdownMenuTrigger>\n\n                <DropdownMenuContent align=\"end\">\n                    {renderMenuItems()}\n                </DropdownMenuContent>\n            </DropdownMenu>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAiBA,IAAM,yBAAyB,IAAI,mBAAmB;CAClD,UAAU,EACN,OAAO;EACH,OAAO;EACP,MAAM;EACT,EACJ;CACD,iBAAiB,EACb,OAAO,QACV;CACJ,CAAC;AAEF,IAAM,sBAAsB,IAAI,+BAA+B;CAC3D,UAAU;EACN,MAAM;GACF,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACP;EACD,OAAO;GACH,OAAO;GACP,MAAM;GACT;EACJ;CACD,iBAAiB;EACb,MAAM;EACN,OAAO;EACV;CACJ,CAAC;AAEF,IAAM,0BAA0B,IAAI,IAAI;CACpC,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACP,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAsCF,IAAa,cAAc,EACvB,YACA,YAAY,EAAE,EACd,UAAU,WACV,OAAO,WACP,UAAU,OACV,WAAW,OACX,YAAY,IACZ,cAAc,OACd,QAAQ,MACR,GAAG,YACgB;CACnB,MAAM,IAAI,gBAAgB;CAE1B,MAAM,qBADiB,YAAY,aAAa,YAAY,WAChB,UAAU;CAEtD,MAAM,eAAe,oBAAoB;EAAE;EAAM,OAAO;EAAoB,CAAC;CAC7E,MAAM,kBAAkB,uBAAuB,EAAE,OAAO,oBAAoB,CAAC;CAE7E,MAAM,yBAAyB;AAC3B,cAAY,WAAW;;CAG3B,MAAM,wBAAwB;AAC1B,SAAO,UAAU,KAAK,MAAM,UAAU;AAClC,OAAI,UAAU,QAAQ,KAAK,SAAS,YAChC,QAAO,oBAAC,uBAAD,EAAoD,EAAxB,aAAa,QAAW;GAG/D,MAAM,aAAa;AAEnB,UACI,qBAAC,kBAAD;IAEI,eAAe;AAAE,gBAAW,WAAW;;IACvC,SAAS,WAAW;cAHxB,CAKK,WAAW,QACR,oBAAC,QAAD;KAAM,WAAW,GAAG,OAAO;eAAG,WAAW;KAAY,CAAA,EAExD,WAAW,MACG;MARV,MAQU;IAEzB;;AAGN,QACI,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,UAAU;EAAE,GAAI;YAAlD,CACI,oBAAC,QAAD;GACa;GACH;GACG;GACC;GACV,SAAS;GACT,WAAW;aAEX,qBAAC,QAAD;IAAM,WAAW,GACb,4BACA,YAAY,QAAQ,YAAY,SAAS,YAAY,iBAAiB,YAAY,UAAU,IAC5F,YAAY,iBAAiB,YAAY,aAAa,GACzD;cAJD,CAKK,YAAY,OACT,oBAAC,QAAD;KAAM,WAAW,GACb,YAAY,iBAAiB,YACvB,0EACA,IACN,YAAY,iBAAiB,GAChC;eAAG,WAAW;KAAY,CAAA,GAC3B,MACH,YAAY,QACT,oBAAC,QAAD;KAAM,WAAW,YAAY,kBAAkB;eAAK,WAAW;KAAa,CAAA,GAC5E,KACD;;GACF,CAAA,EAET,qBAAC,cAAD;GAAoB;GAAmB;GAAoB;aAA3D,CACI,oBAAC,qBAAD;IACc;IACV,QACI,oBAAC,QAAD;KACa;KACT,MAAK;KACK;KACV,WAAW;KACX,cAAY,EAAE,YAAY;KAC5B,CAAA;cAGN,oBAAC,iBAAD;KACI,MAAM;KACN,WAAW,GACP,wBAAwB,EAAE,MAAM,CAAC,EACjC,oDACH;KACH,CAAA;IACgB,CAAA,EAEtB,oBAAC,qBAAD;IAAqB,OAAM;cACtB,iBAAiB;IACA,CAAA,CACX;KACb"}

package/dist/components/ModalTabs.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+declare function ModalTabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ModalTabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function ModalTabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Tab>): import("react/jsx-runtime").JSX.Element;
+declare function ModalTabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
+export { ModalTabs, ModalTabsList, ModalTabsTrigger, ModalTabsContent, };
+//# sourceMappingURL=ModalTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTabs.d.ts","sourceRoot":"","sources":["../../src/components/ModalTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAI5D,iBAAS,SAAS,CAAC,EACf,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAgB3C;AAED,iBAAS,aAAa,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAmB3C;AAED,iBAAS,gBAAgB,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG,CAAC,2CAsC1C;AAED,iBAAS,gBAAgB,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,2CAoB5C;AAED,OAAO,EACH,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACnB,CAAC"}

package/dist/components/ModalTabs.js

@@ -0,0 +1,37 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/ModalTabs.tsx
+function ModalTabs({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "tabs",
+		className: cn("overflow-hidden", "rounded-lg", "h-full", "min-h-0", "flex flex-col", className),
+		...props
+	});
+}
+function ModalTabsList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		className: cn("flex flex-row flex-nowrap", "w-full", "min-w-0 max-w-full", "overflow-x-auto overflow-y-hidden", "bg-white", "z-11", "shadow-[0_1px_5px_#cdd8e440]", "border-b border-b-gray-100", className),
+		...props
+	});
+}
+function ModalTabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-trigger",
+		className: cn("outline-none shadow-none cursor-pointer", "shrink-0 whitespace-nowrap", "relative", "px-[15px]", "pt-[15px]", "pb-[15px]", "text-[#64788d]", "text-[12px]", "font-medium", "uppercase", "hover:text-sky-600", "focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]", "data-[active]:after:content-[\"\"]", "data-[active]:after:absolute", "data-[active]:after:bottom-0", "data-[active]:after:left-[15px]", "data-[active]:after:right-0", "data-[active]:after:w-[calc(100%-30px)]", "data-[active]:after:h-[2px]", "data-[active]:after:bg-sky-600", className),
+		...props
+	});
+}
+function ModalTabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("outline-none", "flex-1 min-h-0", "p-4", "overflow-y-auto", "focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]", className),
+		...props
+	});
+}
+//#endregion
+export { ModalTabs, ModalTabsContent, ModalTabsList, ModalTabsTrigger };
+
+//# sourceMappingURL=ModalTabs.js.map

package/dist/components/ModalTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTabs.js","names":[],"sources":["../../src/components/ModalTabs.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction ModalTabs({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.Root>) {\n    return (\n        <TabsPrimitive.Root\n            data-slot=\"tabs\"\n            className={cn(\n                'overflow-hidden',\n                'rounded-lg',\n                'h-full',\n                'min-h-0',\n                'flex flex-col',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction ModalTabsList({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.List>) {\n    return (\n        <TabsPrimitive.List\n            data-slot=\"tabs-list\"\n            className={cn(\n                'flex flex-row flex-nowrap',\n                'w-full',\n                'min-w-0 max-w-full',\n                'overflow-x-auto overflow-y-hidden',\n                'bg-white',\n                'z-11',\n                'shadow-[0_1px_5px_#cdd8e440]',\n                'border-b border-b-gray-100',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction ModalTabsTrigger({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.Tab>) {\n    return (\n        <TabsPrimitive.Tab\n            data-slot=\"tabs-trigger\"\n            className={cn(\n                'outline-none shadow-none cursor-pointer',\n                'shrink-0 whitespace-nowrap',\n\n                'relative',\n                'px-[15px]',\n                'pt-[15px]',\n                'pb-[15px]',\n                'text-[#64788d]',\n                'text-[12px]',\n                'font-medium',\n                'uppercase',\n\n                // Hover state\n                'hover:text-sky-600',\n\n                // Accessibility\n                'focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]',\n\n                // Active state\n                'data-[active]:after:content-[\"\"]',\n                'data-[active]:after:absolute',\n                'data-[active]:after:bottom-0',\n                'data-[active]:after:left-[15px]',\n                'data-[active]:after:right-0',\n                'data-[active]:after:w-[calc(100%-30px)]',\n                'data-[active]:after:h-[2px]',\n                'data-[active]:after:bg-sky-600',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction ModalTabsContent({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.Panel>) {\n    return (\n        <TabsPrimitive.Panel\n            data-slot=\"tabs-content\"\n            className={cn(\n                // Reset and layout\n                'outline-none',\n                'flex-1 min-h-0',\n\n                'p-4',\n                'overflow-y-auto',\n\n                // Accessibility\n                'focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport {\n    ModalTabs,\n    ModalTabsList,\n    ModalTabsTrigger,\n    ModalTabsContent,\n};\n"],"mappings":";;;;;AAKA,SAAS,UAAU,EACf,WACA,GAAG,SACuC;AAC1C,QACI,oBAAC,KAAc,MAAf;EACI,aAAU;EACV,WAAW,GACP,mBACA,cACA,UACA,WACA,iBAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,cAAc,EACnB,WACA,GAAG,SACuC;AAC1C,QACI,oBAAC,KAAc,MAAf;EACI,aAAU;EACV,WAAW,GACP,6BACA,UACA,sBACA,qCACA,YACA,QACA,gCACA,8BAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,iBAAiB,EACtB,WACA,GAAG,SACsC;AACzC,QACI,oBAAC,KAAc,KAAf;EACI,aAAU;EACV,WAAW,GACP,2CACA,8BAEA,YACA,aACA,aACA,aACA,kBACA,eACA,eACA,aAGA,sBAGA,+DAGA,sCACA,gCACA,gCACA,mCACA,+BACA,2CACA,+BACA,kCAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,iBAAiB,EACtB,WACA,GAAG,SACwC;AAC3C,QACI,oBAAC,KAAc,OAAf;EACI,aAAU;EACV,WAAW,GAEP,gBACA,kBAEA,OACA,mBAGA,+DAEA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/PaneTabs.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+declare function PaneTabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PaneTabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function PaneTabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Tab>): import("react/jsx-runtime").JSX.Element;
+declare function PaneTabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
+export { PaneTabs, PaneTabsList, PaneTabsTrigger, PaneTabsContent, };
+//# sourceMappingURL=PaneTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaneTabs.d.ts","sourceRoot":"","sources":["../../src/components/PaneTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAI5D,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAgB3C;AAED,iBAAS,YAAY,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAiB3C;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG,CAAC,2CAwB1C;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,2CAqB5C;AAED,OAAO,EACH,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,eAAe,GAClB,CAAC"}