@quan-erp/shared-ui 1.0.0

package/dist/es/components/ui/card.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../lib/utils.js";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "shared:bg-card shared:text-card-foreground shared:flex shared:flex-col shared:gap-6 shared:rounded-xl shared:border shared:py-6 shared:shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "shared:@container/card-header shared:grid shared:auto-rows-min shared:grid-rows-[auto_auto] shared:items-start shared:gap-2 shared:px-6 shared:has-data-[slot=card-action]:grid-cols-[1fr_auto] shared:[.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("shared:leading-none shared:font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("shared:text-muted-foreground shared:text-sm", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "shared:col-start-2 shared:row-span-2 shared:row-start-1 shared:self-start shared:justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("shared:px-6", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("shared:flex shared:items-center shared:px-6 shared:[.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};

package/dist/es/components/ui/carousel.js

@@ -0,0 +1,194 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+const Carousel = React.forwardRef(
+  ({
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y"
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const onSelect = React.useCallback((api2) => {
+      if (!api2) {
+        return;
+      }
+      setCanScrollPrev(api2.canScrollPrev());
+      setCanScrollNext(api2.canScrollNext());
+    }, []);
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+      setApi(api);
+    }, [api, setApi]);
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+    return /* @__PURE__ */ jsx(
+      CarouselContext.Provider,
+      {
+        value: {
+          carouselRef,
+          api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            onKeyDownCapture: handleKeyDown,
+            className: cn("shared:relative", className),
+            role: "region",
+            "aria-roledescription": "carousel",
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "shared:overflow-hidden", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "shared:flex",
+        orientation === "horizontal" ? "shared:-ml-4" : "shared:-mt-4 shared:flex-col",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+CarouselContent.displayName = "CarouselContent";
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-roledescription": "slide",
+      className: cn(
+        "shared:min-w-0 shared:shrink-0 shared:grow-0 shared:basis-full",
+        orientation === "horizontal" ? "shared:pl-4" : "shared:pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+const CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      variant,
+      size,
+      className: cn(
+        "shared:absolute shared:h-8 shared:w-8 shared:rounded-full",
+        orientation === "horizontal" ? "shared:-left-12 shared:top-1/2 shared:-translate-y-1/2" : "shared:-top-12 shared:left-1/2 shared:-translate-x-1/2 shared:rotate-90",
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "shared:h-4 shared:w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "shared:sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+const CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      variant,
+      size,
+      className: cn(
+        "shared:absolute shared:h-8 shared:w-8 shared:rounded-full",
+        orientation === "horizontal" ? "shared:-right-12 shared:top-1/2 shared:-translate-y-1/2" : "shared:-bottom-12 shared:left-1/2 shared:-translate-x-1/2 shared:rotate-90",
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowRight, { className: "shared:h-4 shared:w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "shared:sr-only", children: "Next slide" })
+      ]
+    }
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious
+};

package/dist/es/components/ui/chart.js

@@ -0,0 +1,239 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "../../lib/utils.js";
+const THEMES = { light: "", dark: ".dark" };
+const ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+const ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-chart": chartId,
+      ref,
+      className: cn(
+        "shared:flex shared:aspect-video shared:justify-center shared:text-xs shared:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground shared:[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 shared:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border shared:[&_.recharts-dot[stroke='#fff']]:stroke-transparent shared:[&_.recharts-layer]:outline-none shared:[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border shared:[&_.recharts-radial-bar-background-sector]:fill-muted shared:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted shared:[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border shared:[&_.recharts-sector[stroke='#fff']]:stroke-transparent shared:[&_.recharts-sector]:outline-none shared:[&_.recharts-surface]:outline-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+});
+ChartContainer.displayName = "Chart";
+const ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme || config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartTooltipContent = React.forwardRef(
+  ({
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey
+  }, ref) => {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+      const [item] = payload;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+      if (labelFormatter) {
+        return /* @__PURE__ */ jsx("div", { className: cn("shared:font-medium", labelClassName), children: labelFormatter(value, payload) });
+      }
+      if (!value) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx("div", { className: cn("shared:font-medium", labelClassName), children: value });
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey
+    ]);
+    if (!active || !payload?.length) {
+      return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "shared:grid shared:min-w-[8rem] shared:items-start shared:gap-1.5 shared:rounded-lg shared:border shared:border-border/50 shared:bg-background shared:px-2.5 shared:py-1.5 shared:text-xs shared:shadow-xl",
+          className
+        ),
+        children: [
+          !nestLabel ? tooltipLabel : null,
+          /* @__PURE__ */ jsx("div", { className: "shared:grid shared:gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "shared:flex shared:w-full shared:flex-wrap shared:items-stretch shared:gap-2 shared:[&>svg]:h-2.5 shared:[&>svg]:w-2.5 shared:[&>svg]:text-muted-foreground",
+                  indicator === "dot" && "shared:items-center"
+                ),
+                children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "shared:shrink-0 shared:rounded-[2px] shared:border-[--color-border] shared:bg-[--color-bg]",
+                        {
+                          "shared:h-2.5 shared:w-2.5": indicator === "dot",
+                          "shared:w-1": indicator === "line",
+                          "shared:w-0 shared:border-[1.5px] shared:border-dashed shared:bg-transparent": indicator === "dashed",
+                          "shared:my-0.5": nestLabel && indicator === "dashed"
+                        }
+                      ),
+                      style: {
+                        "--color-bg": indicatorColor,
+                        "--color-border": indicatorColor
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "shared:flex shared:flex-1 shared:justify-between shared:leading-none",
+                        nestLabel ? "shared:items-end" : "shared:items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "shared:grid shared:gap-1.5", children: [
+                          nestLabel ? tooltipLabel : null,
+                          /* @__PURE__ */ jsx("span", { className: "shared:text-muted-foreground", children: itemConfig?.label || item.name })
+                        ] }),
+                        item.value && /* @__PURE__ */ jsx("span", { className: "shared:font-mono shared:font-medium shared:tabular-nums shared:text-foreground", children: item.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              item.dataKey
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+const ChartLegend = RechartsPrimitive.Legend;
+const ChartLegendContent = React.forwardRef(
+  ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+    if (!payload?.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "shared:flex shared:items-center shared:justify-center shared:gap-4",
+          verticalAlign === "top" ? "shared:pb-3" : "shared:pt-3",
+          className
+        ),
+        children: payload.filter((item) => item.type !== "none").map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "shared:flex shared:items-center shared:gap-1.5 shared:[&>svg]:h-3 shared:[&>svg]:w-3 shared:[&>svg]:text-muted-foreground"
+              ),
+              children: [
+                itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "shared:h-2 shared:w-2 shared:shrink-0 shared:rounded-[2px]",
+                    style: {
+                      backgroundColor: item.color
+                    }
+                  }
+                ),
+                itemConfig?.label
+              ]
+            },
+            item.value
+          );
+        })
+      }
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegend";
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let 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];
+}
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent
+};

package/dist/es/components/ui/checkbox.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "shared:grid shared:place-content-center shared:cursor-pointer shared:disabled:cursor-not-allowed shared:peer shared:h-4 shared:w-4 shared:shrink-0 shared:rounded-sm shared:border shared:border-primary shared:shadow shared:focus-visible:outline-none shared:focus-visible:ring-1 shared:focus-visible:ring-ring shared:disabled:opacity-50 shared:data-[state=checked]:bg-primary shared:data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("shared:grid shared:place-content-center shared:text-current"),
+        children: /* @__PURE__ */ jsx(Check, { className: "shared:h-4 shared:w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export {
+  Checkbox
+};

package/dist/es/components/ui/collapsible.js

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+};

package/dist/es/components/ui/command.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import "@radix-ui/react-dialog";
+import { Command as Command$1 } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Dialog, DialogContent } from "./dialog.js";
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "shared:flex shared:h-full shared:w-full shared:flex-col shared:overflow-hidden shared:rounded-md shared:bg-popover shared:text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = Command$1.displayName;
+const CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "shared:overflow-hidden shared:p-0", children: /* @__PURE__ */ jsx(Command, { className: "shared:[&_[cmdk-group-heading]]:px-2 shared:[&_[cmdk-group-heading]]:font-medium shared:[&_[cmdk-group-heading]]:text-muted-foreground shared:[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 shared:[&_[cmdk-group]]:px-2 shared:[&_[cmdk-input-wrapper]_svg]:h-5 shared:[&_[cmdk-input-wrapper]_svg]:w-5 shared:[&_[cmdk-input]]:h-12 shared:[&_[cmdk-item]]:px-2 shared:[&_[cmdk-item]]:py-3 shared:[&_[cmdk-item]_svg]:h-5 shared:[&_[cmdk-item]_svg]:w-5", children }) }) });
+};
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:border-b shared:border-border shared:px-3 shared:py-1", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx(Search, { className: "shared:mr-2 md:shared:h-6 md:shared:w-6 shared:h-4 shared:w-4 shared:shrink-0 shared:opacity-50" }),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "shared:flex shared:h-10 md:shared:h-12 shared:w-full shared:rounded-md shared:bg-transparent shared:py-3 shared:text-sm shared:outline-none shared:placeholder:text-muted-foreground shared:disabled:cursor-not-allowed shared:disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = Command$1.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("shared:max-h-[300px] shared:overflow-y-auto shared:overflow-x-hidden shared:scrollbar-thin shared:scrollbar-thumb-muted shared:flex-1 shared:touch-auto", className),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Empty,
+  {
+    ref,
+    className: cn("shared:text-muted-foreground shared:flex shared:h-40 shared:items-center shared:justify-center shared:p-6 shared:text-center shared:text-sm", className),
+    ...props
+  }
+));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "shared:overflow-hidden shared:p-1.5 shared:text-foreground shared:[&_[cmdk-group-heading]]:px-2 shared:[&_[cmdk-group-heading]]:py-1.5 shared:[&_[cmdk-group-heading]]:text-xs shared:[&_[cmdk-group-heading]]:font-medium shared:[&_[cmdk-group-heading]]:text-muted-foreground shared:[&_[cmdk-group-items]]:flex shared:[&_[cmdk-group-items]]:flex-col shared:[&_[cmdk-group-items]]:gap-2",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Separator,
+  {
+    ref,
+    className: cn("shared:-mx-1 shared:h-px shared:bg-border", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "shared:relative shared:flex shared:cursor-default shared:gap-2 shared:select-none shared:items-center shared:rounded-2xl shared:cupertino-corner shared:px-2 shared:py-1.5 shared:text-sm shared:outline-none shared:transition-colors shared:focus:bg-accent shared:focus:text-accent-foreground shared:data-[disabled=true]:pointer-events-none shared:data-[selected=true]:bg-accent shared:data-[selected=true]:text-accent-foreground shared:data-[disabled=true]:opacity-50 shared:[&_svg]:pointer-events-none shared:[&_svg]:size-4 shared:[&_svg]:shrink-0",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "shared:ml-auto shared:text-xs shared:tracking-widest shared:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+};