@kushagradhawan/kookie-ui 0.1.24 → 0.1.26

package/src/components/sidebar.tsx

@@ -240,6 +240,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
             data-accent-color={resolvedColor}
             data-high-contrast={highContrast || undefined}
             data-side={side}
+            data-type={type}
+            data-collapsible={collapsible}
             data-panel-background={panelBackground}
           >
             {children}
@@ -270,6 +272,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
           data-accent-color={resolvedColor}
           data-high-contrast={highContrast || undefined}
           data-side={side}
+          data-type={type}
+          data-collapsible={collapsible}
           data-panel-background={panelBackground}
         >
           {children}
@@ -286,7 +290,12 @@ interface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {}
 const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
   ({ className, children, ...props }, forwardedRef) => {
     const context = React.useContext(SidebarContext);
-    const { size = '2', menuVariant = 'soft' } = context || {};
+    const {
+      size = '2',
+      menuVariant = 'soft',
+      type = 'sidebar',
+      collapsible = 'none',
+    } = context || {};
 
     return (
       <ScrollArea type="auto">
@@ -294,11 +303,14 @@ const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
           {...props}
           ref={forwardedRef}
           className={classNames(
+            'rt-BaseMenuContent',
             'rt-SidebarContent',
             `rt-r-size-${size}`,
             `rt-menu-variant-${menuVariant}`,
             className,
           )}
+          data-type={type}
+          data-collapsible={collapsible}
         >
           {children}
         </div>
@@ -420,7 +432,11 @@ interface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}
 
 const SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(
   ({ className, ...props }, forwardedRef) => (
-    <ul {...props} ref={forwardedRef} className={classNames('rt-SidebarMenu', className)} />
+    <ul
+      {...props}
+      ref={forwardedRef}
+      className={classNames('rt-BaseMenuViewport', 'rt-SidebarMenu', className)}
+    />
   ),
 );
 SidebarMenu.displayName = 'Sidebar.Menu';
@@ -466,7 +482,7 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
       <Comp
         {...props}
         ref={forwardedRef}
-        className={classNames('rt-reset', 'rt-SidebarMenuButton', className)}
+        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}
         data-active={isActive || undefined}
         data-highlighted={isHighlighted || undefined}
         onMouseEnter={(event) => {
@@ -558,6 +574,7 @@ const SidebarMenuSubTrigger = React.forwardRef<
             asChild={asChild}
             className={classNames(
               'rt-reset',
+              'rt-BaseMenuItem',
               'rt-SidebarMenuButton',
               'rt-SidebarMenuSubTrigger',
               className,
@@ -617,7 +634,11 @@ interface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}
 
 const SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(
   ({ className, ...props }, forwardedRef) => (
-    <div {...props} ref={forwardedRef} className={classNames('rt-SidebarGroup', className)} />
+    <div
+      {...props}
+      ref={forwardedRef}
+      className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)}
+    />
   ),
 );
 SidebarGroup.displayName = 'Sidebar.Group';
@@ -634,7 +655,7 @@ const SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProp
       <Comp
         {...props}
         ref={forwardedRef}
-        className={classNames('rt-SidebarGroupLabel', className)}
+        className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)}
       />
     );
   },

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 };

package/src/components/user-card.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { userCardPropDefs } from './user-card.props.js';
+import { Avatar } from './avatar.js';
+import { Card } from './card.js';
+import { Text } from './text.js';
+import { Flex } from './flex.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { getSubtree } from '../helpers/get-subtree.js';
+import { marginPropDefs } from '../props/margin.props.js';
+import { useThemeContext } from './theme.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { MarginProps } from '../props/margin.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type UserCardOwnProps = GetPropDefTypes<typeof userCardPropDefs>;
+
+type UserCardElement = React.ElementRef<'div'>;
+interface UserCardProps
+  extends ComponentPropsWithout<'div', RemovedProps>,
+    MarginProps,
+    UserCardOwnProps {}
+
+const UserCard = React.forwardRef<UserCardElement, UserCardProps>((props, forwardedRef) => {
+  const themeContext = useThemeContext();
+  const resolvedPanelBackground = props.panelBackground ?? themeContext.panelBackground;
+
+  const {
+    asChild,
+    children,
+    className,
+    src,
+    fallback,
+    name,
+    description,
+    avatarVariant,
+    radius,
+    color,
+    panelBackground,
+    flush,
+    ...restProps
+  } = extractProps(props, userCardPropDefs, marginPropDefs);
+
+  // Size mappings for avatar and text
+  const sizeMap = {
+    '1': { avatar: '1', name: '1', description: '0' },
+    '2': { avatar: '2', name: '2', description: '1' },
+    '3': { avatar: '3', name: '3', description: '2' },
+    '4': { avatar: '4', name: '4', description: '3' },
+  } as const;
+
+  const currentSize = props.size || '2';
+  const sizes = sizeMap[currentSize as keyof typeof sizeMap];
+
+  const content = (
+    <Flex align="center" gap="3">
+      <Avatar
+        size={sizes.avatar as any}
+        variant={avatarVariant}
+        radius={radius}
+        src={src}
+        fallback={fallback!}
+        color={color}
+        highContrast={props.highContrast}
+      />
+      <Flex direction="column" gap="0" style={{ minWidth: 0 }}>
+        <Text size={sizes.name as any} weight="medium" truncate>
+          {name}
+        </Text>
+        {description && (
+          <Text size={sizes.description as any} color="gray" truncate>
+            {description}
+          </Text>
+        )}
+      </Flex>
+    </Flex>
+  );
+
+  return (
+    <Card
+      {...restProps}
+      asChild={asChild}
+      size={props.size}
+      variant={props.variant}
+      panelBackground={resolvedPanelBackground}
+      flush={flush}
+      ref={forwardedRef}
+      className={classNames('rt-UserCard', className)}
+    >
+      {getSubtree({ asChild, children }, content)}
+    </Card>
+  );
+});
+
+UserCard.displayName = 'UserCard';
+
+export { UserCard };
+export type { UserCardProps };

package/src/styles/tokens/transition.css

@@ -1,10 +1,10 @@
 .radix-themes {
   /* Duration tokens */
-  --duration-1: 50ms; /* Micro interactions */
-  --duration-2: 100ms; /* Fast transitions */
-  --duration-3: 150ms; /* Standard transitions */
-  --duration-4: 200ms; /* Slower transitions */
-  --duration-5: 300ms; /* Slow animations */
+  --duration-1: 75ms; /* Micro interactions */
+  --duration-2: 125ms; /* Fast transitions */
+  --duration-3: 175ms; /* Standard transitions */
+  --duration-4: 225ms; /* Slower transitions */
+  --duration-5: 325ms; /* Slow animations */
 
   /* Easing tokens */
   --ease-1: ease-out; /* Fast start, slow end */