@kushagradhawan/kookie-ui 0.1.61 → 0.1.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",

package/schemas/base-button.json

@@ -279,6 +279,6 @@
   "title": "Base-button Component Props",
   "description": "Props schema for the base-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-11-13T09:20:51.130Z",
+  "generatedAt": "2025-11-17T09:51:58.569Z",
   "source": "Zod schema"
 }

package/schemas/button.json

@@ -530,6 +530,6 @@
   "title": "Button Component Props",
   "description": "Props schema for the button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-11-13T09:20:51.136Z",
+  "generatedAt": "2025-11-17T09:51:58.574Z",
   "source": "Zod schema"
 }

package/schemas/icon-button.json

@@ -313,6 +313,6 @@
   "title": "Icon-button Component Props",
   "description": "Props schema for the icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-11-13T09:20:51.137Z",
+  "generatedAt": "2025-11-17T09:51:58.575Z",
   "source": "Zod schema"
 }

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-11-13T09:20:51.140Z",
+  "generatedAt": "2025-11-17T09:51:58.578Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-11-13T09:20:51.130Z",
+      "generatedAt": "2025-11-17T09:51:58.569Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-11-13T09:20:51.136Z",
+      "generatedAt": "2025-11-17T09:51:58.574Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-11-13T09:20:51.137Z",
+      "generatedAt": "2025-11-17T09:51:58.575Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-11-13T09:20:51.139Z",
+      "generatedAt": "2025-11-17T09:51:58.577Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-11-13T09:20:51.139Z",
+      "generatedAt": "2025-11-17T09:51:58.577Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-11-13T09:20:51.139Z",
+  "generatedAt": "2025-11-17T09:51:58.577Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-11-13T09:20:51.139Z",
+  "generatedAt": "2025-11-17T09:51:58.577Z",
   "source": "Zod schema"
 }

package/src/components/button.css

@@ -36,6 +36,9 @@
  * This creates a more subtle, text-like appearance
  */
 .rt-Button {
+  --button-padding-inline-base: var(--space-3);
+  --button-padding-icon-trim: max(calc(var(--button-padding-inline-base) * 0.35), var(--space-1));
+
   &:where(.rt-variant-ghost) {
     padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
   }
@@ -48,6 +51,7 @@
      * Designed for toolbars, dense interfaces, and space-constrained contexts
      */
     &:where(.rt-r-size-1) {
+      --button-padding-inline-base: var(--space-2);
       gap: var(--component-gap-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
@@ -68,8 +72,8 @@
        * Provides adequate touch targets while maintaining compact appearance
        */
       &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-2);
-        padding-right: var(--space-2);
+        padding-inline-start: var(--button-padding-inline-base);
+        padding-inline-end: var(--button-padding-inline-base);
       }
 
       /* 
@@ -80,6 +84,7 @@
         gap: var(--component-gap-ghost-1);
         --button-ghost-padding-x: var(--space-2);
         --button-ghost-padding-y: var(--space-1);
+        --button-padding-inline-base: var(--button-ghost-padding-x);
       }
     }
 
@@ -88,6 +93,7 @@
      * Default size for most interface contexts and general use
      */
     &:where(.rt-r-size-2) {
+      --button-padding-inline-base: var(--space-3);
       gap: var(--component-gap-2);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
@@ -102,8 +108,8 @@
 
       /* Standard padding for non-ghost variants */
       &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-3);
-        padding-right: var(--space-3);
+        padding-inline-start: var(--button-padding-inline-base);
+        padding-inline-end: var(--button-padding-inline-base);
       }
 
       /* Ghost variant padding for size 2 */
@@ -111,6 +117,7 @@
         gap: var(--component-gap-ghost-2);
         --button-ghost-padding-x: var(--space-2);
         --button-ghost-padding-y: var(--space-1);
+        --button-padding-inline-base: var(--button-ghost-padding-x);
       }
     }
 
@@ -119,6 +126,7 @@
      * Recommended for important actions and mobile touch targets
      */
     &:where(.rt-r-size-3) {
+      --button-padding-inline-base: var(--space-4);
       gap: var(--component-gap-3);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
@@ -133,8 +141,8 @@
 
       /* Standard padding for non-ghost variants */
       &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-4);
-        padding-right: var(--space-4);
+        padding-inline-start: var(--button-padding-inline-base);
+        padding-inline-end: var(--button-padding-inline-base);
       }
 
       /* Ghost variant padding for size 3 */
@@ -142,6 +150,7 @@
         gap: var(--component-gap-ghost-3);
         --button-ghost-padding-x: var(--space-3);
         --button-ghost-padding-y: calc(var(--space-1) * 1.5);
+        --button-padding-inline-base: var(--button-ghost-padding-x);
       }
     }
 
@@ -150,6 +159,7 @@
      * Designed for hero sections and maximum visual impact
      */
     &:where(.rt-r-size-4) {
+      --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
       gap: var(--component-gap-4);
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
@@ -168,8 +178,8 @@
          * HACK: This padding calculation adds 4px to the space-4 token for better visual balance at size 4.
          * This is a temporary workaround and should be replaced with a proper tokenized solution.
          */
-        padding-left: calc(var(--space-4) + (4px * var(--scaling)));
-        padding-right: calc(var(--space-4) + (4px * var(--scaling)));
+        padding-inline-start: var(--button-padding-inline-base);
+        padding-inline-end: var(--button-padding-inline-base);
       }
 
       /* Ghost variant padding for size 4 */
@@ -177,6 +187,7 @@
         gap: var(--component-gap-ghost-4);
         --button-ghost-padding-x: var(--space-4);
         --button-ghost-padding-y: var(--space-2);
+        --button-padding-inline-base: var(--button-ghost-padding-x);
       }
     }
   }

package/src/components/separator.css

@@ -3,6 +3,10 @@
   background-color: var(--accent-a5);
 }
 
+.rt-Separator:where(.rt-light) {
+  background-color: var(--accent-a3);
+}
+
 /***************************************************************************************************
  *                                                                                                 *
  * ORIENTATION                                                                                     *

package/src/components/separator.props.tsx

@@ -16,11 +16,13 @@ const separatorPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   color: { ...colorPropDef.color, default: 'gray' },
   decorative: { type: 'boolean', default: true },
+  light: { type: 'boolean', className: 'rt-light', default: false },
 } satisfies {
   orientation: PropDef<(typeof orientationValues)[number]>;
   size: PropDef<(typeof sizes)[number]>;
   color: typeof colorPropDef.color;
   decorative: PropDef<boolean>;
+  light: PropDef<boolean>;
 };
 
 export { separatorPropDefs };

package/src/components/separator.tsx

@@ -11,25 +11,10 @@ import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type SeparatorElement = React.ElementRef<'span'>;
 type SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;
-interface SeparatorProps
-  extends ComponentPropsWithout<'span', RemovedProps>,
-    MarginProps,
-    SeparatorOwnProps {}
+interface SeparatorProps extends ComponentPropsWithout<'span', RemovedProps>, MarginProps, SeparatorOwnProps {}
 const Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {
-  const { className, color, decorative, ...separatorProps } = extractProps(
-    props,
-    separatorPropDefs,
-    marginPropDefs
-  );
-  return (
-    <span
-      data-accent-color={color}
-      role={decorative ? undefined : 'separator'}
-      {...separatorProps}
-      ref={forwardedRef}
-      className={classNames('rt-Separator', className)}
-    />
-  );
+  const { className, color, decorative, ...separatorProps } = extractProps(props, separatorPropDefs, marginPropDefs);
+  return <span data-accent-color={color} role={decorative ? undefined : 'separator'} {...separatorProps} ref={forwardedRef} className={classNames('rt-Separator', className)} />;
 });
 Separator.displayName = 'Separator';