@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/ui/components/ui/item.d.ts

@@ -3,11 +3,35 @@ import { VariantProps } from 'class-variance-authority';
 import { Separator } from './separator.js';
 import * as React from 'react';
 /**
- * リスト形式のアイテムをグループ化するコンテナコンポーネント。
+ * Renders a list-role container for vertically arranged item cards.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムグループ内のアイテム同士を区切るためのセパレーター（区切り線）。
+ * Draws a horizontal divider between item cards.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare const itemVariants: (props?: ({
@@ -15,38 +39,134 @@ declare const itemVariants: (props?: ({
     size?: "default" | "xs" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * リストやグリッド内の個々のアイテムを表す基本コンポーネント。
+ * Renders a list-item surface with configurable size, border treatment and render element.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default', size='default'.
+ * @returns The rendered Item composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({
     variant?: "image" | "default" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * アイテム内のアバター、アイコン、画像などのメディア要素を表示するコンポーネント。
+ * Styles leading media as plain content, an icon or a cropped image.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.
+ * @returns The rendered ItemMedia composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
 /**
- * アイテム内のコンテンツ（タイトルや説明など）を格納するコンテナ。
+ * Arranges an item title and supporting content in a flexible column.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムのタイトル。
+ * Styles a single-line item title.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemTitle composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムの補助的な説明テキスト。
+ * Styles a two-line item description and embedded links.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemDescription composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
 /**
- * アイテムに関連するアクションボタンや操作子を配置するコンポーネント。
+ * Aligns host-provided item action controls.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemActions composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemActions({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムの上部にメタ情報などを配置するヘッダー領域。
+ * Lays out full-width metadata above the main item content.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemHeader composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムの下部にメタ情報やアクションを配置するフッター領域。
+ * Lays out full-width metadata or controls below item content.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemFooter composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };

package/dist/ui/components/ui/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","names":["ItemGroup","props","cn","className","ItemSeparator","Separator","itemVariants","cva","Item","useRender","mergeProps","itemMediaVariants","ItemMedia","variant","ItemContent","ItemTitle","ItemDescription","ItemActions","ItemHeader","ItemFooter"],"sources":["../../../../src/ui/components/ui/item.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\n\n/**\n * リスト形式のアイテムをグループ化するコンテナコンポーネント。\n */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      role='list'\n      data-slot='item-group'\n      className={cn(\n        'gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムグループ内のアイテム同士を区切るためのセパレーター（区切り線）。\n */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot='item-separator'\n      orientation='horizontal'\n      className={cn('my-2', className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  '[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent',\n        outline: 'border-border',\n        muted: 'bg-muted/50 border-transparent',\n      },\n      size: {\n        default: 'gap-2.5 px-3 py-2.5',\n        sm: 'gap-2.5 px-3 py-2.5',\n        xs: 'gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * リストやグリッド内の個々のアイテムを表す基本コンポーネント。\n */\nfunction Item({\n  className,\n  variant = 'default',\n  size = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'item',\n      variant,\n      size,\n    },\n  });\n}\n\nconst itemMediaVariants = cva(\n  'gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\n/**\n * アイテム内のアバター、アイコン、画像などのメディア要素を表示するコンポーネント。\n */\nfunction ItemMedia({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot='item-media'\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテム内のコンテンツ（タイトルや説明など）を格納するコンテナ。\n */\nfunction ItemContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-content'\n      className={cn(\n        'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムのタイトル。\n */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-title'\n      className={cn(\n        'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムの補助的な説明テキスト。\n */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot='item-description'\n      className={cn(\n        'text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムに関連するアクションボタンや操作子を配置するコンポーネント。\n */\nfunction ItemActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot='item-actions' className={cn('gap-2 flex items-center', className)} {...props} />\n  );\n}\n\n/**\n * アイテムの上部にメタ情報などを配置するヘッダー領域。\n */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-header'\n      className={cn('gap-2 flex basis-full items-center justify-between', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムの下部にメタ情報やアクションを配置するフッター領域。\n */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-footer'\n      className={cn('gap-2 flex basis-full items-center justify-between', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n"],"mappings":";;;;;;;;;AAWA,SAASA,EAAU,EAAE,cAAW,GAAGC,KAAsC;CACvE,OACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAWC,EACT,uGACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASG,EAAc,EAAE,cAAW,GAAGH,KAAiD;CACtF,OACE,kBAACI,GAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAWH,EAAG,QAAQC,CAAS;EAC/B,GAAIF;CACL,CAAA;AAEL;AAEA,IAAMK,IAAeC,EACnB,8OACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAKA,SAASC,EAAK,EACZ,cACA,aAAU,WACV,UAAO,WACP,WACA,GAAGP,KACmE;CACtE,OAAOQ,EAAU;EACf,gBAAgB;EAChB,OAAOC,EACL,EACE,WAAWR,EAAGI,EAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC,EAC1D,GACAL,CACF;EACA;EACA,OAAO;GACL,MAAM;GACN;GACA;EACF;CACF,CAAC;AACH;AAEA,IAAMU,IAAoBJ,EACxB,sMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAKA,SAASK,EAAU,EACjB,cACA,aAAU,WACV,GAAGX,KACoE;CACvE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAcY;EACd,WAAWX,EAAGS,EAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EACvD,GAAIV;CACL,CAAA;AAEL;AAKA,SAASa,EAAY,EAAE,cAAW,GAAGb,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,qGACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASc,EAAU,EAAE,cAAW,GAAGd,KAAsC;CACvE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,kGACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASe,EAAgB,EAAE,cAAW,GAAGf,KAAoC;CAC3E,OACE,kBAAC,KAAD;EACE,aAAU;EACV,WAAWC,EACT,uLACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASgB,EAAY,EAAE,cAAW,GAAGhB,KAAsC;CACzE,OACE,kBAAC,OAAD;EAAK,aAAU;EAAe,WAAWC,EAAG,2BAA2BC,CAAS;EAAG,GAAIF;CAAQ,CAAA;AAEnG;AAKA,SAASiB,EAAW,EAAE,cAAW,GAAGjB,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,sDAAsDC,CAAS;EAC7E,GAAIF;CACL,CAAA;AAEL;AAKA,SAASkB,EAAW,EAAE,cAAW,GAAGlB,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,sDAAsDC,CAAS;EAC7E,GAAIF;CACL,CAAA;AAEL"}
+{"version":3,"file":"item.js","names":["ItemGroup","props","cn","className","ItemSeparator","Separator","itemVariants","cva","Item","useRender","mergeProps","itemMediaVariants","ItemMedia","variant","ItemContent","ItemTitle","ItemDescription","ItemActions","ItemHeader","ItemFooter"],"sources":["../../../../src/ui/components/ui/item.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\n\n/**\n * Renders a list-role container for vertically arranged item cards.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      role='list'\n      data-slot='item-group'\n      className={cn(\n        'gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Draws a horizontal divider between item cards.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot='item-separator'\n      orientation='horizontal'\n      className={cn('my-2', className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  '[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors',\n  {\n    variants: {\n      /**\n       * Visual treatment selected by the consumer; these values change CSS classes only.\n       * Accepted values: default, outline, muted.\n       * @defaultValue 'default'\n       * @see itemVariants\n       */\n      variant: {\n        default: 'border-transparent',\n        outline: 'border-border',\n        muted: 'bg-muted/50 border-transparent',\n      },\n      /**\n       * Control size preset selected by the consumer; sizes are class-based rather than numeric dimensions.\n       * Accepted values: default, sm, xs.\n       * @defaultValue 'default'\n       * @see itemVariants\n       */\n      size: {\n        default: 'gap-2.5 px-3 py-2.5',\n        sm: 'gap-2.5 px-3 py-2.5',\n        xs: 'gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Renders a list-item surface with configurable size, border treatment and render element.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default', size='default'.\n * @returns The rendered Item composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction Item({\n  className,\n  variant = 'default',\n  size = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'item',\n      variant,\n      size,\n    },\n  });\n}\n\nconst itemMediaVariants = cva(\n  'gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none',\n  {\n    variants: {\n      /**\n       * Visual treatment selected by the consumer; these values change CSS classes only.\n       * Accepted values: default, icon, image.\n       * @defaultValue 'default'\n       * @see itemMediaVariants\n       */\n      variant: {\n        default: 'bg-transparent',\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\n/**\n * Styles leading media as plain content, an icon or a cropped image.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.\n * @returns The rendered ItemMedia composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemMedia({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot='item-media'\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/**\n * Arranges an item title and supporting content in a flexible column.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-content'\n      className={cn(\n        'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles a single-line item title.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemTitle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-title'\n      className={cn(\n        'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles a two-line item description and embedded links.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemDescription composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot='item-description'\n      className={cn(\n        'text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Aligns host-provided item action controls.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemActions composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot='item-actions' className={cn('gap-2 flex items-center', className)} {...props} />\n  );\n}\n\n/**\n * Lays out full-width metadata above the main item content.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemHeader composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-header'\n      className={cn('gap-2 flex basis-full items-center justify-between', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Lays out full-width metadata or controls below item content.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemFooter composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-footer'\n      className={cn('gap-2 flex basis-full items-center justify-between', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n"],"mappings":";;;;;;;;;AAuBA,SAASA,EAAU,EAAE,cAAW,GAAGC,KAAsC;CACvE,OACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAWC,EACT,uGACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASG,EAAc,EAAE,cAAW,GAAGH,KAAiD;CACtF,OACE,kBAACI,GAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAWH,EAAG,QAAQC,CAAS;EAC/B,GAAIF;CACL,CAAA;AAEL;AAEA,IAAMK,IAAeC,EACnB,8OACA;CACE,UAAU;EAOR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EAOA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAiBA,SAASC,EAAK,EACZ,cACA,aAAU,WACV,UAAO,WACP,WACA,GAAGP,KACmE;CACtE,OAAOQ,EAAU;EACf,gBAAgB;EAChB,OAAOC,EACL,EACE,WAAWR,EAAGI,EAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC,EAC1D,GACAL,CACF;EACA;EACA,OAAO;GACL,MAAM;GACN;GACA;EACF;CACF,CAAC;AACH;AAEA,IAAMU,IAAoBJ,EACxB,sMACA;CACE,UAAU,EAOR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAiBA,SAASK,EAAU,EACjB,cACA,aAAU,WACV,GAAGX,KACoE;CACvE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAcY;EACd,WAAWX,EAAGS,EAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EACvD,GAAIV;CACL,CAAA;AAEL;AAiBA,SAASa,EAAY,EAAE,cAAW,GAAGb,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,qGACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASc,EAAU,EAAE,cAAW,GAAGd,KAAsC;CACvE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,kGACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASe,EAAgB,EAAE,cAAW,GAAGf,KAAoC;CAC3E,OACE,kBAAC,KAAD;EACE,aAAU;EACV,WAAWC,EACT,uLACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASgB,EAAY,EAAE,cAAW,GAAGhB,KAAsC;CACzE,OACE,kBAAC,OAAD;EAAK,aAAU;EAAe,WAAWC,EAAG,2BAA2BC,CAAS;EAAG,GAAIF;CAAQ,CAAA;AAEnG;AAiBA,SAASiB,EAAW,EAAE,cAAW,GAAGjB,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,sDAAsDC,CAAS;EAC7E,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASkB,EAAW,EAAE,cAAW,GAAGlB,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,sDAAsDC,CAAS;EAC7E,GAAIF;CACL,CAAA;AAEL"}

package/dist/ui/components/ui/kbd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"kbd.cjs","names":["cn","require_ui_lib_utils","react_jsx_runtime","Kbd","props","className","KbdGroup"],"sources":["../../../../src/ui/components/ui/kbd.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\n/**\n * キーボードショートカットのキー（例: Ctrl, Enter）を表示するためのコンポーネント。\n */\nfunction Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {\n  return (\n    <kbd\n      data-slot='kbd'\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 複数のショートカットキーの組み合わせを表示するグループコンポーネント。\n */\nfunction KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <kbd\n      data-slot='kbd-group'\n      className={cn('gap-1 inline-flex items-center', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":"A,0JAKA,SAASG,EAAI,CAAE,YAAW,GAAGC,GAAsC,CACjE,OACE,EAAAF,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,MACV,UAAWF,EAAAA,GACT,2WACAK,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAKA,SAASE,EAAS,CAAE,YAAW,GAAGF,GAAsC,CACtE,OACE,EAAAF,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,YACV,UAAWF,EAAAA,GAAG,iCAAkCK,CAAS,EACzD,GAAID,CACL,CAAA,CAEL,C"}
+{"version":3,"file":"kbd.cjs","names":["cn","require_ui_lib_utils","react_jsx_runtime","Kbd","props","className","KbdGroup"],"sources":["../../../../src/ui/components/ui/kbd.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\n/**\n * Displays the name of a keyboard key without registering a shortcut.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Kbd composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These components only render hints; the host owns keyboard event handling. KbdGroup is typed with div props but renders kbd, so avoid relying on div-specific ref or DOM behavior.\n * @example\n * ```tsx\n * import { Kbd, KbdGroup } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd></KbdGroup>);\n * }\n * ```\n */\nfunction Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {\n  return (\n    <kbd\n      data-slot='kbd'\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Arranges multiple visual keycaps inside a kbd element.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered KbdGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These components only render hints; the host owns keyboard event handling. KbdGroup is typed with div props but renders kbd, so avoid relying on div-specific ref or DOM behavior.\n * @example\n * ```tsx\n * import { Kbd, KbdGroup } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd></KbdGroup>);\n * }\n * ```\n */\nfunction KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <kbd\n      data-slot='kbd-group'\n      className={cn('gap-1 inline-flex items-center', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":"A,0JAiBA,SAASG,EAAI,CAAE,YAAW,GAAGC,GAAsC,CACjE,OACE,EAAAF,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,MACV,UAAWF,EAAAA,GACT,2WACAK,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAiBA,SAASE,EAAS,CAAE,YAAW,GAAGF,GAAsC,CACtE,OACE,EAAAF,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,YACV,UAAWF,EAAAA,GAAG,iCAAkCK,CAAS,EACzD,GAAID,CACL,CAAA,CAEL,C"}

package/dist/ui/components/ui/kbd.d.cts

@@ -1,9 +1,33 @@
 /**
- * キーボードショートカットのキー（例: Ctrl, Enter）を表示するためのコンポーネント。
+ * Displays the name of a keyboard key without registering a shortcut.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered Kbd composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These components only render hints; the host owns keyboard event handling. KbdGroup is typed with div props but renders kbd, so avoid relying on div-specific ref or DOM behavior.
+ * @example
+ * ```tsx
+ * import { Kbd, KbdGroup } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd></KbdGroup>);
+ * }
+ * ```
  */
 declare function Kbd({ className, ...props }: React.ComponentProps<'kbd'>): import('react').JSX.Element;
 /**
- * 複数のショートカットキーの組み合わせを表示するグループコンポーネント。
+ * Arranges multiple visual keycaps inside a kbd element.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered KbdGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These components only render hints; the host owns keyboard event handling. KbdGroup is typed with div props but renders kbd, so avoid relying on div-specific ref or DOM behavior.
+ * @example
+ * ```tsx
+ * import { Kbd, KbdGroup } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd></KbdGroup>);
+ * }
+ * ```
  */
 declare function KbdGroup({ className, ...props }: React.ComponentProps<'div'>): import('react').JSX.Element;
 export { Kbd, KbdGroup };

package/dist/ui/components/ui/kbd.d.ts

@@ -1,9 +1,33 @@
 /**
- * キーボードショートカットのキー（例: Ctrl, Enter）を表示するためのコンポーネント。
+ * Displays the name of a keyboard key without registering a shortcut.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered Kbd composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These components only render hints; the host owns keyboard event handling. KbdGroup is typed with div props but renders kbd, so avoid relying on div-specific ref or DOM behavior.
+ * @example
+ * ```tsx
+ * import { Kbd, KbdGroup } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd></KbdGroup>);
+ * }
+ * ```
  */
 declare function Kbd({ className, ...props }: React.ComponentProps<'kbd'>): import('react').JSX.Element;
 /**
- * 複数のショートカットキーの組み合わせを表示するグループコンポーネント。
+ * Arranges multiple visual keycaps inside a kbd element.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered KbdGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These components only render hints; the host owns keyboard event handling. KbdGroup is typed with div props but renders kbd, so avoid relying on div-specific ref or DOM behavior.
+ * @example
+ * ```tsx
+ * import { Kbd, KbdGroup } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd></KbdGroup>);
+ * }
+ * ```
  */
 declare function KbdGroup({ className, ...props }: React.ComponentProps<'div'>): import('react').JSX.Element;
 export { Kbd, KbdGroup };

package/dist/ui/components/ui/kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"kbd.js","names":["Kbd","props","cn","className","KbdGroup"],"sources":["../../../../src/ui/components/ui/kbd.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\n/**\n * キーボードショートカットのキー（例: Ctrl, Enter）を表示するためのコンポーネント。\n */\nfunction Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {\n  return (\n    <kbd\n      data-slot='kbd'\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 複数のショートカットキーの組み合わせを表示するグループコンポーネント。\n */\nfunction KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <kbd\n      data-slot='kbd-group'\n      className={cn('gap-1 inline-flex items-center', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":";;;;AAKA,SAASA,EAAI,EAAE,cAAW,GAAGC,KAAsC;CACjE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,4WACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASG,EAAS,EAAE,cAAW,GAAGH,KAAsC;CACtE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,kCAAkCC,CAAS;EACzD,GAAIF;CACL,CAAA;AAEL"}
+{"version":3,"file":"kbd.js","names":["Kbd","props","cn","className","KbdGroup"],"sources":["../../../../src/ui/components/ui/kbd.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\n/**\n * Displays the name of a keyboard key without registering a shortcut.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Kbd composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These components only render hints; the host owns keyboard event handling. KbdGroup is typed with div props but renders kbd, so avoid relying on div-specific ref or DOM behavior.\n * @example\n * ```tsx\n * import { Kbd, KbdGroup } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd></KbdGroup>);\n * }\n * ```\n */\nfunction Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {\n  return (\n    <kbd\n      data-slot='kbd'\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Arranges multiple visual keycaps inside a kbd element.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered KbdGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These components only render hints; the host owns keyboard event handling. KbdGroup is typed with div props but renders kbd, so avoid relying on div-specific ref or DOM behavior.\n * @example\n * ```tsx\n * import { Kbd, KbdGroup } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd></KbdGroup>);\n * }\n * ```\n */\nfunction KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <kbd\n      data-slot='kbd-group'\n      className={cn('gap-1 inline-flex items-center', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":";;;;AAiBA,SAASA,EAAI,EAAE,cAAW,GAAGC,KAAsC;CACjE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,4WACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASG,EAAS,EAAE,cAAW,GAAGH,KAAsC;CACtE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,kCAAkCC,CAAS;EACzD,GAAIF;CACL,CAAA;AAEL"}

package/dist/ui/components/ui/label.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"label.cjs","names":["React","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Label","props","className"],"sources":["../../../../src/ui/components/ui/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\nconst Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(\n  ({ className, ...props }, ref) => (\n    <label\n      ref={ref}\n      data-slot='label'\n      className={cn(\n        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nLabel.displayName = 'Label';\n\nexport { Label };\n"],"mappings":"A,gQAMA,IAAMM,EAAQN,EAAM,YACjB,CAAE,YAAW,GAAGO,GAAS,KACxB,EAAAH,EAAA,IAAA,CAAC,QAAD,CACO,MACL,YAAU,QACV,UAAWH,EAAAA,GACT,sNACAO,CACF,EACA,GAAID,CACL,CAAA,CAEL,EACA,EAAM,YAAc,Q"}
+{"version":3,"file":"label.cjs","names":["React","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Label","props","className"],"sources":["../../../../src/ui/components/ui/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a styled native label for an explicitly associated form control.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Label composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use htmlFor matching a control id, or wrap the control as native label semantics permit. This component does not allocate IDs or supply a form context. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Label, Input } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><Label htmlFor=\"name\">Name</Label><Input id=\"name\" /></>);\n * }\n * ```\n */\nconst Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(\n  ({ className, ...props }, ref) => (\n    <label\n      ref={ref}\n      data-slot='label'\n      className={cn(\n        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nLabel.displayName = 'Label';\n\nexport { Label };\n"],"mappings":"A,gQAqBA,IAAMM,EAAQN,EAAM,YACjB,CAAE,YAAW,GAAGO,GAAS,KACxB,EAAAH,EAAA,IAAA,CAAC,QAAD,CACO,MACL,YAAU,QACV,UAAWH,EAAAA,GACT,sNACAO,CACF,EACA,GAAID,CACL,CAAA,CAEL,EACA,EAAM,YAAc,Q"}

package/dist/ui/components/ui/label.d.cts

@@ -1,3 +1,18 @@
 import * as React from 'react';
+/**
+ * Renders a styled native label for an explicitly associated form control.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered Label composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use htmlFor matching a control id, or wrap the control as native label semantics permit. This component does not allocate IDs or supply a form context. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Label, Input } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><Label htmlFor="name">Name</Label><Input id="name" /></>);
+ * }
+ * ```
+ */
 declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

package/dist/ui/components/ui/label.d.ts

@@ -1,3 +1,18 @@
 import * as React from 'react';
+/**
+ * Renders a styled native label for an explicitly associated form control.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered Label composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Use htmlFor matching a control id, or wrap the control as native label semantics permit. This component does not allocate IDs or supply a form context. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Label, Input } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><Label htmlFor="name">Name</Label><Input id="name" /></>);
+ * }
+ * ```
+ */
 declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

package/dist/ui/components/ui/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":["React","React$1","Label","props","cn","className"],"sources":["../../../../src/ui/components/ui/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\nconst Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(\n  ({ className, ...props }, ref) => (\n    <label\n      ref={ref}\n      data-slot='label'\n      className={cn(\n        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nLabel.displayName = 'Label';\n\nexport { Label };\n"],"mappings":";;;;;;AAMA,IAAME,IAAQF,EAAM,YACjB,EAAE,cAAW,GAAGG,KAAS,MACxB,kBAAC,SAAD;CACO;CACL,aAAU;CACV,WAAWC,EACT,uNACAC,CACF;CACA,GAAIF;AACL,CAAA,CAEL;AACA,EAAM,cAAc"}
+{"version":3,"file":"label.js","names":["React","React$1","Label","props","cn","className"],"sources":["../../../../src/ui/components/ui/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a styled native label for an explicitly associated form control.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Label composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use htmlFor matching a control id, or wrap the control as native label semantics permit. This component does not allocate IDs or supply a form context. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Label, Input } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><Label htmlFor=\"name\">Name</Label><Input id=\"name\" /></>);\n * }\n * ```\n */\nconst Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(\n  ({ className, ...props }, ref) => (\n    <label\n      ref={ref}\n      data-slot='label'\n      className={cn(\n        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nLabel.displayName = 'Label';\n\nexport { Label };\n"],"mappings":";;;;;;AAqBA,IAAME,IAAQF,EAAM,YACjB,EAAE,cAAW,GAAGG,KAAS,MACxB,kBAAC,SAAD;CACO;CACL,aAAU;CACV,WAAWC,EACT,uNACAC,CACF;CACA,GAAIF;AACL,CAAA,CAEL;AACA,EAAM,cAAc"}

package/dist/ui/components/ui/layout.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i=r.forwardRef(({className:e,header:r,footer:i,leftSidebar:a,rightPane:o,children:s,isLeftSidebarCollapsed:c=!1,isRightPaneVisible:l=!0,scrollable:u=!0,selectable:d=!0,headerPosition:f=`top`,...p},m)=>{let h=r&&(0,n.jsx)(`div`,{className:`flex-none z-10 w-full`,children:r}),g=i&&(0,n.jsx)(`div`,{className:`flex-none z-10 w-full`,children:i}),_=a,v=o&&l&&(0,n.jsx)(`aside`,{className:`flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none`,children:o}),y=(0,n.jsx)(`main`,{className:t.cn(`flex-1 min-w-0 flex flex-col`,u?`overflow-y-auto`:`overflow-hidden`,!d&&`select-none`),children:s});return f===`right-of-sidebar`?(0,n.jsxs)(`div`,{ref:m,className:t.cn(`flex h-screen w-screen overflow-hidden bg-background text-foreground`,e),...p,children:[_,(0,n.jsxs)(`div`,{className:`flex flex-col flex-1 min-w-0 overflow-hidden`,children:[h,(0,n.jsxs)(`div`,{className:`flex flex-1 overflow-hidden relative`,children:[y,v]}),g]})]}):(0,n.jsxs)(`div`,{ref:m,className:t.cn(`flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground`,e),...p,children:[h,(0,n.jsxs)(`div`,{className:`flex flex-1 overflow-hidden relative`,children:[_,y,v]}),g]})});i.displayName=`Layout`,exports.Layout=i;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i=r.forwardRef(({className:e,header:r,footer:i,leftSidebar:a,rightPane:o,children:s,isLeftSidebarCollapsed:c=!1,isRightPaneVisible:l=!0,scrollable:u=!0,"aria-label":d=`Main content`,selectable:f=!0,headerPosition:p=`top`,...m},h)=>{let g=r&&(0,n.jsx)(`div`,{className:`flex-none z-10 w-full`,children:r}),_=i&&(0,n.jsx)(`div`,{className:`flex-none z-10 w-full`,children:i}),v=a,y=o&&l&&(0,n.jsx)(`aside`,{className:`flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none`,children:o}),b=(0,n.jsx)(`main`,{"aria-label":d,tabIndex:u?0:void 0,className:t.cn(`flex-1 min-w-0 flex flex-col`,u?`overflow-y-auto`:`overflow-hidden`,!f&&`select-none`),children:s});return p===`right-of-sidebar`?(0,n.jsxs)(`div`,{ref:h,className:t.cn(`flex h-screen w-screen overflow-hidden bg-background text-foreground`,e),...m,children:[v,(0,n.jsxs)(`div`,{className:`flex flex-col flex-1 min-w-0 overflow-hidden`,children:[g,(0,n.jsxs)(`div`,{className:`flex flex-1 overflow-hidden relative`,children:[b,y]}),_]})]}):(0,n.jsxs)(`div`,{ref:h,className:t.cn(`flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground`,e),...m,children:[g,(0,n.jsxs)(`div`,{className:`flex flex-1 overflow-hidden relative`,children:[v,b,y]}),_]})});i.displayName=`Layout`,exports.Layout=i;
 //# sourceMappingURL=layout.cjs.map

package/dist/ui/components/ui/layout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"layout.cjs","names":["React","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Layout","_isLeftSidebarCollapsed","props","HeaderContent","header","FooterContent","footer","SidebarContent","leftSidebar","RightPaneContent","rightPane","isRightPaneVisible","MainContent","scrollable","selectable","headerPosition","className"],"sources":["../../../../src/ui/components/ui/layout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/utils';\n\nexport interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Fixed header content */\n  header?: React.ReactNode;\n  /** Fixed footer content */\n  footer?: React.ReactNode;\n  /** Left sidebar content */\n  leftSidebar?: React.ReactNode;\n  /** Right pane content */\n  rightPane?: React.ReactNode;\n  /** Whether the left sidebar is collapsed (affects width helper if used, though usually controlled by the sidebar component itself) */\n  isLeftSidebarCollapsed?: boolean;\n  /** Whether the right pane is visible */\n  isRightPaneVisible?: boolean;\n  /** Whether the main area is scrollable (overflow-y-auto). Default: true */\n  scrollable?: boolean;\n  /** Whether the main area text is selectable. Default: true */\n  selectable?: boolean;\n  /** Position of the header. 'top' (default) puts sidebar below header. 'right-of-sidebar' puts header to the right of sidebar. */\n  headerPosition?: 'top' | 'right-of-sidebar';\n}\n\n/**\n * A flexible layout component with fixed header/footer and growing main area.\n * Uses Flexbox for layout (h-screen, flex-col, flex-1) rather than sticky positioning.\n */\nexport const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(\n  (\n    {\n      className,\n      header,\n      footer,\n      leftSidebar,\n      rightPane,\n      children,\n      isLeftSidebarCollapsed: _isLeftSidebarCollapsed = false,\n      isRightPaneVisible = true,\n      scrollable = true,\n      selectable = true,\n      headerPosition = 'top',\n      ...props\n    },\n    ref,\n  ) => {\n    const HeaderContent = header && <div className='flex-none z-10 w-full'>{header}</div>;\n\n    const FooterContent = footer && <div className='flex-none z-10 w-full'>{footer}</div>;\n\n    // Render sidebar directly without aside wrapper - Sidebar component has its own container structure\n    const SidebarContent = leftSidebar;\n\n    const RightPaneContent = rightPane && isRightPaneVisible && (\n      <aside className='flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none'>\n        {rightPane}\n      </aside>\n    );\n\n    const MainContent = (\n      <main\n        className={cn(\n          'flex-1 min-w-0 flex flex-col',\n          scrollable ? 'overflow-y-auto' : 'overflow-hidden',\n          !selectable && 'select-none',\n        )}\n      >\n        {children}\n      </main>\n    );\n\n    if (headerPosition === 'right-of-sidebar') {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'flex h-screen w-screen overflow-hidden bg-background text-foreground',\n            className,\n          )}\n          {...props}\n        >\n          {SidebarContent}\n          <div className='flex flex-col flex-1 min-w-0 overflow-hidden'>\n            {HeaderContent}\n            <div className='flex flex-1 overflow-hidden relative'>\n              {MainContent}\n              {RightPaneContent}\n            </div>\n            {FooterContent}\n          </div>\n        </div>\n      );\n    }\n\n    // Default: headerPosition === 'top'\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground',\n          className,\n        )}\n        {...props}\n      >\n        {HeaderContent}\n        <div className='flex flex-1 overflow-hidden relative'>\n          {SidebarContent}\n          {MainContent}\n          {RightPaneContent}\n        </div>\n        {FooterContent}\n      </div>\n    );\n  },\n);\nLayout.displayName = 'Layout';\n"],"mappings":"A,mPA4BA,IAAaM,EAASN,EAAM,YAExB,CACE,YACA,SACA,SACA,cACA,YACA,WACA,uBAAwBO,EAA0B,GAClD,qBAAqB,GACrB,aAAa,GACb,aAAa,GACb,iBAAiB,MACjB,GAAGC,GAEL,IACG,CACH,IAAMC,EAAgBC,IAAU,EAAAN,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBAAyB,SAAAM,CAAY,CAAA,EAE9EC,EAAgBC,IAAU,EAAAR,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBAAyB,SAAAQ,CAAY,CAAA,EAG9EC,EAAiBC,EAEjBC,EAAmBC,GAAaC,IACpC,EAAAb,EAAA,IAAA,CAAC,QAAD,CAAO,UAAU,qJACd,SAAAY,CACI,CAAA,EAGHE,GACJ,EAAAd,EAAA,IAAA,CAAC,OAAD,CACE,UAAWH,EAAAA,GACT,+BACAkB,EAAa,kBAAoB,kBACjC,CAACC,GAAc,aACjB,EAEC,UACG,CAAA,EA2BR,OAxBIC,IAAmB,oBAEnB,EAAAjB,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,uEACAqB,CACF,EACA,GAAId,EANN,SAAA,CAQGK,GACD,EAAAT,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+CAAf,SAAA,CACGK,GACD,EAAAL,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CACGc,EACAH,CACE,C,GACJJ,CACE,CACF,CAAA,CAAA,C,IAMP,EAAAP,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,gFACAqB,CACF,EACA,GAAId,EANN,SAAA,CAQGC,GACD,EAAAL,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CACGS,EACAK,EACAH,CACE,C,GACJJ,CACE,C,EAET,CACF,EACA,EAAO,YAAc,S"}
+{"version":3,"file":"layout.cjs","names":["React","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Layout","_isLeftSidebarCollapsed","mainLabel","props","HeaderContent","header","FooterContent","footer","SidebarContent","leftSidebar","RightPaneContent","rightPane","isRightPaneVisible","MainContent","scrollable","selectable","headerPosition","className"],"sources":["../../../../src/ui/components/ui/layout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/utils';\n\n/**\n * Viewport regions and flex/scroll options for Layout.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Layout\n */\nexport interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content in the non-scrolling top flex region; omitted means no header.\n   */\n  header?: React.ReactNode;\n  /**\n   * Content in the non-scrolling bottom flex region; omitted means no footer.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Sidebar element rendered directly; it controls its own width and collapse behavior.\n   */\n  leftSidebar?: React.ReactNode;\n  /**\n   * Optional content in the right aside, visible when isRightPaneVisible is true.\n   */\n  rightPane?: React.ReactNode;\n  /**\n   * Compatibility flag accepted but ignored by Layout; it does not change sidebar width.\n   */\n  isLeftSidebarCollapsed?: boolean;\n  /**\n   * Whether rightPane is mounted; defaults to true.\n   */\n  isRightPaneVisible?: boolean;\n  /**\n   * Enables overflow-y-auto on the main area; defaults to true.\n   */\n  scrollable?: boolean;\n  /**\n   * Allows main-area text selection; defaults to true, false adds select-none.\n   */\n  selectable?: boolean;\n  /**\n   * top places header above sidebar; right-of-sidebar places it beside sidebar. Defaults to top.\n   */\n  headerPosition?: 'top' | 'right-of-sidebar';\n}\n\n/**\n * Divides the viewport into fixed flex header/footer, a growing main area and optional side panes.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: _isLeftSidebarCollapsed=false, isRightPaneVisible=true, scrollable=true, selectable=true, headerPosition='top'.\n * @returns The rendered Layout composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The root uses h-screen/w-screen and clips overflow. scrollable and selectable default to true; the right pane overlays content below lg and sits in normal layout from lg. headerPosition defaults to top; right-of-sidebar moves header/footer beside the sidebar. isLeftSidebarCollapsed is accepted but ignored; the supplied sidebar owns its own collapse behavior. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Layout } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Layout header={<header>Project</header>} footer={<footer>Status</footer>} leftSidebar={<nav>Navigation</nav>} rightPane={<aside>Details</aside>}><p>Main content</p></Layout>);\n * }\n * ```\n */\nexport const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(\n  (\n    {\n      className,\n      header,\n      footer,\n      leftSidebar,\n      rightPane,\n      children,\n      isLeftSidebarCollapsed: _isLeftSidebarCollapsed = false,\n      isRightPaneVisible = true,\n      scrollable = true,\n      'aria-label': mainLabel = 'Main content',\n      selectable = true,\n      headerPosition = 'top',\n      ...props\n    },\n    ref,\n  ) => {\n    const HeaderContent = header && <div className='flex-none z-10 w-full'>{header}</div>;\n\n    const FooterContent = footer && <div className='flex-none z-10 w-full'>{footer}</div>;\n\n    // Render sidebar directly without aside wrapper - Sidebar component has its own container structure\n    const SidebarContent = leftSidebar;\n\n    const RightPaneContent = rightPane && isRightPaneVisible && (\n      <aside className='flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none'>\n        {rightPane}\n      </aside>\n    );\n\n    const MainContent = (\n      <main\n        aria-label={mainLabel}\n        tabIndex={scrollable ? 0 : undefined}\n        className={cn(\n          'flex-1 min-w-0 flex flex-col',\n          scrollable ? 'overflow-y-auto' : 'overflow-hidden',\n          !selectable && 'select-none',\n        )}\n      >\n        {children}\n      </main>\n    );\n\n    if (headerPosition === 'right-of-sidebar') {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'flex h-screen w-screen overflow-hidden bg-background text-foreground',\n            className,\n          )}\n          {...props}\n        >\n          {SidebarContent}\n          <div className='flex flex-col flex-1 min-w-0 overflow-hidden'>\n            {HeaderContent}\n            <div className='flex flex-1 overflow-hidden relative'>\n              {MainContent}\n              {RightPaneContent}\n            </div>\n            {FooterContent}\n          </div>\n        </div>\n      );\n    }\n\n    // Default: headerPosition === 'top'\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground',\n          className,\n        )}\n        {...props}\n      >\n        {HeaderContent}\n        <div className='flex flex-1 overflow-hidden relative'>\n          {SidebarContent}\n          {MainContent}\n          {RightPaneContent}\n        </div>\n        {FooterContent}\n      </div>\n    );\n  },\n);\nLayout.displayName = 'Layout';\n"],"mappings":"A,mPA8DA,IAAaM,EAASN,EAAM,YAExB,CACE,YACA,SACA,SACA,cACA,YACA,WACA,uBAAwBO,EAA0B,GAClD,qBAAqB,GACrB,aAAa,GACb,aAAcC,EAAY,eAC1B,aAAa,GACb,iBAAiB,MACjB,GAAGC,GAEL,IACG,CACH,IAAMC,EAAgBC,IAAU,EAAAP,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBAAyB,SAAAO,CAAY,CAAA,EAE9EC,EAAgBC,IAAU,EAAAT,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBAAyB,SAAAS,CAAY,CAAA,EAG9EC,EAAiBC,EAEjBC,EAAmBC,GAAaC,IACpC,EAAAd,EAAA,IAAA,CAAC,QAAD,CAAO,UAAU,qJACd,SAAAa,CACI,CAAA,EAGHE,GACJ,EAAAf,EAAA,IAAA,CAAC,OAAD,CACE,aAAYI,EACZ,SAAUY,EAAa,EAAI,IAAA,GAC3B,UAAWnB,EAAAA,GACT,+BACAmB,EAAa,kBAAoB,kBACjC,CAACC,GAAc,aACjB,EAEC,UACG,CAAA,EA2BR,OAxBIC,IAAmB,oBAEnB,EAAAlB,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,uEACAsB,CACF,EACA,GAAId,EANN,SAAA,CAQGK,GACD,EAAAV,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+CAAf,SAAA,CACGM,GACD,EAAAN,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CACGe,EACAH,CACE,C,GACJJ,CACE,CACF,CAAA,CAAA,C,IAMP,EAAAR,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,gFACAsB,CACF,EACA,GAAId,EANN,SAAA,CAQGC,GACD,EAAAN,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CACGU,EACAK,EACAH,CACE,C,GACJJ,CACE,C,EAET,CACF,EACA,EAAO,YAAc,S"}

package/dist/ui/components/ui/layout.d.cts

@@ -1,26 +1,60 @@
 import * as React from 'react';
+/**
+ * Viewport regions and flex/scroll options for Layout.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see Layout
+ */
 export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Fixed header content */
+    /**
+     * Content in the non-scrolling top flex region; omitted means no header.
+     */
     header?: React.ReactNode;
-    /** Fixed footer content */
+    /**
+     * Content in the non-scrolling bottom flex region; omitted means no footer.
+     */
     footer?: React.ReactNode;
-    /** Left sidebar content */
+    /**
+     * Sidebar element rendered directly; it controls its own width and collapse behavior.
+     */
     leftSidebar?: React.ReactNode;
-    /** Right pane content */
+    /**
+     * Optional content in the right aside, visible when isRightPaneVisible is true.
+     */
     rightPane?: React.ReactNode;
-    /** Whether the left sidebar is collapsed (affects width helper if used, though usually controlled by the sidebar component itself) */
+    /**
+     * Compatibility flag accepted but ignored by Layout; it does not change sidebar width.
+     */
     isLeftSidebarCollapsed?: boolean;
-    /** Whether the right pane is visible */
+    /**
+     * Whether rightPane is mounted; defaults to true.
+     */
     isRightPaneVisible?: boolean;
-    /** Whether the main area is scrollable (overflow-y-auto). Default: true */
+    /**
+     * Enables overflow-y-auto on the main area; defaults to true.
+     */
     scrollable?: boolean;
-    /** Whether the main area text is selectable. Default: true */
+    /**
+     * Allows main-area text selection; defaults to true, false adds select-none.
+     */
     selectable?: boolean;
-    /** Position of the header. 'top' (default) puts sidebar below header. 'right-of-sidebar' puts header to the right of sidebar. */
+    /**
+     * top places header above sidebar; right-of-sidebar places it beside sidebar. Defaults to top.
+     */
     headerPosition?: 'top' | 'right-of-sidebar';
 }
 /**
- * A flexible layout component with fixed header/footer and growing main area.
- * Uses Flexbox for layout (h-screen, flex-col, flex-1) rather than sticky positioning.
+ * Divides the viewport into fixed flex header/footer, a growing main area and optional side panes.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: _isLeftSidebarCollapsed=false, isRightPaneVisible=true, scrollable=true, selectable=true, headerPosition='top'.
+ * @returns The rendered Layout composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The root uses h-screen/w-screen and clips overflow. scrollable and selectable default to true; the right pane overlays content below lg and sits in normal layout from lg. headerPosition defaults to top; right-of-sidebar moves header/footer beside the sidebar. isLeftSidebarCollapsed is accepted but ignored; the supplied sidebar owns its own collapse behavior. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Layout } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Layout header={<header>Project</header>} footer={<footer>Status</footer>} leftSidebar={<nav>Navigation</nav>} rightPane={<aside>Details</aside>}><p>Main content</p></Layout>);
+ * }
+ * ```
  */
 export declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;