@kushagradhawan/kookie-ui 0.1.25 → 0.1.27

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/props/layout.props.ts

@@ -10,6 +10,8 @@ const positionValues = ['static', 'relative', 'absolute', 'fixed', 'sticky'] as
 const positionEdgeValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9'] as const;
 const flexShrinkValues = ['0', '1'] as const;
 const flexGrowValues = ['0', '1'] as const;
+const alignSelfValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
+const justifySelfValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
 
 const layoutPropDefs = {
   ...paddingPropDefs,
@@ -358,6 +360,40 @@ const layoutPropDefs = {
     customProperties: ['--grid-row-end'],
     responsive: true,
   },
+  /**
+   * Sets the CSS **align-self** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * alignSelf="center"
+   * alignSelf={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+   */
+  alignSelf: {
+    type: 'enum',
+    className: 'rt-r-as',
+    values: alignSelfValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **justify-self** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * justifySelf="center"
+   * justifySelf={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+   */
+  justifySelf: {
+    type: 'enum',
+    className: 'rt-r-js',
+    values: justifySelfValues,
+    responsive: true,
+  },
 } satisfies {
   position: PropDef<(typeof positionValues)[number]>;
   inset: PropDef<(typeof positionEdgeValues)[number]>;
@@ -378,6 +414,8 @@ const layoutPropDefs = {
   gridRowStart: PropDef<string>;
   gridRowEnd: PropDef<string>;
   gridArea: PropDef<string>;
+  alignSelf: PropDef<(typeof alignSelfValues)[number]>;
+  justifySelf: PropDef<(typeof justifySelfValues)[number]>;
 };
 
 // Use all of the imported prop defs to ensure that JSDoc works

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 */

package/src/styles/utilities/align-content.css

@@ -0,0 +1,33 @@
+@breakpoints {
+  .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;
+  }
+}

package/src/styles/utilities/align-self.css

@@ -1,6 +1,6 @@
 @breakpoints {
   .rt-r-as-start {
-    align-self: flex-start;
+    align-self: start;
   }
 
   .rt-r-as-center {
@@ -8,7 +8,7 @@
   }
 
   .rt-r-as-end {
-    align-self: flex-end;
+    align-self: end;
   }
 
   .rt-r-as-baseline {

package/src/styles/utilities/justify-items.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .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;
+  }
+}

package/src/styles/utilities/justify-self.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .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;
+  }
+}

package/src/styles/utilities/layout.css

@@ -1,5 +1,6 @@
 @import '../breakpoints.css';
 
+@import './align-content.css';
 @import './align-items.css';
 @import './align-self.css';
 @import './display.css';
@@ -25,6 +26,8 @@
 @import './max-height.css';
 @import './inset.css';
 @import './justify-content.css';
+@import './justify-items.css';
+@import './justify-self.css';
 @import './margin.css';
 @import './overflow.css';
 @import './padding.css';