@accreditation/ui 1.0.0

package/dist/components/molecules/combobox/variants.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const comboboxChevronClasses = "size-4 shrink-0 opacity-50";
+const comboboxFieldClasses = "cursor-pointer select-none caret-transparent";
+const comboboxTriggerOpenClasses = "data-[state=open]:ring-[3px] data-[state=open]:ring-ring/50 data-[state=open]:border-ring";
+const comboboxCommandClasses = "flex flex-col overflow-hidden";
+const comboboxCommandInputClasses = "border-b border-border rounded-none";
+const comboboxCommandListClasses = "max-h-[220px] overflow-y-auto";
+const comboboxCheckIconClasses = "size-4 shrink-0";
+
+exports.comboboxCheckIconClasses = comboboxCheckIconClasses;
+exports.comboboxChevronClasses = comboboxChevronClasses;
+exports.comboboxCommandClasses = comboboxCommandClasses;
+exports.comboboxCommandInputClasses = comboboxCommandInputClasses;
+exports.comboboxCommandListClasses = comboboxCommandListClasses;
+exports.comboboxFieldClasses = comboboxFieldClasses;
+exports.comboboxTriggerOpenClasses = comboboxTriggerOpenClasses;

package/dist/components/molecules/combobox/variants.mjs

@@ -0,0 +1,9 @@
+const comboboxChevronClasses = "size-4 shrink-0 opacity-50";
+const comboboxFieldClasses = "cursor-pointer select-none caret-transparent";
+const comboboxTriggerOpenClasses = "data-[state=open]:ring-[3px] data-[state=open]:ring-ring/50 data-[state=open]:border-ring";
+const comboboxCommandClasses = "flex flex-col overflow-hidden";
+const comboboxCommandInputClasses = "border-b border-border rounded-none";
+const comboboxCommandListClasses = "max-h-[220px] overflow-y-auto";
+const comboboxCheckIconClasses = "size-4 shrink-0";
+
+export { comboboxCheckIconClasses, comboboxChevronClasses, comboboxCommandClasses, comboboxCommandInputClasses, comboboxCommandListClasses, comboboxFieldClasses, comboboxTriggerOpenClasses };

package/dist/components/molecules/command/components/command.d.ts

@@ -0,0 +1,169 @@
+import * as React from "react";
+import type { CommandProps, CommandInputProps, CommandListProps, CommandEmptyProps, CommandGroupProps, CommandSeparatorProps, CommandItemProps, CommandLoadingProps, CommandFooterProps, CommandShortcutProps, CommandKbdProps, CommandDialogProps } from "../types";
+/**
+ * Root do Command. Propaga `size` via context para todos os subcomponentes.
+ *
+ * @example Inline (combobox):
+ * <Command size="md">
+ *   <Command.Input placeholder="Buscar..." />
+ *   <Command.List>
+ *     <Command.Empty>Nenhum resultado.</Command.Empty>
+ *     <Command.Group heading="Cursos">
+ *       <Command.Item>Engenharia Civil</Command.Item>
+ *     </Command.Group>
+ *   </Command.List>
+ * </Command>
+ *
+ * @example Em dialog (command palette):
+ * <Command.Dialog size="lg" open={open} onOpenChange={setOpen}>
+ *   <Command.Input placeholder="Buscar ação..." />
+ *   <Command.List>...</Command.List>
+ *   <Command.Footer>
+ *     <Command.Kbd>↑↓</Command.Kbd> navegar
+ *   </Command.Footer>
+ * </Command.Dialog>
+ */
+declare function CommandRoot({ size, className, ...props }: CommandProps): React.ReactElement;
+declare namespace CommandRoot {
+    var displayName: string;
+}
+/**
+ * Command num Dialog acessível.
+ * `size` default "lg" — dialogs costumam ser maiores que comboboxes inline.
+ * `title` e `description` ficam no sr-only para leitores de tela.
+ */
+declare function CommandDialog({ title, description, size, children, className, open, onOpenChange, ...props }: CommandDialogProps): React.ReactElement;
+declare namespace CommandDialog {
+    var displayName: string;
+}
+/**
+ * Input com ícone de busca. Altura e text-size derivados do size do context.
+ */
+declare function CommandInput({ className, ...props }: CommandInputProps): React.ReactElement;
+declare namespace CommandInput {
+    var displayName: string;
+}
+/**
+ * Área scrollável. max-h derivada do size do context.
+ */
+declare function CommandList({ className, ...props }: CommandListProps): React.ReactElement;
+declare namespace CommandList {
+    var displayName: string;
+}
+/**
+ * Estado vazio — renderizado pelo cmdk apenas quando não há itens filtrados.
+ * Sem wrapper <Text> — children é ReactNode direto para permitir links,
+ * botões "Criar novo item" e outros conteúdos ricos.
+ */
+declare function CommandEmpty({ className, children, ...props }: CommandEmptyProps): React.ReactElement;
+declare namespace CommandEmpty {
+    var displayName: string;
+}
+/**
+ * Estado de busca assíncrona. Usa CommandPrimitive.Loading que emite
+ * aria-live="polite" nativamente — acessível sem configuração adicional.
+ *
+ * Diferente de CommandEmpty: renderiza sempre que montado, independente
+ * do filtro interno do cmdk. Use condicionalmente: `{isLoading && <CommandLoading>}`.
+ *
+ * @example
+ * <Command.List>
+ *   {isLoading ? (
+ *     <Command.Loading>Buscando cursos...</Command.Loading>
+ *   ) : results.length === 0 ? (
+ *     <Command.Empty>Nenhum resultado.</Command.Empty>
+ *   ) : (
+ *     <Command.Group>...</Command.Group>
+ *   )}
+ * </Command.List>
+ */
+declare function CommandLoading({ children, className, }: CommandLoadingProps): React.ReactElement;
+declare namespace CommandLoading {
+    var displayName: string;
+}
+/**
+ * Grupo de items com heading opcional.
+ * heading text-size derivado do size do context via CSS selector no groupBaseClasses.
+ */
+declare function CommandGroup({ className, ...props }: CommandGroupProps): React.ReactElement;
+declare namespace CommandGroup {
+    var displayName: string;
+}
+declare function CommandSeparator({ className, ...props }: CommandSeparatorProps): React.ReactElement;
+declare namespace CommandSeparator {
+    var displayName: string;
+}
+/**
+ * Item da lista. Suporta `leading` (slot esquerdo) e `trailing` (slot direito).
+ * Padding e text-size derivados do size do context.
+ *
+ * @example Com leading (checkmark em combobox):
+ * <Command.Item leading={<Check className={selected ? "opacity-100" : "opacity-0"} />}>
+ *   Engenharia Civil
+ * </Command.Item>
+ *
+ * @example Com trailing (badge de status):
+ * <Command.Item trailing={<Badge status="success">Acreditado</Badge>}>
+ *   Engenharia Civil
+ * </Command.Item>
+ *
+ * @example Com trailing múltiplo (shortcut + status):
+ * <Command.Item trailing={<><span className="text-xs text-muted-foreground">⌘E</span><StatusDot /></>}>
+ *   Editar registro
+ * </Command.Item>
+ */
+declare function CommandItem({ className, leading, trailing, children, ...props }: CommandItemProps): React.ReactElement;
+declare namespace CommandItem {
+    var displayName: string;
+}
+/**
+ * Rodapé com border-t para hints de atalhos ou ações contextuais.
+ * Use com <Command.Kbd> para estilizar teclas.
+ *
+ * @example
+ * <Command.Footer>
+ *   <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+ *     <Command.Kbd>↑↓</Command.Kbd> navegar
+ *     <Command.Kbd>↵</Command.Kbd> selecionar
+ *     <Command.Kbd>esc</Command.Kbd> fechar
+ *   </span>
+ * </Command.Footer>
+ */
+declare function CommandFooter({ className, children, ...props }: CommandFooterProps): React.ReactElement;
+declare namespace CommandFooter {
+    var displayName: string;
+}
+/**
+ * Shortcut legado — ml-auto para uso direto dentro de CommandItem.
+ * Para novos casos, preferir `trailing` prop + <Command.Footer>.
+ */
+declare function CommandShortcut({ className, ...props }: CommandShortcutProps): React.ReactElement;
+declare namespace CommandShortcut {
+    var displayName: string;
+}
+/**
+ * <kbd> estilizado para hints de teclas no CommandFooter.
+ * rounded-none — padrão flat do DS.
+ *
+ * @example <Command.Kbd>⌘K</Command.Kbd>
+ */
+declare function CommandKbd({ className, children, ...props }: CommandKbdProps): React.ReactElement;
+declare namespace CommandKbd {
+    var displayName: string;
+}
+declare const Command: typeof CommandRoot & {
+    Dialog: typeof CommandDialog;
+    Input: typeof CommandInput;
+    List: typeof CommandList;
+    Empty: typeof CommandEmpty;
+    Loading: typeof CommandLoading;
+    Group: typeof CommandGroup;
+    Item: typeof CommandItem;
+    Separator: typeof CommandSeparator;
+    Footer: typeof CommandFooter;
+    Shortcut: typeof CommandShortcut;
+    Kbd: typeof CommandKbd;
+    Root: typeof CommandRoot;
+};
+export { Command, CommandRoot, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandLoading, CommandGroup, CommandItem, CommandSeparator, CommandFooter, CommandShortcut, CommandKbd, };
+//# sourceMappingURL=command.d.ts.map

package/dist/components/molecules/command/components/command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/command/components/command.tsx"],"names":[],"mappings":"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"}

package/dist/components/molecules/command/components/command.js

@@ -0,0 +1,319 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cmdk = require('cmdk');
+var utils = require('../../../../lib/utils');
+var dialog = require('../../dialog');
+var spinner = require('../../../atoms/spinner');
+var variants = require('../variants');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const CommandContext = React__namespace.createContext({ size: "md" });
+function useCommandContext() {
+  return React__namespace.useContext(CommandContext);
+}
+function SearchIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": true,
+      className: utils.cn("shrink-0 opacity-50", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Buscar" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
+      ]
+    }
+  );
+}
+function CommandRoot({
+  size = "md",
+  className,
+  ...props
+}) {
+  const ctx = React__namespace.useMemo(() => ({ size }), [size]);
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command,
+    {
+      "data-slot": "command",
+      className: utils.cn(variants.commandRootClasses, className),
+      ...props
+    }
+  ) });
+}
+CommandRoot.displayName = "Command";
+function CommandDialog({
+  title = "Paleta de comandos",
+  description = "Busque e execute a\xE7\xF5es no sistema.",
+  size = "lg",
+  children,
+  className,
+  open,
+  onOpenChange,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog, { open, onOpenChange, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.DialogContent,
+      {
+        className: utils.cn("overflow-hidden p-0", className),
+        hideCloseButton: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(CommandRoot, { size, className: "flex flex-col overflow-hidden", children })
+      }
+    )
+  ] });
+}
+CommandDialog.displayName = "Command.Dialog";
+function CommandInput({
+  className,
+  ...props
+}) {
+  const { size } = useCommandContext();
+  const cfg = variants.commandSizeConfig[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: utils.cn(variants.commandInputWrapperBaseClasses, cfg.inputWrapperH),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: cfg.inputIconSize }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          cmdk.Command.Input,
+          {
+            "data-slot": "command-input",
+            className: utils.cn(
+              variants.commandInputBaseClasses,
+              cfg.inputH,
+              cfg.inputText,
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+CommandInput.displayName = "Command.Input";
+function CommandList({
+  className,
+  ...props
+}) {
+  const { size } = useCommandContext();
+  const cfg = variants.commandSizeConfig[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.List,
+    {
+      "data-slot": "command-list",
+      className: utils.cn(variants.commandListBaseClasses, cfg.listMaxH, className),
+      ...props
+    }
+  );
+}
+CommandList.displayName = "Command.List";
+function CommandEmpty({
+  className,
+  children,
+  ...props
+}) {
+  const { size } = useCommandContext();
+  const cfg = variants.commandSizeConfig[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Empty,
+    {
+      "data-slot": "command-empty",
+      className: utils.cn(variants.commandEmptyBaseClasses, cfg.emptyPy, className),
+      ...props,
+      children
+    }
+  );
+}
+CommandEmpty.displayName = "Command.Empty";
+function CommandLoading({
+  children = "Carregando...",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Loading, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "command-loading",
+      className: utils.cn(variants.commandLoadingClasses, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      ]
+    }
+  ) });
+}
+CommandLoading.displayName = "Command.Loading";
+function CommandGroup({
+  className,
+  ...props
+}) {
+  const { size } = useCommandContext();
+  const cfg = variants.commandSizeConfig[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Group,
+    {
+      "data-slot": "command-group",
+      className: utils.cn(
+        variants.commandGroupBaseClasses,
+        // heading text-size via CSS selector já definido na classe base
+        `[&_[cmdk-group-heading]]:${cfg.groupHeadingText}`,
+        className
+      ),
+      ...props
+    }
+  );
+}
+CommandGroup.displayName = "Command.Group";
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Separator,
+    {
+      "data-slot": "command-separator",
+      className: utils.cn(variants.commandSeparatorClasses, className),
+      ...props
+    }
+  );
+}
+CommandSeparator.displayName = "Command.Separator";
+function CommandItem({
+  className,
+  leading,
+  trailing,
+  children,
+  ...props
+}) {
+  const { size } = useCommandContext();
+  const cfg = variants.commandSizeConfig[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    cmdk.Command.Item,
+    {
+      "data-slot": "command-item",
+      className: utils.cn(
+        variants.commandItemBaseClasses,
+        cfg.itemPx,
+        cfg.itemPy,
+        cfg.itemText,
+        `[&_svg:not([class*='size-'])]:${cfg.itemIconSize}`,
+        className
+      ),
+      ...props,
+      children: [
+        leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(variants.commandItemLeadingClasses, cfg.itemIconSize), children: leading }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0 truncate", children }),
+        trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variants.commandItemTrailingClasses, children: trailing })
+      ]
+    }
+  );
+}
+CommandItem.displayName = "Command.Item";
+function CommandFooter({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "command-footer",
+      className: utils.cn(variants.commandFooterClasses, className),
+      ...props,
+      children
+    }
+  );
+}
+CommandFooter.displayName = "Command.Footer";
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: utils.cn(variants.commandShortcutClasses, className),
+      ...props
+    }
+  );
+}
+CommandShortcut.displayName = "Command.Shortcut";
+function CommandKbd({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "kbd",
+    {
+      "data-slot": "command-kbd",
+      className: utils.cn(variants.commandKbdClasses, className),
+      ...props,
+      children
+    }
+  );
+}
+CommandKbd.displayName = "Command.Kbd";
+const Command = Object.assign(CommandRoot, {
+  Dialog: CommandDialog,
+  Input: CommandInput,
+  List: CommandList,
+  Empty: CommandEmpty,
+  Loading: CommandLoading,
+  Group: CommandGroup,
+  Item: CommandItem,
+  Separator: CommandSeparator,
+  Footer: CommandFooter,
+  Shortcut: CommandShortcut,
+  Kbd: CommandKbd,
+  Root: CommandRoot
+});
+
+exports.Command = Command;
+exports.CommandDialog = CommandDialog;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandFooter = CommandFooter;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandKbd = CommandKbd;
+exports.CommandList = CommandList;
+exports.CommandLoading = CommandLoading;
+exports.CommandRoot = CommandRoot;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;