@alneas/appkit-react 0.1.0 → 0.2.0

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

@@ -1,31 +1,115 @@
 import { useRender } from '@base-ui/react/use-render';
 import * as React from 'react';
 /**
- * パンくずリスト全体のナビゲーションコンテナ。
+ * Renders a breadcrumb navigation landmark labeled breadcrumb by default.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Breadcrumb composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>): React.JSX.Element;
 /**
- * パンくずリスト項目を並べるためのリストコンテナ。
+ * Renders an ordered list of breadcrumb levels.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbList composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): React.JSX.Element;
 /**
- * 各階層を構成するパンくずリストの項目（リスト要素）。
+ * Renders one list item in a breadcrumb trail.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
 /**
- * 遷移可能な上位階層へのリンクコンポーネント。
+ * Renders a breadcrumb anchor or a caller-supplied useRender element.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbLink composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 /**
- * 現在のページを表すテキストコンポーネント（非リンクの最終階層）。
+ * Marks the current breadcrumb as an aria-current page link without navigation.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbPage composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 /**
- * 項目間を区切るためのセパレーター（通常は右矢印などのアイコン）。
+ * Renders a presentation-only separator, defaulting to a right chevron.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
 /**
- * 長いパンくずリストの一部を省略して三点リーダーなどで表示するためのコンポーネント。
+ * Renders a presentation-only overflow marker without expanding hidden items.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbEllipsis composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.  children are replaced by the overflow icon and hidden More text.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

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

@@ -1,31 +1,115 @@
 import { useRender } from '@base-ui/react/use-render';
 import * as React from 'react';
 /**
- * パンくずリスト全体のナビゲーションコンテナ。
+ * Renders a breadcrumb navigation landmark labeled breadcrumb by default.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Breadcrumb composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>): React.JSX.Element;
 /**
- * パンくずリスト項目を並べるためのリストコンテナ。
+ * Renders an ordered list of breadcrumb levels.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbList composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): React.JSX.Element;
 /**
- * 各階層を構成するパンくずリストの項目（リスト要素）。
+ * Renders one list item in a breadcrumb trail.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
 /**
- * 遷移可能な上位階層へのリンクコンポーネント。
+ * Renders a breadcrumb anchor or a caller-supplied useRender element.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbLink composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 /**
- * 現在のページを表すテキストコンポーネント（非リンクの最終階層）。
+ * Marks the current breadcrumb as an aria-current page link without navigation.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbPage composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 /**
- * 項目間を区切るためのセパレーター（通常は右矢印などのアイコン）。
+ * Renders a presentation-only separator, defaulting to a right chevron.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
 /**
- * 長いパンくずリストの一部を省略して三点リーダーなどで表示するためのコンポーネント。
+ * Renders a presentation-only overflow marker without expanding hidden items.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered BreadcrumbEllipsis composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.  children are replaced by the overflow icon and hidden More text.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);
+ * }
+ * ```
  */
 declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","names":["Breadcrumb","props","cn","className","BreadcrumbList","BreadcrumbItem","BreadcrumbLink","useRender","mergeProps","BreadcrumbPage","BreadcrumbSeparator","children","ChevronRight","BreadcrumbEllipsis","MoreHorizontal"],"sources":["../../../../src/ui/components/ui/breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { ChevronRight, MoreHorizontal } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * パンくずリスト全体のナビゲーションコンテナ。\n */\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {\n  return (\n    <nav aria-label='breadcrumb' data-slot='breadcrumb' className={cn(className)} {...props} />\n  );\n}\n\n/**\n * パンくずリスト項目を並べるためのリストコンテナ。\n */\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {\n  return (\n    <ol\n      data-slot='breadcrumb-list'\n      className={cn(\n        'text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center break-words',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 各階層を構成するパンくずリストの項目（リスト要素）。\n */\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot='breadcrumb-item'\n      className={cn('gap-1 inline-flex items-center', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * 遷移可能な上位階層へのリンクコンポーネント。\n */\nfunction BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>) {\n  return useRender({\n    defaultTagName: 'a',\n    props: mergeProps<'a'>(\n      {\n        className: cn('hover:text-foreground transition-colors', className),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'breadcrumb-link',\n    },\n  });\n}\n\n/**\n * 現在のページを表すテキストコンポーネント（非リンクの最終階層）。\n */\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot='breadcrumb-page'\n      role='link'\n      aria-disabled='true'\n      aria-current='page'\n      className={cn('text-foreground font-normal', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * 項目間を区切るためのセパレーター（通常は右矢印などのアイコン）。\n */\nfunction BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot='breadcrumb-separator'\n      role='presentation'\n      aria-hidden='true'\n      className={cn('[&>svg]:size-3.5', className)}\n      {...props}\n    >\n      {children ?? <ChevronRight className='h-4 w-4' />}\n    </li>\n  );\n}\n\n/**\n * 長いパンくずリストの一部を省略して三点リーダーなどで表示するためのコンポーネント。\n */\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot='breadcrumb-ellipsis'\n      role='presentation'\n      aria-hidden='true'\n      className={cn('size-5 [&>svg]:size-4 flex items-center justify-center', className)}\n      {...props}\n    >\n      <MoreHorizontal className='h-4 w-4' />\n      <span className='sr-only'>More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n"],"mappings":";;;;;;;;AAUA,SAASA,EAAW,EAAE,cAAW,GAAGC,KAAsC;CACxE,OACE,kBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,WAAWC,EAAGC,CAAS;EAAG,GAAIF;CAAQ,CAAA;AAE9F;AAKA,SAASG,EAAe,EAAE,cAAW,GAAGH,KAAqC;CAC3E,OACE,kBAAC,MAAD;EACE,aAAU;EACV,WAAWC,EACT,iFACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASI,EAAe,EAAE,cAAW,GAAGJ,KAAqC;CAC3E,OACE,kBAAC,MAAD;EACE,aAAU;EACV,WAAWC,EAAG,kCAAkCC,CAAS;EACzD,GAAIF;CACL,CAAA;AAEL;AAKA,SAASK,EAAe,EAAE,cAAW,WAAQ,GAAGL,KAAwC;CACtF,OAAOM,EAAU;EACf,gBAAgB;EAChB,OAAOC,EACL,EACE,WAAWN,EAAG,2CAA2CC,CAAS,EACpE,GACAF,CACF;EACA;EACA,OAAO,EACL,MAAM,kBACR;CACF,CAAC;AACH;AAKA,SAASQ,EAAe,EAAE,cAAW,GAAGR,KAAuC;CAC7E,OACE,kBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,iBAAc;EACd,gBAAa;EACb,WAAWC,EAAG,+BAA+BC,CAAS;EACtD,GAAIF;CACL,CAAA;AAEL;AAKA,SAASS,EAAoB,EAAE,aAAU,cAAW,GAAGT,KAAqC;CAC1F,OACE,kBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAWC,EAAG,oBAAoBC,CAAS;EAC3C,GAAIF;EAEH,UAAAU,KAAY,kBAACC,GAAD,EAAc,WAAU,UAAW,CAAA;CAC9C,CAAA;AAER;AAKA,SAASC,EAAmB,EAAE,cAAW,GAAGZ,KAAuC;CACjF,OACE,kBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAWC,EAAG,0DAA0DC,CAAS;EACjF,GAAIF;EALN,UAAA,CAOE,kBAACa,GAAD,EAAgB,WAAU,UAAW,CAAA,GACrC,kBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAU,CAAA,CAChC;;AAEV"}
+{"version":3,"file":"breadcrumb.js","names":["Breadcrumb","props","cn","className","BreadcrumbList","BreadcrumbItem","BreadcrumbLink","useRender","mergeProps","BreadcrumbPage","BreadcrumbSeparator","children","ChevronRight","BreadcrumbEllipsis","MoreHorizontal"],"sources":["../../../../src/ui/components/ui/breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { ChevronRight, MoreHorizontal } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a breadcrumb navigation landmark labeled breadcrumb by default.\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 Breadcrumb composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.\n * @example\n * ```tsx\n * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);\n * }\n * ```\n */\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {\n  return (\n    <nav aria-label='breadcrumb' data-slot='breadcrumb' className={cn(className)} {...props} />\n  );\n}\n\n/**\n * Renders an ordered list of breadcrumb levels.\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 BreadcrumbList composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.\n * @example\n * ```tsx\n * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);\n * }\n * ```\n */\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {\n  return (\n    <ol\n      data-slot='breadcrumb-list'\n      className={cn(\n        'text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center break-words',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders one list item in a breadcrumb trail.\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 BreadcrumbItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.\n * @example\n * ```tsx\n * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);\n * }\n * ```\n */\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot='breadcrumb-item'\n      className={cn('gap-1 inline-flex items-center', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders a breadcrumb anchor or a caller-supplied useRender element.\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 BreadcrumbLink composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.\n * @example\n * ```tsx\n * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);\n * }\n * ```\n */\nfunction BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>) {\n  return useRender({\n    defaultTagName: 'a',\n    props: mergeProps<'a'>(\n      {\n        className: cn('hover:text-foreground transition-colors', className),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'breadcrumb-link',\n    },\n  });\n}\n\n/**\n * Marks the current breadcrumb as an aria-current page link without navigation.\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 BreadcrumbPage composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.\n * @example\n * ```tsx\n * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);\n * }\n * ```\n */\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot='breadcrumb-page'\n      role='link'\n      aria-disabled='true'\n      aria-current='page'\n      className={cn('text-foreground font-normal', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders a presentation-only separator, defaulting to a right chevron.\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 BreadcrumbSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.\n * @example\n * ```tsx\n * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);\n * }\n * ```\n */\nfunction BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot='breadcrumb-separator'\n      role='presentation'\n      aria-hidden='true'\n      className={cn('[&>svg]:size-3.5', className)}\n      {...props}\n    >\n      {children ?? <ChevronRight className='h-4 w-4' />}\n    </li>\n  );\n}\n\n/**\n * Renders a presentation-only overflow marker without expanding hidden items.\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 BreadcrumbEllipsis composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns destinations and any overflow menu. Link uses Base UI render composition; custom render elements must accept merged anchor props. Separator and Ellipsis are hidden from assistive technology.  children are replaced by the overflow icon and hidden More text.\n * @example\n * ```tsx\n * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Project</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>);\n * }\n * ```\n */\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot='breadcrumb-ellipsis'\n      role='presentation'\n      aria-hidden='true'\n      className={cn('size-5 [&>svg]:size-4 flex items-center justify-center', className)}\n      {...props}\n    >\n      <MoreHorizontal className='h-4 w-4' />\n      <span className='sr-only'>More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n"],"mappings":";;;;;;;;AAsBA,SAASA,EAAW,EAAE,cAAW,GAAGC,KAAsC;CACxE,OACE,kBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,WAAWC,EAAGC,CAAS;EAAG,GAAIF;CAAQ,CAAA;AAE9F;AAiBA,SAASG,EAAe,EAAE,cAAW,GAAGH,KAAqC;CAC3E,OACE,kBAAC,MAAD;EACE,aAAU;EACV,WAAWC,EACT,iFACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASI,EAAe,EAAE,cAAW,GAAGJ,KAAqC;CAC3E,OACE,kBAAC,MAAD;EACE,aAAU;EACV,WAAWC,EAAG,kCAAkCC,CAAS;EACzD,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASK,EAAe,EAAE,cAAW,WAAQ,GAAGL,KAAwC;CACtF,OAAOM,EAAU;EACf,gBAAgB;EAChB,OAAOC,EACL,EACE,WAAWN,EAAG,2CAA2CC,CAAS,EACpE,GACAF,CACF;EACA;EACA,OAAO,EACL,MAAM,kBACR;CACF,CAAC;AACH;AAiBA,SAASQ,EAAe,EAAE,cAAW,GAAGR,KAAuC;CAC7E,OACE,kBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,iBAAc;EACd,gBAAa;EACb,WAAWC,EAAG,+BAA+BC,CAAS;EACtD,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASS,EAAoB,EAAE,aAAU,cAAW,GAAGT,KAAqC;CAC1F,OACE,kBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAWC,EAAG,oBAAoBC,CAAS;EAC3C,GAAIF;EAEH,UAAAU,KAAY,kBAACC,GAAD,EAAc,WAAU,UAAW,CAAA;CAC9C,CAAA;AAER;AAiBA,SAASC,EAAmB,EAAE,cAAW,GAAGZ,KAAuC;CACjF,OACE,kBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAWC,EAAG,0DAA0DC,CAAS;EACjF,GAAIF;EALN,UAAA,CAOE,kBAACa,GAAD,EAAgB,WAAU,UAAW,CAAA,GACrC,kBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAU,CAAA,CAChC;;AAEV"}

package/dist/ui/components/ui/button-components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-components.cjs","names":["React","ButtonPrimitive","cn","buttonVariants","Loader2","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_variants","react_jsx_runtime","react","lucide_react","_base_ui_react_button","Button","props","testId","loading","variant","disabled","className","state","children"],"sources":["../../../../src/ui/components/ui/button-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { buttonVariants } from './button-variants';\n\n/**\n * Button component props\n * ボタンコンポーネントのプロップス\n */\nexport interface ButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {\n  /**\n   * AI/E2E Test用の安定ID / Stable test identifier for AI and E2E tests\n   */\n  testId?: string;\n  /**\n   * ローディング状態 / Loading state\n   */\n  loading?: boolean;\n}\n\n/**\n * Button Component\n * ボタンコンポーネント\n */\nconst Button = React.forwardRef<HTMLElement, ButtonProps>(\n  ({ className, variant, size, testId, loading, disabled, children, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        data-destructive={variant === 'destructive' || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(buttonVariants({ variant, size }), className(state)) : cn(buttonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading && (\n          <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n        )}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"mappings":"A,uVA4BA,IAAMY,EAASZ,EAAM,YAClB,CAAE,YAAW,UAAS,OAAM,SAAQ,UAAS,WAAU,WAAU,GAAGa,GAAS,KAI1E,EAAAL,EAAA,KAAA,CAACP,EAAAA,OAAD,CACO,MACL,YAAU,SACV,cAAaa,EACb,eAAcC,GAAW,IAAA,GACzB,mBAAkBC,IAAY,eAAiB,IAAA,GAC/C,YAAWD,GAAW,IAAA,GACtB,SAVeE,GAAYF,EAW3B,UAAW,OAAOG,GAAc,WAAa,GAAShB,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,MAAK,CAAC,EAAGe,EAAUC,CAAK,CAAC,EAAIjB,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,OAAM,WAAU,CAAC,CAAC,EAC/J,GAAIU,EATN,SAAA,CAWGE,IACC,EAAAP,EAAA,IAAA,CAACJ,EAAAA,QAAD,CAAS,UAAU,4BAA4B,cAAY,MAAQ,CAAA,EAEpEgB,CACc,C,EAGvB,EACA,EAAO,YAAc,S"}
+{"version":3,"file":"button-components.cjs","names":["React","ButtonPrimitive","cn","buttonVariants","Loader2","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_variants","react_jsx_runtime","react","lucide_react","_base_ui_react_button","Button","props","testId","loading","variant","disabled","className","state","children"],"sources":["../../../../src/ui/components/ui/button-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { buttonVariants } from './button-variants';\n\n/**\n * Base UI button props plus Appkit loading/test selectors and CVA variants.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Button\n */\nexport interface ButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n}\n\n/**\n * Renders a Base UI button with Appkit variants, a stable test ID and an optional loading spinner.\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 Button composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. loading disables the button through disabled || loading and adds aria-busy/data-loading; omission means no spinner. The wrapper does not start or complete asynchronous work. variant and size use buttonVariants defaults (default). Base UI render composition is supported; there is no asChild prop. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Button loading={false} testId=\"save-draft\" onClick={() => console.log(\"Save requested\")}>Save draft</Button>);\n * }\n * ```\n */\nconst Button = React.forwardRef<HTMLElement, ButtonProps>(\n  ({ className, variant, size, testId, loading, disabled, children, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        data-destructive={variant === 'destructive' || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(buttonVariants({ variant, size }), className(state)) : cn(buttonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading && (\n          <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n        )}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"mappings":"A,uVAwCA,IAAMY,EAASZ,EAAM,YAClB,CAAE,YAAW,UAAS,OAAM,SAAQ,UAAS,WAAU,WAAU,GAAGa,GAAS,KAI1E,EAAAL,EAAA,KAAA,CAACP,EAAAA,OAAD,CACO,MACL,YAAU,SACV,cAAaa,EACb,eAAcC,GAAW,IAAA,GACzB,mBAAkBC,IAAY,eAAiB,IAAA,GAC/C,YAAWD,GAAW,IAAA,GACtB,SAVeE,GAAYF,EAW3B,UAAW,OAAOG,GAAc,WAAa,GAAShB,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,MAAK,CAAC,EAAGe,EAAUC,CAAK,CAAC,EAAIjB,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,OAAM,WAAU,CAAC,CAAC,EAC/J,GAAIU,EATN,SAAA,CAWGE,IACC,EAAAP,EAAA,IAAA,CAACJ,EAAAA,QAAD,CAAS,UAAU,4BAA4B,cAAY,MAAQ,CAAA,EAEpEgB,CACc,C,EAGvB,EACA,EAAO,YAAc,S"}

package/dist/ui/components/ui/button-components.d.cts

@@ -3,22 +3,34 @@ import { VariantProps } from 'class-variance-authority';
 import { buttonVariants } from './button-variants.cjs';
 import * as React from 'react';
 /**
- * Button component props
- * ボタンコンポーネントのプロップス
+ * Base UI button props plus Appkit loading/test selectors and CVA variants.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see Button
  */
 export interface ButtonProps extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {
     /**
-     * AI/E2E Test用の安定ID / Stable test identifier for AI and E2E tests
+     * Stable data-testid assigned to the rendered control/container; omitted means no selector.
      */
     testId?: string;
     /**
-     * ローディング状態 / Loading state
+     * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.
      */
     loading?: boolean;
 }
 /**
- * Button Component
- * ボタンコンポーネント
+ * Renders a Base UI button with Appkit variants, a stable test ID and an optional loading spinner.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Button composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. loading disables the button through disabled || loading and adds aria-busy/data-loading; omission means no spinner. The wrapper does not start or complete asynchronous work. variant and size use buttonVariants defaults (default). Base UI render composition is supported; there is no asChild prop. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Button } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Button loading={false} testId="save-draft" onClick={() => console.log("Save requested")}>Save draft</Button>);
+ * }
+ * ```
  */
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Button };

package/dist/ui/components/ui/button-components.d.ts

@@ -3,22 +3,34 @@ import { VariantProps } from 'class-variance-authority';
 import { buttonVariants } from './button-variants.js';
 import * as React from 'react';
 /**
- * Button component props
- * ボタンコンポーネントのプロップス
+ * Base UI button props plus Appkit loading/test selectors and CVA variants.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see Button
  */
 export interface ButtonProps extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {
     /**
-     * AI/E2E Test用の安定ID / Stable test identifier for AI and E2E tests
+     * Stable data-testid assigned to the rendered control/container; omitted means no selector.
      */
     testId?: string;
     /**
-     * ローディング状態 / Loading state
+     * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.
      */
     loading?: boolean;
 }
 /**
- * Button Component
- * ボタンコンポーネント
+ * Renders a Base UI button with Appkit variants, a stable test ID and an optional loading spinner.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Button composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. loading disables the button through disabled || loading and adds aria-busy/data-loading; omission means no spinner. The wrapper does not start or complete asynchronous work. variant and size use buttonVariants defaults (default). Base UI render composition is supported; there is no asChild prop. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Button } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Button loading={false} testId="save-draft" onClick={() => console.log("Save requested")}>Save draft</Button>);
+ * }
+ * ```
  */
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Button };

package/dist/ui/components/ui/button-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-components.js","names":["React","ButtonPrimitive","React$1","Button$1","Button","props","testId","loading","variant","disabled","className","cn","buttonVariants","state","Loader2","children"],"sources":["../../../../src/ui/components/ui/button-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { buttonVariants } from './button-variants';\n\n/**\n * Button component props\n * ボタンコンポーネントのプロップス\n */\nexport interface ButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {\n  /**\n   * AI/E2E Test用の安定ID / Stable test identifier for AI and E2E tests\n   */\n  testId?: string;\n  /**\n   * ローディング状態 / Loading state\n   */\n  loading?: boolean;\n}\n\n/**\n * Button Component\n * ボタンコンポーネント\n */\nconst Button = React.forwardRef<HTMLElement, ButtonProps>(\n  ({ className, variant, size, testId, loading, disabled, children, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        data-destructive={variant === 'destructive' || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(buttonVariants({ variant, size }), className(state)) : cn(buttonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading && (\n          <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n        )}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"mappings":";;;;;;;;AA4BA,IAAMI,IAASJ,EAAM,YAClB,EAAE,cAAW,YAAS,SAAM,WAAQ,YAAS,aAAU,aAAU,GAAGK,KAAS,MAI1E,kBAACJ,GAAD;CACO;CACL,aAAU;CACV,eAAaK;CACb,gBAAcC,KAAW,KAAA;CACzB,oBAAkBC,MAAY,iBAAiB,KAAA;CAC/C,aAAWD,KAAW,KAAA;CACtB,UAVeE,KAAYF;CAW3B,WAAW,OAAOG,KAAc,cAAa,MAASC,EAAGC,EAAe;EAAE;EAAS;CAAK,CAAC,GAAGF,EAAUG,CAAK,CAAC,IAAIF,EAAGC,EAAe;EAAE;EAAS;EAAM;CAAU,CAAC,CAAC;CAC/J,GAAIP;CATN,UAAA,CAWGE,KACC,kBAACO,GAAD;EAAS,WAAU;EAA4B,eAAY;CAAQ,CAAA,GAEpEC,CACc;A,EAGvB;AACA,EAAO,cAAc"}
+{"version":3,"file":"button-components.js","names":["React","ButtonPrimitive","React$1","Button$1","Button","props","testId","loading","variant","disabled","className","cn","buttonVariants","state","Loader2","children"],"sources":["../../../../src/ui/components/ui/button-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { buttonVariants } from './button-variants';\n\n/**\n * Base UI button props plus Appkit loading/test selectors and CVA variants.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Button\n */\nexport interface ButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n}\n\n/**\n * Renders a Base UI button with Appkit variants, a stable test ID and an optional loading spinner.\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 Button composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. loading disables the button through disabled || loading and adds aria-busy/data-loading; omission means no spinner. The wrapper does not start or complete asynchronous work. variant and size use buttonVariants defaults (default). Base UI render composition is supported; there is no asChild prop. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Button loading={false} testId=\"save-draft\" onClick={() => console.log(\"Save requested\")}>Save draft</Button>);\n * }\n * ```\n */\nconst Button = React.forwardRef<HTMLElement, ButtonProps>(\n  ({ className, variant, size, testId, loading, disabled, children, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        data-destructive={variant === 'destructive' || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(buttonVariants({ variant, size }), className(state)) : cn(buttonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading && (\n          <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n        )}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"mappings":";;;;;;;;AAwCA,IAAMI,IAASJ,EAAM,YAClB,EAAE,cAAW,YAAS,SAAM,WAAQ,YAAS,aAAU,aAAU,GAAGK,KAAS,MAI1E,kBAACJ,GAAD;CACO;CACL,aAAU;CACV,eAAaK;CACb,gBAAcC,KAAW,KAAA;CACzB,oBAAkBC,MAAY,iBAAiB,KAAA;CAC/C,aAAWD,KAAW,KAAA;CACtB,UAVeE,KAAYF;CAW3B,WAAW,OAAOG,KAAc,cAAa,MAASC,EAAGC,EAAe;EAAE;EAAS;CAAK,CAAC,GAAGF,EAAUG,CAAK,CAAC,IAAIF,EAAGC,EAAe;EAAE;EAAS;EAAM;CAAU,CAAC,CAAC;CAC/J,GAAIP;CATN,UAAA,CAWGE,KACC,kBAACO,GAAD;EAAS,WAAU;EAA4B,eAAY;CAAQ,CAAA,GAEpEC,CACc;A,EAGvB;AACA,EAAO,cAAc"}

package/dist/ui/components/ui/button-group-components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-group-components.cjs","names":["cn","buttonGroupVariants","useRender","mergeProps","Separator","require_ui_lib_utils","require_ui_components_ui_separator","require_ui_components_ui_button_group_variants","react_jsx_runtime","_base_ui_react_merge_props","_base_ui_react_use_render","ButtonGroup","props","orientation","className","ButtonGroupText","ButtonGroupSeparator"],"sources":["../../../../src/ui/components/ui/button-group-components.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\nimport { buttonGroupVariants } from './button-group-variants';\n\n/**\n * 複数のボタンを結合して一体のグループとして表示するコンテナ。\n */\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role='group'\n      data-slot='button-group'\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * ボタングループ内にテキストラベルを挿入するためのコンポーネント。\n */\nfunction ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>) {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'button-group-text',\n    },\n  });\n}\n\n/**\n * ボタングループ内の各ボタンを区切るためのセパレーター。\n */\nfunction ButtonGroupSeparator({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot='button-group-separator'\n      orientation={orientation}\n      className={cn(\n        'bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };\n"],"mappings":"A,+SAWA,SAASW,EAAY,CACnB,YACA,cACA,GAAGC,GACsE,CACzE,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,QACL,YAAU,eACV,mBAAkBK,EAClB,UAAWb,EAAAA,GAAGC,EAAAA,oBAAoB,CAAE,aAAY,CAAC,EAAGa,CAAS,EAC7D,GAAIF,CACL,CAAA,CAEL,CAKA,SAASG,EAAgB,CAAE,YAAW,SAAQ,GAAGH,GAA0C,CACzF,OAAA,EAAOV,EAAAA,UAAAA,CAAU,CACf,eAAgB,MAChB,OAAA,EAAOC,EAAAA,WAAAA,CACL,CACE,UAAWH,EAAAA,GACT,iJACAc,CACF,CACF,EACAF,CACF,EACA,SACA,MAAO,CACL,KAAM,mBACR,CACF,CAAC,CACH,CAKA,SAASI,EAAqB,CAC5B,YACA,cAAc,WACd,GAAGJ,GACsC,CACzC,OACE,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,UAAD,CACE,YAAU,yBACG,cACb,UAAWJ,EAAAA,GACT,+KACAc,CACF,EACA,GAAIF,CACL,CAAA,CAEL,C"}
+{"version":3,"file":"button-group-components.cjs","names":["cn","buttonGroupVariants","useRender","mergeProps","Separator","require_ui_lib_utils","require_ui_components_ui_separator","require_ui_components_ui_button_group_variants","react_jsx_runtime","_base_ui_react_merge_props","_base_ui_react_use_render","ButtonGroup","props","orientation","className","ButtonGroupText","ButtonGroupSeparator"],"sources":["../../../../src/ui/components/ui/button-group-components.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\nimport { buttonGroupVariants } from './button-group-variants';\n\n/**\n * Visually joins adjacent buttons in a labeled group.\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 ButtonGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.\n * @example\n * ```tsx\n * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ButtonGroup aria-label=\"Document actions\"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);\n * }\n * ```\n */\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role='group'\n      data-slot='button-group'\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders supplemental text or a custom render element inside a button group.\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 ButtonGroupText composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.\n * @example\n * ```tsx\n * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ButtonGroup aria-label=\"Document actions\"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);\n * }\n * ```\n */\nfunction ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>) {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'button-group-text',\n    },\n  });\n}\n\n/**\n * Separates adjacent button-group controls with a vertical separator by default.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='vertical'.\n * @returns The rendered ButtonGroupSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.\n * @example\n * ```tsx\n * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ButtonGroup aria-label=\"Document actions\"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);\n * }\n * ```\n */\nfunction ButtonGroupSeparator({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot='button-group-separator'\n      orientation={orientation}\n      className={cn(\n        'bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };\n"],"mappings":"A,+SAuBA,SAASW,EAAY,CACnB,YACA,cACA,GAAGC,GACsE,CACzE,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,QACL,YAAU,eACV,mBAAkBK,EAClB,UAAWb,EAAAA,GAAGC,EAAAA,oBAAoB,CAAE,aAAY,CAAC,EAAGa,CAAS,EAC7D,GAAIF,CACL,CAAA,CAEL,CAiBA,SAASG,EAAgB,CAAE,YAAW,SAAQ,GAAGH,GAA0C,CACzF,OAAA,EAAOV,EAAAA,UAAAA,CAAU,CACf,eAAgB,MAChB,OAAA,EAAOC,EAAAA,WAAAA,CACL,CACE,UAAWH,EAAAA,GACT,iJACAc,CACF,CACF,EACAF,CACF,EACA,SACA,MAAO,CACL,KAAM,mBACR,CACF,CAAC,CACH,CAiBA,SAASI,EAAqB,CAC5B,YACA,cAAc,WACd,GAAGJ,GACsC,CACzC,OACE,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,UAAD,CACE,YAAU,yBACG,cACb,UAAWJ,EAAAA,GACT,+KACAc,CACF,EACA,GAAIF,CACL,CAAA,CAEL,C"}

package/dist/ui/components/ui/button-group-components.d.cts

@@ -3,15 +3,51 @@ import { VariantProps } from 'class-variance-authority';
 import { Separator } from './separator.cjs';
 import { buttonGroupVariants } from './button-group-variants.cjs';
 /**
- * 複数のボタンを結合して一体のグループとして表示するコンテナ。
+ * Visually joins adjacent buttons in a labeled group.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ButtonGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ButtonGroup aria-label="Document actions"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);
+ * }
+ * ```
  */
 declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import('react').JSX.Element;
 /**
- * ボタングループ内にテキストラベルを挿入するためのコンポーネント。
+ * Renders supplemental text or a custom render element inside a button group.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ButtonGroupText composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ButtonGroup aria-label="Document actions"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);
+ * }
+ * ```
  */
 declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 /**
- * ボタングループ内の各ボタンを区切るためのセパレーター。
+ * Separates adjacent button-group controls with a vertical separator by default.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='vertical'.
+ * @returns The rendered ButtonGroupSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ButtonGroup aria-label="Document actions"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);
+ * }
+ * ```
  */
 declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import('react').JSX.Element;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

package/dist/ui/components/ui/button-group-components.d.ts

@@ -3,15 +3,51 @@ import { VariantProps } from 'class-variance-authority';
 import { Separator } from './separator.js';
 import { buttonGroupVariants } from './button-group-variants.js';
 /**
- * 複数のボタンを結合して一体のグループとして表示するコンテナ。
+ * Visually joins adjacent buttons in a labeled group.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ButtonGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ButtonGroup aria-label="Document actions"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);
+ * }
+ * ```
  */
 declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import('react').JSX.Element;
 /**
- * ボタングループ内にテキストラベルを挿入するためのコンポーネント。
+ * Renders supplemental text or a custom render element inside a button group.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ButtonGroupText composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ButtonGroup aria-label="Document actions"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);
+ * }
+ * ```
  */
 declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 /**
- * ボタングループ内の各ボタンを区切るためのセパレーター。
+ * Separates adjacent button-group controls with a vertical separator by default.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='vertical'.
+ * @returns The rendered ButtonGroupSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ButtonGroup aria-label="Document actions"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);
+ * }
+ * ```
  */
 declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import('react').JSX.Element;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

package/dist/ui/components/ui/button-group-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group-components.js","names":["ButtonGroup","props","orientation","cn","buttonGroupVariants","className","ButtonGroupText","useRender","mergeProps","ButtonGroupSeparator","Separator"],"sources":["../../../../src/ui/components/ui/button-group-components.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\nimport { buttonGroupVariants } from './button-group-variants';\n\n/**\n * 複数のボタンを結合して一体のグループとして表示するコンテナ。\n */\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role='group'\n      data-slot='button-group'\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * ボタングループ内にテキストラベルを挿入するためのコンポーネント。\n */\nfunction ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>) {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'button-group-text',\n    },\n  });\n}\n\n/**\n * ボタングループ内の各ボタンを区切るためのセパレーター。\n */\nfunction ButtonGroupSeparator({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot='button-group-separator'\n      orientation={orientation}\n      className={cn(\n        'bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };\n"],"mappings":";;;;;;;;AAWA,SAASA,EAAY,EACnB,cACA,gBACA,GAAGC,KACsE;CACzE,OACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,oBAAkBC;EAClB,WAAWC,EAAGC,EAAoB,EAAE,eAAY,CAAC,GAAGC,CAAS;EAC7D,GAAIJ;CACL,CAAA;AAEL;AAKA,SAASK,EAAgB,EAAE,cAAW,WAAQ,GAAGL,KAA0C;CACzF,OAAOM,EAAU;EACf,gBAAgB;EAChB,OAAOC,EACL,EACE,WAAWL,EACT,kJACAE,CACF,EACF,GACAJ,CACF;EACA;EACA,OAAO,EACL,MAAM,oBACR;CACF,CAAC;AACH;AAKA,SAASQ,EAAqB,EAC5B,cACA,iBAAc,YACd,GAAGR,KACsC;CACzC,OACE,kBAACS,GAAD;EACE,aAAU;EACG;EACb,WAAWP,EACT,gLACAE,CACF;EACA,GAAIJ;CACL,CAAA;AAEL"}
+{"version":3,"file":"button-group-components.js","names":["ButtonGroup","props","orientation","cn","buttonGroupVariants","className","ButtonGroupText","useRender","mergeProps","ButtonGroupSeparator","Separator"],"sources":["../../../../src/ui/components/ui/button-group-components.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\nimport { buttonGroupVariants } from './button-group-variants';\n\n/**\n * Visually joins adjacent buttons in a labeled group.\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 ButtonGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.\n * @example\n * ```tsx\n * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ButtonGroup aria-label=\"Document actions\"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);\n * }\n * ```\n */\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role='group'\n      data-slot='button-group'\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders supplemental text or a custom render element inside a button group.\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 ButtonGroupText composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.\n * @example\n * ```tsx\n * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ButtonGroup aria-label=\"Document actions\"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);\n * }\n * ```\n */\nfunction ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>) {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'button-group-text',\n    },\n  });\n}\n\n/**\n * Separates adjacent button-group controls with a vertical separator by default.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='vertical'.\n * @returns The rendered ButtonGroupSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. orientation defaults to horizontal through buttonGroupVariants. This group provides styling and role=group, without roving focus or selection state. Text uses Base UI useRender composition; custom elements must accept merged props.\n * @example\n * ```tsx\n * import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ButtonGroup aria-label=\"Document actions\"><ButtonGroupText>Draft</ButtonGroupText><Button>Save</Button><ButtonGroupSeparator /><Button>Preview</Button></ButtonGroup>);\n * }\n * ```\n */\nfunction ButtonGroupSeparator({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot='button-group-separator'\n      orientation={orientation}\n      className={cn(\n        'bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };\n"],"mappings":";;;;;;;;AAuBA,SAASA,EAAY,EACnB,cACA,gBACA,GAAGC,KACsE;CACzE,OACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,oBAAkBC;EAClB,WAAWC,EAAGC,EAAoB,EAAE,eAAY,CAAC,GAAGC,CAAS;EAC7D,GAAIJ;CACL,CAAA;AAEL;AAiBA,SAASK,EAAgB,EAAE,cAAW,WAAQ,GAAGL,KAA0C;CACzF,OAAOM,EAAU;EACf,gBAAgB;EAChB,OAAOC,EACL,EACE,WAAWL,EACT,kJACAE,CACF,EACF,GACAJ,CACF;EACA;EACA,OAAO,EACL,MAAM,oBACR;CACF,CAAC;AACH;AAiBA,SAASQ,EAAqB,EAC5B,cACA,iBAAc,YACd,GAAGR,KACsC;CACzC,OACE,kBAACS,GAAD;EACE,aAAU;EACG;EACb,WAAWP,EACT,gLACAE,CACF;EACA,GAAIJ;CACL,CAAA;AAEL"}