laif-ds/dist/components/ui/command.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as o, jsxs as n } from "react/jsx-runtime";
import * as c from "react";
import { Command as d } from "../../node_modules/cmdk/dist/index.js";
import { cn as a } from "../../lib/utils.js";
import { Dialog as i, DialogHeader as l, DialogTitle as p, DialogDescription as u, DialogContent as g } from "./dialog.js";
import f from "../../node_modules/lucide-react/dist/esm/icons/search.js";
const m = c.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
  d,
  {
    ref: r,
    "data-slot": "command",
    className: a(
      "bg-d-popover text-d-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
      e
    ),
    ...t
  }
));
m.displayName = "Command";
function v({
  title: e = "Command Palette",
  description: t = "Search for a command to run...",
  children: r,
  ...s
}) {
  return /* @__PURE__ */ n(i, { ...s, children: [
    /* @__PURE__ */ n(l, { className: "sr-only", children: [
      /* @__PURE__ */ o(p, { children: e }),
      /* @__PURE__ */ o(u, { children: t })
    ] }),
    /* @__PURE__ */ o(g, { className: "overflow-hidden p-0", children: /* @__PURE__ */ o(m, { className: "[&_[cmdk-group-heading]]:text-d-secondary-foreground **:data-[slot=command-d-input-wrapper]:h-12 [&_[cmdk-d-input-wrapper]_svg]:h-5 [&_[cmdk-d-input-wrapper]_svg]:w-5 [&_[cmdk-d-input]]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: r }) })
  ] });
}
function w({
  className: e,
  ...t
}) {
  return /* @__PURE__ */ n(
    "div",
    {
      "data-slot": "command-d-input-wrapper",
      className: "border-d-border flex h-9 items-center gap-2 border-b px-3",
      children: [
        /* @__PURE__ */ o(f, { className: "size-4 shrink-0 opacity-50" }),
        /* @__PURE__ */ o(
          d.Input,
          {
            "data-slot": "command-d-input",
            className: a(
              "placeholder:text-d-secondary-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden outline-transparent disabled:cursor-not-allowed disabled:opacity-50",
              e
            ),
            ...t
          }
        )
      ]
    }
  );
}
function N({
  className: e,
  ...t
}) {
  return /* @__PURE__ */ o(
    d.List,
    {
      "data-slot": "command-list",
      className: a(
        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
        e
      ),
      ...t
    }
  );
}
function b({
  ...e
}) {
  return /* @__PURE__ */ o(
    d.Empty,
    {
      "data-slot": "command-empty",
      className: "py-6 text-center text-sm",
      ...e
    }
  );
}
function C({
  className: e,
  ...t
}) {
  return /* @__PURE__ */ o(
    d.Group,
    {
      "data-slot": "command-group",
      className: a(
        "text-d-foreground [&_[cmdk-group-heading]]:text-d-secondary-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
        e
      ),
      ...t
    }
  );
}
function D({
  className: e,
  ...t
}) {
  return /* @__PURE__ */ o(
    d.Separator,
    {
      "data-slot": "command-separator",
      className: a("bg-d-border -mx-1 h-px", e),
      ...t
    }
  );
}
function S({
  className: e,
  ...t
}) {
  return /* @__PURE__ */ o(
    d.Item,
    {
      "data-slot": "command-item",
      className: a(
        "data-[selected=true]:bg-d-accent data-[selected=true]:text-d-accent-foreground [&_svg:not([class*='text-'])]:text-d-secondary-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        e
      ),
      ...t
    }
  );
}
function I({
  className: e,
  ...t
}) {
  return /* @__PURE__ */ o(
    "span",
    {
      "data-slot": "command-shortcut",
      className: a(
        "text-d-secondary-foreground ml-auto text-xs tracking-widest",
        e
      ),
      ...t
    }
  );
}
export {
  m as Command,
  v as CommandDialog,
  b as CommandEmpty,
  C as CommandGroup,
  w as CommandInput,
  S as CommandItem,
  N as CommandList,
  D as CommandSeparator,
  I as CommandShortcut
};