@appcorp/shadcn 1.2.0 → 2.0.0

package/components/ui/chart.js

@@ -1,220 +1,10 @@
 "use client";
-"use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartStyle = exports.ChartLegendContent = exports.ChartLegend = exports.ChartTooltipContent = exports.ChartTooltip = exports.ChartContainer = void 0;
-var React = __importStar(require("react"));
-var RechartsPrimitive = __importStar(require("recharts"));
-var utils_1 = require("../../lib/utils");
-// Format: { THEME_NAME: CSS_SELECTOR }
-var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React.createContext(null);
-function useChart() {
-    var context = React.useContext(ChartContext);
-    if (!context) {
-        throw new Error("useChart must be used within a <ChartContainer />");
-    }
-    return context;
-}
-var ChartContainer = React.forwardRef(function (_a, ref) {
-    var id = _a.id, className = _a.className, children = _a.children, config = _a.config, props = __rest(_a, ["id", "className", "children", "config"]);
-    var uniqueId = React.useId();
-    var chartId = "chart-".concat(id || uniqueId.replace(/:/g, ""));
-    return (React.createElement(ChartContext.Provider, { value: { config: config } },
-        React.createElement("div", __assign({ "data-chart": chartId, ref: ref, className: (0, utils_1.cn)("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className) }, props),
-            React.createElement(ChartStyle, { id: chartId, config: config }),
-            React.createElement(RechartsPrimitive.ResponsiveContainer, null, children))));
-});
-exports.ChartContainer = ChartContainer;
-ChartContainer.displayName = "Chart";
-var ChartStyle = function (_a) {
-    var id = _a.id, config = _a.config;
-    var colorConfig = Object.entries(config).filter(function (_a) {
-        var config = _a[1];
-        return config.theme || config.color;
-    });
-    if (!colorConfig.length) {
-        return null;
-    }
-    return (React.createElement("style", { dangerouslySetInnerHTML: {
-            __html: Object.entries(THEMES)
-                .map(function (_a) {
-                var theme = _a[0], prefix = _a[1];
-                return "\n".concat(prefix, " [data-chart=").concat(id, "] {\n").concat(colorConfig
-                    .map(function (_a) {
-                    var _b;
-                    var key = _a[0], itemConfig = _a[1];
-                    var color = ((_b = itemConfig.theme) === null || _b === void 0 ? void 0 : _b[theme]) ||
-                        itemConfig.color;
-                    return color ? "  --color-".concat(key, ": ").concat(color, ";") : null;
-                })
-                    .join("\n"), "\n}\n");
-            })
-                .join("\n"),
-        } }));
-};
-exports.ChartStyle = ChartStyle;
-var ChartTooltip = RechartsPrimitive.Tooltip;
-exports.ChartTooltip = ChartTooltip;
-var ChartTooltipContent = React.forwardRef(function (_a, ref) {
-    var active = _a.active, payload = _a.payload, className = _a.className, _b = _a.indicator, indicator = _b === void 0 ? "dot" : _b, _c = _a.hideLabel, hideLabel = _c === void 0 ? false : _c, _d = _a.hideIndicator, hideIndicator = _d === void 0 ? false : _d, label = _a.label, labelFormatter = _a.labelFormatter, labelClassName = _a.labelClassName, formatter = _a.formatter, color = _a.color, nameKey = _a.nameKey, labelKey = _a.labelKey;
-    var config = useChart().config;
-    var tooltipLabel = React.useMemo(function () {
-        var _a;
-        if (hideLabel || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
-            return null;
-        }
-        var item = payload[0];
-        var key = "".concat(labelKey || (item === null || item === void 0 ? void 0 : item.dataKey) || (item === null || item === void 0 ? void 0 : item.name) || "value");
-        var itemConfig = getPayloadConfigFromPayload(config, item, key);
-        var value = !labelKey && typeof label === "string"
-            ? ((_a = config[label]) === null || _a === void 0 ? void 0 : _a.label) || label
-            : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label;
-        if (labelFormatter) {
-            return (React.createElement("div", { className: (0, utils_1.cn)("font-medium", labelClassName) }, labelFormatter(String(value !== null && value !== void 0 ? value : ""), payload !== null && payload !== void 0 ? payload : [])));
-        }
-        if (!value) {
-            return null;
-        }
-        return React.createElement("div", { className: (0, utils_1.cn)("font-medium", labelClassName) }, value);
-    }, [
-        label,
-        labelFormatter,
-        payload,
-        hideLabel,
-        labelClassName,
-        config,
-        labelKey,
-    ]);
-    if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
-        return null;
-    }
-    var nestLabel = payload.length === 1 && indicator !== "dot";
-    return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className) },
-        !nestLabel ? tooltipLabel : null,
-        React.createElement("div", { className: "grid gap-1.5" }, payload
-            .filter(function (item) { return item.type !== "none"; })
-            .map(function (item, index) {
-            var _a;
-            var key = "".concat(nameKey || item.name || item.dataKey || "value");
-            var itemConfig = getPayloadConfigFromPayload(config, item, key);
-            var indicatorColor = color || ((_a = item.payload) === null || _a === void 0 ? void 0 : _a.fill) || item.color;
-            return (React.createElement("div", { key: item.dataKey, className: (0, utils_1.cn)("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center") }, formatter && (item === null || item === void 0 ? void 0 : item.value) !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (React.createElement(React.Fragment, null,
-                (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) ? (React.createElement(itemConfig.icon, null)) : (!hideIndicator && (React.createElement("div", { className: (0, utils_1.cn)("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
-                        "h-2.5 w-2.5": indicator === "dot",
-                        "w-1": indicator === "line",
-                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                        "my-0.5": nestLabel && indicator === "dashed",
-                    }), style: {
-                        "--color-bg": indicatorColor,
-                        "--color-border": indicatorColor,
-                    } }))),
-                React.createElement("div", { className: (0, utils_1.cn)("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center") },
-                    React.createElement("div", { className: "grid gap-1.5" },
-                        nestLabel ? tooltipLabel : null,
-                        React.createElement("span", { className: "text-muted-foreground" }, (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label) || item.name)),
-                    item.value && (React.createElement("span", { className: "font-mono font-medium tabular-nums text-foreground" }, item.value.toLocaleString())))))));
-        }))));
-});
-exports.ChartTooltipContent = ChartTooltipContent;
-ChartTooltipContent.displayName = "ChartTooltip";
-var ChartLegend = RechartsPrimitive.Legend;
-exports.ChartLegend = ChartLegend;
-var ChartLegendContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b, payload = _a.payload, _c = _a.verticalAlign, verticalAlign = _c === void 0 ? "bottom" : _c, nameKey = _a.nameKey;
-    var config = useChart().config;
-    if (!(payload === null || payload === void 0 ? void 0 : payload.length)) {
-        return null;
-    }
-    return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className) }, payload
-        .filter(function (item) { return item.type !== "none"; })
-        .map(function (item) {
-        var key = "".concat(nameKey || item.dataKey || "value");
-        var itemConfig = getPayloadConfigFromPayload(config, item, key);
-        return (React.createElement("div", { key: item.value, className: (0, utils_1.cn)("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground") },
-            (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) && !hideIcon ? (React.createElement(itemConfig.icon, null)) : (React.createElement("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
-                    backgroundColor: item.color,
-                } })), itemConfig === null || itemConfig === void 0 ? void 0 :
-            itemConfig.label));
-    })));
-});
-exports.ChartLegendContent = ChartLegendContent;
-ChartLegendContent.displayName = "ChartLegend";
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(config, payload, key) {
-    if (typeof payload !== "object" || payload === null) {
-        return undefined;
-    }
-    var payloadPayload = "payload" in payload &&
-        typeof payload.payload === "object" &&
-        payload.payload !== null
-        ? payload.payload
-        : undefined;
-    var configLabelKey = key;
-    if (key in payload &&
-        typeof payload[key] === "string") {
-        configLabelKey = payload[key];
-    }
-    else if (payloadPayload &&
-        key in payloadPayload &&
-        typeof payloadPayload[key] === "string") {
-        configLabelKey = payloadPayload[key];
-    }
-    return configLabelKey in config
-        ? config[configLabelKey]
-        : config[key];
-}
+import * as React from "react";
+const module = import("./chart-impl");
+const lazy = (name) => React.lazy(() => module.then((m) => ({ default: m[name] })));
+export const ChartContainer = lazy("ChartContainer");
+export const ChartTooltip = lazy("ChartTooltip");
+export const ChartTooltipContent = lazy("ChartTooltipContent");
+export const ChartLegend = lazy("ChartLegend");
+export const ChartLegendContent = lazy("ChartLegendContent");
+export const ChartStyle = lazy("ChartStyle");

package/components/ui/checkbox.js

@@ -1,49 +1,4 @@
 "use client";
-"use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 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)
@@ -55,17 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-var React = __importStar(require("react"));
-var CheckboxPrimitive = __importStar(require("@radix-ui/react-checkbox"));
-var utils_1 = require("../../lib/utils");
-var react_icons_1 = require("@radix-ui/react-icons");
-var Checkbox = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (React.createElement(CheckboxPrimitive.Root, __assign({ ref: ref, className: (0, utils_1.cn)("grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className) }, props),
-        React.createElement(CheckboxPrimitive.Indicator, { className: (0, utils_1.cn)("grid place-content-center text-current") },
-            React.createElement(react_icons_1.CheckIcon, { className: "h-4 w-4" }))));
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cn } from "../../lib/utils";
+import { CheckIcon } from "@radix-ui/react-icons";
+const Checkbox = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className) }, props),
+        React.createElement(CheckboxPrimitive.Indicator, { className: cn("grid place-content-center text-current") },
+            React.createElement(CheckIcon, { className: "h-4 w-4" }))));
 });
-exports.Checkbox = Checkbox;
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox };

package/components/ui/collapsible.js

@@ -1,44 +1,6 @@
 "use client";
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = void 0;
-var CollapsiblePrimitive = __importStar(require("@radix-ui/react-collapsible"));
-var Collapsible = CollapsiblePrimitive.Root;
-exports.Collapsible = Collapsible;
-var CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-exports.CollapsibleTrigger = CollapsibleTrigger;
-var CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-exports.CollapsibleContent = CollapsibleContent;
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/components/ui/combobox.js

@@ -1,46 +1,10 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ComboboxDemo;
-var React = __importStar(require("react"));
-var lucide_react_1 = require("lucide-react");
-var utils_1 = require("../../lib/utils");
-var button_1 = require("../ui/button");
-var command_1 = require("../ui/command");
-var popover_1 = require("../ui/popover");
-var frameworks = [
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+const frameworks = [
     {
         value: "next.js",
         label: "Next.js",
@@ -62,27 +26,27 @@ var frameworks = [
         label: "Astro",
     },
 ];
-function ComboboxDemo() {
+export default function ComboboxDemo() {
     var _a;
-    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
-    var _c = React.useState(""), value = _c[0], setValue = _c[1];
+    const [open, setOpen] = React.useState(false);
+    const [value, setValue] = React.useState("");
     return (React.createElement("div", { className: "w-full p-6 flex justify-center" },
-        React.createElement(popover_1.Popover, { open: open, onOpenChange: setOpen },
-            React.createElement(popover_1.PopoverTrigger, { asChild: true },
-                React.createElement(button_1.Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: "w-[200px] justify-between" },
+        React.createElement(Popover, { open: open, onOpenChange: setOpen },
+            React.createElement(PopoverTrigger, { asChild: true },
+                React.createElement(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: "w-[200px] justify-between" },
                     value
-                        ? (_a = frameworks.find(function (framework) { return framework.value === value; })) === null || _a === void 0 ? void 0 : _a.label
+                        ? (_a = frameworks.find((framework) => framework.value === value)) === null || _a === void 0 ? void 0 : _a.label
                         : "Select framework...",
-                    React.createElement(lucide_react_1.ChevronsUpDown, { className: "opacity-50" }))),
-            React.createElement(popover_1.PopoverContent, { className: "w-[200px] p-0" },
-                React.createElement(command_1.Command, null,
-                    React.createElement(command_1.CommandInput, { placeholder: "Search framework...", className: "h-9" }),
-                    React.createElement(command_1.CommandList, null,
-                        React.createElement(command_1.CommandEmpty, null, "No framework found."),
-                        React.createElement(command_1.CommandGroup, null, frameworks.map(function (framework) { return (React.createElement(command_1.CommandItem, { key: framework.value, value: framework.value, onSelect: function (currentValue) {
+                    React.createElement(ChevronsUpDown, { className: "opacity-50" }))),
+            React.createElement(PopoverContent, { className: "w-[200px] p-0" },
+                React.createElement(Command, null,
+                    React.createElement(CommandInput, { placeholder: "Search framework...", className: "h-9" }),
+                    React.createElement(CommandList, null,
+                        React.createElement(CommandEmpty, null, "No framework found."),
+                        React.createElement(CommandGroup, null, frameworks.map((framework) => (React.createElement(CommandItem, { key: framework.value, value: framework.value, onSelect: (currentValue) => {
                                 setValue(currentValue === value ? "" : currentValue);
                                 setOpen(false);
                             } },
                             framework.label,
-                            React.createElement(lucide_react_1.Check, { className: (0, utils_1.cn)("ml-auto", value === framework.value ? "opacity-100" : "opacity-0") }))); }))))))));
+                            React.createElement(Check, { className: cn("ml-auto", value === framework.value ? "opacity-100" : "opacity-0") })))))))))));
 }

package/components/ui/command-impl.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+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" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    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"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: ({ children, ...props }: DialogProps) => React.JSX.Element;
+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>>, "type" | "onChange" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+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" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/components/ui/command-impl.js

@@ -0,0 +1,63 @@
+"use client";
+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 * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "../../lib/utils";
+import { Dialog, DialogContent } from "../ui/dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+const Command = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive, Object.assign({ ref: ref, className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className) }, props)));
+});
+Command.displayName = CommandPrimitive.displayName;
+const CommandDialog = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement(Dialog, Object.assign({}, props),
+        React.createElement(DialogContent, { className: "overflow-hidden p-0" },
+            React.createElement(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5" }, children))));
+};
+const CommandInput = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "" },
+        React.createElement(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+        React.createElement(CommandPrimitive.Input, Object.assign({ ref: ref, className: cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className) }, props))));
+});
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+const CommandList = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive.List, Object.assign({ ref: ref, className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className) }, props)));
+});
+CommandList.displayName = CommandPrimitive.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => (React.createElement(CommandPrimitive.Empty, Object.assign({ ref: ref, className: "py-6 text-center text-sm" }, props))));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+const CommandGroup = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive.Group, Object.assign({ ref: ref, className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className) }, props)));
+});
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+const CommandSeparator = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive.Separator, Object.assign({ ref: ref, className: cn("-mx-1 h-px bg-border", className) }, props)));
+});
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+const CommandItem = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CommandPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className) }, props)));
+});
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+const CommandShortcut = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("span", Object.assign({ className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className) }, props)));
+};
+CommandShortcut.displayName = "CommandShortcut";
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };