@nexa-ui-kit/theme-default 1.0.0

package/components/collapsible.css

@@ -0,0 +1,5 @@
+/* Collapsible Component Styles */
+
+[data-slot="collapsible-content"] {
+  @apply overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down;
+}

package/components/combobox.css

@@ -0,0 +1,13 @@
+/* Combobox Component Styles */
+
+[data-slot="combobox-trigger"] {
+  @apply inline-flex items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+[data-slot="combobox-content"] {
+  @apply p-0;
+}
+
+[data-slot="combobox-item"][data-selected] {
+  @apply font-medium;
+}

package/components/command.css

@@ -0,0 +1,49 @@
+/* Command Component Styles */
+
+[data-slot="command"] {
+  @apply flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground;
+}
+
+[data-slot="command-dialog-content"] {
+  @apply overflow-hidden p-0 shadow-lg;
+}
+
+[data-slot="command-dialog-content"] [data-slot="command"] {
+  @apply [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5;
+}
+
+[data-slot="command-input-wrapper"] {
+  @apply flex items-center border-b px-3;
+}
+
+[data-slot="command-input-wrapper"] > svg {
+  @apply mr-2 h-4 w-4 shrink-0 opacity-50;
+}
+
+[data-slot="command-input"] {
+  @apply flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+[data-slot="command-list"] {
+  @apply max-h-[300px] overflow-y-auto overflow-x-hidden;
+}
+
+[data-slot="command-empty"] {
+  @apply py-6 text-center text-sm;
+}
+
+[data-slot="command-group"] {
+  @apply overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground;
+}
+
+[data-slot="command-separator"] {
+  @apply -mx-1 h-px bg-border;
+}
+
+[data-slot="command-item"] {
+  @apply relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected='true']:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
+}
+
+[data-slot="command-shortcut"] {
+  @apply ml-auto text-xs tracking-widest text-muted-foreground;
+}

package/components/context-menu.css

@@ -0,0 +1,87 @@
+/* Context Menu Component Styles */
+/* Radix UI context menu with data-slot attributes */
+
+[data-slot="context-menu-sub-trigger"] {
+  @apply flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none;
+  @apply focus:bg-accent focus:text-accent-foreground;
+  @apply data-[state=open]:bg-accent data-[state=open]:text-accent-foreground;
+}
+
+[data-slot="context-menu-sub-trigger"][data-inset="true"] {
+  @apply pl-8;
+}
+
+[data-slot="context-menu-chevron"] {
+  @apply ml-auto h-4 w-4;
+}
+
+[data-slot="context-menu-sub-content"] {
+  @apply z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg;
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out;
+  @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+  @apply data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2;
+  @apply data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  transform-origin: var(--radix-context-menu-content-transform-origin);
+}
+
+[data-slot="context-menu-content"] {
+  @apply z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md;
+  max-height: var(--radix-context-menu-content-available-height);
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out;
+  @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+  @apply data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2;
+  @apply data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  transform-origin: var(--radix-context-menu-content-transform-origin);
+}
+
+[data-slot="context-menu-item"] {
+  @apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none;
+  @apply focus:bg-accent focus:text-accent-foreground;
+  @apply data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+}
+
+[data-slot="context-menu-item"][data-inset="true"] {
+  @apply pl-8;
+}
+
+[data-slot="context-menu-checkbox-item"] {
+  @apply relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none;
+  @apply focus:bg-accent focus:text-accent-foreground;
+  @apply data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+}
+
+[data-slot="context-menu-item-indicator-wrapper"] {
+  @apply absolute left-2 flex h-3.5 w-3.5 items-center justify-center;
+}
+
+[data-slot="context-menu-check-icon"] {
+  @apply h-4 w-4;
+}
+
+[data-slot="context-menu-radio-item"] {
+  @apply relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none;
+  @apply focus:bg-accent focus:text-accent-foreground;
+  @apply data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+}
+
+[data-slot="context-menu-circle-icon"] {
+  @apply h-2 w-2 fill-current;
+}
+
+[data-slot="context-menu-label"] {
+  @apply px-2 py-1.5 text-sm font-semibold text-foreground;
+}
+
+[data-slot="context-menu-label"][data-inset="true"] {
+  @apply pl-8;
+}
+
+[data-slot="context-menu-separator"] {
+  @apply -mx-1 my-1 h-px bg-border;
+}
+
+[data-slot="context-menu-shortcut"] {
+  @apply ml-auto text-xs tracking-widest text-muted-foreground;
+}

package/components/date-picker.css

@@ -0,0 +1,13 @@
+/* Date Picker Component Styles */
+
+[data-slot="date-picker-trigger"] {
+  @apply inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm text-left font-normal ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+[data-slot="date-picker-icon"] {
+  @apply h-4 w-4 text-muted-foreground;
+}
+
+[data-slot="date-picker-content"] {
+  @apply p-0;
+}

package/components/dialog.css

@@ -0,0 +1,29 @@
+/* Dialog Component Styles */
+
+[data-slot="dialog-overlay"] {
+  @apply fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+}
+
+[data-slot="dialog-content"] {
+  @apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg;
+}
+
+[data-slot="dialog-close"] {
+  @apply 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-accent data-[state=open]:text-muted-foreground;
+}
+
+[data-slot="dialog-header"] {
+  @apply flex flex-col space-y-1.5 text-center sm:text-left;
+}
+
+[data-slot="dialog-footer"] {
+  @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
+}
+
+[data-slot="dialog-title"] {
+  @apply text-lg font-semibold leading-none tracking-tight;
+}
+
+[data-slot="dialog-description"] {
+  @apply text-sm text-muted-foreground;
+}

package/components/dropdown-menu.css

@@ -0,0 +1,98 @@
+/* Dropdown Menu Component Styles */
+/* Radix UI dropdown menu with data-slot attributes */
+
+[data-slot="dropdown-menu-sub-trigger"] {
+  @apply flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none;
+  @apply focus:bg-accent data-[state=open]:bg-accent;
+}
+
+[data-slot="dropdown-menu-sub-trigger"] svg {
+  @apply pointer-events-none size-4 shrink-0;
+}
+
+[data-slot="dropdown-menu-sub-trigger"][data-inset="true"] {
+  @apply pl-8;
+}
+
+[data-slot="dropdown-menu-sub-trigger-icon"] {
+  @apply ml-auto h-4 w-4;
+}
+
+[data-slot="dropdown-menu-sub-content"] {
+  @apply z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg;
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out;
+  @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+  @apply data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2;
+  @apply data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+}
+
+[data-slot="dropdown-menu-content"] {
+  @apply z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md;
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out;
+  @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+  @apply data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2;
+  @apply data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+}
+
+[data-slot="dropdown-menu-item"] {
+  @apply relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors;
+  @apply focus:bg-accent focus:text-accent-foreground;
+  @apply data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+}
+
+[data-slot="dropdown-menu-item"] > svg {
+  @apply size-4 shrink-0;
+}
+
+[data-slot="dropdown-menu-item"][data-inset="true"] {
+  @apply pl-8;
+}
+
+[data-slot="dropdown-menu-checkbox-item"] {
+  @apply relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors;
+  @apply focus:bg-accent focus:text-accent-foreground;
+  @apply data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+}
+
+[data-slot="dropdown-menu-checkbox-indicator"] {
+  @apply absolute left-2 flex h-3.5 w-3.5 items-center justify-center;
+}
+
+[data-slot="dropdown-menu-checkbox-icon"] {
+  @apply h-4 w-4;
+}
+
+[data-slot="dropdown-menu-radio-item"] {
+  @apply relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors;
+  @apply focus:bg-accent focus:text-accent-foreground;
+  @apply data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+}
+
+[data-slot="dropdown-menu-radio-indicator"] {
+  @apply absolute left-2 flex h-3.5 w-3.5 items-center justify-center;
+}
+
+[data-slot="dropdown-menu-radio-icon"] {
+  @apply h-2 w-2 fill-current;
+}
+
+[data-slot="dropdown-menu-label"] {
+  @apply px-2 py-1.5 text-sm font-semibold;
+}
+
+[data-slot="dropdown-menu-label"][data-inset="true"] {
+  @apply pl-8;
+}
+
+[data-slot="dropdown-menu-separator"] {
+  @apply -mx-1 my-1 h-px bg-muted;
+}
+
+[data-slot="dropdown-menu-shortcut"] {
+  @apply ml-auto text-xs tracking-widest opacity-60;
+}

package/components/empty-state.css

@@ -0,0 +1,21 @@
+/* Empty State Component Styles */
+
+[data-slot="empty-state"] {
+  @apply flex flex-col items-center justify-center py-12 text-center;
+}
+
+[data-slot="empty-state-icon"] {
+  @apply mb-4 text-muted-foreground;
+}
+
+[data-slot="empty-state-title"] {
+  @apply text-lg font-semibold text-foreground;
+}
+
+[data-slot="empty-state-description"] {
+  @apply mt-1 text-sm text-muted-foreground;
+}
+
+[data-slot="empty-state-action"] {
+  @apply mt-4;
+}

package/components/field.css

@@ -0,0 +1,145 @@
+/* Field Component Styles */
+/* Form field layout with labels, descriptions, and error states */
+
+[data-slot="field-set"] {
+  @apply flex flex-col gap-6 rounded-lg border bg-background/50 p-4;
+}
+
+[data-slot="field-set"]:has(> [data-slot="checkbox-group"]),
+[data-slot="field-set"]:has(> [data-slot="radio-group"]) {
+  @apply gap-3;
+}
+
+[data-slot="field-legend"] {
+  @apply px-2 font-medium text-foreground;
+}
+
+[data-slot="field-legend"][data-variant="legend"] {
+  @apply text-sm;
+}
+
+[data-slot="field-legend"][data-variant="label"] {
+  @apply text-sm font-semibold;
+}
+
+[data-slot="field-group"] {
+  @apply flex w-full flex-col gap-4;
+}
+
+[data-slot="field-group"][data-slot="checkbox-group"],
+[data-slot="field-group"][data-slot="radio-group"] {
+  @apply gap-3;
+}
+
+[data-slot="field-group"] > [data-slot="field-group"] {
+  @apply gap-4;
+}
+
+[data-slot="field"] {
+  @apply flex w-full gap-2;
+}
+
+[data-slot="field"][data-invalid="true"] {
+  @apply text-destructive;
+}
+
+/* Orientation variants */
+[data-slot="field"][data-orientation="vertical"] {
+  @apply flex-col;
+}
+
+[data-slot="field"][data-orientation="vertical"] > * {
+  @apply w-full;
+}
+
+[data-slot="field"][data-orientation="vertical"] > .sr-only {
+  @apply w-auto;
+}
+
+[data-slot="field"][data-orientation="horizontal"] {
+  @apply flex-row items-center;
+}
+
+[data-slot="field"][data-orientation="horizontal"] > [data-slot="field-label"] {
+  @apply flex-auto;
+}
+
+[data-slot="field"][data-orientation="horizontal"]:has([data-slot="field-description"]) > [data-slot="field-label"] {
+  @apply self-start;
+}
+
+[data-slot="field"][data-orientation="horizontal"]:has([type="checkbox"]) > [data-slot="field-label"],
+[data-slot="field"][data-orientation="horizontal"]:has([type="radio"]) > [data-slot="field-label"],
+[data-slot="field"][data-orientation="horizontal"]:has([role="checkbox"]) > [data-slot="field-label"],
+[data-slot="field"][data-orientation="horizontal"]:has([role="radio"]) > [data-slot="field-label"],
+[data-slot="field"][data-orientation="horizontal"]:has([role="switch"]) > [data-slot="field-label"] {
+  @apply order-last;
+}
+
+[data-slot="field-content"] {
+  @apply relative flex flex-1 flex-col;
+}
+
+[data-slot="field-label"] {
+  @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
+}
+
+[data-slot="field"][data-disabled="true"] [data-slot="field-label"] {
+  @apply opacity-50;
+}
+
+[data-slot="field-label"]:has(> [data-slot="field"]) {
+  @apply w-full flex-col rounded-md border;
+}
+
+[data-slot="field-label"] > [data-slot="field"] {
+  @apply p-4;
+}
+
+[data-slot="field-label"]:has([data-state="checked"]) {
+  @apply border-primary bg-primary/5;
+}
+
+.dark [data-slot="field-label"]:has([data-state="checked"]) {
+  @apply bg-primary/10;
+}
+
+[data-slot="field-title"] {
+  @apply text-base font-semibold leading-none tracking-tight;
+}
+
+[data-slot="field-description"] {
+  @apply text-sm text-muted-foreground;
+}
+
+[data-slot="field-description"] > a {
+  @apply underline underline-offset-4;
+}
+
+[data-slot="field-description"] > a:hover {
+  @apply text-primary;
+}
+
+[data-slot="field-separator"] {
+  @apply my-4 flex w-full items-center;
+}
+
+[data-slot="field-separator"][data-content="true"] {
+  @apply gap-4;
+}
+
+[data-slot="field-separator-line"] {
+  @apply flex-1 border-border;
+}
+
+[data-slot="field-separator-content"] {
+  @apply text-xs font-medium uppercase text-muted-foreground;
+}
+
+[data-slot="field-error"] {
+  @apply mt-1 text-sm font-medium text-destructive;
+}
+
+[data-slot="field-error-list"] {
+  @apply list-inside list-disc;
+}

package/components/form.css

@@ -0,0 +1,26 @@
+/* Form Component Styles */
+/* react-hook-form integration with data-slot attributes */
+
+[data-slot="form-item"] {
+  @apply space-y-2;
+}
+
+[data-slot="form-label"] {
+  @apply text-sm font-medium leading-none;
+}
+
+[data-slot="form-label"][data-error="true"] {
+  @apply text-destructive;
+}
+
+[data-slot="form-control"] {
+  /* Control wrapper - inherits styles from child input/select/etc */
+}
+
+[data-slot="form-description"] {
+  @apply text-[0.8rem] text-muted-foreground;
+}
+
+[data-slot="form-message"] {
+  @apply text-[0.8rem] font-medium text-destructive;
+}

package/components/hover-card.css

@@ -0,0 +1,5 @@
+/* HoverCard Component Styles */
+
+[data-slot="hover-card-content"] {
+  @apply z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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;
+}

package/components/index.css

@@ -0,0 +1,78 @@
+/* Nexa UI Default Theme - Component Styles */
+
+/* All imports must come first */
+@import '../tokens/index.css';
+@import './accordion.css';
+@import './aspect-ratio.css';
+@import './avatar.css';
+@import './badge.css';
+@import './breadcrumb.css';
+@import './button.css';
+@import './calendar.css';
+@import './card.css';
+@import './carousel.css';
+@import './chart.css';
+@import './checkbox.css';
+@import './collapsible.css';
+@import './command.css';
+@import './context-menu.css';
+@import './dialog.css';
+@import './dropdown-menu.css';
+@import './field.css';
+@import './form.css';
+@import './hover-card.css';
+@import './input-group.css';
+@import './input.css';
+@import './item.css';
+@import './kbd.css';
+@import './label.css';
+@import './menubar.css';
+@import './navigation-menu.css';
+@import './popover.css';
+@import './progress.css';
+@import './radio-group.css';
+@import './scrollytelling.css';
+@import './pagination.css';
+@import './separator.css';
+@import './sidebar.css';
+
+@import './skeleton.css';
+@import './slider.css';
+@import './stepper.css';
+@import './table.css';
+@import './tabs.css';
+@import './textarea.css';
+@import './toggle.css';
+@import './tooltip.css';
+
+/* Phase 1: Radix Primitives */
+@import './alert-dialog.css';
+@import './scroll-area.css';
+@import './toggle-group.css';
+@import './toolbar.css';
+@import './toast.css';
+
+/* Phase 2: Simple Components */
+@import './alert.css';
+@import './sheet.css';
+@import './empty-state.css';
+@import './avatar-group.css';
+@import './stat-card.css';
+
+/* Phase 3: Complex Components */
+@import './number-input.css';
+@import './input-otp.css';
+@import './combobox.css';
+@import './date-picker.css';
+@import './multi-select.css';
+
+
+/* Focus visible utility */
+.focus-visible-ring {
+  outline: none;
+}
+
+.focus-visible-ring:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}

package/components/input-group.css

@@ -0,0 +1,91 @@
+/* Input Group Component Styles */
+
+[data-slot="input-group"] {
+  @apply relative flex w-full items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow];
+  /* Match standard input height */
+  @apply h-10 bg-background;
+}
+
+[data-slot="input-group"]:has(> textarea) {
+  @apply h-auto;
+}
+
+/* Focus states - Ring on the container */
+[data-slot="input-group"]:has([data-slot="input-group-control"]:focus-visible),
+[data-slot="input-group"]:has(input:focus-visible),
+[data-slot="input-group"]:has(textarea:focus-visible) {
+  @apply ring-2 ring-ring ring-offset-2;
+}
+
+/* Error states */
+[data-slot="input-group"]:has([data-slot][aria-invalid="true"]),
+[data-slot="input-group"][data-error="true"] {
+  @apply border-destructive ring-destructive/20;
+}
+
+/* Disabled state */
+[data-slot="input-group"][data-disabled="true"],
+[data-slot="input-group"]:has(input:disabled),
+[data-slot="input-group"]:has(textarea:disabled) {
+  @apply opacity-50 cursor-not-allowed bg-muted/50;
+}
+
+/* Input/Textarea inside group - Strip default styles */
+[data-slot="input-group-control"],
+[data-slot="input-group"] > input {
+  @apply flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 focus-visible:outline-none min-w-0;
+  @apply h-full px-3 py-2;
+}
+
+[data-slot="input-group"] textarea[data-slot="input-group-control"] {
+  @apply resize-none h-full;
+}
+
+/* Addon Styles */
+[data-slot="input-group-addon"] {
+  @apply flex h-full items-center justify-center whitespace-nowrap px-3 text-sm font-medium text-muted-foreground bg-muted/50;
+}
+
+/* Automatic borders for children */
+
+/* If an addon is the first child, give it a right border */
+[data-slot="input-group"] > [data-slot="input-group-addon"]:first-child {
+  @apply border-r border-input rounded-l-[inherit];
+}
+
+/* If an addon is the last child, give it a left border */
+[data-slot="input-group"] > [data-slot="input-group-addon"]:last-child {
+  @apply border-l border-input rounded-r-[inherit];
+}
+
+/* Icons in addons */
+[data-slot="input-group-addon"] > svg:not([class*="size-"]) {
+  @apply size-4;
+}
+
+/* Buttons inside group */
+[data-slot="input-group-button"] {
+  @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
+  @apply h-8 rounded-sm px-3 mx-1; /* Slightly smaller than container to look contained */
+  @apply bg-primary text-primary-foreground shadow hover:bg-primary/90;
+}
+
+[data-slot="input-group-button"][data-size="xs"] {
+  @apply h-6 px-2 text-xs;
+}
+
+[data-slot="input-group-button"][data-size="sm"] {
+  @apply h-7 px-2.5;
+}
+
+[data-slot="input-group-button"][data-size="icon-xs"] {
+  @apply h-6 w-6 p-0;
+}
+
+[data-slot="input-group-button"][data-size="icon-sm"] {
+  @apply h-7 w-7 p-0;
+}
+
+[data-slot="input-group-button"][data-variant="ghost"] {
+  @apply bg-transparent text-foreground shadow-none hover:bg-muted/60;
+}