@examplary/ui 1.56.0 → 1.58.0

package/dist/components/ui/alert.js

@@ -1,29 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils";
-var alertVariants = cva("relative w-full rounded-xl border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current shadow-shadow border-neutral-800", {
+const alertVariants = cva("relative w-full rounded-xl border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current shadow-shadow border-neutral-800", {
     variants: {
         variant: {
             default: "bg-white border-border",
@@ -37,16 +15,13 @@ var alertVariants = cva("relative w-full rounded-xl border px-4 py-3 text-sm gri
         variant: "default",
     },
 });
-function Alert(_a) {
-    var className = _a.className, variant = _a.variant, props = __rest(_a, ["className", "variant"]);
-    return (_jsx("div", __assign({ "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant: variant }), className) }, props)));
+function Alert({ className, variant, ...props }) {
+    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
 }
-function AlertTitle(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ "data-slot": "alert-title", className: cn("col-start-2 line-clamp-1 min-h-4 font-heading font-medium text-base", className) }, props)));
+function AlertTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-title", className: cn("col-start-2 line-clamp-1 min-h-4 font-heading font-medium text-base", className), ...props }));
 }
-function AlertDescription(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ "data-slot": "alert-description", className: cn("col-start-2 grid justify-items-start gap-1 text-sm font-base [&_p]:leading-relaxed", className) }, props)));
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn("col-start-2 grid justify-items-start gap-1 text-sm font-base [&_p]:leading-relaxed", className), ...props }));
 }
 export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/avatar.js

@@ -3,26 +3,25 @@ import { useMemo } from "react";
 import { BuildingIcon, Globe2Icon, LockIcon, UserIcon, UsersIcon, } from "lucide-react";
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, } from "./tooltip";
 import { cn } from "../../utils";
-export var Avatar = function (_a) {
-    var entity = _a.entity, className = _a.className, _b = _a.size, size = _b === void 0 ? 40 : _b;
-    var initials = useMemo(function () {
+export const Avatar = ({ entity, className, size = 40 }) => {
+    const initials = useMemo(() => {
         if (!entity.name || entity.type !== "user")
             return;
         return getUserInitials(entity.name);
     }, [entity.name, entity.type]);
-    var color = useMemo(function () {
+    const color = useMemo(() => {
         if (entity.color)
             return entity.color;
         if (!entity.id || entity.type !== "user")
             return;
         return getUserColor(entity.id);
     }, [entity.id, entity.type, entity.color]);
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { delayDuration: 100, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: cn("rounded-full flex items-center justify-center shrink-0 bg-cover bg-center", entity.type === "everyone" && "bg-emerald-200", entity.type === "nobody" && "bg-pink-200", entity.type === "org" && "bg-blue-200", entity.type !== "everyone" &&
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { delayDuration: 100, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: cn(`rounded-full flex items-center justify-center shrink-0 bg-cover bg-center`, entity.type === "everyone" && "bg-emerald-200", entity.type === "nobody" && "bg-pink-200", entity.type === "org" && "bg-blue-200", entity.type !== "everyone" &&
                             entity.type !== "org" &&
                             entity.type !== "nobody" &&
                             "bg-zinc-200", className), style: {
                             backgroundImage: entity.avatar
-                                ? "url(".concat(entity.avatar, ")")
+                                ? `url(${entity.avatar})`
                                 : undefined,
                             backgroundColor: color,
                             width: size,
@@ -31,7 +30,7 @@ export var Avatar = function (_a) {
                                 !entity.avatar &&
                                 (initials ? (_jsx("span", { style: { fontSize: size * 0.4, letterSpacing: 0.4 }, className: "text-white font-medium", children: initials })) : (_jsx(UserIcon, { className: cn(color ? "text-white" : "text-zinc-600"), size: size * 0.45 })))] }) }), _jsx(TooltipContent, { className: "max-w-sm py-2", sideOffset: 10, children: _jsx("div", { className: "text-xs [&_svg]:size-4 [&_svg]:shrink-0 flex items-center gap-1.5", children: entity.name || entity.type || "User" }) })] }) }));
 };
-var userColors = [
+const userColors = [
     "#f87171",
     "#fbbf24",
     "#a3e635",
@@ -41,18 +40,23 @@ var userColors = [
     "#a78bfa",
     "#e879f9",
 ];
-var userColorCache = new Map();
-export var getUserColor = function (userId) {
+const userColorCache = new Map();
+export const getUserColor = (userId) => {
     if (userColorCache.has(userId)) {
         return userColorCache.get(userId);
     }
-    var hash = userId
+    const hash = userId
         .split("")
-        .reduce(function (acc, char) { return acc + char.charCodeAt(0); }, 0);
-    var color = userColors[hash % userColors.length];
+        .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    const color = userColors[hash % userColors.length];
     userColorCache.set(userId, color);
     return color;
 };
-export var getUserInitials = function (name) {
-    return name === null || name === void 0 ? void 0 : name.split(" ").map(function (part) { return part[0]; }).join("").substring(0, 2).toUpperCase();
+export const getUserInitials = (name) => {
+    return name
+        ?.split(" ")
+        .map((part) => part[0])
+        .join("")
+        .substring(0, 2)
+        .toUpperCase();
 };

package/dist/components/ui/badge.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-declare const badgeVariants: (props?: {
-    variant?: "default" | "secondary" | "destructive" | "blue" | "bright" | "positive" | "orange";
-} & import("class-variance-authority/types").ClassProp) => string;
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "blue" | "bright" | "positive" | "orange" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
     asChild?: boolean;
 }

package/dist/components/ui/badge.js

@@ -1,31 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils";
-var badgeVariants = cva("font-semibold text-xs rounded-4xl py-0.5 px-2 whitespace-nowrap", {
+const badgeVariants = cva("font-semibold text-xs rounded-4xl py-0.5 px-2 whitespace-nowrap", {
     variants: {
         variant: {
             default: "bg-purplegray-100 text-purplegray-600",
@@ -41,10 +19,9 @@ var badgeVariants = cva("font-semibold text-xs rounded-4xl py-0.5 px-2 whitespac
         variant: "default",
     },
 });
-var Badge = React.forwardRef(function (_a, ref) {
-    var className = _a.className, variant = _a.variant, _b = _a.asChild, asChild = _b === void 0 ? false : _b, props = __rest(_a, ["className", "variant", "asChild"]);
-    var Comp = asChild ? Slot : "span";
-    return (_jsx(Comp, __assign({ className: cn(badgeVariants({ variant: variant, className: className })), ref: ref }, props)));
+const Badge = React.forwardRef(({ className, variant, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "span";
+    return (_jsx(Comp, { className: cn(badgeVariants({ variant, className })), ref: ref, ...props }));
 });
 Badge.displayName = "Badge";
 export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-declare const buttonVariants: (props?: {
-    variant?: "default" | "primary" | "secondary" | "destructive" | "white" | "plain" | "roundedPlain" | "dashed" | "rounded" | "roundedPrimary" | "roundedSecondary" | "roundedWhite";
-    size?: "default" | "sm" | "lg" | "icon" | "icon-lg" | "icon-sm";
-} & import("class-variance-authority/types").ClassProp) => string;
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "primary" | "secondary" | "destructive" | "white" | "plain" | "roundedPlain" | "dashed" | "rounded" | "roundedPrimary" | "roundedSecondary" | "roundedWhite" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-lg" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }

package/dist/components/ui/button.js

@@ -1,31 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils";
-var buttonVariants = cva("inline-flex items-center select-none text-text dark:text-white cursor-pointer justify-center whitespace-nowrap rounded-full font-base ring-offset-white transition-all gap-1.5 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", {
+const buttonVariants = cva("inline-flex items-center select-none text-text dark:text-white cursor-pointer justify-center whitespace-nowrap rounded-full font-base ring-offset-white transition-all gap-1.5 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", {
     variants: {
         variant: {
             default: "bg-nav border border-black dark:bg-zinc-800 dark:border-white hover:shadow-light",
@@ -55,10 +33,9 @@ var buttonVariants = cva("inline-flex items-center select-none text-text dark:te
         size: "default",
     },
 });
-var Button = React.forwardRef(function (_a, ref) {
-    var className = _a.className, variant = _a.variant, size = _a.size, _b = _a.asChild, asChild = _b === void 0 ? false : _b, props = __rest(_a, ["className", "variant", "size", "asChild"]);
-    var Comp = asChild ? Slot : "button";
-    return (_jsx(Comp, __assign({ className: cn(buttonVariants({ variant: variant, size: size, className: className })), ref: ref }, props)));
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
 });
 Button.displayName = "Button";
 export { Button, buttonVariants };

package/dist/components/ui/card.js

@@ -1,56 +1,16 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils";
-var Card = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ ref: ref, className: cn("rounded-xl border border-border bg-white text-black", className) }, props)));
-});
+const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-xl border border-border bg-white text-black", className), ...props })));
 Card.displayName = "Card";
-var CardHeader = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className) }, props)));
-});
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ ref: ref, className: cn("text-xl leading-none font-heading", className) }, props)));
-});
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-xl leading-none font-heading", className), ...props })));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ ref: ref, className: cn("text-sm text-black font-base !mt-3", className) }, props)));
-});
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm text-black font-base !mt-3", className), ...props })));
 CardDescription.displayName = "CardDescription";
-var CardContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ ref: ref, className: cn("p-6 pt-0", className) }, props)));
-});
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
 CardContent.displayName = "CardContent";
-var CardFooter = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ ref: ref, className: cn("flex items-center p-6 pt-0", className) }, props)));
-});
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
 CardFooter.displayName = "CardFooter";
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };

package/dist/components/ui/checkbox.js

@@ -1,34 +1,9 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
 import { cn } from "../../utils";
-var Checkbox = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, __assign({ ref: ref, className: cn("peer size-4.5 shrink-0 outline-none rounded-xs border-2 border-border-accent ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/10 disabled:cursor-not-allowed disabled:text-zinc-400 data-[state=checked]:bg-current data-[state=checked]:border-current", className, "outline") }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "w-full h-full text-white", strokeWidth: 2.6 }) }) })));
-});
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn("peer size-4.5 shrink-0 outline-none rounded-xs border-2 border-border-accent ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/10 disabled:cursor-not-allowed disabled:text-zinc-400 data-[state=checked]:bg-current data-[state=checked]:border-current", className, "outline"), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "w-full h-full text-white", strokeWidth: 2.6 }) }) })));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

package/dist/components/ui/color-picker.js

@@ -1,13 +1,4 @@
 "use client";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { HexColorPicker } from "react-colorful";
@@ -16,7 +7,7 @@ import { Button } from "./button";
 import { Input } from "./input";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { cn } from "../../utils";
-var defaultSwatches = [
+const defaultSwatches = [
     "#f87171",
     "#fbbf24",
     "#a3e635",
@@ -26,14 +17,13 @@ var defaultSwatches = [
     "#a78bfa",
     "#e879f9",
 ];
-var ColorPicker = function (_a) {
-    var value = _a.value, _b = _a.swatches, swatches = _b === void 0 ? defaultSwatches : _b, _c = _a.defaultValue, defaultValue = _c === void 0 ? "#ffffff" : _c, _d = _a.customLabelTitle, customLabelTitle = _d === void 0 ? "Custom" : _d, _e = _a.allowCustom, allowCustom = _e === void 0 ? true : _e, swatchClassName = _a.swatchClassName, className = _a.className, onChange = _a.onChange;
-    var parsedValue = useMemo(function () {
+const ColorPicker = ({ value, swatches = defaultSwatches, defaultValue = "#ffffff", customLabelTitle = "Custom", allowCustom = true, swatchClassName, className, onChange, }) => {
+    const parsedValue = useMemo(() => {
         return (value || defaultValue || "#ffffff").toLowerCase().trim();
     }, [value, defaultValue]);
-    var availableSwatches = useMemo(function () { return Array.from(new Set(__spreadArray([defaultValue], swatches, true).filter(Boolean))); }, [defaultValue, swatches]);
-    var onChangeProxy = function (newValue) {
-        var normalizedValue = newValue.toLowerCase().trim();
+    const availableSwatches = useMemo(() => Array.from(new Set([defaultValue, ...swatches].filter(Boolean))), [defaultValue, swatches]);
+    const onChangeProxy = (newValue) => {
+        const normalizedValue = newValue.toLowerCase().trim();
         if (!/^#([0-9A-F]{3}){1,2}$/i.test(normalizedValue)) {
             onChange("");
             return;
@@ -45,12 +35,11 @@ var ColorPicker = function (_a) {
             onChange(normalizedValue);
         }
     };
-    var hasSwatchSelected = useMemo(function () { return availableSwatches.includes(parsedValue); }, [availableSwatches, parsedValue]);
-    return (_jsxs("div", { className: cn("flex flex-wrap gap-2", className), children: [availableSwatches.map(function (color) { return (_jsx(Button, { style: { backgroundColor: color }, variant: "roundedWhite", size: "sm", className: cn("size-8 p-0", color === parsedValue && "border-black", swatchClassName), onClick: function () { return onChangeProxy(color); } }, color)); }), allowCustom && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "roundedWhite", size: "sm", className: cn("h-8", !hasSwatchSelected && "border-black"), style: {
-                                backgroundColor: !hasSwatchSelected && parsedValue,
-                            }, children: [_jsx(PipetteIcon, {}), customLabelTitle] }) }), _jsxs(PopoverContent, { className: "rounded-xl bg-white p-4", children: [_jsx(HexColorPicker, { color: parsedValue, onChange: onChangeProxy, className: "w-full!" }), _jsx(Input, { className: "w-full mt-2", maxLength: 7, onChange: function (e) {
-                                    var _a;
-                                    onChange((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.value);
+    const hasSwatchSelected = useMemo(() => availableSwatches.includes(parsedValue), [availableSwatches, parsedValue]);
+    return (_jsxs("div", { className: cn("flex flex-wrap gap-2", className), children: [availableSwatches.map((color) => (_jsx(Button, { style: { backgroundColor: color }, variant: "roundedWhite", size: "sm", className: cn("size-8 p-0", color === parsedValue && "border-black", swatchClassName), onClick: () => onChangeProxy(color) }, color))), allowCustom && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "roundedWhite", size: "sm", className: cn("h-8", !hasSwatchSelected && "border-black"), style: {
+                                backgroundColor: !hasSwatchSelected ? parsedValue : "",
+                            }, children: [_jsx(PipetteIcon, {}), customLabelTitle] }) }), _jsxs(PopoverContent, { className: "rounded-xl bg-white p-4", children: [_jsx(HexColorPicker, { color: parsedValue, onChange: onChangeProxy, className: "w-full!" }), _jsx(Input, { className: "w-full mt-2", maxLength: 7, onChange: (e) => {
+                                    onChange(e?.currentTarget?.value);
                                 }, value: parsedValue })] })] }))] }));
 };
 export { ColorPicker };

package/dist/components/ui/command-palette.d.ts

@@ -12,6 +12,6 @@ export type Command = {
  */
 export declare const useCommand: (commandInput: Command) => void;
 export declare const CommandPalette: ({ placeholderText, noResultsText, }: {
-    placeholderText?: string;
-    noResultsText?: string;
+    placeholderText?: string | undefined;
+    noResultsText?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/command-palette.js

@@ -1,97 +1,69 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { create } from "zustand";
 import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut, } from "./command";
 import { replaceShortCut } from "./dropdown";
-var useCommandStore = create()(function (set) { return ({
+const useCommandStore = create()((set) => ({
     commands: [],
-    add: function (command) {
-        return set(function (state) { return ({
-            commands: __spreadArray(__spreadArray([], state.commands.filter(function (cmd) { return cmd.id !== command.id; }), true), [
-                command,
-            ], false),
-        }); });
-    },
-    remove: function (id) {
-        return set(function (state) { return ({
-            commands: state.commands.filter(function (cmd) { return cmd.id !== id; }),
-        }); });
-    },
-}); });
+    add: (command) => set((state) => ({
+        commands: [
+            ...state.commands.filter((cmd) => cmd.id !== command.id),
+            command,
+        ],
+    })),
+    remove: (id) => set((state) => ({
+        commands: state.commands.filter((cmd) => cmd.id !== id),
+    })),
+}));
 /**
  * React hook to register commands for the Command Palette.
  */
-export var useCommand = function (commandInput) {
-    var command = useMemo(function () { return (__assign({ enabled: true }, commandInput)); }, [commandInput]);
-    var addCommand = useCommandStore(function (state) { return state.add; });
-    var removeCommand = useCommandStore(function (state) { return state.remove; });
+export const useCommand = (commandInput) => {
+    const command = useMemo(() => ({
+        enabled: true,
+        ...commandInput,
+    }), [commandInput]);
+    const addCommand = useCommandStore((state) => state.add);
+    const removeCommand = useCommandStore((state) => state.remove);
     useHotkeys(command.shortcut || [], command.action, command);
-    useEffect(function () {
+    useEffect(() => {
         if (command.enabled) {
             addCommand(command);
         }
-        return function () {
+        return () => {
             removeCommand(command.id);
         };
     }, [command, addCommand, removeCommand]);
 };
-var formatShortcut = function (shortcut) {
+const formatShortcut = (shortcut) => {
     if (Array.isArray(shortcut)) {
         return formatShortcut(shortcut[0]);
     }
     return replaceShortCut(shortcut
         .replace("mod", "⌘")
+        .replace("shift+equal", "plus")
         .replace("shift", "⇧")
         .replace("alt", "⌥")
         .replace("ctrl", "⌃")
         .replace("up", "↑")
         .replace("down", "↓")
+        .replace("minus", "−")
+        .replace("equal", "=")
         .replace("backspace", "⌫")
         .replace(/\+/g, "")
+        .replace("plus", "+")
         .toUpperCase());
 };
-export var CommandPalette = function (_a) {
-    var _b = _a.placeholderText, placeholderText = _b === void 0 ? "Type a command or search..." : _b, _c = _a.noResultsText, noResultsText = _c === void 0 ? "No results found." : _c;
-    var _d = useState(false), open = _d[0], setOpen = _d[1];
-    useHotkeys("mod+k", function () { return setOpen(function (open) { return !open; }); });
-    var commands = useCommandStore(function (state) { return state.commands; });
-    var groupedCommands = useMemo(function () {
-        var groups = {};
-        commands.forEach(function (command) {
-            var group = command.group || "";
+export const CommandPalette = ({ placeholderText = "Type a command or search...", noResultsText = "No results found.", }) => {
+    const [open, setOpen] = useState(false);
+    useHotkeys("mod+k", () => setOpen((open) => !open));
+    const commands = useCommandStore((state) => state.commands);
+    const groupedCommands = useMemo(() => {
+        const groups = {};
+        commands.forEach((command) => {
+            const group = command.group || "";
             if (!groups[group]) {
                 groups[group] = [];
             }
@@ -99,15 +71,9 @@ export var CommandPalette = function (_a) {
         });
         return groups;
     }, [commands]);
-    return (_jsxs(CommandDialog, { open: open, onOpenChange: setOpen, children: [_jsx(CommandInput, { placeholder: placeholderText }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: noResultsText }), Object.entries(groupedCommands).map(function (_a) {
-                        var group = _a[0], commands = _a[1];
-                        return (_jsx(CommandGroup, { heading: group, children: commands.length > 0 &&
-                                commands.map(function (_a) {
-                                    var Icon = _a.icon, command = __rest(_a, ["icon"]);
-                                    return (_jsxs(CommandItem, { onSelect: function () {
-                                            command.action();
-                                            setOpen(false);
-                                        }, children: [Icon && _jsx(Icon, {}), _jsx("span", { children: command.label }), command.shortcut && (_jsx(CommandShortcut, { children: formatShortcut(command.shortcut) }))] }, command.id));
-                                }) }, group));
-                    })] })] }));
+    return (_jsxs(CommandDialog, { open: open, onOpenChange: setOpen, children: [_jsx(CommandInput, { placeholder: placeholderText }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: noResultsText }), Object.entries(groupedCommands).map(([group, commands]) => (_jsx(CommandGroup, { heading: group, children: commands.length > 0 &&
+                            commands.map(({ icon: Icon, ...command }) => (_jsxs(CommandItem, { onSelect: () => {
+                                    command.action();
+                                    setOpen(false);
+                                }, children: [Icon && _jsx(Icon, {}), _jsx("span", { children: command.label }), command.shortcut && (_jsx(CommandShortcut, { children: formatShortcut(command.shortcut) }))] }, command.id))) }, group)))] })] }));
 };