@kushagradhawan/kookie-ui 0.1.25 → 0.1.27

package/layout.css

@@ -248,6 +248,160 @@
         max-width: var(--container-4);
     }
 }
+.rt-r-ac-start {
+    align-content: start;
+}
+.rt-r-ac-center {
+    align-content: center;
+}
+.rt-r-ac-end {
+    align-content: end;
+}
+.rt-r-ac-baseline {
+    align-content: baseline;
+}
+.rt-r-ac-stretch {
+    align-content: stretch;
+}
+.rt-r-ac-space-between {
+    align-content: space-between;
+}
+.rt-r-ac-space-around {
+    align-content: space-around;
+}
+.rt-r-ac-space-evenly {
+    align-content: space-evenly;
+}
+@media (min-width: 520px) {
+    .xs\:rt-r-ac-start {
+        align-content: start;
+    }
+    .xs\:rt-r-ac-center {
+        align-content: center;
+    }
+    .xs\:rt-r-ac-end {
+        align-content: end;
+    }
+    .xs\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .xs\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .xs\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .xs\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .xs\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
+@media (min-width: 768px) {
+    .sm\:rt-r-ac-start {
+        align-content: start;
+    }
+    .sm\:rt-r-ac-center {
+        align-content: center;
+    }
+    .sm\:rt-r-ac-end {
+        align-content: end;
+    }
+    .sm\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .sm\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .sm\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .sm\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .sm\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
+@media (min-width: 1024px) {
+    .md\:rt-r-ac-start {
+        align-content: start;
+    }
+    .md\:rt-r-ac-center {
+        align-content: center;
+    }
+    .md\:rt-r-ac-end {
+        align-content: end;
+    }
+    .md\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .md\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .md\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .md\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .md\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
+@media (min-width: 1280px) {
+    .lg\:rt-r-ac-start {
+        align-content: start;
+    }
+    .lg\:rt-r-ac-center {
+        align-content: center;
+    }
+    .lg\:rt-r-ac-end {
+        align-content: end;
+    }
+    .lg\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .lg\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .lg\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .lg\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .lg\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
+@media (min-width: 1640px) {
+    .xl\:rt-r-ac-start {
+        align-content: start;
+    }
+    .xl\:rt-r-ac-center {
+        align-content: center;
+    }
+    .xl\:rt-r-ac-end {
+        align-content: end;
+    }
+    .xl\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .xl\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .xl\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .xl\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .xl\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
 .rt-r-ai-start {
     align-items: flex-start;
 }
@@ -349,13 +503,13 @@
     }
 }
 .rt-r-as-start {
-    align-self: flex-start;
+    align-self: start;
 }
 .rt-r-as-center {
     align-self: center;
 }
 .rt-r-as-end {
-    align-self: flex-end;
+    align-self: end;
 }
 .rt-r-as-baseline {
     align-self: baseline;
@@ -365,13 +519,13 @@
 }
 @media (min-width: 520px) {
     .xs\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .xs\:rt-r-as-center {
         align-self: center;
     }
     .xs\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .xs\:rt-r-as-baseline {
         align-self: baseline;
@@ -382,13 +536,13 @@
 }
 @media (min-width: 768px) {
     .sm\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .sm\:rt-r-as-center {
         align-self: center;
     }
     .sm\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .sm\:rt-r-as-baseline {
         align-self: baseline;
@@ -399,13 +553,13 @@
 }
 @media (min-width: 1024px) {
     .md\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .md\:rt-r-as-center {
         align-self: center;
     }
     .md\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .md\:rt-r-as-baseline {
         align-self: baseline;
@@ -416,13 +570,13 @@
 }
 @media (min-width: 1280px) {
     .lg\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .lg\:rt-r-as-center {
         align-self: center;
     }
     .lg\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .lg\:rt-r-as-baseline {
         align-self: baseline;
@@ -433,13 +587,13 @@
 }
 @media (min-width: 1640px) {
     .xl\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .xl\:rt-r-as-center {
         align-self: center;
     }
     .xl\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .xl\:rt-r-as-baseline {
         align-self: baseline;
@@ -4408,6 +4562,206 @@
         justify-content: space-between;
     }
 }
+.rt-r-ji-start {
+    justify-items: start;
+}
+.rt-r-ji-center {
+    justify-items: center;
+}
+.rt-r-ji-end {
+    justify-items: end;
+}
+.rt-r-ji-baseline {
+    justify-items: baseline;
+}
+.rt-r-ji-stretch {
+    justify-items: stretch;
+}
+@media (min-width: 520px) {
+    .xs\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .xs\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .xs\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .xs\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .xs\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+@media (min-width: 768px) {
+    .sm\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .sm\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .sm\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .sm\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .sm\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+@media (min-width: 1024px) {
+    .md\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .md\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .md\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .md\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .md\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+@media (min-width: 1280px) {
+    .lg\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .lg\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .lg\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .lg\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .lg\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+@media (min-width: 1640px) {
+    .xl\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .xl\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .xl\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .xl\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .xl\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+.rt-r-js-start {
+    justify-self: start;
+}
+.rt-r-js-center {
+    justify-self: center;
+}
+.rt-r-js-end {
+    justify-self: end;
+}
+.rt-r-js-baseline {
+    justify-self: baseline;
+}
+.rt-r-js-stretch {
+    justify-self: stretch;
+}
+@media (min-width: 520px) {
+    .xs\:rt-r-js-start {
+        justify-self: start;
+    }
+    .xs\:rt-r-js-center {
+        justify-self: center;
+    }
+    .xs\:rt-r-js-end {
+        justify-self: end;
+    }
+    .xs\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .xs\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
+@media (min-width: 768px) {
+    .sm\:rt-r-js-start {
+        justify-self: start;
+    }
+    .sm\:rt-r-js-center {
+        justify-self: center;
+    }
+    .sm\:rt-r-js-end {
+        justify-self: end;
+    }
+    .sm\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .sm\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
+@media (min-width: 1024px) {
+    .md\:rt-r-js-start {
+        justify-self: start;
+    }
+    .md\:rt-r-js-center {
+        justify-self: center;
+    }
+    .md\:rt-r-js-end {
+        justify-self: end;
+    }
+    .md\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .md\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
+@media (min-width: 1280px) {
+    .lg\:rt-r-js-start {
+        justify-self: start;
+    }
+    .lg\:rt-r-js-center {
+        justify-self: center;
+    }
+    .lg\:rt-r-js-end {
+        justify-self: end;
+    }
+    .lg\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .lg\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
+@media (min-width: 1640px) {
+    .xl\:rt-r-js-start {
+        justify-self: start;
+    }
+    .xl\:rt-r-js-center {
+        justify-self: center;
+    }
+    .xl\:rt-r-js-end {
+        justify-self: end;
+    }
+    .xl\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .xl\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
 .rt-r-m,
 .rt-r-m-0,
 .rt-r-m-1,

package/package.json

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

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

@@ -290,7 +290,7 @@
 }
 
 /* Ensure gray text appears muted in non-highlighted state */
-.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
   color: var(--gray-a10);
 }
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]),
@@ -361,7 +361,7 @@
     }
 
     /* Also target any element with data-accent-color="gray" */
-    & :where([data-accent-color='gray']) {
+    & :where([data-accent-color='gray']:not(.rt-Badge)) {
       color: inherit !important;
     }
   }
@@ -380,7 +380,7 @@
       }
 
       /* Also target any element with data-accent-color="gray" in high contrast */
-      & :where([data-accent-color='gray']) {
+      & :where([data-accent-color='gray']:not(.rt-Badge)) {
         color: inherit !important;
       }
 
@@ -392,7 +392,7 @@
           color: inherit !important;
         }
 
-        & :where([data-accent-color='gray']) {
+        & :where([data-accent-color='gray']:not(.rt-Badge)) {
           color: inherit !important;
         }
       }
@@ -467,7 +467,7 @@
     }
 
     /* In soft variant, improve contrast for gray text while maintaining hierarchy */
-    & :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+    & :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
       color: var(--gray-11) !important;
     }
   }

package/src/components/grid.props.tsx

@@ -10,6 +10,17 @@ const rowsValues = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 const flowValues = ['row', 'column', 'dense', 'row-dense', 'column-dense'] as const;
 const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
 const justifyValues = ['start', 'center', 'end', 'between'] as const;
+const alignContentValues = [
+  'start',
+  'center',
+  'end',
+  'baseline',
+  'between',
+  'around',
+  'evenly',
+  'stretch',
+] as const;
+const justifyItemsValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
 
 const gridPropDefs = {
   /**
@@ -150,6 +161,41 @@ const gridPropDefs = {
     parseValue: parseJustifyValue,
     responsive: true,
   },
+  /**
+   * Sets the CSS **align-content** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * alignContent="between"
+   * alignContent={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+   */
+  alignContent: {
+    type: 'enum',
+    className: 'rt-r-ac',
+    values: alignContentValues,
+    parseValue: parseAlignContentValue,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **justify-items** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * justifyItems="center"
+   * justifyItems={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
+   */
+  justifyItems: {
+    type: 'enum',
+    className: 'rt-r-ji',
+    values: justifyItemsValues,
+    responsive: true,
+  },
   ...gapPropDefs,
 } satisfies {
   as: PropDef<(typeof as)[number]>;
@@ -160,6 +206,8 @@ const gridPropDefs = {
   flow: PropDef<(typeof flowValues)[number]>;
   align: PropDef<(typeof alignValues)[number]>;
   justify: PropDef<(typeof justifyValues)[number]>;
+  alignContent: PropDef<(typeof alignContentValues)[number]>;
+  justifyItems: PropDef<(typeof justifyItemsValues)[number]>;
 };
 
 function parseGridValue(value: string): string {
@@ -174,6 +222,16 @@ function parseJustifyValue(value: string) {
   return value === 'between' ? 'space-between' : value;
 }
 
+function parseAlignContentValue(value: string) {
+  return value === 'between'
+    ? 'space-between'
+    : value === 'around'
+      ? 'space-around'
+      : value === 'evenly'
+        ? 'space-evenly'
+        : value;
+}
+
 // Use all of the imported prop defs to ensure that JSDoc works
 type GridOwnProps = GetPropDefTypes<typeof gridPropDefs & typeof asChildPropDef>;
 

package/src/components/image.css

@@ -6,7 +6,7 @@
   display: block;
   object-fit: var(--object-fit);
   box-shadow: var(--box-shadow);
-  border-radius: max(var(--radius-4), var(--radius-full));
+  border-radius: max(var(--radius-4), min(var(--radius-full), var(--radius-6)));
   transition: var(--transition-button);
 }
 

package/src/components/index.css

@@ -53,6 +53,7 @@
 @import './text-field.css';
 @import './theme-panel.css';
 @import './tooltip.css';
+@import './user-card.css';
 
 .radix-themes:where([data-is-root-theme='true']) {
   /* Create a new stacking context on the root `Theme` so layered components work out of the box */

package/src/components/index.tsx

@@ -64,5 +64,6 @@ export { Theme, ThemeContext, type ThemeProps, useThemeContext } from './theme.j
 export { ToggleButton, type ToggleButtonProps } from './toggle-button.js';
 export { ToggleIconButton, type ToggleIconButtonProps } from './toggle-icon-button.js';
 export { Tooltip, type TooltipProps } from './tooltip.js';
+export { UserCard, type UserCardProps } from './user-card.js';
 export { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden.js';
 export * as Sidebar from './sidebar.js';

package/src/components/user-card.css

@@ -0,0 +1,29 @@
+/* UserCard component styles */
+.rt-UserCard {
+  /* Base styles inherited from Card */
+  
+  /* Size-specific gap adjustments */
+  &:where(.rt-r-size-1) {
+    & :where(.rt-Flex) {
+      gap: var(--space-2);
+    }
+  }
+  
+  &:where(.rt-r-size-2) {
+    & :where(.rt-Flex) {
+      gap: var(--space-3);
+    }
+  }
+  
+  &:where(.rt-r-size-3) {
+    & :where(.rt-Flex) {
+      gap: var(--space-4);
+    }
+  }
+  
+  &:where(.rt-r-size-4) {
+    & :where(.rt-Flex) {
+      gap: var(--space-5);
+    }
+  }
+} 

package/src/components/user-card.props.tsx

@@ -0,0 +1,45 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { accentColorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['ghost', 'surface', 'classic'] as const;
+const avatarVariants = ['solid', 'soft', 'surface', 'outline'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
+
+const userCardPropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+
+  // Content props
+  src: { type: 'string' },
+  fallback: { type: 'ReactNode', required: true },
+  name: { type: 'string', required: true },
+  description: { type: 'string' },
+
+  // Avatar styling
+  avatarVariant: { type: 'enum', values: avatarVariants, default: 'soft' },
+  ...radiusPropDef,
+
+  // Card styling
+  ...accentColorPropDef,
+  ...highContrastPropDef,
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  flush: { type: 'boolean', default: false },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  src: PropDef<string>;
+  fallback: PropDef<React.ReactNode>;
+  name: PropDef<string>;
+  description: PropDef<string>;
+  avatarVariant: PropDef<(typeof avatarVariants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  flush: PropDef<boolean>;
+};
+
+export { userCardPropDefs };