@zvoove/unity-ui 2.27.0 → 2.29.0

package/dist/llms.txt

@@ -759,6 +759,68 @@ import { CodeBlock } from '@zvoove/unity-ui';
 />
 ```
 
+### List
+Simple list that renders an array of items with optional dividers and hover highlights. Each item accepts arbitrary `ReactNode` content and extra props are forwarded to the rendered element.
+```tsx
+import { List } from '@zvoove/unity-ui';
+
+<List
+  items={[                      // ListItem<T>[] (required) — each item: { id: string, content: ReactNode, ...elementProps }
+    { id: 'item-1', content: 'Item 1' },
+    { id: 'item-2', content: 'Item 2' },
+  ]}
+  showDividers={true}           // boolean (default: true) — show dividers between items
+  linkComponent="div"           // T | 'div' (default: 'div') — set to 'a' for native links or pass a custom router Link
+/>
+```
+
+Common patterns:
+```tsx
+// Rich content items
+<List
+  items={[
+    {
+      id: 'inbox',
+      content: (
+        <Stack direction="row" gap="sm" align="center">
+          <Icon name="remark" size="xs" />
+          <Typography variant="body" size="medium">Inbox</Typography>
+          <div className="ml-auto"><Tag label="3" color="error" size="small" /></div>
+        </Stack>
+      ),
+    },
+  ]}
+/>
+
+// Native anchor links — extra item props forwarded to <a>
+<List
+  linkComponent="a"
+  items={[
+    { id: 'google', content: 'Google', href: 'https://google.com', target: '_blank', rel: 'noopener noreferrer' },
+  ]}
+/>
+
+// Custom router link (e.g. React Router)
+import { Link } from 'react-router-dom';
+<List
+  linkComponent={Link}
+  items={[
+    { id: 'home', content: 'Home', to: '/' },
+    { id: 'settings', content: 'Settings', to: '/settings' },
+  ]}
+/>
+
+// Inside a Card with header
+<Card padding="none" width={320} variant="outlined">
+  <Stack padding="md" direction="row" gap="sm" align="center">
+    <Icon name="users" size="md" weight="light" />
+    <Typography variant="label" size="large">Team members</Typography>
+  </Stack>
+  <Divider />
+  <List items={[{ id: 'anna', content: 'Anna Mueller' }]} />
+</Card>
+```
+
 ---
 
 ## NAVIGATION COMPONENTS

package/dist/types/index.d.ts

@@ -0,0 +1,71 @@
+import { BREAKPOINTS } from '../constants';
+export type NonNullable<T> = Exclude<T, null | undefined>;
+export type SpacingKeys = 'none' | 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl2' | 'xl3' | 'xl4' | 'xl5' | 'xl6' | 'xl7';
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+export type AlignItems = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type OverflowBase = 'visible' | 'hidden' | 'scroll' | 'auto' | 'y-auto' | 'y-scroll' | 'x-auto' | 'x-scroll';
+export type OverflowYOrX = 'auto' | 'scroll' | 'hidden' | 'visible';
+export type Overflow = OverflowBase | {
+    y?: OverflowYOrX;
+    x?: OverflowYOrX;
+};
+export type Density = 'default' | '-2' | '-4';
+export type BackgroundColors = 'background' | 'outline' | 'outline-variant' | 'outline-low' | 'primary' | 'primary-hover' | 'primary-active' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'tertiary-container-hover' | 'tertiary-container-active' | 'primary-fixed' | 'primary-fixed-dim' | 'secondary-fixed' | 'secondary-fixed-dim' | 'tertiary-fixed' | 'tertiary-fixed-dim' | 'surface' | 'surface-bright' | 'surface-dim' | 'surface-variant' | 'surface-container-lowest' | 'surface-container-low' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'error' | 'error-container' | 'inverse-surface' | 'inverse-on-surface' | 'inverse-primary' | 'scrim' | 'yellow' | 'dark-yellow' | 'yellow-container' | 'green' | 'dark-green' | 'green-container' | 'pink' | 'dark-pink' | 'pink-container' | 'steel-blue' | 'dark-steel-blue' | 'steel-blue-container' | 'container-neutral' | 'container-neutral-hover' | 'code-surface' | 'code-surface-variant';
+export type ForegroundColors = 'primary' | 'secondary' | 'tertiary' | 'yellow' | 'green' | 'pink' | 'steel-blue' | 'dark-yellow' | 'dark-green' | 'dark-pink' | 'dark-steel-blue' | 'inverse-on-surface' | 'on-primary' | 'on-secondary' | 'on-tertiary' | 'on-primary-container' | 'on-secondary-container' | 'on-tertiary-container' | 'on-primary-fixed' | 'on-primary-fixed-variant' | 'on-secondary-fixed' | 'on-secondary-fixed-variant' | 'on-tertiary-fixed' | 'on-tertiary-fixed-variant' | 'on-surface' | 'on-surface-variant' | 'on-surface-variant-lowest' | 'on-error' | 'on-error-container' | 'on-yellow' | 'on-dark-yellow' | 'on-yellow-container' | 'on-green' | 'on-dark-green' | 'on-green-container' | 'on-pink' | 'on-dark-pink' | 'on-pink-container' | 'on-steel-blue' | 'on-dark-steel-blue' | 'on-steel-blue-container' | 'error' | 'on-scrim' | 'on-container-neutral' | 'code-on-surface';
+export type Padding = SpacingKeys | {
+    top?: SpacingKeys;
+    right?: SpacingKeys;
+    bottom?: SpacingKeys;
+    left?: SpacingKeys;
+    x?: SpacingKeys;
+    y?: SpacingKeys;
+};
+export type Margin = SpacingKeys | {
+    top?: SpacingKeys;
+    right?: SpacingKeys;
+    bottom?: SpacingKeys;
+    left?: SpacingKeys;
+    x?: SpacingKeys;
+    y?: SpacingKeys;
+};
+export type Viewport = keyof typeof BREAKPOINTS;
+export type ResponsiveType<T> = T | {
+    [key in Viewport]?: T;
+};
+export type ResponsiveTypeFixed<T> = {
+    [key in Viewport]: T;
+};
+type ResponsiveBreakpoint = 'SM' | 'MD' | 'LG' | 'XL' | '2XL';
+type SideVariant = 'Top' | 'Bottom' | 'Left' | 'Right';
+type AxisVariant = 'X' | 'Y';
+type GenerateSimpleResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}`;
+export type SimpleResponsiveStyles<Attr extends string> = {
+    [K in GenerateSimpleResponsiveStyleKeys<Attr>]: Record<SpacingKeys, string>;
+};
+type GenerateResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}` | `${Attr}${AxisVariant}` | `${Attr}${SideVariant}` | `${Attr}${AxisVariant}${ResponsiveBreakpoint}` | `${Attr}${SideVariant}${ResponsiveBreakpoint}`;
+export type GenerateResponsiveGenericStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}`;
+export type ResponsiveGenericStyles<Attr extends string, T extends string = string> = {
+    [K in GenerateResponsiveGenericStyleKeys<Attr>]: Record<T, string>;
+};
+export type ResponsiveStyles<Attr extends string> = {
+    [K in GenerateResponsiveStyleKeys<Attr>]: Record<SpacingKeys, string>;
+};
+export type GetSpacingPropsReturnType<Attr extends string> = {
+    [K in GenerateResponsiveStyleKeys<Attr>]: SpacingKeys | undefined;
+};
+export type GetSimpleSpacingPropsReturnType<Attr extends string> = {
+    [K in GenerateSimpleResponsiveStyleKeys<Attr>]: SpacingKeys | undefined;
+};
+export type GenericResponsiveKeys<T extends string> = {
+    [key in Viewport]: Record<T, string>;
+};
+export type FlexResponsiveStylesKeys<Attr extends string> = GenerateSimpleResponsiveStyleKeys<Attr>;
+export type FlexResponsiveStyles<Attr extends string, T extends string> = {
+    [K in FlexResponsiveStylesKeys<Attr>]: Record<T, string>;
+};
+export type GetGenericPropsReturnType<Attr extends string, T extends string> = {
+    [K in GenerateSimpleResponsiveStyleKeys<Attr>]: T | undefined;
+};
+export {};