@djangocfg/ui-core 2.1.426 → 2.1.427

package/src/components/forms/setting-row/index.tsx

@@ -0,0 +1,359 @@
+'use client';
+
+/**
+ * SettingRow — the universal settings line, macOS / Claude-settings style:
+ *
+ *   [ label (+ description) ] ················· [ control ]
+ *
+ * separated from siblings by a single hairline (`--divider` token) — no card
+ * frame. This is the canonical building block for any settings surface (the
+ * SettingsLayout in @djangocfg/layouts is just one consumer).
+ *
+ * Props-driven control modes (precedence top→bottom):
+ *   - `value` + `editable` + `onSave`  → inline-editable chip (text/phone)
+ *   - `value`                          → read-only value chip
+ *   - `toggle` + `onToggle`            → Switch
+ *   - `navigation` (+ onClick)         → full-row button with a trailing chevron
+ *   - `action`                         → right-aligned node (button/link)
+ *   - `children`                       → arbitrary control (select, segmented…)
+ *
+ * Styling uses ONLY design tokens / ui-core primitives (Input, Switch) — no
+ * arbitrary one-off classes — so it stays consistent and themeable everywhere.
+ */
+
+import * as React from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
+
+import { cn } from '../../../lib/utils';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../navigation/collapsible';
+import { Editable, EditableInput, EditablePreview } from '../editable';
+import { PhoneInput } from '../phone-input';
+import { Switch } from '../switch';
+
+function formatPhone(raw: string): string {
+  if (!raw) return '';
+  try {
+    return parsePhoneNumberFromString(raw)?.formatInternational() ?? raw;
+  } catch {
+    return raw;
+  }
+}
+
+/** Read-only / preview value chip — recessed `muted` fill, right-aligned. */
+const VALUE_CHIP =
+  'rounded-control inline-flex min-w-[7rem] items-center justify-end bg-muted px-3 py-1.5 text-right text-sm text-foreground';
+
+export interface SettingRowProps {
+  /** Left-hand label. */
+  label: React.ReactNode;
+  /** Optional helper text under the label (muted, small). May contain links. */
+  description?: React.ReactNode;
+
+  // ── Control modes ──
+  /** Display a value (read-only chip, or inline-editable with `editable`). */
+  value?: string;
+  /** Make `value` inline-editable (Editable for text, PhoneInput for phone). */
+  editable?: boolean;
+  /** Commit handler for editable values. */
+  onSave?: (value: string) => Promise<void> | void;
+  /** Placeholder for an empty editable value. */
+  placeholder?: string;
+  /** Value kind — phone uses the country-aware input + formatting. */
+  type?: 'text' | 'phone';
+  /** Toggle mode — renders a Switch. */
+  toggle?: boolean;
+  /** Toggle state (with `toggle`). */
+  checked?: boolean;
+  /** Toggle change handler (with `toggle`). */
+  onToggle?: (checked: boolean) => void;
+  /** Navigation mode — whole row is a button with a trailing chevron. */
+  navigation?: boolean;
+  /** Right-aligned action node (button, link). */
+  action?: React.ReactNode;
+  /** Arbitrary right-hand control (select, segmented, custom). */
+  children?: React.ReactNode;
+
+  // ── Layout ──
+  /** Stack the control under the label (wide inputs, textareas). */
+  stacked?: boolean;
+  /** Row click (also used by `navigation`). */
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const SettingRow = React.forwardRef<HTMLDivElement, SettingRowProps>(
+  (
+    {
+      label,
+      description,
+      value,
+      editable = false,
+      onSave,
+      placeholder,
+      type = 'text',
+      toggle = false,
+      checked,
+      onToggle,
+      navigation = false,
+      action,
+      children,
+      stacked = false,
+      onClick,
+      disabled,
+      className,
+    },
+    ref,
+  ) => {
+    const control = resolveControl({
+      value, editable, onSave, placeholder, type,
+      toggle, checked, onToggle, action, children, disabled,
+    });
+
+    const labelBlock = (
+      <div className={cn('min-w-0', stacked ? 'w-full' : 'flex-1')}>
+        <div className="text-sm text-foreground">{label}</div>
+        {description && (
+          <p className="mt-0.5 text-[13px] leading-relaxed text-muted-foreground">{description}</p>
+        )}
+      </div>
+    );
+
+    const base = cn(
+      'divider-b py-3.5',
+      stacked ? 'block' : 'flex items-center justify-between gap-4',
+      className,
+    );
+
+    // Navigation row: the entire row is a button with a trailing chevron.
+    if (navigation) {
+      return (
+        <button
+          type="button"
+          onClick={onClick}
+          disabled={disabled}
+          className={cn(
+            base,
+            'group w-full rounded-control text-left transition-colors',
+            disabled ? 'cursor-default opacity-60' : 'hover:bg-accent/50',
+          )}
+        >
+          {labelBlock}
+          <ChevronRight className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+        </button>
+      );
+    }
+
+    // Clickable (non-navigation) row.
+    if (onClick) {
+      return (
+        <button
+          type="button"
+          onClick={onClick}
+          disabled={disabled}
+          ref={ref as never}
+          className={cn(
+            base,
+            'w-full text-left transition-colors',
+            disabled ? 'cursor-default opacity-60' : 'hover:bg-accent/40',
+          )}
+        >
+          {labelBlock}
+          {control != null && <div className="flex shrink-0 items-center">{control}</div>}
+        </button>
+      );
+    }
+
+    return (
+      <div ref={ref} className={base}>
+        {labelBlock}
+        {control != null && (
+          <div className={cn('shrink-0', stacked ? 'mt-3 w-full' : 'flex items-center')}>{control}</div>
+        )}
+      </div>
+    );
+  },
+);
+SettingRow.displayName = 'SettingRow';
+
+// ── Control resolver ──────────────────────────────────────────────────────────
+
+interface ControlArgs {
+  value?: string;
+  editable: boolean;
+  onSave?: (value: string) => Promise<void> | void;
+  placeholder?: string;
+  type: 'text' | 'phone';
+  toggle: boolean;
+  checked?: boolean;
+  onToggle?: (checked: boolean) => void;
+  action?: React.ReactNode;
+  children?: React.ReactNode;
+  disabled?: boolean;
+}
+
+function resolveControl(a: ControlArgs): React.ReactNode {
+  if (a.toggle) {
+    return <Switch checked={a.checked} onCheckedChange={a.onToggle} disabled={a.disabled} />;
+  }
+  if (a.value !== undefined && a.editable && a.onSave) {
+    return (
+      <EditableValue
+        value={a.value}
+        placeholder={a.placeholder ?? ''}
+        type={a.type}
+        onSave={a.onSave}
+        disabled={a.disabled}
+      />
+    );
+  }
+  if (a.value !== undefined) {
+    const text = a.value ? (a.type === 'phone' ? formatPhone(a.value) : a.value) : a.placeholder ?? '';
+    return <span className={cn(VALUE_CHIP, !a.value && 'text-muted-foreground/60')}>{text}</span>;
+  }
+  if (a.action != null) return a.action;
+  return a.children ?? null;
+}
+
+// ── Inline editable value ──────────────────────────────────────────────────────
+
+interface EditableValueProps {
+  value: string;
+  placeholder: string;
+  type: 'text' | 'phone';
+  onSave: (value: string) => Promise<void> | void;
+  disabled?: boolean;
+}
+
+function EditableValue({ value, placeholder, type, onSave, disabled }: EditableValueProps) {
+  const submit = (next: string) => {
+    if (next !== value) onSave(next);
+  };
+
+  if (type === 'phone') {
+    return <PhoneEditable value={value} placeholder={placeholder} onSubmit={submit} disabled={disabled} />;
+  }
+
+  return (
+    <Editable
+      value={value}
+      placeholder={placeholder}
+      onValueSubmit={submit}
+      readOnly={disabled}
+      selectAllOnFocus
+      submitOnBlur
+      className="flex justify-end"
+    >
+      <EditablePreview
+        className={cn(
+          VALUE_CHIP,
+          'cursor-text transition-colors hover:bg-accent',
+          !value && 'text-muted-foreground/60',
+          disabled && 'cursor-default opacity-60 hover:bg-muted',
+        )}
+      >
+        {value || placeholder}
+      </EditablePreview>
+      {/* EditableInput renders the global Input styling at `sm` density. */}
+      <EditableInput inputSize="sm" className="w-56" />
+    </Editable>
+  );
+}
+
+interface PhoneEditableProps {
+  value: string;
+  placeholder: string;
+  onSubmit: (next: string) => void;
+  disabled?: boolean;
+}
+
+function PhoneEditable({ value, placeholder, onSubmit, disabled }: PhoneEditableProps) {
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(value);
+  const wrapRef = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => setDraft(value), [value]);
+  React.useEffect(() => {
+    if (editing) wrapRef.current?.querySelector('input')?.focus();
+  }, [editing]);
+
+  if (!editing) {
+    return (
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setEditing(true)}
+        className={cn(VALUE_CHIP, 'transition-colors hover:bg-accent', !value && 'text-muted-foreground/60', disabled && 'opacity-60')}
+      >
+        {value ? formatPhone(value) : placeholder}
+      </button>
+    );
+  }
+
+  return (
+    <div
+      ref={wrapRef}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+          onSubmit(draft);
+          setEditing(false);
+        }
+      }}
+    >
+      <PhoneInput value={draft} onChange={(v) => setDraft(v ?? '')} placeholder={placeholder} />
+    </div>
+  );
+}
+
+// ── Titled block of rows ────────────────────────────────────────────────────────
+
+export interface SettingsBlockProps {
+  /** Bold section heading (e.g. "Profile", "Preferences"). */
+  title?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  /**
+   * Make the whole block collapsible — the title becomes a clickable header
+   * with a chevron, and the rows hide/reveal. Useful for rarely-needed or
+   * destructive sections (e.g. "Danger zone"). Requires a `title`.
+   */
+  collapsible?: boolean;
+  /** Initial open state when `collapsible`. Default: false. */
+  defaultOpen?: boolean;
+}
+
+const BLOCK_TITLE = 'text-[13px] font-semibold uppercase tracking-wide text-muted-foreground';
+
+export const SettingsBlock: React.FC<SettingsBlockProps> = ({
+  title,
+  children,
+  className,
+  collapsible = false,
+  defaultOpen = false,
+}) => {
+  if (collapsible && title) {
+    return (
+      <Collapsible defaultOpen={defaultOpen} className={cn('space-y-0', className)}>
+        <CollapsibleTrigger
+          className={cn(
+            BLOCK_TITLE,
+            'group flex w-full items-center gap-1.5 pb-1 transition-colors hover:text-foreground',
+          )}
+        >
+          {title}
+          <ChevronDown className="size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180" />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+          <div>{children}</div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+
+  return (
+    <section className={cn('space-y-0', className)}>
+      {title && <h2 className={cn(BLOCK_TITLE, 'pb-1')}>{title}</h2>}
+      <div>{children}</div>
+    </section>
+  );
+};

package/src/components/forms/switch/index.tsx

@@ -12,7 +12,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}

package/src/components/forms/tags-input/index.tsx

@@ -862,7 +862,7 @@ const TagsInputItemDelete = React.forwardRef<HTMLButtonElement, TagsInputItemDel
         data-state={itemContext.isHighlighted ? "active" : "inactive"}
         data-disabled={disabled ? "" : undefined}
         className={cn(
-          "inline-flex items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          "inline-flex items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring",
           disabled && "pointer-events-none opacity-50",
           props.className
         )}

package/src/components/forms/textarea/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { useStoredValue, type StorageType, type UseStoredValueOptions } from '../../../hooks';
 import { cn } from '../../../lib/utils';
+import { TEXTAREA_CLASS } from '../input';
 
 export interface TextareaProps extends React.ComponentProps<"textarea"> {
   /**
@@ -40,10 +41,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     if (value !== undefined) {
       return (
         <textarea
-          className={cn(
-            "flex min-h-[60px] w-full rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-            className
-          )}
+          className={cn(TEXTAREA_CLASS, className)}
           ref={ref}
           value={value}
           onChange={storageKey ? handleChange : onChange}
@@ -54,10 +52,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     return (
       <textarea
-        className={cn(
-          "flex min-h-[60px] w-full rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
+        className={cn(TEXTAREA_CLASS, className)}
         ref={ref}
         defaultValue={storageKey && storedValue ? storedValue : defaultValue}
         onChange={storageKey ? handleChange : onChange}

package/src/components/index.ts

@@ -13,6 +13,8 @@ export { CheckboxGroup, CheckboxGroupDescription, CheckboxGroupItem, CheckboxGro
 export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupListProps } from './forms/checkbox-group';
 export { RadioGroup, RadioGroupItem } from './forms/radio-group';
 export { Switch } from './forms/switch';
+export { SettingRow, SettingsBlock } from './forms/setting-row';
+export type { SettingRowProps, SettingsBlockProps } from './forms/setting-row';
 export { Slider } from './forms/slider';
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './forms/button-group';
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from './forms/form';

package/src/components/navigation/dropdown-menu/index.tsx

@@ -186,7 +186,9 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    // Soft hairline via the --divider token (was bg-muted, which is darker than
+    // the popover surface and read as a hard dark groove).
+    className={cn("-mx-1 my-1 h-px bg-divider", className)}
     {...props}
   />
 ))

package/src/components/navigation/menu/menu-builder.tsx

@@ -41,13 +41,18 @@ export function MenuBuilder({
       onOpenChange={onOpenChange}
       defaultOpen={defaultOpen}
     >
-      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      {/* The trigger opens the menu on click; suppress its focus-visible ring
+          so there's no stray outline around the avatar/button. */}
+      <DropdownMenuTrigger asChild className="focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0">
+        {children}
+      </DropdownMenuTrigger>
       <DropdownMenuContent
         side={side}
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('min-w-56 max-w-xs', contentClassName)}
+        // select-none: menu labels shouldn't be text-selectable (feels crisp).
+        className={cn('min-w-56 max-w-xs select-none', contentClassName)}
       >
         {renderItems(items, { showDescriptions })}
       </DropdownMenuContent>

package/src/components/navigation/stepper/index.tsx

@@ -997,7 +997,7 @@ function StepperTrigger(props: ButtonProps) {
       {...triggerProps}
       ref={composedRef}
       className={cn(
-        "inline-flex items-center justify-center gap-3 rounded-md text-left outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "inline-flex items-center justify-center gap-3 rounded-md text-left transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         "not-has-data-[slot=description]:rounded-full not-has-data-[slot=title]:rounded-full",
         className,
       )}

package/src/components/navigation/tabs/index.tsx

@@ -285,8 +285,8 @@ const TabsTrigger = React.forwardRef<
             ].join(" ")
           : [
               "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--radius-sm)] px-3 py-1",
-              "text-sm font-medium ring-offset-background transition-all",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "text-sm font-medium transition-all",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
               "disabled:pointer-events-none disabled:opacity-50",
               "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
             ].join(" "),
@@ -306,7 +306,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
       className
     )}
     {...props}

package/src/components/overlay/dialog/index.tsx

@@ -60,17 +60,22 @@ const DialogContent = React.forwardRef<
       ref={ref}
       aria-describedby={undefined}
       className={cn(
-        "fixed z-600 bg-background duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        // The content auto-focuses on open; suppress the focus outline on the
+        // panel itself (a stray ring around the whole modal looks broken).
+        // Inner controls keep their own focus-visible rings.
+        "fixed z-600 bg-background duration-200 focus:outline-none focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         fullscreen
           ? "left-0 top-0 grid h-[100dvh] w-screen max-w-none gap-0 border-0 p-0 shadow-none data-[state=closed]:zoom-out-[0.98] data-[state=open]:zoom-in-[0.98]"
-          : "left-1/2 top-1/2 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg sm:rounded-[var(--radius-dialog)] data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          // Rounded on ALL sizes — the radius used to be `sm:`-gated, which left
+          // phone dialogs with hard square corners. Centered, soft-cornered card.
+          : "left-1/2 top-1/2 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-dialog)] border p-6 shadow-lg data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}
     >
       {children}
       {closeButton === undefined ? (
-        <DialogPrimitive.Close className="absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <DialogPrimitive.Close className="absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <Cross2Icon className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

package/src/components/overlay/sheet/index.tsx

@@ -67,7 +67,7 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none data-[state=open]:bg-secondary">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

package/src/components/overlay/tooltip/index.tsx

@@ -22,7 +22,10 @@ const TooltipContent = React.forwardRef<
       aria-describedby={undefined}
       sideOffset={sideOffset}
       className={cn(
-        "z-[700] overflow-hidden rounded-[var(--radius-tooltip)] border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        // INVERSE surface (foreground bg + background text) so the tooltip is
+        // always high-contrast against any panel — light tooltip on dark theme,
+        // dark tooltip on light theme (Claude/Vercel/macOS). No border needed.
+        "z-[700] overflow-hidden rounded-[var(--radius-tooltip)] bg-foreground px-3 py-1.5 text-xs font-medium text-background shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/src/components/select/multi-select-pro-async.tsx

@@ -381,7 +381,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
           <span>{option.label}</span>
           {!disabled && (
             <button
-              className="ml-1 rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-2 focus:ring-ring"
+              className="ml-1 rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-1 focus:ring-ring"
               onClick={(e) => {
                 e.stopPropagation()
                 toggleOption(option.value)
@@ -556,7 +556,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
                         handleClearAll()
                       }
                     }}
-                    className="rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-2 focus:ring-ring"
+                    className="rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-1 focus:ring-ring"
                     aria-label={translations.clearAll}
                   >
                     <XCircle className="h-4 w-4 shrink-0 opacity-50" />

package/src/components/select/multi-select-pro.tsx

@@ -398,7 +398,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
           <span>{option.label}</span>
           {!disabled && (
             <button
-              className="ml-1 rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-2 focus:ring-ring"
+              className="ml-1 rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-1 focus:ring-ring"
               onClick={(e) => {
                 e.stopPropagation()
                 toggleOption(option.value)
@@ -573,7 +573,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
                         handleClearAll()
                       }
                     }}
-                    className="rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-2 focus:ring-ring"
+                    className="rounded-full hover:bg-muted-foreground/20 focus:outline-none focus:ring-1 focus:ring-ring"
                     aria-label={translations.clearAll}
                   >
                     <XCircle className="h-4 w-4 shrink-0 opacity-50" />

package/src/components/specialized/copy/index.tsx

@@ -70,11 +70,11 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         {...props}
       >
         {copied ? (
-          <Check className={cn(iconClassName, 'text-green-500')} />
+          <Check className={cn(iconClassName, 'text-success')} />
         ) : (
           <Copy className={iconClassName} />
         )}
-        {hasLabel && <span className={copied ? 'text-green-500' : undefined}>{copied ? copiedText : children}</span>}
+        {hasLabel && <span className={copied ? 'text-success' : undefined}>{copied ? copiedText : children}</span>}
       </Button>
     )
   }

package/src/components/specialized/item/index.tsx

@@ -34,7 +34,7 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-[var(--radius)] border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring [a]:transition-colors flex flex-wrap items-center rounded-[var(--radius)] border border-transparent text-sm transition-colors duration-100",
   {
     variants: {
       variant: {