@kushagradhawan/kookie-ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,20 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
+  "description": "A modern React component library with beautiful design tokens and flexible theming",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "design-system",
+    "themes",
+    "radix"
+  ],
+  "author": "Kushagra Dhawan",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16"
+  },
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -55,7 +69,6 @@
   "sideEffects": [
     "*.css"
   ],
-  "license": "MIT",
   "files": [
     "src/**",
     "dist/**",

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

@@ -21,7 +21,7 @@
   /*
    * Some layout acrobatics with `var(--base-card-border-width)` because we want:
    * 1. <Card> with fixed height to clip overflowing content.
-   * 2. <Inset> that clips to card’s border-box or padding-box depending on the `clip` value.
+   * 2. <Inset> that clips to card's border-box or padding-box depending on the `clip` value.
    *
    * To have both (1) and (2), we clip the content at the outer edge of `.rt-BaseCard` border, and use
    * a ::before pseudo-element for the background color, which is smaller by the border width on each side.
@@ -48,7 +48,7 @@
   /*
    * Background color:
    * 1. "z-index: -1" so that the background goes below the children
-   * 2. "contain: paint" creates a new stacking context so that ::before doesn’t go below the card’s sibling elements
+   * 2. "contain: paint" creates a new stacking context so that ::before doesn't go below the card's sibling elements
    */
   &::before {
     z-index: -1;
@@ -83,58 +83,19 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 /*
- * 1. Outer shadow has to be the same as inner shadow, but with a 1px smaller spread value.
- * 2. Keep the initial state in sync with var(--shadow-2) in `shadow.css`.
- * 3. Make sure that between all states, the length of the shadow list matches:
- *    https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#interpolation
+ * Using standard shadow tokens for consistency across the design system.
+ * Maps shadow variants to the standard --shadow-{1-6} tokens.
  */
 
-/* prettier-ignore */
 :where(.radix-themes) {
-  --base-card-classic-box-shadow-inner:
-    0 0 0 1px var(--base-card-classic-border-color),
-    0 0 0 1px var(--color-transparent),
-    0 0 0 0.5px var(--black-a1),
-    0 1px 1px 0 var(--gray-a2),
-    0 2px 1px -1px var(--black-a1),
-    0 1px 3px 0 var(--black-a1);
-  --base-card-classic-box-shadow-outer:
-    0 0 0 0 var(--base-card-classic-border-color),
-    0 0 0 0 var(--color-transparent),
-    0 0 0 0 var(--black-a1),
-    0 1px 1px -1px var(--gray-a2),
-    0 2px 1px -2px var(--black-a1),
-    0 1px 3px -1px var(--black-a1);
+  --base-card-classic-box-shadow-inner: var(--shadow-2);
+  --base-card-classic-box-shadow-outer: var(--shadow-2);
 
-  --base-card-classic-hover-box-shadow-inner:
-    0 0 0 1px var(--base-card-classic-hover-border-color),
-    0 1px 1px 1px var(--black-a1),
-    0 2px 1px -1px var(--gray-a3),
-    0 2px 3px -2px var(--black-a1),
-    0 3px 12px -4px var(--gray-a3),
-    0 4px 16px -8px var(--black-a1);
-  --base-card-classic-hover-box-shadow-outer:
-    0 0 0 0 var(--base-card-classic-hover-border-color),
-    0 1px 1px 0 var(--black-a1),
-    0 2px 1px -2px var(--gray-a3),
-    0 2px 3px -3px var(--black-a1),
-    0 3px 12px -5px var(--gray-a3),
-    0 4px 16px -9px var(--black-a1);
+  --base-card-classic-hover-box-shadow-inner: var(--shadow-3);
+  --base-card-classic-hover-box-shadow-outer: var(--shadow-3);
 
-  --base-card-classic-active-box-shadow-inner:
-    0 0 0 1px var(--base-card-classic-active-border-color),
-    0 0 0 1px var(--color-transparent),
-    0 0 0 0.5px var(--black-a1),
-    0 1px 1px 0 var(--gray-a4),
-    0 2px 1px -1px var(--black-a1),
-    0 1px 3px 0 var(--black-a1);
-  --base-card-classic-active-box-shadow-outer:
-    0 0 0 0 var(--base-card-classic-active-border-color),
-    0 0 0 0 var(--color-transparent),
-    0 0 0 0 var(--black-a1),
-    0 1px 1px -1px var(--gray-a4),
-    0 2px 1px -2px var(--black-a1),
-    0 1px 3px -1px var(--black-a1);
+  --base-card-classic-active-box-shadow-inner: var(--shadow-2);
+  --base-card-classic-active-box-shadow-outer: var(--shadow-2);
 
   --base-card-classic-border-color: var(--gray-a3);
   --base-card-classic-hover-border-color: var(--gray-a3);
@@ -145,61 +106,3 @@
     --base-card-classic-active-border-color: color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%);
   }
 }
-
-/* prettier-ignore */
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --base-card-classic-box-shadow-inner:
-    0 0 0 1px var(--base-card-classic-border-color),
-    0 0 0 1px var(--color-transparent),
-    0 0 0 0.5px var(--black-a3),
-    0 1px 1px 0 var(--black-a6),
-    0 2px 1px -1px var(--black-a6),
-    0 1px 3px 0 var(--black-a5);
-  --base-card-classic-box-shadow-outer:
-    0 0 0 0 var(--base-card-classic-border-color),
-    0 0 0 0 var(--color-transparent),
-    0 0 0 0 var(--black-a3),
-    0 1px 1px -1px var(--black-a6),
-    0 2px 1px -2px var(--black-a6),
-    0 1px 3px -1px var(--black-a5);
-
-  --base-card-classic-hover-box-shadow-inner:
-    0 0 0 1px var(--base-card-classic-hover-border-color),
-    0 0 1px 1px var(--gray-a4),
-    0 0 1px -1px var(--gray-a4),
-    0 0 3px -2px var(--gray-a3),
-    0 0 12px -2px var(--gray-a3),
-    0 0 16px -8px var(--gray-a7);
-  --base-card-classic-hover-box-shadow-outer:
-    0 0 0 0 var(--base-card-classic-hover-border-color),
-    0 0 1px 0 var(--gray-a4),
-    0 0 1px -2px var(--gray-a4),
-    0 0 3px -3px var(--gray-a3),
-    0 0 12px -3px var(--gray-a3),
-    0 0 16px -9px var(--gray-a7);
-
-  --base-card-classic-active-box-shadow-inner:
-    0 0 0 1px var(--base-card-classic-active-border-color),
-    0 0 0 1px var(--color-transparent),
-    0 0 0 0.5px var(--black-a3),
-    0 1px 1px 0 var(--black-a6),
-    0 2px 1px -1px var(--black-a6),
-    0 1px 3px 0 var(--black-a5);
-  --base-card-classic-active-box-shadow-outer:
-    0 0 0 0 var(--base-card-classic-active-border-color),
-    0 0 0 0 var(--color-transparent),
-    0 0 0 0 var(--black-a3),
-    0 1px 1px -1px var(--black-a6),
-    0 2px 1px -2px var(--black-a6),
-    0 1px 3px -1px var(--black-a5);
-
-  --base-card-classic-border-color: var(--gray-a6);
-  --base-card-classic-hover-border-color: var(--gray-a6);
-  --base-card-classic-active-border-color: var(--gray-a6);
-  @supports (color: color-mix(in oklab, white, black)) {
-    --base-card-classic-border-color: color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%);
-    --base-card-classic-hover-border-color: color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%);
-    --base-card-classic-active-border-color: color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%);
-  }
-}

package/src/components/checkbox-group.primitive.tsx

@@ -20,7 +20,7 @@ const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
 type ScopedProps<P> = P & { __scopeCheckboxGroup?: Context.Scope };
 const [createCheckboxGroupContext, createCheckboxGroupScope] = Context.createContextScope(
   CHECKBOX_GROUP_NAME,
-  [RovingFocus.createRovingFocusGroupScope, CheckboxPrimitive.createCheckboxScope]
+  [RovingFocus.createRovingFocusGroupScope, CheckboxPrimitive.createCheckboxScope],
 );
 const useRovingFocusGroupScope = RovingFocus.createRovingFocusGroupScope();
 const useCheckboxScope = CheckboxPrimitive.createCheckboxScope();
@@ -71,19 +71,19 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
     const direction = useDirection(dir);
     const [value = [], setValue] = useControllableState({
       prop: valueProp,
-      defaultProp: defaultValue,
+      defaultProp: defaultValue ?? [],
       onChange: onValueChange,
     });
 
     const handleItemCheck = React.useCallback(
       (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),
-      [setValue]
+      [setValue],
     );
 
     const handleItemUncheck = React.useCallback(
       (itemValue: string) =>
         setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),
-      [setValue]
+      [setValue],
     );
 
     return (
@@ -113,7 +113,7 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
         </RovingFocus.Root>
       </CheckboxGroupProvider>
     );
-  }
+  },
 );
 
 CheckboxGroup.displayName = CHECKBOX_GROUP_NAME;
@@ -162,7 +162,7 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
         />
       </RovingFocus.Item>
     );
-  }
+  },
 );
 
 CheckboxGroupItem.displayName = ITEM_NAME;

package/src/components/checkbox.tsx

@@ -35,7 +35,7 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((props, forwar
 
   const [checked, setChecked] = useControllableState({
     prop: checkedProp,
-    defaultProp: defaultCheckedProp,
+    defaultProp: defaultCheckedProp ?? false,
     onChange: onCheckedChange,
   });
 

package/src/components/segmented-control.tsx

@@ -39,7 +39,7 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
     const [value, setValue] = useControllableState({
       prop: valueProp,
       onChange: onValueChangeProp,
-      defaultProp: defaultValueProp,
+      defaultProp: defaultValueProp ?? '',
     });
 
     return (
@@ -63,7 +63,7 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
         <div className="rt-SegmentedControlIndicator" />
       </ToggleGroupPrimitive.Root>
     );
-  }
+  },
 );
 
 SegmentedControlRoot.displayName = 'SegmentedControl.Root';
@@ -96,7 +96,7 @@ const SegmentedControlItem = React.forwardRef<HTMLButtonElement, SegmentedContro
         </span>
       </span>
     </ToggleGroupPrimitive.Item>
-  )
+  ),
 );
 
 SegmentedControlItem.displayName = 'SegmentedControl.Item';

package/src/components/slot.tsx

@@ -1,4 +1,4 @@
 import { Slot as SlotPrimitive } from 'radix-ui';
 export const Root = SlotPrimitive.Root;
 export const Slot = SlotPrimitive.Root;
-export const Slottable = SlotPrimitive.Slottable;
+export const Slottable: typeof SlotPrimitive.Slottable = SlotPrimitive.Slottable;

package/src/components/theme.props.tsx

@@ -30,14 +30,14 @@ const themePropDefs = {
    * @link
    * https://www.radix-ui.com/themes/docs/theme/color
    */
-  accentColor: { type: 'enum', values: accentColors, default: 'indigo' },
+  accentColor: { type: 'enum', values: accentColors, default: 'blue' },
   /**
    * Selects one of the gray color options to use in the Theme.
    *
    * @link
    * https://www.radix-ui.com/themes/docs/theme/color
    */
-  grayColor: { type: 'enum', values: grayColors, default: 'auto' },
+  grayColor: { type: 'enum', values: grayColors, default: 'slate' },
   /**
    * Controls whether to use a solid or translucent background color on panelled
    * elements such as Card or Table is solid or translucent.

package/styles.css

@@ -3387,12 +3387,12 @@
   --base-card-surface-box-shadow: 0 0 0 1px var(--gray-a5);
   --base-card-surface-hover-box-shadow: 0 0 0 1px var(--gray-a7);
   --base-card-surface-active-box-shadow: 0 0 0 1px var(--gray-a6);
-  --base-card-classic-box-shadow-inner: 0 0 0 1px var(--base-card-classic-border-color), 0 0 0 1px var(--color-transparent), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
-  --base-card-classic-box-shadow-outer: 0 0 0 0 var(--base-card-classic-border-color), 0 0 0 0 var(--color-transparent), 0 0 0 0 var(--black-a1), 0 1px 1px -1px var(--gray-a2), 0 2px 1px -2px var(--black-a1), 0 1px 3px -1px var(--black-a1);
-  --base-card-classic-hover-box-shadow-inner: 0 0 0 1px var(--base-card-classic-hover-border-color), 0 1px 1px 1px var(--black-a1), 0 2px 1px -1px var(--gray-a3), 0 2px 3px -2px var(--black-a1), 0 3px 12px -4px var(--gray-a3), 0 4px 16px -8px var(--black-a1);
-  --base-card-classic-hover-box-shadow-outer: 0 0 0 0 var(--base-card-classic-hover-border-color), 0 1px 1px 0 var(--black-a1), 0 2px 1px -2px var(--gray-a3), 0 2px 3px -3px var(--black-a1), 0 3px 12px -5px var(--gray-a3), 0 4px 16px -9px var(--black-a1);
-  --base-card-classic-active-box-shadow-inner: 0 0 0 1px var(--base-card-classic-active-border-color), 0 0 0 1px var(--color-transparent), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a4), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
-  --base-card-classic-active-box-shadow-outer: 0 0 0 0 var(--base-card-classic-active-border-color), 0 0 0 0 var(--color-transparent), 0 0 0 0 var(--black-a1), 0 1px 1px -1px var(--gray-a4), 0 2px 1px -2px var(--black-a1), 0 1px 3px -1px var(--black-a1);
+  --base-card-classic-box-shadow-inner: var(--shadow-2);
+  --base-card-classic-box-shadow-outer: var(--shadow-2);
+  --base-card-classic-hover-box-shadow-inner: var(--shadow-3);
+  --base-card-classic-hover-box-shadow-outer: var(--shadow-3);
+  --base-card-classic-active-box-shadow-inner: var(--shadow-2);
+  --base-card-classic-active-box-shadow-outer: var(--shadow-2);
   --base-card-classic-border-color: var(--gray-a3);
   --base-card-classic-hover-border-color: var(--gray-a3);
   --base-card-classic-active-border-color: var(--gray-a4);
@@ -3430,15 +3430,6 @@
   --switch-high-contrast-checked-active-before-filter: brightness(1.08);
   --switch-surface-checked-active-filter: brightness(1.08);
   --switch-surface-checked-active-filter: brightness(1.08);
-  --base-card-classic-box-shadow-inner: 0 0 0 1px var(--base-card-classic-border-color), 0 0 0 1px var(--color-transparent), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
-  --base-card-classic-box-shadow-outer: 0 0 0 0 var(--base-card-classic-border-color), 0 0 0 0 var(--color-transparent), 0 0 0 0 var(--black-a3), 0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6), 0 1px 3px -1px var(--black-a5);
-  --base-card-classic-hover-box-shadow-inner: 0 0 0 1px var(--base-card-classic-hover-border-color), 0 0 1px 1px var(--gray-a4), 0 0 1px -1px var(--gray-a4), 0 0 3px -2px var(--gray-a3), 0 0 12px -2px var(--gray-a3), 0 0 16px -8px var(--gray-a7);
-  --base-card-classic-hover-box-shadow-outer: 0 0 0 0 var(--base-card-classic-hover-border-color), 0 0 1px 0 var(--gray-a4), 0 0 1px -2px var(--gray-a4), 0 0 3px -3px var(--gray-a3), 0 0 12px -3px var(--gray-a3), 0 0 16px -9px var(--gray-a7);
-  --base-card-classic-active-box-shadow-inner: 0 0 0 1px var(--base-card-classic-active-border-color), 0 0 0 1px var(--color-transparent), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
-  --base-card-classic-active-box-shadow-outer: 0 0 0 0 var(--base-card-classic-active-border-color), 0 0 0 0 var(--color-transparent), 0 0 0 0 var(--black-a3), 0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6), 0 1px 3px -1px var(--black-a5);
-  --base-card-classic-border-color: var(--gray-a6);
-  --base-card-classic-hover-border-color: var(--gray-a6);
-  --base-card-classic-active-border-color: var(--gray-a6);
 }
 @supports (color: color(display-p3 1 1 1)) {
   @media (color-gamut: p3) {
@@ -4633,9 +4624,6 @@
     --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
     --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
     --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
-    --base-card-classic-border-color: color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%);
-    --base-card-classic-hover-border-color: color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%);
-    --base-card-classic-active-border-color: color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%);
   }
 }
 @font-face {