@womp/kookie-ui 0.17.0 → 0.18.0

package/src/components/switch.css

@@ -1,5 +1,3 @@
-/* Disabled state uses simple opacity instead of complex blend modes */
-
 .rt-SwitchRoot {
   position: relative;
   display: inline-flex;
@@ -9,8 +7,8 @@
   height: var(--switch-height);
   border-radius: 9999px;
 
-  --switch-width: calc(var(--switch-height) * 1.75);
-  --switch-thumb-inset: 1px;
+  /* The thumb is the track minus one designed inset on every side (v2's --switch-inset). */
+  --switch-thumb-inset: var(--switch-inset, calc(2px * var(--scale)));
   --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
   --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
 
@@ -26,12 +24,8 @@
   }
 
   &:where(:focus-visible)::before {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
-  }
-
-  &:where([data-disabled])::before {
-    cursor: var(--cursor-disabled);
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 }
 
@@ -56,19 +50,27 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * The track is v2's mark one index up (size N is --mark-(N+1): 20/24/26/28), so a switch stands
+ * one step taller than the checkbox beside it. Its width is v2's own ladder (34/40/44/48).
+ */
 @breakpoints {
   .rt-SwitchRoot {
     &:where(.rt-r-size-1) {
-      --switch-height: var(--space-5);
+      --switch-height: var(--mark-2, calc(20px * var(--scale)));
+      --switch-width: var(--switch-w-1, calc(34px * var(--scale)));
     }
     &:where(.rt-r-size-2) {
-      --switch-height: calc(var(--space-6));
+      --switch-height: var(--mark-3, calc(24px * var(--scale)));
+      --switch-width: var(--switch-w-2, calc(40px * var(--scale)));
     }
     &:where(.rt-r-size-3) {
-      --switch-height: var(--space-7);
+      --switch-height: var(--mark-4, calc(26px * var(--scale)));
+      --switch-width: var(--switch-w-3, calc(44px * var(--scale)));
     }
     &:where(.rt-r-size-4) {
-      --switch-height: var(--space-8);
+      --switch-height: var(--mark-5, calc(28px * var(--scale)));
+      --switch-width: var(--switch-w-4, calc(48px * var(--scale)));
     }
   }
 }
@@ -119,19 +121,51 @@
   }
 }
 
-/* all disabled Switches */
+/* Hover is one step up the variant's own ramp, press two. Disabled switches take neither. */
+
+.rt-SwitchRoot {
+  --switch-off-hover: var(--gray-a2);
+  --switch-off-active: var(--gray-a3);
+
+  &:where(.rt-variant-surface) {
+    --switch-off-hover: var(--gray-3);
+    --switch-off-active: var(--gray-4);
+  }
+  &:where(.rt-variant-soft) {
+    --switch-off-hover: var(--gray-4);
+    --switch-off-active: var(--gray-5);
+  }
+
+  @media (hover: hover) {
+    &:where(:hover:not([data-disabled]))::before {
+      background-color: var(--switch-off-hover);
+    }
+    &:where(:hover:not([data-disabled]):is([data-state='checked']))::before {
+      background-color: var(--accent-solid-hover);
+    }
+  }
+  &:where(:active:not([data-disabled]))::before {
+    background-color: var(--switch-off-active);
+  }
+  &:where(:active:not([data-disabled]):is([data-state='checked']))::before {
+    background-color: var(--accent-solid-active);
+  }
+}
+
+/* all disabled Switches: a colour remap, never opacity, and a default cursor */
 
 [data-disabled] {
   .rt-SwitchRoot:where(&) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
   }
   .rt-SwitchRoot:where(&)::before {
+    cursor: default;
     background-color: var(--gray-a3) !important;
     box-shadow: none !important;
     outline: none !important;
   }
   .rt-SwitchThumb:where(&) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
     box-shadow: none !important;
     outline: none !important;
   }

package/src/components/switch.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { Switch as SwitchPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { switchPropDefs } from './switch.props.js';
 
@@ -19,7 +20,8 @@ interface SwitchProps
     >,
     MarginProps,
     SwitchOwnProps {}
-const Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef) => {
+const Switch = React.forwardRef<SwitchElement, SwitchProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, switchPropDefs.size);
   const { className, color, ...switchProps } = extractProps(
     props,
     switchPropDefs,

package/src/components/tab-nav.tsx

@@ -4,6 +4,7 @@ import { NavigationMenu } from 'radix-ui';
 
 import { tabNavRootPropDefs } from './tab-nav.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { getSubtree } from '../helpers/get-subtree.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
@@ -19,7 +20,8 @@ interface TabNavRootProps
   extends Omit<TabNavRootElementProps, 'defaultValue' | 'dir' | 'color'>,
     MarginProps,
     TabNavOwnProps {}
-const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props, forwardedRef) => {
+const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, tabNavRootPropDefs.size);
   const { children, className, color, ...rootProps } = extractProps(
     props,
     tabNavRootPropDefs,

package/src/components/table.props.tsx

@@ -3,7 +3,7 @@ import { widthPropDefs } from '../props/width.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['surface', 'ghost'] as const;
 const layoutValues = ['auto', 'fixed'] as const;
 

package/src/components/table.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs } from './table.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { ScrollArea } from './scroll-area.js';
@@ -17,7 +18,8 @@ interface TableRootProps
   extends ComponentPropsWithout<'div', RemovedProps>,
     MarginProps,
     TableRootOwnProps {}
-const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((props, forwardedRef) => {
+const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, tableRootPropDefs.size);
   const { layout: layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
   const { className, children, layout, ...rootProps } = extractProps(
     props,

package/src/components/tabs.css

@@ -6,5 +6,6 @@
 }
 
 .rt-TabsContent:where(:focus-visible) {
-      outline: var(--focus-outline-width) solid var(--focus-8);
+  outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+  outline-offset: var(--focus-ring-offset, 2px);
 }

package/src/components/tabs.tsx

@@ -4,6 +4,7 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 
 import { tabsListPropDefs } from './tabs.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { tabsContentPropDefs, tabsRootPropDefs } from './tabs.props.js';
@@ -35,7 +36,8 @@ interface TabsListProps
   extends ComponentPropsWithout<typeof TabsPrimitive.List, RemovedProps>,
     MarginProps,
     TabsListOwnProps {}
-const TabsList = React.forwardRef<TabsListElement, TabsListProps>((props, forwardedRef) => {
+const TabsList = React.forwardRef<TabsListElement, TabsListProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, tabsListPropDefs.size);
   const { className, color, ...listProps } = extractProps(
     props,
     tabsListPropDefs,

package/src/components/text-area.css

@@ -7,7 +7,7 @@
  * - Variant palettes: Each variant defines its color scale as CSS variables
  * - Shared state logic: Single set of hover/focus/disabled selectors
  * - Special variants: raised (unique behavior, kept separate)
- * - Error states: Override colors for error styling
+ * - Invalid state: border and focus ring only, keyed on aria-invalid
  */
 
 /***************************************************************************************************
@@ -103,59 +103,52 @@
   box-sizing: border-box;
   padding: var(--text-area-border-width);
 }
+/* One inset on all four sides, the control padding of the size; the control height is the floor. */
 .rt-TextAreaInput {
-  padding: var(--text-area-padding-y) var(--text-area-padding-x);
+  padding: calc(var(--text-area-padding) - var(--text-area-border-width));
 }
 
 @breakpoints {
   .rt-TextAreaRoot {
     &:where(.rt-r-size-1) {
-      min-height: var(--space-9);
+      --text-area-padding: var(--control-px-1);
+      min-height: var(--control-height-1);
       border-radius: var(--radius-1);
 
       & :where(.rt-TextAreaInput) {
-        /* Clip text to border */
-        --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
-        --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
       }
     }
     &:where(.rt-r-size-2) {
-      min-height: var(--space-10);
+      --text-area-padding: var(--control-px-2);
+      min-height: var(--control-height-2);
       border-radius: var(--radius-2);
 
       & :where(.rt-TextAreaInput) {
-        /* Clip text to border */
-        --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
-        --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
       }
     }
     &:where(.rt-r-size-3) {
-      min-height: 80px;
+      --text-area-padding: var(--control-px-3);
+      min-height: var(--control-height-3);
       border-radius: var(--radius-3);
 
       & :where(.rt-TextAreaInput) {
-        /* Clip text to border */
-        --text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
-        --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
         letter-spacing: var(--letter-spacing-3);
       }
     }
     &:where(.rt-r-size-4) {
-      min-height: var(--space-10);
+      --text-area-padding: var(--control-px-4);
+      min-height: var(--control-height-4);
       border-radius: var(--radius-4);
 
       & :where(.rt-TextAreaInput) {
-        /* Clip text to border */
-        --text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
-        --text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
         font-size: var(--font-size-4);
         line-height: var(--line-height-4);
         letter-spacing: var(--letter-spacing-4);
@@ -260,7 +253,7 @@
 
   /* Hover state */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
+    &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
       background-color: var(--v-bg-hover);
     }
   }
@@ -286,7 +279,7 @@
 
   /* Hover state border */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
+    &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
       box-shadow: inset 0 0 0 1px var(--v-border-hover);
     }
   }
@@ -377,7 +370,7 @@
 
   /* Hover effects */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
+    &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
       background-color: var(--accent-2);
       box-shadow: var(--shadow-2);
     }
@@ -405,123 +398,78 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* All disabled and read-only text areas */
+/* Read-only text areas: the value stays selectable, so the caret cursor stays. */
 .rt-TextAreaInput {
-  &:where(:disabled, :read-only) {
-    cursor: text;
+  &:where(:read-only:not(:disabled)) {
     color: var(--gray-a11);
     /* Safari */
     -webkit-text-fill-color: var(--gray-a11);
 
-    &::placeholder {
-      opacity: 0.5;
+    .rt-TextAreaRoot:where(:has(&)) {
+      --v-selection-color: var(--gray-a5);
+      --v-focus-color: var(--gray-8);
     }
-    &:where(:placeholder-shown) {
-      cursor: var(--cursor-disabled);
+  }
+}
+
+/* Disabled is a colour remap, never opacity, and the cursor goes back to the arrow. */
+.rt-TextAreaInput {
+  &:where(:disabled) {
+    cursor: default;
+    color: var(--gray-a8);
+    /* Safari */
+    -webkit-text-fill-color: var(--gray-a8);
+
+    &::placeholder {
+      color: var(--gray-a8);
+      -webkit-text-fill-color: var(--gray-a8);
+      opacity: 1;
     }
 
     .rt-TextAreaRoot:where(:has(&)) {
       --v-selection-color: var(--gray-a5);
       --v-focus-color: var(--gray-8);
+      cursor: default;
     }
   }
 }
 
 /***************************************************************************************************
  *                                                                                                 *
- * ERROR STATES                                                                                    *
+ * INVALID                                                                                         *
+ *                                                                                                 *
+ * Keyed on the textarea's `aria-invalid`, which the `error` prop also sets. Only the border and   *
+ * the focus ring move; the fill stays the variant's.                                              *
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-TextAreaRoot:where(.rt-error) {
-  --v-selection-color: var(--red-a5);
+.rt-TextAreaRoot:where(:has(> .rt-TextAreaInput[aria-invalid='true'])) {
   --v-focus-color: var(--red-8);
-}
-
-/* Error outline variant */
-.rt-TextAreaRoot:where(.rt-error.rt-variant-outline) {
-  --v-bg-hover: var(--red-2);
-  --v-bg-hover-a: var(--red-a2);
-  --v-border: var(--red-6);
-  --v-border-a: var(--red-a6);
-  --v-border-hover: var(--red-7);
-  --v-border-hover-a: var(--red-a7);
 
-  box-shadow: inset 0 0 0 1px var(--v-border);
+  &:where(.rt-variant-outline, .rt-variant-surface, .rt-variant-soft, .rt-variant-ghost) {
+    box-shadow: inset 0 0 0 1px var(--red-6);
 
-  @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
-      background-color: var(--v-bg-hover);
-      box-shadow: inset 0 0 0 1px var(--v-border-hover);
-    }
-  }
-}
-
-/* Error surface variant */
-.rt-TextAreaRoot:where(.rt-error.rt-variant-surface) {
-  --v-bg: var(--red-2);
-  --v-bg-a: var(--red-a2);
-  --v-bg-hover: var(--red-3);
-  --v-bg-hover-a: var(--red-a3);
-  --v-border: var(--red-6);
-  --v-border-a: var(--red-a6);
-  --v-border-hover: var(--red-7);
-  --v-border-hover-a: var(--red-a7);
-
-  background-color: var(--v-bg);
-  box-shadow: inset 0 0 0 1px var(--v-border);
-
-  @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
-      background-color: var(--v-bg-hover);
-      box-shadow: inset 0 0 0 1px var(--v-border-hover);
-    }
-  }
-}
-
-/* Error raised variant */
-.rt-TextAreaRoot:where(.rt-error.rt-variant-raised) {
-  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-
-  @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
-      box-shadow: var(--shadow-3), inset 0 0 0 1px var(--red-7);
+    @media (hover: hover) {
+      &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
+        box-shadow: inset 0 0 0 1px var(--red-7);
+      }
     }
   }
-}
 
-/* Error soft variant */
-.rt-TextAreaRoot:where(.rt-error.rt-variant-soft) {
-  --v-bg: var(--red-2);
-  --v-bg-a: var(--red-a2);
-  --v-bg-hover: var(--red-4);
-  --v-bg-hover-a: var(--red-a4);
+  &:where(.rt-variant-raised) {
+    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
 
-  background-color: var(--v-bg);
-
-  @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
-      background-color: var(--v-bg-hover);
+    @media (hover: hover) {
+      &:where(:hover:not(:has(.rt-TextAreaInput:where(:focus, :disabled)))) {
+        box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
+      }
     }
-  }
-}
 
-/* Error ghost variant */
-.rt-TextAreaRoot:where(.rt-error.rt-variant-ghost) {
-  --v-bg-hover: var(--red-3);
-  --v-bg-hover-a: var(--red-a3);
-  --v-bg-focus: var(--red-2);
-  --v-bg-focus-a: var(--red-a2);
-
-  @media (hover: hover) {
-    &:where(:hover:not(:has(.rt-TextAreaInput:focus))) {
-      background-color: var(--v-bg-hover);
+    /* The raised focus ring is a box-shadow, not the outline */
+    &:where(:has(.rt-TextAreaInput:focus)) {
+      box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6), 0 0 0 2px var(--red-8);
     }
   }
-
-  &:where(:focus-within) {
-    background-color: var(--v-bg-focus);
-  }
 }
 
 /***************************************************************************************************

package/src/components/text-area.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { textAreaPropDefs } from './text-area.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -19,17 +20,18 @@ interface TextAreaProps
     MarginProps,
     TextAreaOwnProps {}
 
-const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwardedRef) => {
+const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, textAreaPropDefs.size);
   const { className, color, radius, style, ...textAreaProps } =
     extractProps(props, textAreaPropDefs, marginPropDefs);
 
   // Generate unique IDs for accessibility
   const errorId = React.useId();
 
-  const { 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby } = textAreaProps;
+  const { 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby, 'aria-invalid': ariaInvalid } = textAreaProps;
 
-  // Determine invalid state
-  const isInvalid = textAreaProps.error;
+  // Invalid when `error` is set or the caller passes aria-invalid; the CSS keys on aria-invalid only.
+  const isInvalid = Boolean(textAreaProps.error) || ariaInvalid === true || ariaInvalid === 'true';
 
   // Build aria-describedby string
   const describedBy = React.useMemo(() => {
@@ -42,11 +44,11 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwar
   // Build aria attributes
   const ariaProps = React.useMemo(
     () => ({
-      'aria-invalid': isInvalid,
+      'aria-invalid': isInvalid ? true : ariaInvalid,
       'aria-describedby': describedBy,
       'aria-labelledby': ariaLabelledby,
     }),
-    [isInvalid, describedBy, ariaLabelledby],
+    [isInvalid, ariaInvalid, describedBy, ariaLabelledby],
   );
 
   // Filter out our custom props to avoid DOM warnings