@frame-ui-ng/components 0.1.0-beta.0 → 0.2.0-beta.0

package/styles/components.css

@@ -1,47 +1,47 @@
-@import '../../alert/src/styles/alert.css';
-@import '../../accordion/src/styles/accordion.css';
-@import '../../avatar/src/styles/avatar.css';
-@import '../../button/src/styles/button.css';
-@import '../../button-group/src/styles/button-group.css';
-@import '../../breadcrumb/src/styles/breadcrumb.css';
-@import '../../calendar/src/styles/calendar.css';
-@import '../../card/src/styles/card.css';
-@import '../../carousel/src/styles/carousel.css';
-@import '../../checkbox/src/styles/checkbox.css';
-@import '../../collapsible/src/styles/collapsible.css';
-@import '../../command/src/styles/command.css';
-@import '../../combobox/src/styles/combobox.css';
-@import '../../context-menu/src/styles/context-menu.css';
-@import '../../date-picker/src/styles/date-picker.css';
-@import '../../dropdown-menu/src/styles/dropdown-menu.css';
-@import '../../empty/src/styles/empty.css';
-@import '../../field/src/styles/field.css';
-@import '../../hover-card/src/styles/hover-card.css';
-@import '../../input/src/styles/input.css';
-@import '../../input/src/styles/input-group.css';
-@import '../../input-otp/src/styles/input-otp.css';
-@import '../../item/src/styles/item.css';
-@import '../../menubar/src/styles/menubar.css';
-@import '../../modal/src/styles/modal.css';
-@import '../../navigation-menu/src/styles/navigation-menu.css';
-@import '../../pagination/src/styles/pagination.css';
-@import '../../popover/src/styles/popover.css';
-@import '../../progress/src/styles/progress.css';
-@import '../../radio-group/src/styles/radio-group.css';
-@import '../../resizable/src/styles/resizable.css';
-@import '../../separator/src/styles/separator.css';
-@import '../../skeleton/src/styles/skeleton.css';
-@import '../../slider/src/styles/slider.css';
-@import '../../textarea/src/styles/textarea.css';
-@import '../../select/src/styles/select.css';
-@import '../../sheet/src/styles/sheet.css';
-@import '../../sidebar/src/styles/sidebar.css';
-@import '../../switch/src/styles/switch.css';
-@import '../../spinner/src/styles/spinner.css';
-@import '../../tabs/src/styles/tabs.css';
-@import '../../table/src/styles/table.css';
-@import '../../toggle/src/styles/toggle.css';
-@import '../../tooltip/src/styles/tooltip.css';
-@import '../../toast/src/styles/toast.css';
-@import '../../virtual-scroll/src/styles/virtual-scroll.css';
-@import '../../badge/src/styles/badge.css';
+@import '../../alert/src/styles/alert.css';
+@import '../../accordion/src/styles/accordion.css';
+@import '../../avatar/src/styles/avatar.css';
+@import '../../button/src/styles/button.css';
+@import '../../button-group/src/styles/button-group.css';
+@import '../../breadcrumb/src/styles/breadcrumb.css';
+@import '../../calendar/src/styles/calendar.css';
+@import '../../card/src/styles/card.css';
+@import '../../carousel/src/styles/carousel.css';
+@import '../../checkbox/src/styles/checkbox.css';
+@import '../../collapsible/src/styles/collapsible.css';
+@import '../../command/src/styles/command.css';
+@import '../../combobox/src/styles/combobox.css';
+@import '../../context-menu/src/styles/context-menu.css';
+@import '../../date-picker/src/styles/date-picker.css';
+@import '../../empty/src/styles/empty.css';
+@import '../../field/src/styles/field.css';
+@import '../../hover-card/src/styles/hover-card.css';
+@import '../../input/src/styles/input.css';
+@import '../../input/src/styles/input-group.css';
+@import '../../input-otp/src/styles/input-otp.css';
+@import '../../item/src/styles/item.css';
+@import '../../menubar/src/styles/menubar.css';
+@import '../../modal/src/styles/modal.css';
+@import '../../navigation-menu/src/styles/navigation-menu.css';
+@import '../../pagination/src/styles/pagination.css';
+@import '../../popover/src/styles/popover.css';
+@import '../../progress/src/styles/progress.css';
+@import '../../radio-group/src/styles/radio-group.css';
+@import '../../resizable/src/styles/resizable.css';
+@import '../../separator/src/styles/separator.css';
+@import '../../skeleton/src/styles/skeleton.css';
+@import '../../slider/src/styles/slider.css';
+@import '../../textarea/src/styles/textarea.css';
+@import '../../select/src/styles/select.css';
+@import '../../sheet/src/styles/sheet.css';
+@import '../../sidebar/src/styles/sidebar.css';
+@import '../../switch/src/styles/switch.css';
+@import '../../spinner/src/styles/spinner.css';
+@import '../../tabs/src/styles/tabs.css';
+@import '../../table/src/styles/table.css';
+@import '../../toggle/src/styles/toggle.css';
+@import '../../tooltip/src/styles/tooltip.css';
+@import '../../toast/src/styles/toast.css';
+@import '../../virtual-scroll/src/styles/virtual-scroll.css';
+@import '../../badge/src/styles/badge.css';
+@import './blueprint.css';

package/styles.css

@@ -1,49 +1,49 @@
-@import '@frame-ui-ng/foundation/styles.css';
-
-@import './alert/src/styles/alert.css';
-@import './accordion/src/styles/accordion.css';
-@import './avatar/src/styles/avatar.css';
-@import './button/src/styles/button.css';
-@import './button-group/src/styles/button-group.css';
-@import './breadcrumb/src/styles/breadcrumb.css';
-@import './calendar/src/styles/calendar.css';
-@import './card/src/styles/card.css';
-@import './carousel/src/styles/carousel.css';
-@import './checkbox/src/styles/checkbox.css';
-@import './collapsible/src/styles/collapsible.css';
-@import './command/src/styles/command.css';
-@import './combobox/src/styles/combobox.css';
-@import './context-menu/src/styles/context-menu.css';
-@import './date-picker/src/styles/date-picker.css';
-@import './dropdown-menu/src/styles/dropdown-menu.css';
-@import './empty/src/styles/empty.css';
-@import './field/src/styles/field.css';
-@import './hover-card/src/styles/hover-card.css';
-@import './input/src/styles/input.css';
-@import './input/src/styles/input-group.css';
-@import './input-otp/src/styles/input-otp.css';
-@import './item/src/styles/item.css';
-@import './menubar/src/styles/menubar.css';
-@import './modal/src/styles/modal.css';
-@import './navigation-menu/src/styles/navigation-menu.css';
-@import './pagination/src/styles/pagination.css';
-@import './popover/src/styles/popover.css';
-@import './progress/src/styles/progress.css';
-@import './radio-group/src/styles/radio-group.css';
-@import './resizable/src/styles/resizable.css';
-@import './separator/src/styles/separator.css';
-@import './skeleton/src/styles/skeleton.css';
-@import './slider/src/styles/slider.css';
-@import './textarea/src/styles/textarea.css';
-@import './select/src/styles/select.css';
-@import './sheet/src/styles/sheet.css';
-@import './sidebar/src/styles/sidebar.css';
-@import './switch/src/styles/switch.css';
-@import './spinner/src/styles/spinner.css';
-@import './tabs/src/styles/tabs.css';
-@import './table/src/styles/table.css';
-@import './toggle/src/styles/toggle.css';
-@import './tooltip/src/styles/tooltip.css';
-@import './toast/src/styles/toast.css';
-@import './virtual-scroll/src/styles/virtual-scroll.css';
-@import './badge/src/styles/badge.css';
+@import '@frame-ui-ng/foundation/styles.css';
+
+@import './alert/src/styles/alert.css';
+@import './accordion/src/styles/accordion.css';
+@import './avatar/src/styles/avatar.css';
+@import './button/src/styles/button.css';
+@import './button-group/src/styles/button-group.css';
+@import './breadcrumb/src/styles/breadcrumb.css';
+@import './calendar/src/styles/calendar.css';
+@import './card/src/styles/card.css';
+@import './carousel/src/styles/carousel.css';
+@import './checkbox/src/styles/checkbox.css';
+@import './collapsible/src/styles/collapsible.css';
+@import './command/src/styles/command.css';
+@import './combobox/src/styles/combobox.css';
+@import './context-menu/src/styles/context-menu.css';
+@import './date-picker/src/styles/date-picker.css';
+@import './empty/src/styles/empty.css';
+@import './field/src/styles/field.css';
+@import './hover-card/src/styles/hover-card.css';
+@import './input/src/styles/input.css';
+@import './input/src/styles/input-group.css';
+@import './input-otp/src/styles/input-otp.css';
+@import './item/src/styles/item.css';
+@import './menubar/src/styles/menubar.css';
+@import './modal/src/styles/modal.css';
+@import './navigation-menu/src/styles/navigation-menu.css';
+@import './pagination/src/styles/pagination.css';
+@import './popover/src/styles/popover.css';
+@import './progress/src/styles/progress.css';
+@import './radio-group/src/styles/radio-group.css';
+@import './resizable/src/styles/resizable.css';
+@import './separator/src/styles/separator.css';
+@import './skeleton/src/styles/skeleton.css';
+@import './slider/src/styles/slider.css';
+@import './textarea/src/styles/textarea.css';
+@import './select/src/styles/select.css';
+@import './sheet/src/styles/sheet.css';
+@import './sidebar/src/styles/sidebar.css';
+@import './switch/src/styles/switch.css';
+@import './spinner/src/styles/spinner.css';
+@import './tabs/src/styles/tabs.css';
+@import './table/src/styles/table.css';
+@import './toggle/src/styles/toggle.css';
+@import './tooltip/src/styles/tooltip.css';
+@import './toast/src/styles/toast.css';
+@import './virtual-scroll/src/styles/virtual-scroll.css';
+@import './badge/src/styles/badge.css';
+@import './src/styles/blueprint.css';

package/switch/src/styles/_vars.css

@@ -1,34 +1,34 @@
-:root {
-  --frame-switch-field-gap: 0.75rem;
-  --frame-switch-field-color: var(--frame-foreground);
-  --frame-switch-field-disabled-color: var(--frame-muted-foreground);
-  --frame-switch-content-gap: 0.25rem;
-  --frame-switch-label-font-size: 0.875rem;
-  --frame-switch-label-font-weight: 600;
-  --frame-switch-description-color: var(--frame-muted-foreground);
-  --frame-switch-description-font-size: 0.8125rem;
-  --frame-switch-error-color: var(--frame-destructive);
-  --frame-switch-error-font-size: 0.8125rem;
-  --frame-switch-width: 2.25rem;
-  --frame-switch-height: 1.25rem;
-  --frame-switch-thumb-size: 1rem;
-  --frame-switch-padding: 0.125rem;
-  --frame-switch-sm-width: 1.75rem;
-  --frame-switch-sm-height: 1rem;
-  --frame-switch-sm-thumb-size: 0.75rem;
-  --frame-switch-radius: 999px;
-  --frame-switch-bg: var(--frame-input);
-  --frame-switch-hover-bg: color-mix(in srgb, var(--frame-input) 82%, var(--frame-foreground));
-  --frame-switch-checked-bg: var(--frame-primary);
-  --frame-switch-checked-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, var(--frame-foreground));
-  --frame-switch-thumb-bg: var(--frame-background);
-  --frame-switch-thumb-shadow: 0 1px 2px rgb(0 0 0 / 0.22);
-  --frame-switch-border-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frame-border) 70%, transparent);
-  --frame-switch-checked-border-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frame-primary) 80%, var(--frame-border));
-  --frame-switch-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 28%, transparent);
-  --frame-switch-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
-  --frame-switch-invalid-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frame-destructive) 40%, transparent), 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
-  --frame-switch-disabled-opacity: 0.5;
-  --frame-switch-transition-duration: 160ms;
-  --frame-switch-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
-}
+:root {
+  --frame-switch-field-gap: 0.75rem;
+  --frame-switch-field-color: var(--frame-foreground);
+  --frame-switch-field-disabled-color: var(--frame-muted-foreground);
+  --frame-switch-content-gap: 0.25rem;
+  --frame-switch-label-font-size: 0.875rem;
+  --frame-switch-label-font-weight: 600;
+  --frame-switch-description-color: var(--frame-muted-foreground);
+  --frame-switch-description-font-size: 0.8125rem;
+  --frame-switch-error-color: var(--frame-destructive);
+  --frame-switch-error-font-size: 0.8125rem;
+  --frame-switch-width: 2.25rem;
+  --frame-switch-height: 1.25rem;
+  --frame-switch-thumb-size: 1rem;
+  --frame-switch-padding: 0.125rem;
+  --frame-switch-sm-width: 1.75rem;
+  --frame-switch-sm-height: 1rem;
+  --frame-switch-sm-thumb-size: 0.75rem;
+  --frame-switch-radius: 0;
+  --frame-switch-bg: var(--frame-input);
+  --frame-switch-hover-bg: color-mix(in srgb, var(--frame-input) 82%, var(--frame-foreground));
+  --frame-switch-checked-bg: var(--frame-primary);
+  --frame-switch-checked-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, var(--frame-foreground));
+  --frame-switch-thumb-bg: var(--frame-background);
+  --frame-switch-thumb-shadow: none;
+  --frame-switch-border-shadow: none;
+  --frame-switch-checked-border-shadow: none;
+  --frame-switch-focus-shadow: none;
+  --frame-switch-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
+  --frame-switch-invalid-shadow: none;
+  --frame-switch-disabled-opacity: 0.5;
+  --frame-switch-transition-duration: 160ms;
+  --frame-switch-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
+}

package/switch/src/styles/switch.css

@@ -1,131 +1,130 @@
-@import './_vars.css';
-
-[frSwitchField],
-frame-switch-field {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--frame-switch-field-gap);
-  width: 100%;
-  color: var(--frame-switch-field-color);
-}
-
-[frSwitchField]:has([frSwitch]:disabled),
-frame-switch-field:has([frSwitch]:disabled) {
-  color: var(--frame-switch-field-disabled-color);
-}
-
-[frSwitchContent],
-frame-switch-content {
-  display: grid;
-  gap: var(--frame-switch-content-gap);
-  min-width: 0;
-}
-
-[frSwitchLabel],
-frame-switch-label {
-  font-size: var(--frame-switch-label-font-size);
-  font-weight: var(--frame-switch-label-font-weight);
-  line-height: 1.3;
-}
-
-[frSwitchDescription],
-frame-switch-description {
-  color: var(--frame-switch-description-color);
-  font-size: var(--frame-switch-description-font-size);
-  line-height: 1.45;
-  margin: 0;
-}
-
-[frSwitchError],
-frame-switch-error {
-  color: var(--frame-switch-error-color);
-  font-size: var(--frame-switch-error-font-size);
-  line-height: 1.45;
-  margin: 0;
-}
-
-[frSwitch] {
-  appearance: none;
-  -webkit-appearance: none;
-  position: relative;
-  display: inline-flex;
-  flex: 0 0 auto;
-  inline-size: var(--frame-switch-width);
-  block-size: var(--frame-switch-height);
-  margin: 0;
-  border: 1px solid transparent;
-  border-radius: var(--frame-switch-radius);
-  background: var(--frame-switch-bg);
-  box-shadow: var(--frame-switch-border-shadow);
-  cursor: pointer;
-  outline: none;
-  vertical-align: middle;
-  transition:
-    background-color var(--frame-switch-transition-duration) ease,
-    border-color var(--frame-switch-transition-duration) ease,
-    box-shadow var(--frame-switch-transition-duration) ease,
-    opacity var(--frame-switch-transition-duration) ease;
-}
-
-[frSwitch][data-size='sm'] {
-  --frame-switch-width: var(--frame-switch-sm-width);
-  --frame-switch-height: var(--frame-switch-sm-height);
-  --frame-switch-thumb-size: var(--frame-switch-sm-thumb-size);
-}
-
-[frSwitch]::before {
-  content: '';
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: var(--frame-switch-padding);
-  inline-size: var(--frame-switch-thumb-size);
-  block-size: var(--frame-switch-thumb-size);
-  border-radius: var(--frame-switch-radius);
-  background: var(--frame-switch-thumb-bg);
-  box-shadow: var(--frame-switch-thumb-shadow);
-  transform: translateY(-50%);
-  transition:
-    inset-inline-start var(--frame-switch-transition-duration) var(--frame-switch-transition-easing),
-    transform var(--frame-switch-transition-duration) var(--frame-switch-transition-easing);
-}
-
-[frSwitch]:checked {
-  background: var(--frame-switch-checked-bg);
-  box-shadow: var(--frame-switch-checked-border-shadow);
-}
-
-[frSwitch]:checked::before {
-  inset-inline-start: calc(100% - var(--frame-switch-thumb-size) - var(--frame-switch-padding));
-}
-
-[frSwitch]:where(:not(:disabled)):hover {
-  background: var(--frame-switch-hover-bg);
-}
-
-[frSwitch]:where(:not(:disabled)):checked:hover {
-  background: var(--frame-switch-checked-hover-bg);
-}
-
-[frSwitch]:focus-visible {
-  box-shadow:
-    var(--frame-switch-border-shadow),
-    var(--frame-switch-focus-shadow);
-}
-
-[frSwitch]:checked:focus-visible {
-  box-shadow:
-    var(--frame-switch-checked-border-shadow),
-    var(--frame-switch-focus-shadow);
-}
-
-[frSwitch]:disabled {
-  cursor: not-allowed;
-  opacity: var(--frame-switch-disabled-opacity);
-}
-
-[frSwitch][aria-invalid='true'],
-[frSwitch].ng-invalid.ng-touched,
-[frSwitch].ng-invalid.ng-dirty {
-  border-color: var(--frame-switch-invalid-border);
-  box-shadow: var(--frame-switch-invalid-shadow);
-}
+@import './_vars.css';
+
+[frSwitchField],
+frame-switch-field {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--frame-switch-field-gap);
+  width: 100%;
+  color: var(--frame-switch-field-color);
+}
+
+[frSwitchField]:has([frSwitch]:disabled),
+frame-switch-field:has([frSwitch]:disabled) {
+  color: var(--frame-switch-field-disabled-color);
+}
+
+[frSwitchContent],
+frame-switch-content {
+  display: grid;
+  gap: var(--frame-switch-content-gap);
+  min-width: 0;
+}
+
+[frSwitchLabel],
+frame-switch-label {
+  font-size: var(--frame-switch-label-font-size);
+  font-weight: var(--frame-switch-label-font-weight);
+  line-height: 1.3;
+}
+
+[frSwitchDescription],
+frame-switch-description {
+  color: var(--frame-switch-description-color);
+  font-size: var(--frame-switch-description-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frSwitchError],
+frame-switch-error {
+  color: var(--frame-switch-error-color);
+  font-size: var(--frame-switch-error-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frSwitch] {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  inline-size: var(--frame-switch-width);
+  block-size: var(--frame-switch-height);
+  margin: 0;
+  border: 1px solid var(--frame-border);
+  border-radius: var(--frame-switch-radius);
+  background: var(--frame-switch-bg);
+  box-shadow: var(--frame-switch-border-shadow);
+  cursor: pointer;
+  outline: none;
+  vertical-align: middle;
+  transition:
+    background-color var(--frame-switch-transition-duration) ease,
+    border-color var(--frame-switch-transition-duration) ease,
+    box-shadow var(--frame-switch-transition-duration) ease,
+    opacity var(--frame-switch-transition-duration) ease;
+}
+
+[frSwitch][data-size='sm'] {
+  --frame-switch-width: var(--frame-switch-sm-width);
+  --frame-switch-height: var(--frame-switch-sm-height);
+  --frame-switch-thumb-size: var(--frame-switch-sm-thumb-size);
+}
+
+[frSwitch]::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--frame-switch-padding);
+  inline-size: var(--frame-switch-thumb-size);
+  block-size: var(--frame-switch-thumb-size);
+  border-radius: var(--frame-switch-radius);
+  background: var(--frame-switch-thumb-bg);
+  box-shadow: var(--frame-switch-thumb-shadow);
+  transform: translateY(-50%);
+  transition:
+    inset-inline-start var(--frame-switch-transition-duration) var(--frame-switch-transition-easing),
+    transform var(--frame-switch-transition-duration) var(--frame-switch-transition-easing);
+}
+
+[frSwitch]:checked {
+  border-color: color-mix(in srgb, var(--frame-primary) 72%, var(--frame-border));
+  background: var(--frame-switch-checked-bg);
+  box-shadow: var(--frame-switch-checked-border-shadow);
+}
+
+[frSwitch]:checked::before {
+  inset-inline-start: calc(100% - var(--frame-switch-thumb-size) - var(--frame-switch-padding));
+}
+
+[frSwitch]:where(:not(:disabled)):hover {
+  background: var(--frame-switch-hover-bg);
+}
+
+[frSwitch]:where(:not(:disabled)):checked:hover {
+  background: var(--frame-switch-checked-hover-bg);
+}
+
+[frSwitch]:focus-visible {
+  outline: 1px solid var(--frame-ring);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+[frSwitch]:checked:focus-visible {
+  box-shadow: none;
+}
+
+[frSwitch]:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-switch-disabled-opacity);
+}
+
+[frSwitch][aria-invalid='true'],
+[frSwitch].ng-invalid.ng-touched,
+[frSwitch].ng-invalid.ng-dirty {
+  border-color: var(--frame-switch-invalid-border);
+  box-shadow: none;
+}

package/tabs/src/styles/_vars.css

@@ -1,23 +1,23 @@
-:root {
-  --frame-tabs-gap: 1rem;
-  --frame-tabs-list-gap: 0.25rem;
-  --frame-tabs-list-padding: 0.25rem;
-  --frame-tabs-list-bg: var(--frame-muted, #f4f4f5);
-  --frame-tabs-list-border: transparent;
-  --frame-tabs-list-radius: var(--frame-radius-lg, 0.75rem);
-  --frame-tabs-trigger-height: 2.25rem;
-  --frame-tabs-trigger-padding-x: 0.875rem;
-  --frame-tabs-trigger-radius: var(--frame-radius-md, 0.5rem);
-  --frame-tabs-trigger-bg: transparent;
-  --frame-tabs-trigger-color: var(--frame-muted-foreground, #71717a);
-  --frame-tabs-trigger-hover-bg: color-mix(in srgb, var(--frame-background, #fff) 62%, transparent);
-  --frame-tabs-trigger-hover-color: var(--frame-foreground, #09090b);
-  --frame-tabs-trigger-active-bg: var(--frame-background, #fff);
-  --frame-tabs-trigger-active-color: var(--frame-foreground, #09090b);
-  --frame-tabs-trigger-active-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
-  --frame-tabs-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring, #18181b) 28%, transparent);
-  --frame-tabs-trigger-disabled-opacity: 0.5;
-  --frame-tabs-line-color: var(--frame-border, #e5e7eb);
-  --frame-tabs-line-active-color: var(--frame-primary, #18181b);
-  --frame-tabs-content-padding: 1rem 0 0;
-}
+:root {
+  --frame-tabs-gap: 1rem;
+  --frame-tabs-list-gap: 0.25rem;
+  --frame-tabs-list-padding: 0.25rem;
+  --frame-tabs-list-bg: var(--frame-muted, #f4f4f5);
+  --frame-tabs-list-border: transparent;
+  --frame-tabs-list-radius: var(--frame-radius-lg, 0.75rem);
+  --frame-tabs-trigger-height: 2.25rem;
+  --frame-tabs-trigger-padding-x: 0.875rem;
+  --frame-tabs-trigger-radius: var(--frame-radius-md, 0.5rem);
+  --frame-tabs-trigger-bg: transparent;
+  --frame-tabs-trigger-color: var(--frame-muted-foreground, #71717a);
+  --frame-tabs-trigger-hover-bg: color-mix(in srgb, var(--frame-background, #fff) 62%, transparent);
+  --frame-tabs-trigger-hover-color: var(--frame-foreground, #09090b);
+  --frame-tabs-trigger-active-bg: var(--frame-background, #fff);
+  --frame-tabs-trigger-active-color: var(--frame-foreground, #09090b);
+  --frame-tabs-trigger-active-shadow: none;
+  --frame-tabs-trigger-focus-shadow: none;
+  --frame-tabs-trigger-disabled-opacity: 0.5;
+  --frame-tabs-line-color: var(--frame-border, #e5e7eb);
+  --frame-tabs-line-active-color: var(--frame-primary, #18181b);
+  --frame-tabs-content-padding: 1rem 0 0;
+}

package/textarea/src/styles/_vars.css

@@ -1,20 +1,20 @@
-:root {
-  --frame-textarea-root-min-height: 5rem;
-  --frame-textarea-root-radius: var(--frame-radius-md);
-  --frame-textarea-root-bg: var(--frame-surface);
-  --frame-textarea-root-color: var(--frame-surface-foreground);
-  --frame-textarea-root-border: var(--frame-border);
-  --frame-textarea-root-font-size: 0.875rem;
-  --frame-textarea-root-padding-block: 0.625rem;
-  --frame-textarea-root-padding-inline: 0.875rem;
-  --frame-textarea-root-placeholder-color: var(--frame-muted-foreground);
-  --frame-textarea-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
-  --frame-textarea-root-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));
-  --frame-textarea-root-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 22%, transparent);
-  --frame-textarea-root-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
-  --frame-textarea-root-invalid-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
-  --frame-textarea-root-disabled-opacity: 0.55;
-  --frame-textarea-root-readonly-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
-  --frame-textarea-root-transition-duration: 150ms;
-  --frame-textarea-root-resize: vertical;
-}
+:root {
+  --frame-textarea-root-min-height: 5rem;
+  --frame-textarea-root-radius: var(--frame-radius-md);
+  --frame-textarea-root-bg: var(--frame-surface);
+  --frame-textarea-root-color: var(--frame-surface-foreground);
+  --frame-textarea-root-border: var(--frame-border);
+  --frame-textarea-root-font-size: 0.875rem;
+  --frame-textarea-root-padding-block: 0.625rem;
+  --frame-textarea-root-padding-inline: 0.875rem;
+  --frame-textarea-root-placeholder-color: var(--frame-muted-foreground);
+  --frame-textarea-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
+  --frame-textarea-root-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));
+  --frame-textarea-root-focus-shadow: none;
+  --frame-textarea-root-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
+  --frame-textarea-root-invalid-shadow: none;
+  --frame-textarea-root-disabled-opacity: 0.55;
+  --frame-textarea-root-readonly-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
+  --frame-textarea-root-transition-duration: 150ms;
+  --frame-textarea-root-resize: vertical;
+}