@snksergio/design-system 0.67.0 → 0.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/dist-lib/ai/componentes/AppShell.md +1 -1
  2. package/dist-lib/ai/componentes/Chip.md +11 -0
  3. package/dist-lib/ai/componentes/Combobox.md +23 -0
  4. package/dist-lib/ai/componentes/DatePicker.md +15 -0
  5. package/dist-lib/ai/componentes/FileUploadField.md +23 -0
  6. package/dist-lib/ai/componentes/Header.md +9 -0
  7. package/dist-lib/ai/componentes/Kpi.md +14 -1
  8. package/dist-lib/ai/componentes/MenuSidebar.md +3 -3
  9. package/dist-lib/ai/componentes/PageHeader.md +6 -0
  10. package/dist-lib/ai/componentes/_primitivos.md +9 -2
  11. package/dist-lib/ai/global/componentes.md +20 -2
  12. package/dist-lib/ai/manifest.json +2 -2
  13. package/dist-lib/shadcn.cjs +1 -0
  14. package/dist-lib/shadcn.cjs.map +1 -1
  15. package/dist-lib/shadcn.mjs +2 -1
  16. package/dist-lib/src/components/shadcn/alert-dialog.cjs +13 -2
  17. package/dist-lib/src/components/shadcn/alert-dialog.cjs.map +1 -1
  18. package/dist-lib/src/components/shadcn/alert-dialog.d.ts +21 -1
  19. package/dist-lib/src/components/shadcn/alert-dialog.d.ts.map +1 -1
  20. package/dist-lib/src/components/shadcn/alert-dialog.mjs +13 -2
  21. package/dist-lib/src/components/shadcn/alert-dialog.mjs.map +1 -1
  22. package/dist-lib/src/components/shadcn/card.cjs +22 -2
  23. package/dist-lib/src/components/shadcn/card.cjs.map +1 -1
  24. package/dist-lib/src/components/shadcn/card.d.ts +10 -1
  25. package/dist-lib/src/components/shadcn/card.d.ts.map +1 -1
  26. package/dist-lib/src/components/shadcn/card.mjs +22 -2
  27. package/dist-lib/src/components/shadcn/card.mjs.map +1 -1
  28. package/dist-lib/src/components/shadcn/clickable-surface.cjs +28 -4
  29. package/dist-lib/src/components/shadcn/clickable-surface.cjs.map +1 -1
  30. package/dist-lib/src/components/shadcn/clickable-surface.d.ts +26 -2
  31. package/dist-lib/src/components/shadcn/clickable-surface.d.ts.map +1 -1
  32. package/dist-lib/src/components/shadcn/clickable-surface.mjs +28 -4
  33. package/dist-lib/src/components/shadcn/clickable-surface.mjs.map +1 -1
  34. package/dist-lib/src/components/shadcn/command.cjs +26 -5
  35. package/dist-lib/src/components/shadcn/command.cjs.map +1 -1
  36. package/dist-lib/src/components/shadcn/command.d.ts +49 -2
  37. package/dist-lib/src/components/shadcn/command.d.ts.map +1 -1
  38. package/dist-lib/src/components/shadcn/command.mjs +26 -5
  39. package/dist-lib/src/components/shadcn/command.mjs.map +1 -1
  40. package/dist-lib/src/components/shadcn/input-group.d.ts +1 -1
  41. package/dist-lib/src/components/shadcn/input-otp.d.ts +1 -1
  42. package/dist-lib/src/components/shadcn/input.d.ts +1 -1
  43. package/dist-lib/src/components/shadcn/sheet.d.ts +1 -1
  44. package/dist-lib/src/components/ui/AppShell/app-shell.types.d.ts +1 -1
  45. package/dist-lib/src/components/ui/Chip/chip.cjs +7 -0
  46. package/dist-lib/src/components/ui/Chip/chip.cjs.map +1 -1
  47. package/dist-lib/src/components/ui/Chip/chip.d.ts.map +1 -1
  48. package/dist-lib/src/components/ui/Chip/chip.mjs +7 -0
  49. package/dist-lib/src/components/ui/Chip/chip.mjs.map +1 -1
  50. package/dist-lib/src/components/ui/Chip/chip.styles.cjs.map +1 -1
  51. package/dist-lib/src/components/ui/Chip/chip.styles.mjs.map +1 -1
  52. package/dist-lib/src/components/ui/Combobox/combobox.cjs +60 -22
  53. package/dist-lib/src/components/ui/Combobox/combobox.cjs.map +1 -1
  54. package/dist-lib/src/components/ui/Combobox/combobox.d.ts +2 -1
  55. package/dist-lib/src/components/ui/Combobox/combobox.d.ts.map +1 -1
  56. package/dist-lib/src/components/ui/Combobox/combobox.mjs +44 -22
  57. package/dist-lib/src/components/ui/Combobox/combobox.mjs.map +1 -1
  58. package/dist-lib/src/components/ui/Combobox/combobox.styles.cjs +5 -1
  59. package/dist-lib/src/components/ui/Combobox/combobox.styles.cjs.map +1 -1
  60. package/dist-lib/src/components/ui/Combobox/combobox.styles.d.ts +18 -0
  61. package/dist-lib/src/components/ui/Combobox/combobox.styles.d.ts.map +1 -1
  62. package/dist-lib/src/components/ui/Combobox/combobox.styles.mjs +5 -1
  63. package/dist-lib/src/components/ui/Combobox/combobox.styles.mjs.map +1 -1
  64. package/dist-lib/src/components/ui/Combobox/combobox.types.d.ts +21 -0
  65. package/dist-lib/src/components/ui/Combobox/combobox.types.d.ts.map +1 -1
  66. package/dist-lib/src/components/ui/DatePicker/datepicker.cjs +21 -3
  67. package/dist-lib/src/components/ui/DatePicker/datepicker.cjs.map +1 -1
  68. package/dist-lib/src/components/ui/DatePicker/datepicker.d.ts +10 -0
  69. package/dist-lib/src/components/ui/DatePicker/datepicker.d.ts.map +1 -1
  70. package/dist-lib/src/components/ui/DatePicker/datepicker.mjs +21 -3
  71. package/dist-lib/src/components/ui/DatePicker/datepicker.mjs.map +1 -1
  72. package/dist-lib/src/components/ui/FileUploadField/file-upload-field.cjs +1 -4
  73. package/dist-lib/src/components/ui/FileUploadField/file-upload-field.cjs.map +1 -1
  74. package/dist-lib/src/components/ui/FileUploadField/file-upload-field.d.ts.map +1 -1
  75. package/dist-lib/src/components/ui/FileUploadField/file-upload-field.mjs +1 -4
  76. package/dist-lib/src/components/ui/FileUploadField/file-upload-field.mjs.map +1 -1
  77. package/dist-lib/src/components/ui/FileUploadField/file-upload-field.types.d.ts +6 -0
  78. package/dist-lib/src/components/ui/FileUploadField/file-upload-field.types.d.ts.map +1 -1
  79. package/dist-lib/src/components/ui/Header/header-search.cjs +6 -4
  80. package/dist-lib/src/components/ui/Header/header-search.cjs.map +1 -1
  81. package/dist-lib/src/components/ui/Header/header-search.d.ts +14 -3
  82. package/dist-lib/src/components/ui/Header/header-search.d.ts.map +1 -1
  83. package/dist-lib/src/components/ui/Header/header-search.mjs +6 -4
  84. package/dist-lib/src/components/ui/Header/header-search.mjs.map +1 -1
  85. package/dist-lib/src/components/ui/Kpi/kpi-delta.cjs +5 -0
  86. package/dist-lib/src/components/ui/Kpi/kpi-delta.cjs.map +1 -1
  87. package/dist-lib/src/components/ui/Kpi/kpi-delta.d.ts.map +1 -1
  88. package/dist-lib/src/components/ui/Kpi/kpi-delta.mjs +5 -0
  89. package/dist-lib/src/components/ui/Kpi/kpi-delta.mjs.map +1 -1
  90. package/dist-lib/src/components/ui/Kpi/kpi-group.cjs.map +1 -1
  91. package/dist-lib/src/components/ui/Kpi/kpi-group.mjs.map +1 -1
  92. package/dist-lib/src/components/ui/Kpi/kpi.cjs +8 -3
  93. package/dist-lib/src/components/ui/Kpi/kpi.cjs.map +1 -1
  94. package/dist-lib/src/components/ui/Kpi/kpi.d.ts +1 -1
  95. package/dist-lib/src/components/ui/Kpi/kpi.d.ts.map +1 -1
  96. package/dist-lib/src/components/ui/Kpi/kpi.mjs +8 -3
  97. package/dist-lib/src/components/ui/Kpi/kpi.mjs.map +1 -1
  98. package/dist-lib/src/components/ui/Kpi/kpi.types.d.ts +9 -0
  99. package/dist-lib/src/components/ui/Kpi/kpi.types.d.ts.map +1 -1
  100. package/dist-lib/src/components/ui/MenuSidebar/sidebar.types.d.ts +1 -1
  101. package/dist-lib/src/components/ui/PageHeader/page-header.styles.cjs +4 -1
  102. package/dist-lib/src/components/ui/PageHeader/page-header.styles.cjs.map +1 -1
  103. package/dist-lib/src/components/ui/PageHeader/page-header.styles.d.ts +9 -0
  104. package/dist-lib/src/components/ui/PageHeader/page-header.styles.d.ts.map +1 -1
  105. package/dist-lib/src/components/ui/PageHeader/page-header.styles.mjs +4 -1
  106. package/dist-lib/src/components/ui/PageHeader/page-header.styles.mjs.map +1 -1
  107. package/dist-lib/src/components/ui/PageHeader/page-header.types.d.ts +11 -4
  108. package/dist-lib/src/components/ui/PageHeader/page-header.types.d.ts.map +1 -1
  109. package/dist-lib/src/components/ui/Table/table-span-row.cjs.map +1 -1
  110. package/dist-lib/src/components/ui/Table/table-span-row.mjs.map +1 -1
  111. package/dist-lib/src/lib/utils.cjs.map +1 -1
  112. package/dist-lib/src/lib/utils.mjs.map +1 -1
  113. package/dist-lib/src/utils/tv.cjs.map +1 -1
  114. package/dist-lib/src/utils/tv.mjs.map +1 -1
  115. package/dist-lib/src/utils/tw-merge-config.cjs.map +1 -1
  116. package/dist-lib/src/utils/tw-merge-config.mjs.map +1 -1
  117. package/dist-lib/src/utils/use-title-se-truncado.cjs +34 -0
  118. package/dist-lib/src/utils/use-title-se-truncado.cjs.map +1 -0
  119. package/dist-lib/src/utils/use-title-se-truncado.d.ts +30 -0
  120. package/dist-lib/src/utils/use-title-se-truncado.d.ts.map +1 -0
  121. package/dist-lib/src/utils/use-title-se-truncado.mjs +34 -0
  122. package/dist-lib/src/utils/use-title-se-truncado.mjs.map +1 -0
  123. package/package.json +1 -1
@@ -1,4 +1,5 @@
1
1
  import { DialogProps } from '@radix-ui/react-dialog';
2
+ import { Command as CommandPrimitive } from 'cmdk';
2
3
  import * as React from "react";
3
4
  /**
4
5
  * Command — alinhado com o views-popover do design-and-table-v2.
@@ -29,7 +30,53 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
29
30
  disablePointerSelection?: boolean;
30
31
  vimBindings?: boolean;
31
32
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
32
- declare const CommandDialog: ({ children, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
33
+ /**
34
+ * Largura da paleta. Era `sm:max-w-[384px]` fixo — arbitrário, sem token, e sem saída:
35
+ * paleta com resultado rico (ícone + título + descrição + atalho) não cabe em 384px.
36
+ */
37
+ declare const COMMAND_DIALOG_SIZE: {
38
+ readonly sm: "sm:max-w-sm";
39
+ readonly md: "sm:max-w-drawer-md";
40
+ readonly lg: "sm:max-w-modal-md";
41
+ };
42
+ export type CommandDialogSize = keyof typeof COMMAND_DIALOG_SIZE;
43
+ type CommandDialogProps = DialogProps & {
44
+ /** Largura da paleta: sm 384 (default, a de sempre) · md 480 · lg 640. */
45
+ size?: CommandDialogSize;
46
+ /** className do `DialogContent` — altura máxima, sombra, o que for. */
47
+ contentClassName?: string;
48
+ /**
49
+ * Props repassadas ao `<Command>` do cmdk: `shouldFilter`, `filter`, `loop`,
50
+ * `value`, `onValueChange`.
51
+ *
52
+ * Sem isto, busca no SERVIDOR era impossível pelo `CommandDialog` — o cmdk filtra do
53
+ * lado do cliente por default, e não havia como passar `shouldFilter={false}`. O
54
+ * consumidor igreen-tickets montou a busca global dele com `Dialog` + `Command` na
55
+ * mão por causa disso, o que é uma composição legítima, mas não deveria ser
56
+ * obrigatória pra algo tão comum.
57
+ */
58
+ commandProps?: React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
59
+ /** Título acessível da paleta (sr-only). Default "Comando". */
60
+ title?: string;
61
+ };
62
+ declare const CommandDialog: ({ children, size, contentClassName, commandProps, title, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
63
+ /**
64
+ * Estado de carregando do cmdk, reexportado sem casca própria.
65
+ *
66
+ * O pacote não o exportava, então busca assíncrona pelo `CommandDialog` não tinha como
67
+ * mostrar progresso — o consumidor importava do `cmdk` direto, o que fura o contrato de
68
+ * "o DS é a fonte" e prende a versão do cmdk no projeto dele.
69
+ */
70
+ declare const CommandLoading: React.ForwardRefExoticComponent<{
71
+ children?: React.ReactNode;
72
+ } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
73
+ ref?: React.Ref<HTMLDivElement>;
74
+ } & {
75
+ asChild?: boolean;
76
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
77
+ progress?: number;
78
+ label?: string;
79
+ } & React.RefAttributes<HTMLDivElement>>;
33
80
  declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
34
81
  ref?: React.Ref<HTMLInputElement>;
35
82
  } & {
@@ -89,5 +136,5 @@ declare const CommandShortcut: {
89
136
  ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
90
137
  displayName: string;
91
138
  };
92
- export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
139
+ export { Command, CommandDialog, CommandLoading, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
93
140
  //# sourceMappingURL=command.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../../src/components/shadcn/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAOzD;;;;;;;;;;;GAWG;AAEH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;sFAsBX,CAAA;AAGF,QAAA,MAAM,aAAa,GAAI,wBAAwB,WAAW,4CAoBzD,CAAA;AAGD,QAAA,MAAM,YAAY;;;;;;;0FA0BhB,CAAA;AAIF,QAAA,MAAM,WAAW;;;;;;;;sFAYf,CAAA;AAGF,QAAA,MAAM,YAAY;;;;;;uJAShB,CAAA;AAIF,QAAA,MAAM,YAAY;;;;;;;;;;sFAiBhB,CAAA;AAGF,QAAA,MAAM,gBAAgB;;;;;;sFASpB,CAAA;AAIF,QAAA,MAAM,WAAW;;;;;;;;;;;;sFAkBf,CAAA;AAGF,QAAA,MAAM,eAAe;8BAGlB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAUvC,CAAA;AAGD,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,CAAA"}
1
+ {"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../../src/components/shadcn/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;AAMlD;;;;;;;;;;;GAWG;AAEH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;sFAsBX,CAAA;AAGF;;;GAGG;AACH,QAAA,MAAM,mBAAmB;;;;CAOf,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAEjE,KAAK,kBAAkB,GAAG,WAAW,GAAG;IACtC,0EAA0E;IAC1E,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACvE,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,qEAOpB,kBAAkB,4CAsBpB,CAAA;AAED;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;;;;;;wCAA2B,CAAC;AAGhD,QAAA,MAAM,YAAY;;;;;;;0FA0BhB,CAAA;AAIF,QAAA,MAAM,WAAW;;;;;;;;sFAYf,CAAA;AAGF,QAAA,MAAM,YAAY;;;;;;uJAShB,CAAA;AAIF,QAAA,MAAM,YAAY;;;;;;;;;;sFAiBhB,CAAA;AAGF,QAAA,MAAM,gBAAgB;;;;;;sFASpB,CAAA;AAIF,QAAA,MAAM,WAAW;;;;;;;;;;;;sFAkBf,CAAA;AAGF,QAAA,MAAM,eAAe;8BAGlB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAUvC,CAAA;AAGD,OAAO,EACL,OAAO,EACP,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,CAAA"}
@@ -26,25 +26,45 @@ const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
26
26
  }
27
27
  ));
28
28
  Command.displayName = Command$1.displayName;
29
- const CommandDialog = ({ children, ...props }) => {
29
+ const COMMAND_DIALOG_SIZE = {
30
+ // 384px — o DEFAULT, e é a largura que a paleta sempre teve. Era
31
+ // `sm:max-w-[384px]` hardcoded; `max-w-sm` é o mesmo valor pelo nome do Tailwind
32
+ // (24rem), agora que a escala nativa voltou a valer. Tokenizar não muda pixel.
33
+ sm: "sm:max-w-sm",
34
+ md: "sm:max-w-drawer-md",
35
+ // 480px
36
+ lg: "sm:max-w-modal-md"
37
+ // 640px
38
+ };
39
+ const CommandDialog = ({
40
+ children,
41
+ size = "sm",
42
+ contentClassName,
43
+ commandProps,
44
+ title = "Comando",
45
+ ...props
46
+ }) => {
30
47
  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxs(
31
48
  DialogContent,
32
49
  {
33
50
  hideClose: true,
34
51
  "aria-describedby": void 0,
35
52
  className: cn(
36
- "overflow-hidden p-0 gap-0 sm:max-w-[384px]",
53
+ "overflow-hidden p-0 gap-0",
54
+ COMMAND_DIALOG_SIZE[size],
37
55
  "rounded-[12px] border border-border-default",
38
56
  // Outline padrão de elementos flutuantes
39
- "outline-float"
57
+ "outline-float",
58
+ contentClassName
40
59
  ),
41
60
  children: [
42
- /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Comando" }),
43
- /* @__PURE__ */ jsx(Command, { children })
61
+ /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
62
+ /* @__PURE__ */ jsx(Command, { ...commandProps, children })
44
63
  ]
45
64
  }
46
65
  ) });
47
66
  };
67
+ const CommandLoading = Command$1.Loading;
48
68
  const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
49
69
  "div",
50
70
  {
@@ -164,6 +184,7 @@ export {
164
184
  CommandInput,
165
185
  CommandItem,
166
186
  CommandList,
187
+ CommandLoading,
167
188
  CommandSeparator,
168
189
  CommandShortcut
169
190
  };
@@ -1 +1 @@
1
- {"version":3,"file":"command.mjs","sources":["../../../../src/components/shadcn/command.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\r\nimport { Command as CommandPrimitive } from \"cmdk\"\r\nimport { Search } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Dialog, DialogContent, DialogTitle } from \"@/components/shadcn/dialog\"\r\n\r\n/**\r\n * Command — alinhado com o views-popover do design-and-table-v2.\r\n *\r\n * Estrutura:\r\n * - <Command> raiz (flex column)\r\n * - <CommandInput> = input \"real\" boxed (bg-input + border + radius-lg + shadow)\r\n * - <CommandList> com padding 4px\r\n * - <CommandGroup> heading uppercase + items\r\n * - <CommandItem> radius-lg (10px), px 12, py 8, font 13px, ícones 18px\r\n *\r\n * Pattern do input replica `.tbl-views-pop-search` exatamente.\r\n */\r\n\r\nconst Command = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive\r\n ref={ref}\r\n className={cn(\r\n // `bg-popover`/`text-popover-foreground` são vocabulário SHADCN, não do DS —\r\n // dependem da bridge do `globals.css`/`index.css`, que NÃO viaja pros canais npm\r\n // e submódulo. Lá a var não existe e a cor cai em `currentColor` (L-039/L-040).\r\n //\r\n // ⚠️ O substituto é `bg-bg-surface`, NÃO `bg-bg-dropdown`. A primeira troca (v0.36.0)\r\n // usou `dropdown` por ser o token da receita de flutuante — mas ele é TRANSLÚCIDO no\r\n // dark (`canvas` a 70%, pareado com `before:backdrop-blur-2xl`, que este componente\r\n // não tem), enquanto a bridge resolvia `popover` pra `surface-elevated`, OPACO.\r\n // Medido: light idêntico nos dois; dark `oklch(0.225 0 0)` vs `oklab(0.205 0 0 / 0.7)`.\r\n // `bg-bg-surface` reproduz o valor original nos DOIS modos.\r\n \"flex h-full w-full flex-col overflow-hidden p-pad-xl bg-bg-surface text-fg-default\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommand.displayName = CommandPrimitive.displayName\r\n\r\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\r\n return (\r\n <Dialog {...props}>\r\n <DialogContent\r\n hideClose\r\n // A11y: Radix exige título; aqui é sr-only (paleta de comando não tem\r\n // header visível) e opt-out de descrição.\r\n aria-describedby={undefined}\r\n className={cn(\r\n \"overflow-hidden p-0 gap-0 sm:max-w-[384px]\",\r\n \"rounded-[12px] border border-border-default\",\r\n // Outline padrão de elementos flutuantes\r\n \"outline-float\"\r\n )}\r\n >\r\n <DialogTitle className=\"sr-only\">Comando</DialogTitle>\r\n <Command>{children}</Command>\r\n </DialogContent>\r\n </Dialog>\r\n )\r\n}\r\n\r\n/* ── Input boxed (igual views-popover search) ─────────────────────────────── */\r\nconst CommandInput = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Input>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n cmdk-input-wrapper=\"\"\r\n className={cn(\r\n \"flex items-center gap-gp-md h-form-md px-pad-xl rounded-radius-lg\",\r\n \"bg-bg-input border border-border-subtle shadow-sh-sm\",\r\n \"transition-[border-color,box-shadow,background-color] duration-150\",\r\n \"focus-within:border-border-brand focus-within:shadow-sh-ring\",\r\n \"dark:bg-bg-muted dark:border-border-input dark:shadow-sh-none\"\r\n )}\r\n >\r\n <Search className=\"size-[14px] text-fg-muted shrink-0\" strokeWidth={1.8} />\r\n <CommandPrimitive.Input\r\n ref={ref}\r\n className={cn(\r\n \"flex-1 min-w-0 bg-transparent border-0 outline-none\",\r\n \"text-body-sm font-normal text-fg-default placeholder:text-fg-muted\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </div>\r\n))\r\nCommandInput.displayName = CommandPrimitive.Input.displayName\r\n\r\n/* ── List ─────────────────────────────────────────────────────────────────── */\r\nconst CommandList = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.List>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.List\r\n ref={ref}\r\n className={cn(\r\n \"max-h-[300px] overflow-y-auto overflow-x-hidden mt-pad-md scrollbar-thin\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandList.displayName = CommandPrimitive.List.displayName\r\n\r\nconst CommandEmpty = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Empty>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\r\n>((props, ref) => (\r\n <CommandPrimitive.Empty\r\n ref={ref}\r\n className=\"py-pad-5xl text-center text-body-md text-fg-muted\"\r\n {...props}\r\n />\r\n))\r\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\r\n\r\n/* ── Group (heading uppercase 28px, sem padding extra no group) ──────────── */\r\nconst CommandGroup = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Group>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Group\r\n ref={ref}\r\n className={cn(\r\n \"overflow-hidden text-fg-default\",\r\n \"[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center\",\r\n \"[&_[cmdk-group-heading]]:h-[28px] [&_[cmdk-group-heading]]:px-pad-xl\",\r\n \"[&_[cmdk-group-heading]]:text-caption-xs [&_[cmdk-group-heading]]:font-bold\",\r\n \"[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\r\n \"[&_[cmdk-group-heading]]:text-fg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandGroup.displayName = CommandPrimitive.Group.displayName\r\n\r\nconst CommandSeparator = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Separator>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Separator\r\n ref={ref}\r\n className={cn(\"mx-pad-xs my-pad-xs h-px bg-border-default\", className)}\r\n {...props}\r\n />\r\n))\r\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\r\n\r\n/* ── Item: px-12 py-8, radius-lg (10px), font 13px, ícones 18px ───────────── */\r\nconst CommandItem = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center gap-gp-md\",\r\n \"rounded-radius-lg px-pad-xl py-pad-md\",\r\n \"text-body-sm font-medium text-fg-muted\",\r\n \"outline-none transition-colors\",\r\n \"data-[selected='true']:bg-bg-muted data-[selected='true']:text-fg-default data-[selected='true']:[&_svg]:text-fg-default\",\r\n \"data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50\",\r\n \"[&_svg]:pointer-events-none [&_svg]:size-[18px] [&_svg]:shrink-0 [&_svg]:text-fg-muted\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandItem.displayName = CommandPrimitive.Item.displayName\r\n\r\nconst CommandShortcut = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n return (\r\n <span\r\n className={cn(\r\n \"ml-auto text-caption-sm tracking-wider text-fg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\nCommandShortcut.displayName = \"CommandShortcut\"\r\n\r\nexport {\r\n Command,\r\n CommandDialog,\r\n CommandInput,\r\n CommandList,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandItem,\r\n CommandShortcut,\r\n CommandSeparator,\r\n}\r\n"],"names":["CommandPrimitive"],"mappings":"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"}
1
+ {"version":3,"file":"command.mjs","sources":["../../../../src/components/shadcn/command.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\r\nimport { Command as CommandPrimitive } from \"cmdk\"\r\nimport { Search } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Dialog, DialogContent, DialogTitle } from \"@/components/shadcn/dialog\"\r\n\r\n/**\r\n * Command — alinhado com o views-popover do design-and-table-v2.\r\n *\r\n * Estrutura:\r\n * - <Command> raiz (flex column)\r\n * - <CommandInput> = input \"real\" boxed (bg-input + border + radius-lg + shadow)\r\n * - <CommandList> com padding 4px\r\n * - <CommandGroup> heading uppercase + items\r\n * - <CommandItem> radius-lg (10px), px 12, py 8, font 13px, ícones 18px\r\n *\r\n * Pattern do input replica `.tbl-views-pop-search` exatamente.\r\n */\r\n\r\nconst Command = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive\r\n ref={ref}\r\n className={cn(\r\n // `bg-popover`/`text-popover-foreground` são vocabulário SHADCN, não do DS —\r\n // dependem da bridge do `globals.css`/`index.css`, que NÃO viaja pros canais npm\r\n // e submódulo. Lá a var não existe e a cor cai em `currentColor` (L-039/L-040).\r\n //\r\n // ⚠️ O substituto é `bg-bg-surface`, NÃO `bg-bg-dropdown`. A primeira troca (v0.36.0)\r\n // usou `dropdown` por ser o token da receita de flutuante — mas ele é TRANSLÚCIDO no\r\n // dark (`canvas` a 70%, pareado com `before:backdrop-blur-2xl`, que este componente\r\n // não tem), enquanto a bridge resolvia `popover` pra `surface-elevated`, OPACO.\r\n // Medido: light idêntico nos dois; dark `oklch(0.225 0 0)` vs `oklab(0.205 0 0 / 0.7)`.\r\n // `bg-bg-surface` reproduz o valor original nos DOIS modos.\r\n \"flex h-full w-full flex-col overflow-hidden p-pad-xl bg-bg-surface text-fg-default\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommand.displayName = CommandPrimitive.displayName\r\n\r\n/**\r\n * Largura da paleta. Era `sm:max-w-[384px]` fixo — arbitrário, sem token, e sem saída:\r\n * paleta com resultado rico (ícone + título + descrição + atalho) não cabe em 384px.\r\n */\r\nconst COMMAND_DIALOG_SIZE = {\r\n // 384px — o DEFAULT, e é a largura que a paleta sempre teve. Era\r\n // `sm:max-w-[384px]` hardcoded; `max-w-sm` é o mesmo valor pelo nome do Tailwind\r\n // (24rem), agora que a escala nativa voltou a valer. Tokenizar não muda pixel.\r\n sm: \"sm:max-w-sm\",\r\n md: \"sm:max-w-drawer-md\", // 480px\r\n lg: \"sm:max-w-modal-md\", // 640px\r\n} as const;\r\n\r\nexport type CommandDialogSize = keyof typeof COMMAND_DIALOG_SIZE;\r\n\r\ntype CommandDialogProps = DialogProps & {\r\n /** Largura da paleta: sm 384 (default, a de sempre) · md 480 · lg 640. */\r\n size?: CommandDialogSize;\r\n /** className do `DialogContent` — altura máxima, sombra, o que for. */\r\n contentClassName?: string;\r\n /**\r\n * Props repassadas ao `<Command>` do cmdk: `shouldFilter`, `filter`, `loop`,\r\n * `value`, `onValueChange`.\r\n *\r\n * Sem isto, busca no SERVIDOR era impossível pelo `CommandDialog` — o cmdk filtra do\r\n * lado do cliente por default, e não havia como passar `shouldFilter={false}`. O\r\n * consumidor igreen-tickets montou a busca global dele com `Dialog` + `Command` na\r\n * mão por causa disso, o que é uma composição legítima, mas não deveria ser\r\n * obrigatória pra algo tão comum.\r\n */\r\n commandProps?: React.ComponentPropsWithoutRef<typeof CommandPrimitive>;\r\n /** Título acessível da paleta (sr-only). Default \"Comando\". */\r\n title?: string;\r\n};\r\n\r\nconst CommandDialog = ({\r\n children,\r\n size = \"sm\",\r\n contentClassName,\r\n commandProps,\r\n title = \"Comando\",\r\n ...props\r\n}: CommandDialogProps) => {\r\n return (\r\n <Dialog {...props}>\r\n <DialogContent\r\n hideClose\r\n // A11y: Radix exige título; aqui é sr-only (paleta de comando não tem\r\n // header visível) e opt-out de descrição.\r\n aria-describedby={undefined}\r\n className={cn(\r\n \"overflow-hidden p-0 gap-0\",\r\n COMMAND_DIALOG_SIZE[size],\r\n \"rounded-[12px] border border-border-default\",\r\n // Outline padrão de elementos flutuantes\r\n \"outline-float\",\r\n contentClassName\r\n )}\r\n >\r\n <DialogTitle className=\"sr-only\">{title}</DialogTitle>\r\n <Command {...commandProps}>{children}</Command>\r\n </DialogContent>\r\n </Dialog>\r\n )\r\n}\r\n\r\n/**\r\n * Estado de carregando do cmdk, reexportado sem casca própria.\r\n *\r\n * O pacote não o exportava, então busca assíncrona pelo `CommandDialog` não tinha como\r\n * mostrar progresso — o consumidor importava do `cmdk` direto, o que fura o contrato de\r\n * \"o DS é a fonte\" e prende a versão do cmdk no projeto dele.\r\n */\r\nconst CommandLoading = CommandPrimitive.Loading;\r\n\r\n/* ── Input boxed (igual views-popover search) ─────────────────────────────── */\r\nconst CommandInput = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Input>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n cmdk-input-wrapper=\"\"\r\n className={cn(\r\n \"flex items-center gap-gp-md h-form-md px-pad-xl rounded-radius-lg\",\r\n \"bg-bg-input border border-border-subtle shadow-sh-sm\",\r\n \"transition-[border-color,box-shadow,background-color] duration-150\",\r\n \"focus-within:border-border-brand focus-within:shadow-sh-ring\",\r\n \"dark:bg-bg-muted dark:border-border-input dark:shadow-sh-none\"\r\n )}\r\n >\r\n <Search className=\"size-[14px] text-fg-muted shrink-0\" strokeWidth={1.8} />\r\n <CommandPrimitive.Input\r\n ref={ref}\r\n className={cn(\r\n \"flex-1 min-w-0 bg-transparent border-0 outline-none\",\r\n \"text-body-sm font-normal text-fg-default placeholder:text-fg-muted\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </div>\r\n))\r\nCommandInput.displayName = CommandPrimitive.Input.displayName\r\n\r\n/* ── List ─────────────────────────────────────────────────────────────────── */\r\nconst CommandList = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.List>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.List\r\n ref={ref}\r\n className={cn(\r\n \"max-h-[300px] overflow-y-auto overflow-x-hidden mt-pad-md scrollbar-thin\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandList.displayName = CommandPrimitive.List.displayName\r\n\r\nconst CommandEmpty = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Empty>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\r\n>((props, ref) => (\r\n <CommandPrimitive.Empty\r\n ref={ref}\r\n className=\"py-pad-5xl text-center text-body-md text-fg-muted\"\r\n {...props}\r\n />\r\n))\r\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\r\n\r\n/* ── Group (heading uppercase 28px, sem padding extra no group) ──────────── */\r\nconst CommandGroup = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Group>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Group\r\n ref={ref}\r\n className={cn(\r\n \"overflow-hidden text-fg-default\",\r\n \"[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center\",\r\n \"[&_[cmdk-group-heading]]:h-[28px] [&_[cmdk-group-heading]]:px-pad-xl\",\r\n \"[&_[cmdk-group-heading]]:text-caption-xs [&_[cmdk-group-heading]]:font-bold\",\r\n \"[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\r\n \"[&_[cmdk-group-heading]]:text-fg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandGroup.displayName = CommandPrimitive.Group.displayName\r\n\r\nconst CommandSeparator = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Separator>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Separator\r\n ref={ref}\r\n className={cn(\"mx-pad-xs my-pad-xs h-px bg-border-default\", className)}\r\n {...props}\r\n />\r\n))\r\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\r\n\r\n/* ── Item: px-12 py-8, radius-lg (10px), font 13px, ícones 18px ───────────── */\r\nconst CommandItem = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center gap-gp-md\",\r\n \"rounded-radius-lg px-pad-xl py-pad-md\",\r\n \"text-body-sm font-medium text-fg-muted\",\r\n \"outline-none transition-colors\",\r\n \"data-[selected='true']:bg-bg-muted data-[selected='true']:text-fg-default data-[selected='true']:[&_svg]:text-fg-default\",\r\n \"data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50\",\r\n \"[&_svg]:pointer-events-none [&_svg]:size-[18px] [&_svg]:shrink-0 [&_svg]:text-fg-muted\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommandItem.displayName = CommandPrimitive.Item.displayName\r\n\r\nconst CommandShortcut = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n return (\r\n <span\r\n className={cn(\r\n \"ml-auto text-caption-sm tracking-wider text-fg-subtle\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\nCommandShortcut.displayName = \"CommandShortcut\"\r\n\r\nexport {\r\n Command,\r\n CommandDialog,\r\n CommandLoading,\r\n CommandInput,\r\n CommandList,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandItem,\r\n CommandShortcut,\r\n CommandSeparator,\r\n}\r\n"],"names":["CommandPrimitive"],"mappings":"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"}
@@ -17,7 +17,7 @@ import * as React from "react";
17
17
  */
18
18
  export type InputGroupState = "default" | "error" | "warning" | "success";
19
19
  declare const inputGroupVariants: (props?: ({
20
- size?: "md" | "xs" | "sm" | "xxs" | null | undefined;
20
+ size?: "xs" | "sm" | "md" | "xxs" | null | undefined;
21
21
  state?: "success" | "warning" | "default" | "error" | null | undefined;
22
22
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
23
23
  export type InputGroupVariantProps = VariantProps<typeof inputGroupVariants>;
@@ -46,7 +46,7 @@ export type InputOTPVariant = "connected" | "outlined" | "filled" | "underline";
46
46
  export type InputOTPSize = "xxs" | "xs" | "sm" | "md";
47
47
  export type InputOTPState = "default" | "error" | "warning" | "success";
48
48
  declare const slotVariants: (props?: ({
49
- size?: "md" | "xs" | "sm" | "xxs" | null | undefined;
49
+ size?: "xs" | "sm" | "md" | "xxs" | null | undefined;
50
50
  variant?: "filled" | "underline" | "connected" | "outlined" | null | undefined;
51
51
  state?: "success" | "warning" | "default" | "error" | null | undefined;
52
52
  active?: boolean | null | undefined;
@@ -15,7 +15,7 @@ import * as React from "react";
15
15
  */
16
16
  export type InputState = "default" | "error" | "warning" | "success";
17
17
  declare const inputVariants: (props?: ({
18
- size?: "md" | "xs" | "sm" | "xxs" | null | undefined;
18
+ size?: "xs" | "sm" | "md" | "xxs" | null | undefined;
19
19
  state?: "success" | "warning" | "default" | "error" | null | undefined;
20
20
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
21
21
  export type InputVariantProps = VariantProps<typeof inputVariants>;
@@ -8,7 +8,7 @@ declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
8
8
  declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
9
9
  declare const sheetVariants: (props?: ({
10
10
  side?: "bottom" | "left" | "right" | "top" | null | undefined;
11
- size?: "md" | "sm" | "lg" | null | undefined;
11
+ size?: "sm" | "md" | "lg" | null | undefined;
12
12
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
13
13
  interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
14
14
  /** Esconde o botão "X" (Close) no canto superior direito. Default: false. */
@@ -65,7 +65,7 @@ type AppShellBaseProps = {
65
65
  *
66
66
  * ```tsx
67
67
  * import { Link } from "react-router-dom";
68
- * <AppShell renderLink={(p) => <Link {...p} to={p.href} />} … />
68
+ * <AppShell renderLink={({ href, ...p }) => <Link {...p} to={href} />} … />
69
69
  * ```
70
70
  *
71
71
  * Sem isto, o menu cancela a navegação nativa quando você passa `onItemClick` —
@@ -16,6 +16,10 @@ const Chip = React.forwardRef(function Chip2({
16
16
  asButton,
17
17
  onRemove,
18
18
  removeLabel,
19
+ // Extraído do rest de propósito: com `onRemove` a pílula é um <span>, e `disabled`
20
+ // num <span> é atributo inválido — não desabilita nada e ainda vaza pro DOM. Aqui
21
+ // ele vai pros BOTÕES, que é onde significa alguma coisa.
22
+ disabled: desabilitado,
19
23
  className,
20
24
  type,
21
25
  ...rest
@@ -41,6 +45,7 @@ const Chip = React.forwardRef(function Chip2({
41
45
  onClick,
42
46
  className: chip_styles.chipLabel(),
43
47
  "aria-pressed": selected,
48
+ disabled: desabilitado,
44
49
  children
45
50
  }
46
51
  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: chip_styles.chipLabel(), children }),
@@ -51,6 +56,7 @@ const Chip = React.forwardRef(function Chip2({
51
56
  onClick: onRemove,
52
57
  className: chip_styles.chipRemove({ size }),
53
58
  "aria-label": nome,
59
+ disabled: desabilitado,
54
60
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": true })
55
61
  }
56
62
  )
@@ -67,6 +73,7 @@ const Chip = React.forwardRef(function Chip2({
67
73
  onClick,
68
74
  className: classes,
69
75
  "aria-pressed": selected,
76
+ disabled: desabilitado,
70
77
  ...rest,
71
78
  children
72
79
  }
@@ -1 +1 @@
1
- {"version":3,"file":"chip.cjs","sources":["../../../../../src/components/ui/Chip/chip.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent, type ReactNode } from \"react\";\r\nimport { X } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n chipLabel,\r\n chipRemove,\r\n chipVariants,\r\n type ChipVariantProps,\r\n} from \"./chip.styles\";\r\n\r\nexport type ChipProps = Omit<\r\n React.ButtonHTMLAttributes<HTMLButtonElement> &\r\n React.HTMLAttributes<HTMLSpanElement>,\r\n \"color\"\r\n> &\r\n ChipVariantProps & {\r\n /** Conteúdo (label, ícone, etc) */\r\n children: ReactNode;\r\n /**\r\n * Quando passado, o chip vira `<button>` clicável. Se omitido,\r\n * renderiza como `<span>` estático (pra status/tag).\r\n */\r\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n /** Força renderizar como button mesmo sem onClick */\r\n asButton?: boolean;\r\n /**\r\n * Remover o chip — renderiza um \"×\" com alvo PRÓPRIO, ao lado da label.\r\n *\r\n * Existe porque remover é o comportamento padrão de chip de filtro aplicado, e a\r\n * receita anterior do DS era `<Chip onClick={remover}>Status: Ativo ×</Chip>`: o \"×\"\r\n * digitado no texto, o chip inteiro removendo, e nenhuma forma de ter as duas ações\r\n * (\"editar o filtro\" e \"tirar o filtro\") no mesmo chip.\r\n *\r\n * ⚠️ Com `onRemove` a pílula vira `<span>` e a label ganha o próprio `<button>`\r\n * quando há `onClick` — botão dentro de botão é HTML inválido, o navegador desaninha\r\n * e o clique no × passaria a disparar o do chip também.\r\n */\r\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\r\n /**\r\n * Nome acessível do botão de remover. Default: \"Remover <label>\" quando `children`\r\n * é texto, senão \"Remover\". Passe explicitamente quando o chip não for texto — numa\r\n * barra de filtros, cinco botões chamados \"Remover\" são indistinguíveis no leitor.\r\n */\r\n removeLabel?: string;\r\n };\r\n\r\n/**\r\n * Chip — pílula compacta pra status/tags/filtros/abas.\r\n *\r\n * Dual-mode:\r\n * - **Span estático** (default): usado pra Badge-like (status, categoria, count)\r\n * - **Button interativo**: quando recebe `onClick` OU `asButton`\r\n *\r\n * Pra grupo de seleção (radio/checkbox via chips), use `<ChipGroup>`.\r\n *\r\n * Variantes:\r\n * - `color`: primary | neutral | danger | warning | success | info (default `neutral`)\r\n * - `variant`: solid | outline | soft (default `soft`)\r\n * - `size`: sm (24px) | md (28px) | lg (32px) (default `md`)\r\n */\r\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\r\n {\r\n children,\r\n color,\r\n variant,\r\n size,\r\n shape,\r\n selected,\r\n onClick,\r\n asButton,\r\n onRemove,\r\n removeLabel,\r\n className,\r\n type,\r\n ...rest\r\n },\r\n ref,\r\n) {\r\n const interactive = Boolean(onClick) || asButton === true;\r\n const classes = cn(\r\n chipVariants({ color, variant, size, shape, interactive, selected }),\r\n className,\r\n );\r\n\r\n if (onRemove) {\r\n const nome =\r\n removeLabel ??\r\n (typeof children === \"string\" ? `Remover ${children}` : \"Remover\");\r\n return (\r\n <span\r\n ref={ref as React.Ref<HTMLSpanElement>}\r\n className={classes}\r\n {...(rest as React.HTMLAttributes<HTMLSpanElement>)}\r\n >\r\n {interactive ? (\r\n <button\r\n type={type ?? \"button\"}\r\n onClick={onClick}\r\n className={chipLabel()}\r\n aria-pressed={selected}\r\n >\r\n {children}\r\n </button>\r\n ) : (\r\n <span className={chipLabel()}>{children}</span>\r\n )}\r\n <button\r\n type=\"button\"\r\n onClick={onRemove}\r\n className={chipRemove({ size })}\r\n aria-label={nome}\r\n >\r\n <X aria-hidden />\r\n </button>\r\n </span>\r\n );\r\n }\r\n\r\n if (interactive) {\r\n return (\r\n <button\r\n ref={ref as React.Ref<HTMLButtonElement>}\r\n type={type ?? \"button\"}\r\n onClick={onClick}\r\n className={classes}\r\n aria-pressed={selected}\r\n {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n\r\n return (\r\n <span\r\n ref={ref as React.Ref<HTMLSpanElement>}\r\n className={classes}\r\n {...(rest as React.HTMLAttributes<HTMLSpanElement>)}\r\n >\r\n {children}\r\n </span>\r\n );\r\n});\r\n"],"names":["forwardRef","Chip","cn","chipVariants","jsxs","jsx","chipLabel","chipRemove","X"],"mappings":";;;;;;;AA4DO,MAAM,OAAOA,MAAAA,WAAmC,SAASC,MAC9D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAc,QAAQ,OAAO,KAAK,aAAa;AACrD,QAAM,UAAUC,MAAAA;AAAAA,IACdC,YAAAA,aAAa,EAAE,OAAO,SAAS,MAAM,OAAO,aAAa,UAAU;AAAA,IACnE;AAAA,EAAA;AAGF,MAAI,UAAU;AACZ,UAAM,OACJ,gBACC,OAAO,aAAa,WAAW,WAAW,QAAQ,KAAK;AAC1D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAI;AAAA,QAEJ,UAAA;AAAA,UAAA,cACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,QAAQ;AAAA,cACd;AAAA,cACA,WAAWC,YAAAA,UAAA;AAAA,cACX,gBAAc;AAAA,cAEb;AAAA,YAAA;AAAA,UAAA,IAGHD,2BAAAA,IAAC,QAAA,EAAK,WAAWC,YAAAA,UAAA,GAAc,UAAS;AAAA,UAE1CD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAWE,YAAAA,WAAW,EAAE,MAAM;AAAA,cAC9B,cAAY;AAAA,cAEZ,UAAAF,2BAAAA,IAACG,YAAAA,GAAA,EAAE,eAAW,KAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,aAAa;AACf,WACEH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd;AAAA,QACA,WAAW;AAAA,QACX,gBAAc;AAAA,QACb,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACV,GAAI;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;"}
1
+ {"version":3,"file":"chip.cjs","sources":["../../../../../src/components/ui/Chip/chip.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent, type ReactNode } from \"react\";\r\nimport { X } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n chipLabel,\r\n chipRemove,\r\n chipVariants,\r\n type ChipVariantProps,\r\n} from \"./chip.styles\";\r\n\r\nexport type ChipProps = Omit<\r\n React.ButtonHTMLAttributes<HTMLButtonElement> &\r\n React.HTMLAttributes<HTMLSpanElement>,\r\n \"color\"\r\n> &\r\n ChipVariantProps & {\r\n /** Conteúdo (label, ícone, etc) */\r\n children: ReactNode;\r\n /**\r\n * Quando passado, o chip vira `<button>` clicável. Se omitido,\r\n * renderiza como `<span>` estático (pra status/tag).\r\n */\r\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n /** Força renderizar como button mesmo sem onClick */\r\n asButton?: boolean;\r\n /**\r\n * Remover o chip — renderiza um \"×\" com alvo PRÓPRIO, ao lado da label.\r\n *\r\n * Existe porque remover é o comportamento padrão de chip de filtro aplicado, e a\r\n * receita anterior do DS era `<Chip onClick={remover}>Status: Ativo ×</Chip>`: o \"×\"\r\n * digitado no texto, o chip inteiro removendo, e nenhuma forma de ter as duas ações\r\n * (\"editar o filtro\" e \"tirar o filtro\") no mesmo chip.\r\n *\r\n * ⚠️ Com `onRemove` a pílula vira `<span>` e a label ganha o próprio `<button>`\r\n * quando há `onClick` — botão dentro de botão é HTML inválido, o navegador desaninha\r\n * e o clique no × passaria a disparar o do chip também.\r\n */\r\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\r\n /**\r\n * Nome acessível do botão de remover. Default: \"Remover <label>\" quando `children`\r\n * é texto, senão \"Remover\". Passe explicitamente quando o chip não for texto — numa\r\n * barra de filtros, cinco botões chamados \"Remover\" são indistinguíveis no leitor.\r\n */\r\n removeLabel?: string;\r\n };\r\n\r\n/**\r\n * Chip — pílula compacta pra status/tags/filtros/abas.\r\n *\r\n * Dual-mode:\r\n * - **Span estático** (default): usado pra Badge-like (status, categoria, count)\r\n * - **Button interativo**: quando recebe `onClick` OU `asButton`\r\n *\r\n * Pra grupo de seleção (radio/checkbox via chips), use `<ChipGroup>`.\r\n *\r\n * Variantes:\r\n * - `color`: primary | neutral | danger | warning | success | info (default `neutral`)\r\n * - `variant`: solid | outline | soft (default `soft`)\r\n * - `size`: sm (24px) | md (28px) | lg (32px) (default `md`)\r\n */\r\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\r\n {\r\n children,\r\n color,\r\n variant,\r\n size,\r\n shape,\r\n selected,\r\n onClick,\r\n asButton,\r\n onRemove,\r\n removeLabel,\r\n // Extraído do rest de propósito: com `onRemove` a pílula é um <span>, e `disabled`\r\n // num <span> é atributo inválido — não desabilita nada e ainda vaza pro DOM. Aqui\r\n // ele vai pros BOTÕES, que é onde significa alguma coisa.\r\n disabled: desabilitado,\r\n className,\r\n type,\r\n ...rest\r\n },\r\n ref,\r\n) {\r\n const interactive = Boolean(onClick) || asButton === true;\r\n const classes = cn(\r\n chipVariants({ color, variant, size, shape, interactive, selected }),\r\n className,\r\n );\r\n\r\n if (onRemove) {\r\n const nome =\r\n removeLabel ??\r\n (typeof children === \"string\" ? `Remover ${children}` : \"Remover\");\r\n return (\r\n <span\r\n ref={ref as React.Ref<HTMLSpanElement>}\r\n className={classes}\r\n {...(rest as React.HTMLAttributes<HTMLSpanElement>)}\r\n >\r\n {interactive ? (\r\n <button\r\n type={type ?? \"button\"}\r\n onClick={onClick}\r\n className={chipLabel()}\r\n aria-pressed={selected}\r\n disabled={desabilitado}\r\n >\r\n {children}\r\n </button>\r\n ) : (\r\n <span className={chipLabel()}>{children}</span>\r\n )}\r\n <button\r\n type=\"button\"\r\n onClick={onRemove}\r\n className={chipRemove({ size })}\r\n aria-label={nome}\r\n disabled={desabilitado}\r\n >\r\n <X aria-hidden />\r\n </button>\r\n </span>\r\n );\r\n }\r\n\r\n if (interactive) {\r\n return (\r\n <button\r\n ref={ref as React.Ref<HTMLButtonElement>}\r\n type={type ?? \"button\"}\r\n onClick={onClick}\r\n className={classes}\r\n aria-pressed={selected}\r\n disabled={desabilitado}\r\n {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n\r\n return (\r\n <span\r\n ref={ref as React.Ref<HTMLSpanElement>}\r\n className={classes}\r\n {...(rest as React.HTMLAttributes<HTMLSpanElement>)}\r\n >\r\n {children}\r\n </span>\r\n );\r\n});\r\n"],"names":["forwardRef","Chip","cn","chipVariants","jsxs","jsx","chipLabel","chipRemove","X"],"mappings":";;;;;;;AA4DO,MAAM,OAAOA,MAAAA,WAAmC,SAASC,MAC9D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAIA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAc,QAAQ,OAAO,KAAK,aAAa;AACrD,QAAM,UAAUC,MAAAA;AAAAA,IACdC,YAAAA,aAAa,EAAE,OAAO,SAAS,MAAM,OAAO,aAAa,UAAU;AAAA,IACnE;AAAA,EAAA;AAGF,MAAI,UAAU;AACZ,UAAM,OACJ,gBACC,OAAO,aAAa,WAAW,WAAW,QAAQ,KAAK;AAC1D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAI;AAAA,QAEJ,UAAA;AAAA,UAAA,cACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,QAAQ;AAAA,cACd;AAAA,cACA,WAAWC,YAAAA,UAAA;AAAA,cACX,gBAAc;AAAA,cACd,UAAU;AAAA,cAET;AAAA,YAAA;AAAA,UAAA,IAGHD,2BAAAA,IAAC,QAAA,EAAK,WAAWC,YAAAA,UAAA,GAAc,UAAS;AAAA,UAE1CD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAWE,YAAAA,WAAW,EAAE,MAAM;AAAA,cAC9B,cAAY;AAAA,cACZ,UAAU;AAAA,cAEV,UAAAF,2BAAAA,IAACG,YAAAA,GAAA,EAAE,eAAW,KAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,aAAa;AACf,WACEH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd;AAAA,QACA,WAAW;AAAA,QACX,gBAAc;AAAA,QACd,UAAU;AAAA,QACT,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACV,GAAI;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAC3C,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EACvC,OAAO,CACR,GACC,gBAAgB,GAAG;IACjB,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEJ;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI;IA5Cb,mCAAmC;cACzB,SAAS;IACnB;;;OAGG;cACO,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;IACpD,qDAAqD;eAC1C,OAAO;IAClB;;;;;;;;;;;OAWG;eACQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI;IACrD;;;;OAIG;kBACW,MAAM;+CAmGtB,CAAC"}
1
+ {"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAC3C,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EACvC,OAAO,CACR,GACC,gBAAgB,GAAG;IACjB,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEJ;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI;IA5Cb,mCAAmC;cACzB,SAAS;IACnB;;;OAGG;cACO,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;IACpD,qDAAqD;eAC1C,OAAO;IAClB;;;;;;;;;;;OAWG;eACQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI;IACrD;;;;OAIG;kBACW,MAAM;+CA0GtB,CAAC"}
@@ -14,6 +14,10 @@ const Chip = forwardRef(function Chip2({
14
14
  asButton,
15
15
  onRemove,
16
16
  removeLabel,
17
+ // Extraído do rest de propósito: com `onRemove` a pílula é um <span>, e `disabled`
18
+ // num <span> é atributo inválido — não desabilita nada e ainda vaza pro DOM. Aqui
19
+ // ele vai pros BOTÕES, que é onde significa alguma coisa.
20
+ disabled: desabilitado,
17
21
  className,
18
22
  type,
19
23
  ...rest
@@ -39,6 +43,7 @@ const Chip = forwardRef(function Chip2({
39
43
  onClick,
40
44
  className: chipLabel(),
41
45
  "aria-pressed": selected,
46
+ disabled: desabilitado,
42
47
  children
43
48
  }
44
49
  ) : /* @__PURE__ */ jsx("span", { className: chipLabel(), children }),
@@ -49,6 +54,7 @@ const Chip = forwardRef(function Chip2({
49
54
  onClick: onRemove,
50
55
  className: chipRemove({ size }),
51
56
  "aria-label": nome,
57
+ disabled: desabilitado,
52
58
  children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
53
59
  }
54
60
  )
@@ -65,6 +71,7 @@ const Chip = forwardRef(function Chip2({
65
71
  onClick,
66
72
  className: classes,
67
73
  "aria-pressed": selected,
74
+ disabled: desabilitado,
68
75
  ...rest,
69
76
  children
70
77
  }
@@ -1 +1 @@
1
- {"version":3,"file":"chip.mjs","sources":["../../../../../src/components/ui/Chip/chip.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent, type ReactNode } from \"react\";\r\nimport { X } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n chipLabel,\r\n chipRemove,\r\n chipVariants,\r\n type ChipVariantProps,\r\n} from \"./chip.styles\";\r\n\r\nexport type ChipProps = Omit<\r\n React.ButtonHTMLAttributes<HTMLButtonElement> &\r\n React.HTMLAttributes<HTMLSpanElement>,\r\n \"color\"\r\n> &\r\n ChipVariantProps & {\r\n /** Conteúdo (label, ícone, etc) */\r\n children: ReactNode;\r\n /**\r\n * Quando passado, o chip vira `<button>` clicável. Se omitido,\r\n * renderiza como `<span>` estático (pra status/tag).\r\n */\r\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n /** Força renderizar como button mesmo sem onClick */\r\n asButton?: boolean;\r\n /**\r\n * Remover o chip — renderiza um \"×\" com alvo PRÓPRIO, ao lado da label.\r\n *\r\n * Existe porque remover é o comportamento padrão de chip de filtro aplicado, e a\r\n * receita anterior do DS era `<Chip onClick={remover}>Status: Ativo ×</Chip>`: o \"×\"\r\n * digitado no texto, o chip inteiro removendo, e nenhuma forma de ter as duas ações\r\n * (\"editar o filtro\" e \"tirar o filtro\") no mesmo chip.\r\n *\r\n * ⚠️ Com `onRemove` a pílula vira `<span>` e a label ganha o próprio `<button>`\r\n * quando há `onClick` — botão dentro de botão é HTML inválido, o navegador desaninha\r\n * e o clique no × passaria a disparar o do chip também.\r\n */\r\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\r\n /**\r\n * Nome acessível do botão de remover. Default: \"Remover <label>\" quando `children`\r\n * é texto, senão \"Remover\". Passe explicitamente quando o chip não for texto — numa\r\n * barra de filtros, cinco botões chamados \"Remover\" são indistinguíveis no leitor.\r\n */\r\n removeLabel?: string;\r\n };\r\n\r\n/**\r\n * Chip — pílula compacta pra status/tags/filtros/abas.\r\n *\r\n * Dual-mode:\r\n * - **Span estático** (default): usado pra Badge-like (status, categoria, count)\r\n * - **Button interativo**: quando recebe `onClick` OU `asButton`\r\n *\r\n * Pra grupo de seleção (radio/checkbox via chips), use `<ChipGroup>`.\r\n *\r\n * Variantes:\r\n * - `color`: primary | neutral | danger | warning | success | info (default `neutral`)\r\n * - `variant`: solid | outline | soft (default `soft`)\r\n * - `size`: sm (24px) | md (28px) | lg (32px) (default `md`)\r\n */\r\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\r\n {\r\n children,\r\n color,\r\n variant,\r\n size,\r\n shape,\r\n selected,\r\n onClick,\r\n asButton,\r\n onRemove,\r\n removeLabel,\r\n className,\r\n type,\r\n ...rest\r\n },\r\n ref,\r\n) {\r\n const interactive = Boolean(onClick) || asButton === true;\r\n const classes = cn(\r\n chipVariants({ color, variant, size, shape, interactive, selected }),\r\n className,\r\n );\r\n\r\n if (onRemove) {\r\n const nome =\r\n removeLabel ??\r\n (typeof children === \"string\" ? `Remover ${children}` : \"Remover\");\r\n return (\r\n <span\r\n ref={ref as React.Ref<HTMLSpanElement>}\r\n className={classes}\r\n {...(rest as React.HTMLAttributes<HTMLSpanElement>)}\r\n >\r\n {interactive ? (\r\n <button\r\n type={type ?? \"button\"}\r\n onClick={onClick}\r\n className={chipLabel()}\r\n aria-pressed={selected}\r\n >\r\n {children}\r\n </button>\r\n ) : (\r\n <span className={chipLabel()}>{children}</span>\r\n )}\r\n <button\r\n type=\"button\"\r\n onClick={onRemove}\r\n className={chipRemove({ size })}\r\n aria-label={nome}\r\n >\r\n <X aria-hidden />\r\n </button>\r\n </span>\r\n );\r\n }\r\n\r\n if (interactive) {\r\n return (\r\n <button\r\n ref={ref as React.Ref<HTMLButtonElement>}\r\n type={type ?? \"button\"}\r\n onClick={onClick}\r\n className={classes}\r\n aria-pressed={selected}\r\n {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n\r\n return (\r\n <span\r\n ref={ref as React.Ref<HTMLSpanElement>}\r\n className={classes}\r\n {...(rest as React.HTMLAttributes<HTMLSpanElement>)}\r\n >\r\n {children}\r\n </span>\r\n );\r\n});\r\n"],"names":["Chip"],"mappings":";;;;;AA4DO,MAAM,OAAO,WAAmC,SAASA,MAC9D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAc,QAAQ,OAAO,KAAK,aAAa;AACrD,QAAM,UAAU;AAAA,IACd,aAAa,EAAE,OAAO,SAAS,MAAM,OAAO,aAAa,UAAU;AAAA,IACnE;AAAA,EAAA;AAGF,MAAI,UAAU;AACZ,UAAM,OACJ,gBACC,OAAO,aAAa,WAAW,WAAW,QAAQ,KAAK;AAC1D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAI;AAAA,QAEJ,UAAA;AAAA,UAAA,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,QAAQ;AAAA,cACd;AAAA,cACA,WAAW,UAAA;AAAA,cACX,gBAAc;AAAA,cAEb;AAAA,YAAA;AAAA,UAAA,IAGH,oBAAC,QAAA,EAAK,WAAW,UAAA,GAAc,UAAS;AAAA,UAE1C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW,WAAW,EAAE,MAAM;AAAA,cAC9B,cAAY;AAAA,cAEZ,UAAA,oBAAC,GAAA,EAAE,eAAW,KAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,aAAa;AACf,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd;AAAA,QACA,WAAW;AAAA,QACX,gBAAc;AAAA,QACb,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACV,GAAI;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
1
+ {"version":3,"file":"chip.mjs","sources":["../../../../../src/components/ui/Chip/chip.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent, type ReactNode } from \"react\";\r\nimport { X } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n chipLabel,\r\n chipRemove,\r\n chipVariants,\r\n type ChipVariantProps,\r\n} from \"./chip.styles\";\r\n\r\nexport type ChipProps = Omit<\r\n React.ButtonHTMLAttributes<HTMLButtonElement> &\r\n React.HTMLAttributes<HTMLSpanElement>,\r\n \"color\"\r\n> &\r\n ChipVariantProps & {\r\n /** Conteúdo (label, ícone, etc) */\r\n children: ReactNode;\r\n /**\r\n * Quando passado, o chip vira `<button>` clicável. Se omitido,\r\n * renderiza como `<span>` estático (pra status/tag).\r\n */\r\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n /** Força renderizar como button mesmo sem onClick */\r\n asButton?: boolean;\r\n /**\r\n * Remover o chip — renderiza um \"×\" com alvo PRÓPRIO, ao lado da label.\r\n *\r\n * Existe porque remover é o comportamento padrão de chip de filtro aplicado, e a\r\n * receita anterior do DS era `<Chip onClick={remover}>Status: Ativo ×</Chip>`: o \"×\"\r\n * digitado no texto, o chip inteiro removendo, e nenhuma forma de ter as duas ações\r\n * (\"editar o filtro\" e \"tirar o filtro\") no mesmo chip.\r\n *\r\n * ⚠️ Com `onRemove` a pílula vira `<span>` e a label ganha o próprio `<button>`\r\n * quando há `onClick` — botão dentro de botão é HTML inválido, o navegador desaninha\r\n * e o clique no × passaria a disparar o do chip também.\r\n */\r\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\r\n /**\r\n * Nome acessível do botão de remover. Default: \"Remover <label>\" quando `children`\r\n * é texto, senão \"Remover\". Passe explicitamente quando o chip não for texto — numa\r\n * barra de filtros, cinco botões chamados \"Remover\" são indistinguíveis no leitor.\r\n */\r\n removeLabel?: string;\r\n };\r\n\r\n/**\r\n * Chip — pílula compacta pra status/tags/filtros/abas.\r\n *\r\n * Dual-mode:\r\n * - **Span estático** (default): usado pra Badge-like (status, categoria, count)\r\n * - **Button interativo**: quando recebe `onClick` OU `asButton`\r\n *\r\n * Pra grupo de seleção (radio/checkbox via chips), use `<ChipGroup>`.\r\n *\r\n * Variantes:\r\n * - `color`: primary | neutral | danger | warning | success | info (default `neutral`)\r\n * - `variant`: solid | outline | soft (default `soft`)\r\n * - `size`: sm (24px) | md (28px) | lg (32px) (default `md`)\r\n */\r\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\r\n {\r\n children,\r\n color,\r\n variant,\r\n size,\r\n shape,\r\n selected,\r\n onClick,\r\n asButton,\r\n onRemove,\r\n removeLabel,\r\n // Extraído do rest de propósito: com `onRemove` a pílula é um <span>, e `disabled`\r\n // num <span> é atributo inválido — não desabilita nada e ainda vaza pro DOM. Aqui\r\n // ele vai pros BOTÕES, que é onde significa alguma coisa.\r\n disabled: desabilitado,\r\n className,\r\n type,\r\n ...rest\r\n },\r\n ref,\r\n) {\r\n const interactive = Boolean(onClick) || asButton === true;\r\n const classes = cn(\r\n chipVariants({ color, variant, size, shape, interactive, selected }),\r\n className,\r\n );\r\n\r\n if (onRemove) {\r\n const nome =\r\n removeLabel ??\r\n (typeof children === \"string\" ? `Remover ${children}` : \"Remover\");\r\n return (\r\n <span\r\n ref={ref as React.Ref<HTMLSpanElement>}\r\n className={classes}\r\n {...(rest as React.HTMLAttributes<HTMLSpanElement>)}\r\n >\r\n {interactive ? (\r\n <button\r\n type={type ?? \"button\"}\r\n onClick={onClick}\r\n className={chipLabel()}\r\n aria-pressed={selected}\r\n disabled={desabilitado}\r\n >\r\n {children}\r\n </button>\r\n ) : (\r\n <span className={chipLabel()}>{children}</span>\r\n )}\r\n <button\r\n type=\"button\"\r\n onClick={onRemove}\r\n className={chipRemove({ size })}\r\n aria-label={nome}\r\n disabled={desabilitado}\r\n >\r\n <X aria-hidden />\r\n </button>\r\n </span>\r\n );\r\n }\r\n\r\n if (interactive) {\r\n return (\r\n <button\r\n ref={ref as React.Ref<HTMLButtonElement>}\r\n type={type ?? \"button\"}\r\n onClick={onClick}\r\n className={classes}\r\n aria-pressed={selected}\r\n disabled={desabilitado}\r\n {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n\r\n return (\r\n <span\r\n ref={ref as React.Ref<HTMLSpanElement>}\r\n className={classes}\r\n {...(rest as React.HTMLAttributes<HTMLSpanElement>)}\r\n >\r\n {children}\r\n </span>\r\n );\r\n});\r\n"],"names":["Chip"],"mappings":";;;;;AA4DO,MAAM,OAAO,WAAmC,SAASA,MAC9D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAIA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAc,QAAQ,OAAO,KAAK,aAAa;AACrD,QAAM,UAAU;AAAA,IACd,aAAa,EAAE,OAAO,SAAS,MAAM,OAAO,aAAa,UAAU;AAAA,IACnE;AAAA,EAAA;AAGF,MAAI,UAAU;AACZ,UAAM,OACJ,gBACC,OAAO,aAAa,WAAW,WAAW,QAAQ,KAAK;AAC1D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAI;AAAA,QAEJ,UAAA;AAAA,UAAA,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,QAAQ;AAAA,cACd;AAAA,cACA,WAAW,UAAA;AAAA,cACX,gBAAc;AAAA,cACd,UAAU;AAAA,cAET;AAAA,YAAA;AAAA,UAAA,IAGH,oBAAC,QAAA,EAAK,WAAW,UAAA,GAAc,UAAS;AAAA,UAE1C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW,WAAW,EAAE,MAAM;AAAA,cAC9B,cAAY;AAAA,cACZ,UAAU;AAAA,cAEV,UAAA,oBAAC,GAAA,EAAE,eAAW,KAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,aAAa;AACf,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd;AAAA,QACA,WAAW;AAAA,QACX,gBAAc;AAAA,QACd,UAAU;AAAA,QACT,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACV,GAAI;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
@@ -1 +1 @@
1
- {"version":3,"file":"chip.styles.cjs","sources":["../../../../../src/components/ui/Chip/chip.styles.ts"],"sourcesContent":["import { tv, type VariantProps } from \"@/utils/tv\";\r\n\r\n/**\r\n * Chip styles — pílula compacta pra status, tags, filtros, abas.\r\n *\r\n * Pode ser estático (span) ou interativo (button via `onClick` / dentro de ChipGroup).\r\n *\r\n * Variantes:\r\n * - color: primary | neutral | danger | warning | success | info\r\n * - variant: solid | outline | soft\r\n * - size: sm (24px) | md (28px = form-xs) | lg (32px = form-sm)\r\n *\r\n * Padding/font-size escalam por size — alturas coerentes com o sistema (sm < form-xs\r\n * pra ficar mais compacto que o menor botão; md/lg alinham com Button).\r\n */\r\nexport const chipVariants = tv({\r\n base: [\r\n \"inline-flex items-center justify-center gap-gp-xs shrink-0\",\r\n \"font-semibold whitespace-nowrap select-none\",\r\n \"transition-[background-color,color,border-color,box-shadow] duration-150\",\r\n \"[&_svg]:shrink-0\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"h-[24px] px-pad-md text-caption-sm [&_svg]:size-[12px]\",\r\n md: \"h-form-xs px-pad-lg text-body-xs font-normal [&_svg]:size-[12px]\", // 28px\r\n lg: \"h-form-sm px-pad-xl text-body-sm font-normal [&_svg]:size-[14px]\", // 32px\r\n xl: \"h-form-md px-pad-xl text-body-sm font-normal [&_svg]:size-[14px]\", // 36px (= Button md)\r\n },\r\n /**\r\n * `pill` = rounded-full (default — chip pílula clássico).\r\n * `rounded` = canto arredondado igual ao Button (radius-md em sm/md, radius-lg em lg/xl).\r\n */\r\n shape: {\r\n pill: \"rounded-radius-full\",\r\n rounded: \"\", // aplica via compoundVariants por size\r\n },\r\n color: {\r\n primary: \"\",\r\n neutral: \"\",\r\n danger: \"\",\r\n warning: \"\",\r\n success: \"\",\r\n info: \"\",\r\n },\r\n variant: {\r\n solid: \"\",\r\n outline: \"border\",\r\n soft: \"\",\r\n \"soft-outline\": \"border\",\r\n },\r\n interactive: {\r\n true: \"cursor-pointer outline-none focus-visible:shadow-sh-ring\",\r\n false: \"\",\r\n },\r\n selected: {\r\n true: \"\",\r\n false: \"\",\r\n },\r\n },\r\n compoundVariants: [\r\n /* ── Shape rounded × size — radius proporcional ao Button ──── */\r\n { shape: \"rounded\", size: \"sm\", class: \"rounded-radius-md\" },\r\n { shape: \"rounded\", size: \"md\", class: \"rounded-radius-md\" },\r\n { shape: \"rounded\", size: \"lg\", class: \"rounded-radius-lg\" },\r\n { shape: \"rounded\", size: \"xl\", class: \"rounded-radius-lg\" },\r\n\r\n /* ── Solid ──────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"solid\", class: \"bg-bg-brand text-fg-on-brand\" },\r\n { color: \"neutral\", variant: \"solid\", class: \"bg-bg-muted text-fg-default\" },\r\n { color: \"danger\", variant: \"solid\", class: \"bg-bg-danger text-fg-on-danger\" },\r\n { color: \"warning\", variant: \"solid\", class: \"bg-bg-warning text-fg-on-warning\" },\r\n { color: \"success\", variant: \"solid\", class: \"bg-bg-success text-fg-on-success\" },\r\n { color: \"info\", variant: \"solid\", class: \"bg-bg-info text-fg-on-info\" },\r\n\r\n /* ── Outline ────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"outline\", class: \"bg-transparent border-border-brand text-fg-brand\" },\r\n { color: \"neutral\", variant: \"outline\", class: \"bg-transparent border-border-default text-fg-default\" },\r\n { color: \"danger\", variant: \"outline\", class: \"bg-transparent border-border-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"outline\", class: \"bg-transparent border-border-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"outline\", class: \"bg-transparent border-border-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"outline\", class: \"bg-transparent border-border-info-muted text-fg-info\" },\r\n\r\n /* ── Soft ───────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"soft\", class: \"bg-bg-brand-subtle text-fg-brand\" },\r\n { color: \"neutral\", variant: \"soft\", class: \"bg-bg-muted text-fg-muted\" },\r\n { color: \"danger\", variant: \"soft\", class: \"bg-bg-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"soft\", class: \"bg-bg-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"soft\", class: \"bg-bg-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"soft\", class: \"bg-bg-info-muted text-fg-info\" },\r\n\r\n /* ── Soft + Outline (bg sutil + borda definida) ─────────────── */\r\n { color: \"primary\", variant: \"soft-outline\", class: \"bg-bg-brand-subtle border-border-brand text-fg-brand\" },\r\n { color: \"neutral\", variant: \"soft-outline\", class: \"bg-bg-muted border-border-default text-fg-muted\" },\r\n { color: \"danger\", variant: \"soft-outline\", class: \"bg-bg-danger-muted border-border-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"soft-outline\", class: \"bg-bg-warning-muted border-border-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"soft-outline\", class: \"bg-bg-success-muted border-border-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"soft-outline\", class: \"bg-bg-info-muted border-border-info-muted text-fg-info\" },\r\n\r\n /* ── Hover (somente quando interactive) ────────────────────── */\r\n { interactive: true, color: \"primary\", variant: \"solid\", class: \"hover:bg-bg-brand-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"solid\", class: \"hover:bg-bg-muted-hover\" },\r\n { interactive: true, color: \"danger\", variant: \"solid\", class: \"hover:bg-bg-danger-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"solid\", class: \"hover:bg-bg-warning-hover\" },\r\n { interactive: true, color: \"success\", variant: \"solid\", class: \"hover:bg-bg-success-hover\" },\r\n { interactive: true, color: \"info\", variant: \"solid\", class: \"hover:bg-bg-info-hover\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"outline\", class: \"hover:bg-bg-brand-subtle\" },\r\n { interactive: true, color: \"neutral\", variant: \"outline\", class: \"hover:bg-bg-muted\" },\r\n { interactive: true, color: \"danger\", variant: \"outline\", class: \"hover:bg-bg-danger-muted\" },\r\n { interactive: true, color: \"warning\", variant: \"outline\", class: \"hover:bg-bg-warning-muted\" },\r\n { interactive: true, color: \"success\", variant: \"outline\", class: \"hover:bg-bg-success-muted\" },\r\n { interactive: true, color: \"info\", variant: \"outline\", class: \"hover:bg-bg-info-muted\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"soft\", class: \"hover:bg-bg-brand-subtle-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"soft\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\r\n { interactive: true, color: \"danger\", variant: \"soft\", class: \"hover:bg-bg-danger-muted-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"soft\", class: \"hover:bg-bg-warning-muted-hover\" },\r\n { interactive: true, color: \"success\", variant: \"soft\", class: \"hover:bg-bg-success-muted-hover\" },\r\n { interactive: true, color: \"info\", variant: \"soft\", class: \"hover:bg-bg-info-muted-hover\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"soft-outline\", class: \"hover:bg-bg-brand-subtle-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"soft-outline\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\r\n { interactive: true, color: \"danger\", variant: \"soft-outline\", class: \"hover:bg-bg-danger-muted-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"soft-outline\", class: \"hover:bg-bg-warning-muted-hover\" },\r\n { interactive: true, color: \"success\", variant: \"soft-outline\", class: \"hover:bg-bg-success-muted-hover\" },\r\n { interactive: true, color: \"info\", variant: \"soft-outline\", class: \"hover:bg-bg-info-muted-hover\" },\r\n\r\n /* ── Selected (ChipGroup) — força \"soft\" da color como visual ativo ── */\r\n { selected: true, color: \"primary\", class: \"bg-bg-brand-subtle text-fg-brand border-transparent\" },\r\n { selected: true, color: \"neutral\", class: \"bg-bg-accent text-fg-default font-semibold border-transparent shadow-sh-sm\" },\r\n { selected: true, color: \"danger\", class: \"bg-bg-danger-muted text-fg-danger border-transparent\" },\r\n { selected: true, color: \"warning\", class: \"bg-bg-warning-muted text-fg-warning border-transparent\" },\r\n { selected: true, color: \"success\", class: \"bg-bg-success-muted text-fg-success border-transparent\" },\r\n { selected: true, color: \"info\", class: \"bg-bg-info-muted text-fg-info border-transparent\" },\r\n ],\r\n defaultVariants: {\r\n color: \"neutral\",\r\n variant: \"soft\",\r\n size: \"md\",\r\n shape: \"pill\",\r\n interactive: false,\r\n selected: false,\r\n },\r\n});\r\n\r\nexport type ChipVariantProps = VariantProps<typeof chipVariants>;\r\n\r\n/** Contador inline pra usar como adornment no Chip (ex: \"Não lidas (3)\") */\r\nexport const chipCount = tv({\r\n base: [\r\n \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-[4px]\",\r\n \"rounded-radius-full text-caption-xs font-semibold leading-none\",\r\n \"bg-bg-muted text-fg-default\",\r\n ],\r\n});\r\n\n/**\n * Área de LABEL quando o chip tem `onRemove`.\n *\n * Com `onRemove` a pílula deixa de ser `<button>` e vira `<span>`, porque um botão\n * dentro de outro é HTML inválido — o navegador desaninha, e o clique no X passa a\n * disparar também o clique do chip. São duas ações distintas (\"filtrar por isto\" e\n * \"tirar isto\"), então são dois alvos.\n */\nexport const chipLabel = tv({\n base: [\n \"inline-flex min-w-0 items-center gap-gp-xs rounded-radius-full\",\n \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\",\n ],\n});\n\n/** Botão de remover dentro do chip. O tamanho do X acompanha o tamanho do chip. */\nexport const chipRemove = tv({\n base: [\n \"-mr-[2px] grid shrink-0 place-items-center rounded-radius-full\",\n \"opacity-70 transition-opacity hover:opacity-100\",\n \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\",\n ],\n variants: {\n size: {\n sm: \"size-[14px] [&_svg]:size-[10px]\",\n md: \"size-icon-sm [&_svg]:size-[12px]\",\n lg: \"size-icon-sm [&_svg]:size-[14px]\",\n xl: \"size-icon-md [&_svg]:size-[14px]\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n"],"names":["tv"],"mappings":"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"}
1
+ {"version":3,"file":"chip.styles.cjs","sources":["../../../../../src/components/ui/Chip/chip.styles.ts"],"sourcesContent":["import { tv, type VariantProps } from \"@/utils/tv\";\r\n\r\n/**\r\n * Chip styles — pílula compacta pra status, tags, filtros, abas.\r\n *\r\n * Pode ser estático (span) ou interativo (button via `onClick` / dentro de ChipGroup).\r\n *\r\n * Variantes:\r\n * - color: primary | neutral | danger | warning | success | info\r\n * - variant: solid | outline | soft\r\n * - size: sm (24px) | md (28px = form-xs) | lg (32px = form-sm)\r\n *\r\n * Padding/font-size escalam por size — alturas coerentes com o sistema (sm < form-xs\r\n * pra ficar mais compacto que o menor botão; md/lg alinham com Button).\r\n */\r\nexport const chipVariants = tv({\r\n base: [\r\n \"inline-flex items-center justify-center gap-gp-xs shrink-0\",\r\n \"font-semibold whitespace-nowrap select-none\",\r\n \"transition-[background-color,color,border-color,box-shadow] duration-150\",\r\n \"[&_svg]:shrink-0\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"h-[24px] px-pad-md text-caption-sm [&_svg]:size-[12px]\",\r\n md: \"h-form-xs px-pad-lg text-body-xs font-normal [&_svg]:size-[12px]\", // 28px\r\n lg: \"h-form-sm px-pad-xl text-body-sm font-normal [&_svg]:size-[14px]\", // 32px\r\n xl: \"h-form-md px-pad-xl text-body-sm font-normal [&_svg]:size-[14px]\", // 36px (= Button md)\r\n },\r\n /**\r\n * `pill` = rounded-full (default — chip pílula clássico).\r\n * `rounded` = canto arredondado igual ao Button (radius-md em sm/md, radius-lg em lg/xl).\r\n */\r\n shape: {\r\n pill: \"rounded-radius-full\",\r\n rounded: \"\", // aplica via compoundVariants por size\r\n },\r\n color: {\r\n primary: \"\",\r\n neutral: \"\",\r\n danger: \"\",\r\n warning: \"\",\r\n success: \"\",\r\n info: \"\",\r\n },\r\n variant: {\r\n solid: \"\",\r\n outline: \"border\",\r\n soft: \"\",\r\n \"soft-outline\": \"border\",\r\n },\r\n interactive: {\r\n true: \"cursor-pointer outline-none focus-visible:shadow-sh-ring\",\r\n false: \"\",\r\n },\r\n selected: {\r\n true: \"\",\r\n false: \"\",\r\n },\r\n },\r\n compoundVariants: [\r\n /* ── Shape rounded × size — radius proporcional ao Button ──── */\r\n { shape: \"rounded\", size: \"sm\", class: \"rounded-radius-md\" },\r\n { shape: \"rounded\", size: \"md\", class: \"rounded-radius-md\" },\r\n { shape: \"rounded\", size: \"lg\", class: \"rounded-radius-lg\" },\r\n { shape: \"rounded\", size: \"xl\", class: \"rounded-radius-lg\" },\r\n\r\n /* ── Solid ──────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"solid\", class: \"bg-bg-brand text-fg-on-brand\" },\r\n { color: \"neutral\", variant: \"solid\", class: \"bg-bg-muted text-fg-default\" },\r\n { color: \"danger\", variant: \"solid\", class: \"bg-bg-danger text-fg-on-danger\" },\r\n { color: \"warning\", variant: \"solid\", class: \"bg-bg-warning text-fg-on-warning\" },\r\n { color: \"success\", variant: \"solid\", class: \"bg-bg-success text-fg-on-success\" },\r\n { color: \"info\", variant: \"solid\", class: \"bg-bg-info text-fg-on-info\" },\r\n\r\n /* ── Outline ────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"outline\", class: \"bg-transparent border-border-brand text-fg-brand\" },\r\n { color: \"neutral\", variant: \"outline\", class: \"bg-transparent border-border-default text-fg-default\" },\r\n { color: \"danger\", variant: \"outline\", class: \"bg-transparent border-border-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"outline\", class: \"bg-transparent border-border-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"outline\", class: \"bg-transparent border-border-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"outline\", class: \"bg-transparent border-border-info-muted text-fg-info\" },\r\n\r\n /* ── Soft ───────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"soft\", class: \"bg-bg-brand-subtle text-fg-brand\" },\r\n { color: \"neutral\", variant: \"soft\", class: \"bg-bg-muted text-fg-muted\" },\r\n { color: \"danger\", variant: \"soft\", class: \"bg-bg-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"soft\", class: \"bg-bg-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"soft\", class: \"bg-bg-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"soft\", class: \"bg-bg-info-muted text-fg-info\" },\r\n\r\n /* ── Soft + Outline (bg sutil + borda definida) ─────────────── */\r\n { color: \"primary\", variant: \"soft-outline\", class: \"bg-bg-brand-subtle border-border-brand text-fg-brand\" },\r\n { color: \"neutral\", variant: \"soft-outline\", class: \"bg-bg-muted border-border-default text-fg-muted\" },\r\n { color: \"danger\", variant: \"soft-outline\", class: \"bg-bg-danger-muted border-border-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"soft-outline\", class: \"bg-bg-warning-muted border-border-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"soft-outline\", class: \"bg-bg-success-muted border-border-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"soft-outline\", class: \"bg-bg-info-muted border-border-info-muted text-fg-info\" },\r\n\r\n /* ── Hover (somente quando interactive) ────────────────────── */\r\n { interactive: true, color: \"primary\", variant: \"solid\", class: \"hover:bg-bg-brand-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"solid\", class: \"hover:bg-bg-muted-hover\" },\r\n { interactive: true, color: \"danger\", variant: \"solid\", class: \"hover:bg-bg-danger-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"solid\", class: \"hover:bg-bg-warning-hover\" },\r\n { interactive: true, color: \"success\", variant: \"solid\", class: \"hover:bg-bg-success-hover\" },\r\n { interactive: true, color: \"info\", variant: \"solid\", class: \"hover:bg-bg-info-hover\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"outline\", class: \"hover:bg-bg-brand-subtle\" },\r\n { interactive: true, color: \"neutral\", variant: \"outline\", class: \"hover:bg-bg-muted\" },\r\n { interactive: true, color: \"danger\", variant: \"outline\", class: \"hover:bg-bg-danger-muted\" },\r\n { interactive: true, color: \"warning\", variant: \"outline\", class: \"hover:bg-bg-warning-muted\" },\r\n { interactive: true, color: \"success\", variant: \"outline\", class: \"hover:bg-bg-success-muted\" },\r\n { interactive: true, color: \"info\", variant: \"outline\", class: \"hover:bg-bg-info-muted\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"soft\", class: \"hover:bg-bg-brand-subtle-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"soft\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\r\n { interactive: true, color: \"danger\", variant: \"soft\", class: \"hover:bg-bg-danger-muted-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"soft\", class: \"hover:bg-bg-warning-muted-hover\" },\r\n { interactive: true, color: \"success\", variant: \"soft\", class: \"hover:bg-bg-success-muted-hover\" },\r\n { interactive: true, color: \"info\", variant: \"soft\", class: \"hover:bg-bg-info-muted-hover\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"soft-outline\", class: \"hover:bg-bg-brand-subtle-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"soft-outline\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\r\n { interactive: true, color: \"danger\", variant: \"soft-outline\", class: \"hover:bg-bg-danger-muted-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"soft-outline\", class: \"hover:bg-bg-warning-muted-hover\" },\r\n { interactive: true, color: \"success\", variant: \"soft-outline\", class: \"hover:bg-bg-success-muted-hover\" },\r\n { interactive: true, color: \"info\", variant: \"soft-outline\", class: \"hover:bg-bg-info-muted-hover\" },\r\n\r\n /* ── Selected (ChipGroup) — força \"soft\" da color como visual ativo ── */\r\n { selected: true, color: \"primary\", class: \"bg-bg-brand-subtle text-fg-brand border-transparent\" },\r\n { selected: true, color: \"neutral\", class: \"bg-bg-accent text-fg-default font-semibold border-transparent shadow-sh-sm\" },\r\n { selected: true, color: \"danger\", class: \"bg-bg-danger-muted text-fg-danger border-transparent\" },\r\n { selected: true, color: \"warning\", class: \"bg-bg-warning-muted text-fg-warning border-transparent\" },\r\n { selected: true, color: \"success\", class: \"bg-bg-success-muted text-fg-success border-transparent\" },\r\n { selected: true, color: \"info\", class: \"bg-bg-info-muted text-fg-info border-transparent\" },\r\n ],\r\n defaultVariants: {\r\n color: \"neutral\",\r\n variant: \"soft\",\r\n size: \"md\",\r\n shape: \"pill\",\r\n interactive: false,\r\n selected: false,\r\n },\r\n});\r\n\r\nexport type ChipVariantProps = VariantProps<typeof chipVariants>;\r\n\r\n/** Contador inline pra usar como adornment no Chip (ex: \"Não lidas (3)\") */\r\nexport const chipCount = tv({\r\n base: [\r\n \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-[4px]\",\r\n \"rounded-radius-full text-caption-xs font-semibold leading-none\",\r\n \"bg-bg-muted text-fg-default\",\r\n ],\r\n});\r\n\r\n/**\r\n * Área de LABEL quando o chip tem `onRemove`.\r\n *\r\n * Com `onRemove` a pílula deixa de ser `<button>` e vira `<span>`, porque um botão\r\n * dentro de outro é HTML inválido — o navegador desaninha, e o clique no X passa a\r\n * disparar também o clique do chip. São duas ações distintas (\"filtrar por isto\" e\r\n * \"tirar isto\"), então são dois alvos.\r\n */\r\nexport const chipLabel = tv({\r\n base: [\r\n \"inline-flex min-w-0 items-center gap-gp-xs rounded-radius-full\",\r\n \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\",\r\n ],\r\n});\r\n\r\n/** Botão de remover dentro do chip. O tamanho do X acompanha o tamanho do chip. */\r\nexport const chipRemove = tv({\r\n base: [\r\n \"-mr-[2px] grid shrink-0 place-items-center rounded-radius-full\",\r\n \"opacity-70 transition-opacity hover:opacity-100\",\r\n \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"size-[14px] [&_svg]:size-[10px]\",\r\n md: \"size-icon-sm [&_svg]:size-[12px]\",\r\n lg: \"size-icon-sm [&_svg]:size-[14px]\",\r\n xl: \"size-icon-md [&_svg]:size-[14px]\",\r\n },\r\n },\r\n defaultVariants: { size: \"md\" },\r\n});\r\n"],"names":["tv"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"chip.styles.mjs","sources":["../../../../../src/components/ui/Chip/chip.styles.ts"],"sourcesContent":["import { tv, type VariantProps } from \"@/utils/tv\";\r\n\r\n/**\r\n * Chip styles — pílula compacta pra status, tags, filtros, abas.\r\n *\r\n * Pode ser estático (span) ou interativo (button via `onClick` / dentro de ChipGroup).\r\n *\r\n * Variantes:\r\n * - color: primary | neutral | danger | warning | success | info\r\n * - variant: solid | outline | soft\r\n * - size: sm (24px) | md (28px = form-xs) | lg (32px = form-sm)\r\n *\r\n * Padding/font-size escalam por size — alturas coerentes com o sistema (sm < form-xs\r\n * pra ficar mais compacto que o menor botão; md/lg alinham com Button).\r\n */\r\nexport const chipVariants = tv({\r\n base: [\r\n \"inline-flex items-center justify-center gap-gp-xs shrink-0\",\r\n \"font-semibold whitespace-nowrap select-none\",\r\n \"transition-[background-color,color,border-color,box-shadow] duration-150\",\r\n \"[&_svg]:shrink-0\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"h-[24px] px-pad-md text-caption-sm [&_svg]:size-[12px]\",\r\n md: \"h-form-xs px-pad-lg text-body-xs font-normal [&_svg]:size-[12px]\", // 28px\r\n lg: \"h-form-sm px-pad-xl text-body-sm font-normal [&_svg]:size-[14px]\", // 32px\r\n xl: \"h-form-md px-pad-xl text-body-sm font-normal [&_svg]:size-[14px]\", // 36px (= Button md)\r\n },\r\n /**\r\n * `pill` = rounded-full (default — chip pílula clássico).\r\n * `rounded` = canto arredondado igual ao Button (radius-md em sm/md, radius-lg em lg/xl).\r\n */\r\n shape: {\r\n pill: \"rounded-radius-full\",\r\n rounded: \"\", // aplica via compoundVariants por size\r\n },\r\n color: {\r\n primary: \"\",\r\n neutral: \"\",\r\n danger: \"\",\r\n warning: \"\",\r\n success: \"\",\r\n info: \"\",\r\n },\r\n variant: {\r\n solid: \"\",\r\n outline: \"border\",\r\n soft: \"\",\r\n \"soft-outline\": \"border\",\r\n },\r\n interactive: {\r\n true: \"cursor-pointer outline-none focus-visible:shadow-sh-ring\",\r\n false: \"\",\r\n },\r\n selected: {\r\n true: \"\",\r\n false: \"\",\r\n },\r\n },\r\n compoundVariants: [\r\n /* ── Shape rounded × size — radius proporcional ao Button ──── */\r\n { shape: \"rounded\", size: \"sm\", class: \"rounded-radius-md\" },\r\n { shape: \"rounded\", size: \"md\", class: \"rounded-radius-md\" },\r\n { shape: \"rounded\", size: \"lg\", class: \"rounded-radius-lg\" },\r\n { shape: \"rounded\", size: \"xl\", class: \"rounded-radius-lg\" },\r\n\r\n /* ── Solid ──────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"solid\", class: \"bg-bg-brand text-fg-on-brand\" },\r\n { color: \"neutral\", variant: \"solid\", class: \"bg-bg-muted text-fg-default\" },\r\n { color: \"danger\", variant: \"solid\", class: \"bg-bg-danger text-fg-on-danger\" },\r\n { color: \"warning\", variant: \"solid\", class: \"bg-bg-warning text-fg-on-warning\" },\r\n { color: \"success\", variant: \"solid\", class: \"bg-bg-success text-fg-on-success\" },\r\n { color: \"info\", variant: \"solid\", class: \"bg-bg-info text-fg-on-info\" },\r\n\r\n /* ── Outline ────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"outline\", class: \"bg-transparent border-border-brand text-fg-brand\" },\r\n { color: \"neutral\", variant: \"outline\", class: \"bg-transparent border-border-default text-fg-default\" },\r\n { color: \"danger\", variant: \"outline\", class: \"bg-transparent border-border-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"outline\", class: \"bg-transparent border-border-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"outline\", class: \"bg-transparent border-border-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"outline\", class: \"bg-transparent border-border-info-muted text-fg-info\" },\r\n\r\n /* ── Soft ───────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"soft\", class: \"bg-bg-brand-subtle text-fg-brand\" },\r\n { color: \"neutral\", variant: \"soft\", class: \"bg-bg-muted text-fg-muted\" },\r\n { color: \"danger\", variant: \"soft\", class: \"bg-bg-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"soft\", class: \"bg-bg-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"soft\", class: \"bg-bg-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"soft\", class: \"bg-bg-info-muted text-fg-info\" },\r\n\r\n /* ── Soft + Outline (bg sutil + borda definida) ─────────────── */\r\n { color: \"primary\", variant: \"soft-outline\", class: \"bg-bg-brand-subtle border-border-brand text-fg-brand\" },\r\n { color: \"neutral\", variant: \"soft-outline\", class: \"bg-bg-muted border-border-default text-fg-muted\" },\r\n { color: \"danger\", variant: \"soft-outline\", class: \"bg-bg-danger-muted border-border-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"soft-outline\", class: \"bg-bg-warning-muted border-border-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"soft-outline\", class: \"bg-bg-success-muted border-border-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"soft-outline\", class: \"bg-bg-info-muted border-border-info-muted text-fg-info\" },\r\n\r\n /* ── Hover (somente quando interactive) ────────────────────── */\r\n { interactive: true, color: \"primary\", variant: \"solid\", class: \"hover:bg-bg-brand-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"solid\", class: \"hover:bg-bg-muted-hover\" },\r\n { interactive: true, color: \"danger\", variant: \"solid\", class: \"hover:bg-bg-danger-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"solid\", class: \"hover:bg-bg-warning-hover\" },\r\n { interactive: true, color: \"success\", variant: \"solid\", class: \"hover:bg-bg-success-hover\" },\r\n { interactive: true, color: \"info\", variant: \"solid\", class: \"hover:bg-bg-info-hover\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"outline\", class: \"hover:bg-bg-brand-subtle\" },\r\n { interactive: true, color: \"neutral\", variant: \"outline\", class: \"hover:bg-bg-muted\" },\r\n { interactive: true, color: \"danger\", variant: \"outline\", class: \"hover:bg-bg-danger-muted\" },\r\n { interactive: true, color: \"warning\", variant: \"outline\", class: \"hover:bg-bg-warning-muted\" },\r\n { interactive: true, color: \"success\", variant: \"outline\", class: \"hover:bg-bg-success-muted\" },\r\n { interactive: true, color: \"info\", variant: \"outline\", class: \"hover:bg-bg-info-muted\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"soft\", class: \"hover:bg-bg-brand-subtle-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"soft\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\r\n { interactive: true, color: \"danger\", variant: \"soft\", class: \"hover:bg-bg-danger-muted-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"soft\", class: \"hover:bg-bg-warning-muted-hover\" },\r\n { interactive: true, color: \"success\", variant: \"soft\", class: \"hover:bg-bg-success-muted-hover\" },\r\n { interactive: true, color: \"info\", variant: \"soft\", class: \"hover:bg-bg-info-muted-hover\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"soft-outline\", class: \"hover:bg-bg-brand-subtle-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"soft-outline\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\r\n { interactive: true, color: \"danger\", variant: \"soft-outline\", class: \"hover:bg-bg-danger-muted-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"soft-outline\", class: \"hover:bg-bg-warning-muted-hover\" },\r\n { interactive: true, color: \"success\", variant: \"soft-outline\", class: \"hover:bg-bg-success-muted-hover\" },\r\n { interactive: true, color: \"info\", variant: \"soft-outline\", class: \"hover:bg-bg-info-muted-hover\" },\r\n\r\n /* ── Selected (ChipGroup) — força \"soft\" da color como visual ativo ── */\r\n { selected: true, color: \"primary\", class: \"bg-bg-brand-subtle text-fg-brand border-transparent\" },\r\n { selected: true, color: \"neutral\", class: \"bg-bg-accent text-fg-default font-semibold border-transparent shadow-sh-sm\" },\r\n { selected: true, color: \"danger\", class: \"bg-bg-danger-muted text-fg-danger border-transparent\" },\r\n { selected: true, color: \"warning\", class: \"bg-bg-warning-muted text-fg-warning border-transparent\" },\r\n { selected: true, color: \"success\", class: \"bg-bg-success-muted text-fg-success border-transparent\" },\r\n { selected: true, color: \"info\", class: \"bg-bg-info-muted text-fg-info border-transparent\" },\r\n ],\r\n defaultVariants: {\r\n color: \"neutral\",\r\n variant: \"soft\",\r\n size: \"md\",\r\n shape: \"pill\",\r\n interactive: false,\r\n selected: false,\r\n },\r\n});\r\n\r\nexport type ChipVariantProps = VariantProps<typeof chipVariants>;\r\n\r\n/** Contador inline pra usar como adornment no Chip (ex: \"Não lidas (3)\") */\r\nexport const chipCount = tv({\r\n base: [\r\n \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-[4px]\",\r\n \"rounded-radius-full text-caption-xs font-semibold leading-none\",\r\n \"bg-bg-muted text-fg-default\",\r\n ],\r\n});\r\n\n/**\n * Área de LABEL quando o chip tem `onRemove`.\n *\n * Com `onRemove` a pílula deixa de ser `<button>` e vira `<span>`, porque um botão\n * dentro de outro é HTML inválido — o navegador desaninha, e o clique no X passa a\n * disparar também o clique do chip. São duas ações distintas (\"filtrar por isto\" e\n * \"tirar isto\"), então são dois alvos.\n */\nexport const chipLabel = tv({\n base: [\n \"inline-flex min-w-0 items-center gap-gp-xs rounded-radius-full\",\n \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\",\n ],\n});\n\n/** Botão de remover dentro do chip. O tamanho do X acompanha o tamanho do chip. */\nexport const chipRemove = tv({\n base: [\n \"-mr-[2px] grid shrink-0 place-items-center rounded-radius-full\",\n \"opacity-70 transition-opacity hover:opacity-100\",\n \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\",\n ],\n variants: {\n size: {\n sm: \"size-[14px] [&_svg]:size-[10px]\",\n md: \"size-icon-sm [&_svg]:size-[12px]\",\n lg: \"size-icon-sm [&_svg]:size-[14px]\",\n xl: \"size-icon-md [&_svg]:size-[14px]\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"chip.styles.mjs","sources":["../../../../../src/components/ui/Chip/chip.styles.ts"],"sourcesContent":["import { tv, type VariantProps } from \"@/utils/tv\";\r\n\r\n/**\r\n * Chip styles — pílula compacta pra status, tags, filtros, abas.\r\n *\r\n * Pode ser estático (span) ou interativo (button via `onClick` / dentro de ChipGroup).\r\n *\r\n * Variantes:\r\n * - color: primary | neutral | danger | warning | success | info\r\n * - variant: solid | outline | soft\r\n * - size: sm (24px) | md (28px = form-xs) | lg (32px = form-sm)\r\n *\r\n * Padding/font-size escalam por size — alturas coerentes com o sistema (sm < form-xs\r\n * pra ficar mais compacto que o menor botão; md/lg alinham com Button).\r\n */\r\nexport const chipVariants = tv({\r\n base: [\r\n \"inline-flex items-center justify-center gap-gp-xs shrink-0\",\r\n \"font-semibold whitespace-nowrap select-none\",\r\n \"transition-[background-color,color,border-color,box-shadow] duration-150\",\r\n \"[&_svg]:shrink-0\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"h-[24px] px-pad-md text-caption-sm [&_svg]:size-[12px]\",\r\n md: \"h-form-xs px-pad-lg text-body-xs font-normal [&_svg]:size-[12px]\", // 28px\r\n lg: \"h-form-sm px-pad-xl text-body-sm font-normal [&_svg]:size-[14px]\", // 32px\r\n xl: \"h-form-md px-pad-xl text-body-sm font-normal [&_svg]:size-[14px]\", // 36px (= Button md)\r\n },\r\n /**\r\n * `pill` = rounded-full (default — chip pílula clássico).\r\n * `rounded` = canto arredondado igual ao Button (radius-md em sm/md, radius-lg em lg/xl).\r\n */\r\n shape: {\r\n pill: \"rounded-radius-full\",\r\n rounded: \"\", // aplica via compoundVariants por size\r\n },\r\n color: {\r\n primary: \"\",\r\n neutral: \"\",\r\n danger: \"\",\r\n warning: \"\",\r\n success: \"\",\r\n info: \"\",\r\n },\r\n variant: {\r\n solid: \"\",\r\n outline: \"border\",\r\n soft: \"\",\r\n \"soft-outline\": \"border\",\r\n },\r\n interactive: {\r\n true: \"cursor-pointer outline-none focus-visible:shadow-sh-ring\",\r\n false: \"\",\r\n },\r\n selected: {\r\n true: \"\",\r\n false: \"\",\r\n },\r\n },\r\n compoundVariants: [\r\n /* ── Shape rounded × size — radius proporcional ao Button ──── */\r\n { shape: \"rounded\", size: \"sm\", class: \"rounded-radius-md\" },\r\n { shape: \"rounded\", size: \"md\", class: \"rounded-radius-md\" },\r\n { shape: \"rounded\", size: \"lg\", class: \"rounded-radius-lg\" },\r\n { shape: \"rounded\", size: \"xl\", class: \"rounded-radius-lg\" },\r\n\r\n /* ── Solid ──────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"solid\", class: \"bg-bg-brand text-fg-on-brand\" },\r\n { color: \"neutral\", variant: \"solid\", class: \"bg-bg-muted text-fg-default\" },\r\n { color: \"danger\", variant: \"solid\", class: \"bg-bg-danger text-fg-on-danger\" },\r\n { color: \"warning\", variant: \"solid\", class: \"bg-bg-warning text-fg-on-warning\" },\r\n { color: \"success\", variant: \"solid\", class: \"bg-bg-success text-fg-on-success\" },\r\n { color: \"info\", variant: \"solid\", class: \"bg-bg-info text-fg-on-info\" },\r\n\r\n /* ── Outline ────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"outline\", class: \"bg-transparent border-border-brand text-fg-brand\" },\r\n { color: \"neutral\", variant: \"outline\", class: \"bg-transparent border-border-default text-fg-default\" },\r\n { color: \"danger\", variant: \"outline\", class: \"bg-transparent border-border-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"outline\", class: \"bg-transparent border-border-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"outline\", class: \"bg-transparent border-border-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"outline\", class: \"bg-transparent border-border-info-muted text-fg-info\" },\r\n\r\n /* ── Soft ───────────────────────────────────────────────────── */\r\n { color: \"primary\", variant: \"soft\", class: \"bg-bg-brand-subtle text-fg-brand\" },\r\n { color: \"neutral\", variant: \"soft\", class: \"bg-bg-muted text-fg-muted\" },\r\n { color: \"danger\", variant: \"soft\", class: \"bg-bg-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"soft\", class: \"bg-bg-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"soft\", class: \"bg-bg-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"soft\", class: \"bg-bg-info-muted text-fg-info\" },\r\n\r\n /* ── Soft + Outline (bg sutil + borda definida) ─────────────── */\r\n { color: \"primary\", variant: \"soft-outline\", class: \"bg-bg-brand-subtle border-border-brand text-fg-brand\" },\r\n { color: \"neutral\", variant: \"soft-outline\", class: \"bg-bg-muted border-border-default text-fg-muted\" },\r\n { color: \"danger\", variant: \"soft-outline\", class: \"bg-bg-danger-muted border-border-danger-muted text-fg-danger\" },\r\n { color: \"warning\", variant: \"soft-outline\", class: \"bg-bg-warning-muted border-border-warning-muted text-fg-warning\" },\r\n { color: \"success\", variant: \"soft-outline\", class: \"bg-bg-success-muted border-border-success-muted text-fg-success\" },\r\n { color: \"info\", variant: \"soft-outline\", class: \"bg-bg-info-muted border-border-info-muted text-fg-info\" },\r\n\r\n /* ── Hover (somente quando interactive) ────────────────────── */\r\n { interactive: true, color: \"primary\", variant: \"solid\", class: \"hover:bg-bg-brand-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"solid\", class: \"hover:bg-bg-muted-hover\" },\r\n { interactive: true, color: \"danger\", variant: \"solid\", class: \"hover:bg-bg-danger-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"solid\", class: \"hover:bg-bg-warning-hover\" },\r\n { interactive: true, color: \"success\", variant: \"solid\", class: \"hover:bg-bg-success-hover\" },\r\n { interactive: true, color: \"info\", variant: \"solid\", class: \"hover:bg-bg-info-hover\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"outline\", class: \"hover:bg-bg-brand-subtle\" },\r\n { interactive: true, color: \"neutral\", variant: \"outline\", class: \"hover:bg-bg-muted\" },\r\n { interactive: true, color: \"danger\", variant: \"outline\", class: \"hover:bg-bg-danger-muted\" },\r\n { interactive: true, color: \"warning\", variant: \"outline\", class: \"hover:bg-bg-warning-muted\" },\r\n { interactive: true, color: \"success\", variant: \"outline\", class: \"hover:bg-bg-success-muted\" },\r\n { interactive: true, color: \"info\", variant: \"outline\", class: \"hover:bg-bg-info-muted\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"soft\", class: \"hover:bg-bg-brand-subtle-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"soft\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\r\n { interactive: true, color: \"danger\", variant: \"soft\", class: \"hover:bg-bg-danger-muted-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"soft\", class: \"hover:bg-bg-warning-muted-hover\" },\r\n { interactive: true, color: \"success\", variant: \"soft\", class: \"hover:bg-bg-success-muted-hover\" },\r\n { interactive: true, color: \"info\", variant: \"soft\", class: \"hover:bg-bg-info-muted-hover\" },\r\n\r\n { interactive: true, color: \"primary\", variant: \"soft-outline\", class: \"hover:bg-bg-brand-subtle-hover\" },\r\n { interactive: true, color: \"neutral\", variant: \"soft-outline\", class: \"hover:bg-bg-muted-hover hover:text-fg-default\" },\r\n { interactive: true, color: \"danger\", variant: \"soft-outline\", class: \"hover:bg-bg-danger-muted-hover\" },\r\n { interactive: true, color: \"warning\", variant: \"soft-outline\", class: \"hover:bg-bg-warning-muted-hover\" },\r\n { interactive: true, color: \"success\", variant: \"soft-outline\", class: \"hover:bg-bg-success-muted-hover\" },\r\n { interactive: true, color: \"info\", variant: \"soft-outline\", class: \"hover:bg-bg-info-muted-hover\" },\r\n\r\n /* ── Selected (ChipGroup) — força \"soft\" da color como visual ativo ── */\r\n { selected: true, color: \"primary\", class: \"bg-bg-brand-subtle text-fg-brand border-transparent\" },\r\n { selected: true, color: \"neutral\", class: \"bg-bg-accent text-fg-default font-semibold border-transparent shadow-sh-sm\" },\r\n { selected: true, color: \"danger\", class: \"bg-bg-danger-muted text-fg-danger border-transparent\" },\r\n { selected: true, color: \"warning\", class: \"bg-bg-warning-muted text-fg-warning border-transparent\" },\r\n { selected: true, color: \"success\", class: \"bg-bg-success-muted text-fg-success border-transparent\" },\r\n { selected: true, color: \"info\", class: \"bg-bg-info-muted text-fg-info border-transparent\" },\r\n ],\r\n defaultVariants: {\r\n color: \"neutral\",\r\n variant: \"soft\",\r\n size: \"md\",\r\n shape: \"pill\",\r\n interactive: false,\r\n selected: false,\r\n },\r\n});\r\n\r\nexport type ChipVariantProps = VariantProps<typeof chipVariants>;\r\n\r\n/** Contador inline pra usar como adornment no Chip (ex: \"Não lidas (3)\") */\r\nexport const chipCount = tv({\r\n base: [\r\n \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-[4px]\",\r\n \"rounded-radius-full text-caption-xs font-semibold leading-none\",\r\n \"bg-bg-muted text-fg-default\",\r\n ],\r\n});\r\n\r\n/**\r\n * Área de LABEL quando o chip tem `onRemove`.\r\n *\r\n * Com `onRemove` a pílula deixa de ser `<button>` e vira `<span>`, porque um botão\r\n * dentro de outro é HTML inválido — o navegador desaninha, e o clique no X passa a\r\n * disparar também o clique do chip. São duas ações distintas (\"filtrar por isto\" e\r\n * \"tirar isto\"), então são dois alvos.\r\n */\r\nexport const chipLabel = tv({\r\n base: [\r\n \"inline-flex min-w-0 items-center gap-gp-xs rounded-radius-full\",\r\n \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\",\r\n ],\r\n});\r\n\r\n/** Botão de remover dentro do chip. O tamanho do X acompanha o tamanho do chip. */\r\nexport const chipRemove = tv({\r\n base: [\r\n \"-mr-[2px] grid shrink-0 place-items-center rounded-radius-full\",\r\n \"opacity-70 transition-opacity hover:opacity-100\",\r\n \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"size-[14px] [&_svg]:size-[10px]\",\r\n md: \"size-icon-sm [&_svg]:size-[12px]\",\r\n lg: \"size-icon-sm [&_svg]:size-[14px]\",\r\n xl: \"size-icon-md [&_svg]:size-[14px]\",\r\n },\r\n },\r\n defaultVariants: { size: \"md\" },\r\n});\r\n"],"names":[],"mappings":"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"}