@iclips/ui 2.0.2 → 3.0.0

package/dist/index.d.cts

@@ -47,7 +47,7 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import { SlotProps } from '@radix-ui/react-slot';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { toast } from 'sonner';
+import { toast as toast_2 } from 'sonner';
 import { ToasterProps } from 'sonner';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
@@ -227,7 +227,7 @@ declare const authLayoutVariants: (props?: ({
 
 export declare const Avatar: React_2.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React_2.RefAttributes<HTMLSpanElement>, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
 
-declare type AvatarColorVariant = "gray" | "pink" | "purple" | "blue" | "cyan" | "teal" | "green" | "yellow" | "orange" | "red";
+declare type AvatarColorVariant = "gray" | "purple";
 
 export declare const AvatarFallback: React_2.ForwardRefExoticComponent<PropsAvatarFallback & React_2.RefAttributes<HTMLSpanElement>>;
 
@@ -2849,7 +2849,7 @@ export declare interface TimePickerProps {
     variant?: "input" | "select" | "inline";
 }
 
-export { toast }
+export declare const toast: typeof toast_2;
 
 export declare function Toaster(props: ToasterProps): JSX.Element;
 

package/dist/index.d.ts

@@ -47,7 +47,7 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import { SlotProps } from '@radix-ui/react-slot';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { toast } from 'sonner';
+import { toast as toast_2 } from 'sonner';
 import { ToasterProps } from 'sonner';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
@@ -227,7 +227,7 @@ declare const authLayoutVariants: (props?: ({
 
 export declare const Avatar: React_2.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React_2.RefAttributes<HTMLSpanElement>, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
 
-declare type AvatarColorVariant = "gray" | "pink" | "purple" | "blue" | "cyan" | "teal" | "green" | "yellow" | "orange" | "red";
+declare type AvatarColorVariant = "gray" | "purple";
 
 export declare const AvatarFallback: React_2.ForwardRefExoticComponent<PropsAvatarFallback & React_2.RefAttributes<HTMLSpanElement>>;
 
@@ -2849,7 +2849,7 @@ export declare interface TimePickerProps {
     variant?: "input" | "select" | "inline";
 }
 
-export { toast }
+export declare const toast: typeof toast_2;
 
 export declare function Toaster(props: ToasterProps): JSX.Element;
 

package/dist/index.js

@@ -70,16 +70,15 @@ import { calculatePaginationMetadata as ln } from "./components/ui/data/table-ty
 import { Tabs as mn, TabsContent as dn, TabsList as xn, TabsTrigger as bn } from "./components/ui/navigation/tabs.js";
 import { Textarea as Cn } from "./components/ui/forms/textarea.js";
 import { TimePicker as fn } from "./components/ui/forms/time-picker.js";
-import { Toaster as cn } from "./components/ui/feedback/toast.js";
-import { Toggle as Tn, toggleVariants as Dn } from "./components/ui/forms/toggle.js";
-import { ToggleGroup as Pn, ToggleGroupItem as An } from "./components/ui/forms/toggle-group.js";
-import { Tooltip as wn, TooltipContent as Fn, TooltipProvider as Gn, TooltipTrigger as vn } from "./components/ui/overlays/tooltip.js";
-import { UnderlineTabs as Ln, UnderlineTabsContent as Hn, UnderlineTabsList as Rn, UnderlineTabsTrigger as kn } from "./components/ui/navigation/underline-tabs.js";
-import { FileUploadZone as En } from "./components/ui/forms/file-upload-zone.js";
-import { EmptyCalendarIllustration as Vn, EmptyContractsIllustration as Un, EmptyInboxIllustration as On, EmptyProjectsIllustration as zn, EmptySearchIllustration as jn, ErrorStateIllustration as Kn, Illustrations as Zn, SuccessStateIllustration as qn, illustrationSources as Jn } from "./components/ui/feedback/illustrations.js";
-import { useIsMobile as Wn } from "./hooks/use-mobile.js";
-import { cn as Yn } from "./components/ui/utils.js";
-import { toast as $n } from "sonner";
+import { Toaster as cn, toast as Mn } from "./components/ui/feedback/toast.js";
+import { Toggle as Dn, toggleVariants as In } from "./components/ui/forms/toggle.js";
+import { ToggleGroup as An, ToggleGroupItem as hn } from "./components/ui/forms/toggle-group.js";
+import { Tooltip as Fn, TooltipContent as Gn, TooltipProvider as vn, TooltipTrigger as Bn } from "./components/ui/overlays/tooltip.js";
+import { UnderlineTabs as Hn, UnderlineTabsContent as Rn, UnderlineTabsList as kn, UnderlineTabsTrigger as yn } from "./components/ui/navigation/underline-tabs.js";
+import { FileUploadZone as Nn } from "./components/ui/forms/file-upload-zone.js";
+import { EmptyCalendarIllustration as Un, EmptyContractsIllustration as On, EmptyInboxIllustration as zn, EmptyProjectsIllustration as jn, EmptySearchIllustration as Kn, ErrorStateIllustration as Zn, Illustrations as qn, SuccessStateIllustration as Jn, illustrationSources as Qn } from "./components/ui/feedback/illustrations.js";
+import { useIsMobile as Xn } from "./hooks/use-mobile.js";
+import { cn as _n } from "./components/ui/utils.js";
 export {
   t as Accordion,
   a as AccordionContent,
@@ -200,15 +199,15 @@ export {
   Vr as DropdownMenuSubTrigger,
   Ur as DropdownMenuTrigger,
   zr as EditableBadge,
-  Vn as EmptyCalendarIllustration,
-  Un as EmptyContractsIllustration,
-  On as EmptyInboxIllustration,
-  zn as EmptyProjectsIllustration,
-  jn as EmptySearchIllustration,
+  Un as EmptyCalendarIllustration,
+  On as EmptyContractsIllustration,
+  zn as EmptyInboxIllustration,
+  jn as EmptyProjectsIllustration,
+  Kn as EmptySearchIllustration,
   Kr as EmptyState,
-  Kn as ErrorStateIllustration,
+  Zn as ErrorStateIllustration,
   Lo as FileAttachmentList,
-  En as FileUploadZone,
+  Nn as FileUploadZone,
   qr as FilterBar,
   Qr as FilterBuilder,
   Xr as FilterChip,
@@ -222,7 +221,7 @@ export {
   po as HoverCard,
   lo as HoverCardContent,
   uo as HoverCardTrigger,
-  Zn as Illustrations,
+  qn as Illustrations,
   xo as Input,
   go as InputGroup,
   Co as InputGroupAddon,
@@ -332,7 +331,7 @@ export {
   Ua as Skeleton,
   za as Slider,
   Ka as SocialButton,
-  qn as SuccessStateIllustration,
+  Jn as SuccessStateIllustration,
   Ja as Switch,
   Wa as Table,
   Xa as TableBody,
@@ -350,29 +349,29 @@ export {
   Cn as Textarea,
   fn as TimePicker,
   cn as Toaster,
-  Tn as Toggle,
-  Pn as ToggleGroup,
-  An as ToggleGroupItem,
-  wn as Tooltip,
-  Fn as TooltipContent,
-  Gn as TooltipProvider,
-  vn as TooltipTrigger,
-  Ln as UnderlineTabs,
-  Hn as UnderlineTabsContent,
-  Rn as UnderlineTabsList,
-  kn as UnderlineTabsTrigger,
+  Dn as Toggle,
+  An as ToggleGroup,
+  hn as ToggleGroupItem,
+  Fn as Tooltip,
+  Gn as TooltipContent,
+  vn as TooltipProvider,
+  Bn as TooltipTrigger,
+  Hn as UnderlineTabs,
+  Rn as UnderlineTabsContent,
+  kn as UnderlineTabsList,
+  yn as UnderlineTabsTrigger,
   H as badgeVariants,
   q as buttonVariants,
   ln as calculatePaginationMetadata,
-  Yn as cn,
+  _n as cn,
   nn as getPageNumbers,
-  Jn as illustrationSources,
+  Qn as illustrationSources,
   pt as navigationMenuTriggerStyle,
   Za as socialButtonVariants,
-  $n as toast,
-  Dn as toggleVariants,
+  Mn as toast,
+  In as toggleVariants,
   no as useFormField,
-  Wn as useIsMobile,
+  Xn as useIsMobile,
   Ga as useSidebar
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/preset.css

@@ -236,8 +236,7 @@ html {
   }
 
   /* Ajustar cores de fundo para impressão */
-  .bg-gray-50,
-  .bg-gray-100 {
+  .bg-muted {
     background-color: var(--gray-50) !important;
   }
 

package/dist/toast-theme.css

@@ -1,100 +1,136 @@
 /*
- * Toast Variant Theme Styles
- * Uses CSS variables for automatic dark/light mode adaptation.
- * These classes are referenced by toast.tsx (sonner) classNames map.
+ * Toast (sonner, `unstyled: true`) — documento Paleta iClips, "Toasts · camada 03".
  *
- * Sonner renders each toast with `unstyled: true`, so the variant class
- * (`toast-variant-*`) lands on the toast element, which also carries
- * `data-sonner-toast` and `data-type="error|success|warning|info"`.
- * Inner elements: `[data-title]`, `[data-description]`, `[data-icon]`.
+ * Superfície neutra sempre; a cor de estado fica só no ícone, dentro de um
+ * disco tingido. A cor identifica, a superfície não grita. Duas exceções de
+ * propósito:
+ *   - `loading` é o único roxo: progresso é a ação do usuário acontecendo.
+ *   - `.toast-undo` (toast sem tipo + action, aplicado pelo wrapper em
+ *     toast.tsx) vem em superfície invertida: "escuro = tenho alguns segundos
+ *     para agir".
  *
- * Same recipe as alert-theme.css. Variables used (defined in tokens.css,
- * change between modes):
- *   --info        → cyan-600 (light) / cyan-600 (dark)
- *   --success     → green-600 (light) / green-600 (dark)
- *   --warning     → yellow-500 (light) / yellow-600 (dark)
- *   --destructive → red-600 (light) / red-600 (dark)
- *   --foreground  → gray-800 (light) / gray-50 (dark)
- *   --card        → white (light) / gray-700 (dark)
- *   --border      → gray-200 (light) / gray-600 (dark)
+ * O ícone usa `--*-emphasis` nos dois temas: no escuro os -600 puros ficam
+ * abaixo de 3:1 sobre o card (gray-700).
+ *
+ * Seletores: cada toast é `[data-sonner-toast]` com `data-type`; dentro,
+ * `[data-icon]`, `[data-title]`, `[data-description]`, `[data-button]`.
  */
 
-/* ── Error ────────────────────────────────────────────────── */
-[data-sonner-toast].toast-variant-error {
-  color: color-mix(in oklab, var(--destructive) 80%, var(--foreground));
-  background-color: color-mix(in oklab, var(--destructive) 22%, var(--card));
-  border-color: color-mix(in oklab, var(--destructive) 50%, var(--border));
+[data-sonner-toast].toast {
+  --toast-state: var(--foreground);
+  --toast-icon: var(--foreground);
+  background-color: var(--card);
+  border-color: var(--border);
+  color: var(--foreground);
+}
+
+[data-sonner-toast].toast [data-title] {
+  color: var(--foreground);
+}
+
+[data-sonner-toast].toast [data-description] {
+  color: var(--muted-foreground);
+}
+
+/* ── Disco do ícone ───────────────────────────────────────── */
+[data-sonner-toast].toast [data-icon] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+  background-color: color-mix(in oklab, var(--toast-state) 12%, var(--card));
+  color: var(--toast-icon);
+}
+
+/* O sonner posiciona o loader em absoluto; aqui ele fica dentro do disco. */
+[data-sonner-toast].toast [data-icon] .sonner-loader {
+  position: static;
+  transform: none;
+  display: contents;
 }
 
-[data-sonner-toast].toast-variant-error [data-icon] {
-  color: var(--destructive);
+[data-sonner-toast].toast [data-icon] svg {
+  width: 1rem;
+  height: 1rem;
 }
 
-[data-sonner-toast].toast-variant-error [data-title] {
-  color: color-mix(in oklab, var(--destructive) 80%, var(--foreground));
+[data-sonner-toast].toast[data-type="success"] {
+  --toast-state: var(--success);
+  --toast-icon: var(--success-emphasis);
 }
 
-[data-sonner-toast].toast-variant-error [data-description] {
-  color: color-mix(in oklab, var(--destructive) 65%, var(--foreground));
+[data-sonner-toast].toast[data-type="error"] {
+  --toast-state: var(--destructive);
+  --toast-icon: var(--destructive-emphasis);
+  border-color: color-mix(in oklab, var(--destructive) 25%, var(--border));
 }
 
-/* ── Success ──────────────────────────────────────────────── */
-[data-sonner-toast].toast-variant-success {
-  color: color-mix(in oklab, var(--success) 80%, var(--foreground));
-  background-color: color-mix(in oklab, var(--success) 22%, var(--card));
-  border-color: color-mix(in oklab, var(--success) 50%, var(--border));
+[data-sonner-toast].toast[data-type="warning"] {
+  --toast-state: var(--warning);
+  --toast-icon: var(--warning-emphasis);
 }
 
-[data-sonner-toast].toast-variant-success [data-icon] {
-  color: var(--success);
+[data-sonner-toast].toast[data-type="info"] {
+  --toast-state: var(--info);
+  --toast-icon: var(--info-emphasis);
 }
 
-[data-sonner-toast].toast-variant-success [data-title] {
-  color: color-mix(in oklab, var(--success) 80%, var(--foreground));
+[data-sonner-toast].toast[data-type="loading"] {
+  --toast-state: var(--primary);
+  --toast-icon: var(--primary);
+  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
 }
 
-[data-sonner-toast].toast-variant-success [data-description] {
-  color: color-mix(in oklab, var(--success) 65%, var(--foreground));
+/* ── Ação: texto roxo, um link por toast ──────────────────── */
+/* Nos toasts de estado a ação vai abaixo da descrição, alinhada ao texto
+   (disco 1.75rem + gap 0.75rem); no Desfazer ela fica à direita. */
+[data-sonner-toast].toast {
+  flex-wrap: wrap;
 }
 
-/* ── Warning ──────────────────────────────────────────────── */
-/* --warning é o único token de status "claro" (yellow-500). Derivar texto
-   com o mesmo 80/65% dos outros deixaria ~2,4:1 sobre o fundo pálido — abaixo
-   de AA. O texto do warning mistura muito mais --foreground (fica âmbar
-   escuro); o ícone continua no amarelo cheio. */
-[data-sonner-toast].toast-variant-warning {
-  color: color-mix(in oklab, var(--warning) 32%, var(--foreground));
-  background-color: color-mix(in oklab, var(--warning) 22%, var(--card));
-  border-color: color-mix(in oklab, var(--warning) 50%, var(--border));
+[data-sonner-toast].toast [data-content] {
+  flex: 1 1 0;
+  min-width: 0;
 }
 
-[data-sonner-toast].toast-variant-warning [data-icon] {
-  color: color-mix(in oklab, var(--warning) 80%, var(--foreground));
+[data-sonner-toast].toast [data-button][data-action] {
+  background: none;
+  color: var(--primary);
+  padding: 0;
+  margin: -0.25rem 0 0 2.5rem;
+  flex-basis: 100%;
+  text-align: left;
 }
 
-[data-sonner-toast].toast-variant-warning [data-title] {
-  color: color-mix(in oklab, var(--warning) 32%, var(--foreground));
+[data-sonner-toast].toast.toast-undo [data-button][data-action] {
+  margin: 0 0 0 auto;
+  flex-basis: auto;
 }
 
-[data-sonner-toast].toast-variant-warning [data-description] {
-  color: color-mix(in oklab, var(--warning) 26%, var(--foreground));
+/* ── Desfazer: superfície invertida ───────────────────────── */
+[data-sonner-toast].toast.toast-undo {
+  background-color: var(--foreground);
+  border-color: var(--foreground);
+  color: var(--background);
+  align-items: center;
 }
 
-/* ── Info ─────────────────────────────────────────────────── */
-[data-sonner-toast].toast-variant-info {
-  color: color-mix(in oklab, var(--info) 80%, var(--foreground));
-  background-color: color-mix(in oklab, var(--info) 22%, var(--card));
-  border-color: color-mix(in oklab, var(--info) 50%, var(--border));
+[data-sonner-toast].toast.toast-undo [data-title],
+[data-sonner-toast].toast.toast-undo [data-description] {
+  color: var(--background);
 }
 
-[data-sonner-toast].toast-variant-info [data-icon] {
-  color: var(--info);
+[data-sonner-toast].toast.toast-undo [data-icon] {
+  display: none;
 }
 
-[data-sonner-toast].toast-variant-info [data-title] {
-  color: color-mix(in oklab, var(--info) 80%, var(--foreground));
+[data-sonner-toast].toast.toast-undo [data-button][data-action] {
+  color: var(--purple-100);
 }
 
-[data-sonner-toast].toast-variant-info [data-description] {
-  color: color-mix(in oklab, var(--info) 65%, var(--foreground));
+.dark [data-sonner-toast].toast.toast-undo [data-button][data-action] {
+  color: var(--purple-500);
 }