@womp/kookie-ui 0.20.0 → 0.22.0

package/schemas/schemas.d.ts

@@ -14,16 +14,12 @@ export interface BaseButtonJsonSchema {
 }
 
 export interface ButtonJsonSchema extends BaseButtonJsonSchema {}
-export interface IconButtonJsonSchema extends BaseButtonJsonSchema {}
-export interface ToggleButtonJsonSchema extends BaseButtonJsonSchema {}
-export interface ToggleIconButtonJsonSchema extends BaseButtonJsonSchema {}
+export interface ToggleJsonSchema extends BaseButtonJsonSchema {}
 
 export interface KookieUIButtonSchemas {
   'base-button': BaseButtonJsonSchema;
   'button': ButtonJsonSchema;
-  'icon-button': IconButtonJsonSchema;
-  'toggle-button': ToggleButtonJsonSchema;
-  'toggle-icon-button': ToggleIconButtonJsonSchema;
+  'toggle': ToggleJsonSchema;
 }
 
 export type ButtonComponentName = keyof KookieUIButtonSchemas;

package/schemas/toggle.json

@@ -0,0 +1,318 @@
+{
+  "$ref": "#/definitions/ToggleSchema",
+  "definitions": {
+    "ToggleSchema": {
+      "type": "object",
+      "properties": {
+        "as": {
+          "description": "HTML element type to render as",
+          "type": "string"
+        },
+        "asChild": {
+          "description": "Merge props with child element instead of rendering wrapper",
+          "type": "boolean"
+        },
+        "size": {
+          "default": "2",
+          "description": "Button size for responsive design and interface density",
+          "anyOf": [
+            {
+              "type": "string",
+              "enum": [
+                "1",
+                "2",
+                "3",
+                "4"
+              ]
+            },
+            {
+              "type": "object",
+              "properties": {
+                "initial": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "sm": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "md": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "lg": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "xl": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                }
+              },
+              "additionalProperties": false
+            }
+          ]
+        },
+        "variant": {
+          "default": "solid",
+          "description": "Visual variant that determines the button's appearance and context",
+          "type": "string",
+          "enum": [
+            "raised",
+            "solid",
+            "soft",
+            "surface",
+            "outline",
+            "ghost"
+          ]
+        },
+        "color": {
+          "description": "Accent color for the button",
+          "type": "string",
+          "enum": [
+            "tomato",
+            "red",
+            "ruby",
+            "crimson",
+            "pink",
+            "plum",
+            "purple",
+            "violet",
+            "iris",
+            "indigo",
+            "blue",
+            "cyan",
+            "teal",
+            "jade",
+            "green",
+            "grass",
+            "brown",
+            "orange",
+            "sky",
+            "mint",
+            "lime",
+            "yellow",
+            "amber",
+            "gold",
+            "bronze",
+            "gray"
+          ]
+        },
+        "radius": {
+          "description": "Border radius for the button",
+          "type": "string",
+          "enum": [
+            "none",
+            "small",
+            "medium",
+            "large",
+            "full"
+          ]
+        },
+        "loading": {
+          "default": false,
+          "description": "Loading state that shows a spinner and disables interaction",
+          "type": "boolean"
+        },
+        "disabled": {
+          "default": false,
+          "description": "Disabled state",
+          "type": "boolean"
+        },
+        "type": {
+          "description": "Type attribute for form buttons",
+          "type": "string",
+          "enum": [
+            "button",
+            "submit",
+            "reset"
+          ]
+        },
+        "className": {
+          "description": "Additional CSS class name",
+          "type": "string"
+        },
+        "style": {
+          "description": "Inline styles",
+          "type": "object",
+          "propertyNames": {
+            "type": "string"
+          },
+          "additionalProperties": {
+            "type": [
+              "string",
+              "number"
+            ]
+          }
+        },
+        "tabIndex": {
+          "description": "Tab index for keyboard navigation",
+          "type": "number"
+        },
+        "aria-label": {
+          "description": "ARIA label for accessibility",
+          "type": "string"
+        },
+        "aria-labelledby": {
+          "description": "ARIA labelled by reference",
+          "type": "string"
+        },
+        "aria-describedby": {
+          "description": "ARIA described by reference",
+          "type": "string"
+        },
+        "aria-expanded": {
+          "description": "ARIA expanded state",
+          "type": "boolean"
+        },
+        "aria-pressed": {
+          "description": "ARIA pressed state",
+          "type": "boolean"
+        },
+        "aria-current": {
+          "description": "ARIA current state",
+          "anyOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "string",
+              "enum": [
+                "page",
+                "step",
+                "location",
+                "date",
+                "time"
+              ]
+            }
+          ]
+        },
+        "aria-controls": {
+          "description": "ARIA controls reference",
+          "type": "string"
+        },
+        "aria-owns": {
+          "description": "ARIA owns reference",
+          "type": "string"
+        },
+        "data-*": {
+          "description": "Data attributes",
+          "type": "object",
+          "propertyNames": {
+            "type": "string"
+          },
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "id": {
+          "description": "ID attribute",
+          "type": "string"
+        },
+        "title": {
+          "description": "Title attribute for tooltip",
+          "type": "string"
+        },
+        "role": {
+          "description": "Role attribute",
+          "type": "string"
+        },
+        "children": {
+          "description": "Children elements"
+        },
+        "tooltip": {
+          "description": "Content to display in the tooltip on hover/focus",
+          "type": "string"
+        },
+        "tooltipSide": {
+          "default": "top",
+          "description": "Side of the button where the tooltip should appear",
+          "type": "string",
+          "enum": [
+            "top",
+            "right",
+            "bottom",
+            "left"
+          ]
+        },
+        "emphasis": {
+          "description": "The button's rank: loud (solid), medium (raised) or quiet (ghost). Not with variant.",
+          "type": "string",
+          "enum": [
+            "loud",
+            "medium",
+            "quiet"
+          ]
+        },
+        "iconOnly": {
+          "default": false,
+          "description": "Square button holding only an icon; needs aria-label",
+          "type": "boolean"
+        },
+        "fullWidth": {
+          "default": false,
+          "description": "Expands the button to fill its container",
+          "type": "boolean"
+        },
+        "tooltipAlign": {
+          "default": "center",
+          "description": "Alignment of the tooltip relative to the button",
+          "type": "string",
+          "enum": [
+            "start",
+            "center",
+            "end"
+          ]
+        },
+        "tooltipDelayDuration": {
+          "description": "Delay before showing the tooltip (in milliseconds)",
+          "type": "number"
+        },
+        "tooltipDisableHoverableContent": {
+          "default": false,
+          "description": "Whether to disable hoverable content behavior",
+          "type": "boolean"
+        },
+        "pressed": {
+          "description": "Controlled pressed state",
+          "type": "boolean"
+        },
+        "defaultPressed": {
+          "description": "Default pressed state for uncontrolled usage",
+          "type": "boolean"
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Toggle Component Props",
+  "description": "Props schema for the toggle component in Kookie UI",
+  "version": "1.0.0",
+  "source": "Zod schema"
+}

package/src/components/_internal/base-button.css

@@ -3,7 +3,7 @@
  *
  * This file contains the foundational styling for all button components in the
  * Kookie User Interface design system. It provides the base styles that are
- * extended by Button, IconButton, and other button variants.
+ * extended by Button (including its icon-only form) and Toggle.
  *
  * ARCHITECTURE:
  * - Base styles: Layout, accessibility
@@ -20,7 +20,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseButton {
+.kui-BaseButton {
   /* Reset all inherited styles to ensure consistent base */
   all: unset;
   box-sizing: border-box;
@@ -96,7 +96,7 @@
   }
 
   /* Loading: busy, not frozen */
-  &:where(.rt-loading) {
+  &:where(.kui-loading) {
     position: relative;
     cursor: progress;
   }
@@ -120,23 +120,23 @@
 }
 
 /* An edge holding an icon keeps the plain padding under a pill */
-.rt-BaseButton:where([data-icon-start]) {
+.kui-BaseButton:where([data-icon-start]) {
   padding-inline-start: var(--base-button-px);
 }
 
-.rt-BaseButton:where([data-icon-end]) {
+.kui-BaseButton:where([data-icon-end]) {
   padding-inline-end: var(--base-button-px);
 }
 
 /* An icon-only button is square: no inline padding, and aspect-ratio rather than a width ladder,
    so a hosted icon button whose height comes from its container (Toolbar, Chatbar) stays square. */
-.rt-BaseButton:where(.rt-IconButton) {
+.kui-BaseButton:where([data-icon-only]) {
   padding-inline: 0;
   aspect-ratio: 1;
 }
 
 /* Full width mode */
-.rt-BaseButton:where(.rt-full-width) {
+.kui-BaseButton:where(.kui-full-width) {
   display: flex;
   width: 100%;
 }
@@ -151,8 +151,8 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-BaseButton {
-    &:where(.rt-r-size-1) {
+  .kui-BaseButton {
+    &:where(.kui-r-size-1) {
       --base-button-height: var(--control-height-1);
       --base-button-px: var(--control-px-1);
       --base-button-px-pill: var(--control-px-pill-1);
@@ -161,7 +161,7 @@
       --base-button-radius: var(--radius-1);
     }
 
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --base-button-height: var(--control-height-2);
       --base-button-px: var(--control-px-2);
       --base-button-px-pill: var(--control-px-pill-2);
@@ -170,7 +170,7 @@
       --base-button-radius: var(--radius-2);
     }
 
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --base-button-height: var(--control-height-3);
       --base-button-px: var(--control-px-3);
       --base-button-px-pill: var(--control-px-pill-3);
@@ -179,7 +179,7 @@
       --base-button-radius: var(--radius-3);
     }
 
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --base-button-height: var(--control-height-4);
       --base-button-px: var(--control-px-4);
       --base-button-px-pill: var(--control-px-pill-4);
@@ -200,7 +200,7 @@
  ***************************************************************************************************/
 
 /* Soft variant palette */
-.rt-BaseButton:where(.rt-variant-soft) {
+.kui-BaseButton:where(.kui-variant-soft) {
   --v-color: var(--accent-ink);
   --v-bg: var(--accent-3);
   --v-bg-a: var(--accent-a3);
@@ -214,7 +214,7 @@
 }
 
 /* Ghost variant palette */
-.rt-BaseButton:where(.rt-variant-ghost) {
+.kui-BaseButton:where(.kui-variant-ghost) {
   --v-color: var(--accent-ink);
   --v-bg: transparent;
   --v-bg-a: transparent;
@@ -228,7 +228,7 @@
 }
 
 /* Outline variant palette */
-.rt-BaseButton:where(.rt-variant-outline) {
+.kui-BaseButton:where(.kui-variant-outline) {
   --v-color: var(--accent-ink);
   --v-bg: transparent;
   --v-bg-a: transparent;
@@ -247,11 +247,11 @@
   --v-border-open-a: var(--accent-a7);
   --v-border-active: var(--accent-8);
   --v-border-active-a: var(--accent-a8);
-  --v-border-disabled: var(--gray-a7);
+  --v-border-disabled: var(--neutral-a7);
 }
 
 /* Surface variant palette */
-.rt-BaseButton:where(.rt-variant-surface) {
+.kui-BaseButton:where(.kui-variant-surface) {
   --v-color: var(--accent-ink);
   --v-bg: var(--accent-2);
   --v-bg-a: var(--accent-a2);
@@ -261,7 +261,7 @@
   --v-bg-active-a: var(--accent-a4);
   --v-bg-pressed: var(--accent-4);
   --v-bg-pressed-a: var(--accent-a4);
-  --v-bg-disabled: var(--gray-a2);
+  --v-bg-disabled: var(--neutral-a2);
   --v-border: var(--accent-6);
   --v-border-a: var(--accent-a6);
   --v-border-hover: var(--accent-7);
@@ -270,7 +270,7 @@
   --v-border-open-a: var(--accent-a8);
   --v-border-active: var(--accent-8);
   --v-border-active-a: var(--accent-a8);
-  --v-border-disabled: var(--gray-a6);
+  --v-border-disabled: var(--neutral-a6);
 }
 
 /***************************************************************************************************
@@ -283,7 +283,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost, .rt-variant-outline, .rt-variant-surface) {
+.kui-BaseButton:where(.kui-variant-soft, .kui-variant-ghost, .kui-variant-outline, .kui-variant-surface) {
   /* Rest state */
   color: var(--v-color);
   background-color: var(--v-bg);
@@ -314,14 +314,14 @@
 
   /* Disabled state */
   &:where([data-disabled], [aria-disabled='true']) {
-    color: var(--gray-a8);
-    background-color: var(--v-bg-disabled, var(--gray-a3));
+    color: var(--neutral-a8);
+    background-color: var(--v-bg-disabled, var(--neutral-a3));
     box-shadow: none;
   }
 }
 
 /* Border variants: outline and surface */
-.rt-BaseButton:where(.rt-variant-outline, .rt-variant-surface) {
+.kui-BaseButton:where(.kui-variant-outline, .kui-variant-surface) {
   /* Rest state border */
   box-shadow: inset 0 0 0 1px var(--v-border);
 
@@ -349,40 +349,6 @@
   }
 }
 
-/* Ghost flush mode: pull the button out by its own padding so its content sits on the text line */
-.rt-BaseButton:where(.rt-variant-ghost[data-flush='true']) {
-  --margin-top: 0px;
-  --margin-right: 0px;
-  --margin-bottom: 0px;
-  --margin-left: 0px;
-
-  --button-padding-x: var(--base-button-px);
-  --button-padding-y: calc((var(--base-button-height) - 1lh) / 2);
-
-  --margin-top-override: calc(var(--margin-top) - var(--button-padding-y));
-  --margin-right-override: calc(var(--margin-right) - var(--button-padding-x));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--button-padding-y));
-  --margin-left-override: calc(var(--margin-left) - var(--button-padding-x));
-
-  margin-top: var(--margin-top-override);
-  margin-right: var(--margin-right-override);
-  margin-bottom: var(--margin-bottom-override);
-  margin-left: var(--margin-left-override);
-
-  :where(&) > * {
-    --margin-top-override: initial;
-    --margin-right-override: initial;
-    --margin-bottom-override: initial;
-    --margin-left-override: initial;
-  }
-}
-
-/* A flush ghost icon button pulls out by the space around its glyph */
-.rt-BaseButton:where(.rt-IconButton.rt-variant-ghost[data-flush='true']) {
-  --button-padding-x: calc((var(--base-button-height) - var(--base-button-icon-size)) / 2);
-  --button-padding-y: var(--button-padding-x);
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * SPECIAL VARIANTS                                                                                *
@@ -392,15 +358,15 @@
  ***************************************************************************************************/
 
 /* Raised variant - surface at rest, then gray 2 on hover and gray 3 on press */
-.rt-BaseButton:where(.rt-variant-raised) {
+.kui-BaseButton:where(.kui-variant-raised) {
   position: relative;
   color: var(--accent-ink);
-  background-color: var(--color-surface-solid);
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
 
   @media (hover: hover) {
     &:where(:hover:not([data-disabled], [aria-disabled='true'])) {
-      background-color: var(--gray-2);
+      background-color: var(--neutral-2);
       box-shadow: var(--shadow-2);
     }
   }
@@ -408,20 +374,20 @@
   &:where([data-state='open']),
   &:where(:active:not([data-state='open'], [data-disabled], [aria-disabled='true'])),
   &:where([data-state='on']:not([data-disabled], [aria-disabled='true'])) {
-    background-color: var(--gray-3);
+    background-color: var(--neutral-3);
     box-shadow: var(--shadow-1);
   }
 
   @media (pointer: coarse) {
     &:where(:active:not([data-state='open'], [data-disabled], [aria-disabled='true'])) {
-      outline: var(--raised-shadow-blur-large) solid var(--gray-a4);
+      outline: var(--raised-shadow-blur-large) solid var(--neutral-a4);
       outline-offset: 0;
     }
   }
 
   &:where([data-disabled], [aria-disabled='true']) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
     box-shadow: none;
     top: 0;
   }
@@ -429,7 +395,7 @@
 
 /* Solid variant - accent solid at rest, solid-hover on hover, solid-active on press
    (gray resolves the three to step 12 and the filters carry the change) */
-.rt-BaseButton:where(.rt-variant-solid) {
+.kui-BaseButton:where(.kui-variant-solid) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
 
@@ -464,8 +430,8 @@
   }
 
   &:where([data-disabled], [aria-disabled='true']) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
     box-shadow: none;
     filter: none;
     opacity: 1;
@@ -478,16 +444,16 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseButton:where([data-disabled][aria-pressed], [aria-disabled='true'][aria-pressed]) {
+.kui-BaseButton:where([data-disabled][aria-pressed], [aria-disabled='true'][aria-pressed]) {
   transform: none;
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
+  color: var(--neutral-a8);
+  background-color: var(--neutral-a3);
   box-shadow: none;
   filter: none;
   opacity: 1;
 
   /* Raised needs special handling for top position */
-  &:where(.rt-variant-raised) {
+  &:where(.kui-variant-raised) {
     top: 0;
   }
 }

package/src/components/_internal/base-button.props.ts

@@ -27,7 +27,7 @@ const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as c
 /**
  * Base button prop definitions that define the component's API
  * 
- * These props are used by all button variants (Button, IconButton, etc.)
+ * These props are used by all button variants (Button and Toggle)
  * to ensure consistent behavior and styling across the design system.
  * 
  * Key features:
@@ -55,34 +55,28 @@ const baseButtonPropDefs = {
    * Button size for responsive design and interface density
    * Supports responsive objects: { initial: '1', sm: '2', md: '3', lg: '4' }
    */
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
   /**
    * Visual variant that determines the button's appearance and context
    */
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'solid' },
   ...accentColorPropDef,
   ...radiusPropDef,
   /**
    * Loading state that shows a spinner and disables interaction
    * Automatically sets disabled=true and provides accessibility announcements
    */
-  loading: { type: 'boolean', className: 'rt-loading', default: false },
+  loading: { type: 'boolean', className: 'kui-loading', default: false },
   /**
    * Full width mode that expands the button to fill its container
    * Useful for mobile layouts and form submissions
    */
-  fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },
-  /**
-   * Flush mode that removes visual padding for seamless text integration
-   * Only effective with ghost variant
-   */
-  flush: { type: 'boolean', default: false },
+  fullWidth: { type: 'boolean', className: 'kui-full-width', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   loading: PropDef<boolean>;
   fullWidth: PropDef<boolean>;
-  flush: PropDef<boolean>;
 };
 
 export { baseButtonPropDefs };