@alneas/appkit-react 0.1.0 → 0.3.0

package/dist/ui/components/ui/toggle-group.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);let i=require("@base-ui/react/toggle-group"),a=require("@base-ui/react/toggle");var o=r.forwardRef(({className:e,children:r,...a},o)=>(0,n.jsx)(i.ToggleGroup,{ref:o,className:t.cn(`flex items-center justify-center gap-1`,e),...a,children:r}));o.displayName=`ToggleGroup`;var s=r.forwardRef(({className:e,children:r,...i},o)=>(0,n.jsx)(a.Toggle,{ref:o,className:t.cn(`inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground first:rounded-l-md last:rounded-r-md`,e),...i,children:r}));s.displayName=`ToggleGroupItem`,exports.ToggleGroup=o,exports.ToggleGroupItem=s;
+"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);let i=require("@base-ui/react/toggle-group"),a=require("@base-ui/react/toggle");function o({ref:e,className:r,children:a,...o}){return(0,n.jsx)(i.ToggleGroup,{ref:e,className:t.cn(`flex items-center justify-center gap-1`,r),...o,children:a})}o.displayName=`ToggleGroup`;function s({ref:e,className:r,children:i,...o}){return(0,n.jsx)(a.Toggle,{ref:e,className:t.cn(`inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground first:rounded-l-md last:rounded-r-md`,r),...o,children:i})}s.displayName=`ToggleGroupItem`,exports.ToggleGroup=o,exports.ToggleGroupItem=s;
 //# sourceMappingURL=toggle-group.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.cjs","names":["React","ToggleGroupPrimitive","cn","TogglePrimitive","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_toggle_group","_base_ui_react_toggle","ToggleGroup","props","className","ToggleGroupItem"],"sources":["../../../../src/ui/components/ui/toggle-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\n\nimport { cn } from '../../lib/utils';\n\nconst ToggleGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive>\n>(({ className, children, ...props }, ref) => (\n  <ToggleGroupPrimitive\n    ref={ref}\n    className={cn('flex items-center justify-center gap-1', className)}\n    {...props}\n  >\n    {children}\n  </ToggleGroupPrimitive>\n));\nToggleGroup.displayName = 'ToggleGroup';\n\nconst ToggleGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive> & {\n    value: string;\n  }\n>(({ className, children, ...props }, ref) => {\n  // In Base UI, we just use Toggle inside ToggleGroup?\n  // Or is there a ToggleGroup.Item?\n  // Docs/Exports showed ToggleGroup export.\n  // Usually standard pattern is ToggleGroup.Item.\n  // But if ToggleGroup is a component, maybe it accepts Toggles?\n  // Let's assume we use Toggle as Item, but wrapped.\n  // Wait, Toggle needs to know if it's checked based on Group.\n  // If Base UI ToggleGroup communicates via Context, then Toggle inside it works.\n  // Explicitly importing standard Toggle.\n  return (\n    <TogglePrimitive\n      ref={ref}\n      className={cn(\n        'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground first:rounded-l-md last:rounded-r-md',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  );\n});\nToggleGroupItem.displayName = 'ToggleGroupItem';\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"A,mUAMA,IAAMU,EAAcV,EAAM,YAGvB,CAAE,YAAW,WAAU,GAAGW,GAAS,KACpC,EAAAL,EAAA,IAAA,CAACL,EAAAA,YAAD,CACO,MACL,UAAWC,EAAAA,GAAG,yCAA0CU,CAAS,EACjE,GAAID,EAEH,UACmB,CAAA,CACvB,EACD,EAAY,YAAc,cAE1B,IAAME,EAAkBb,EAAM,YAK3B,CAAE,YAAW,WAAU,GAAGW,GAAS,KAWlC,EAAAL,EAAA,IAAA,CAACH,EAAAA,OAAD,CACO,MACL,UAAWD,EAAAA,GACT,sZACAU,CACF,EACA,GAAID,EAEH,UACc,CAAA,CAEpB,EACD,EAAgB,YAAc,kB"}
+{"version":3,"file":"toggle-group.cjs","names":["ToggleGroupPrimitive","cn","TogglePrimitive","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_toggle_group","_base_ui_react_toggle","ToggleGroup","props","className","ToggleGroupItem"],"sources":["../../../../src/ui/components/ui/toggle-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates a collection of toggle values through Base UI group state.\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 ToggleGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place distinct value-bearing items under ToggleGroup. The wrappers use Base UI ToggleGroup and Toggle directly; group selection behavior follows the upstream props. Unlike Toggle, these wrappers do not apply toggleVariants. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ToggleGroup defaultValue={[\"bold\"]} aria-label=\"Text style\"><ToggleGroupItem value=\"bold\" aria-label=\"Bold\">B</ToggleGroupItem><ToggleGroupItem value=\"italic\" aria-label=\"Italic\">I</ToggleGroupItem></ToggleGroup>);\n * }\n * ```\n */\nfunction ToggleGroup({\n  ref,\n  className,\n  children,\n  ...props\n}: React.PropsWithoutRef<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive>> &\n  React.RefAttributes<HTMLDivElement>) {\n  return (\n    <ToggleGroupPrimitive\n      ref={ref}\n      className={cn('flex items-center justify-center gap-1', className)}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive>\n  );\n}\nToggleGroup.displayName = 'ToggleGroup';\n\n/**\n * Renders a value-bearing toggle inside its surrounding toggle 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 ToggleGroupItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place distinct value-bearing items under ToggleGroup. The wrappers use Base UI ToggleGroup and Toggle directly; group selection behavior follows the upstream props. Unlike Toggle, these wrappers do not apply toggleVariants. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ToggleGroup defaultValue={[\"bold\"]} aria-label=\"Text style\"><ToggleGroupItem value=\"bold\" aria-label=\"Bold\">B</ToggleGroupItem><ToggleGroupItem value=\"italic\" aria-label=\"Italic\">I</ToggleGroupItem></ToggleGroup>);\n * }\n * ```\n */\nfunction ToggleGroupItem({\n  ref,\n  className,\n  children,\n  ...props\n}: React.PropsWithoutRef<\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive> & {\n    /**\n     * Identity for this choice within the surrounding group; provide a distinct stable string.\n     */\n    value: string;\n  }\n> &\n  React.RefAttributes<HTMLButtonElement>) {\n  // In Base UI, we just use Toggle inside ToggleGroup?\n  // Or is there a ToggleGroup.Item?\n  // Docs/Exports showed ToggleGroup export.\n  // Usually standard pattern is ToggleGroup.Item.\n  // But if ToggleGroup is a component, maybe it accepts Toggles?\n  // Let's assume we use Toggle as Item, but wrapped.\n  // Wait, Toggle needs to know if it's checked based on Group.\n  // If Base UI ToggleGroup communicates via Context, then Toggle inside it works.\n  // Explicitly importing standard Toggle.\n  return (\n    <TogglePrimitive\n      ref={ref}\n      className={cn(\n        'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground first:rounded-l-md last:rounded-r-md',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  );\n}\nToggleGroupItem.displayName = 'ToggleGroupItem';\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"A,mUAqBA,SAASS,EAAY,CACnB,MACA,YACA,WACA,GAAGC,GAEkC,CACrC,OACE,EAAAL,EAAA,IAAA,CAACL,EAAAA,YAAD,CACO,MACL,UAAWC,EAAAA,GAAG,yCAA0CU,CAAS,EACjE,GAAID,EAEH,UACmB,CAAA,CAE1B,CACA,EAAY,YAAc,cAiB1B,SAASE,EAAgB,CACvB,MACA,YACA,WACA,GAAGF,GASqC,CAUxC,OACE,EAAAL,EAAA,IAAA,CAACH,EAAAA,OAAD,CACO,MACL,UAAWD,EAAAA,GACT,sZACAU,CACF,EACA,GAAID,EAEH,UACc,CAAA,CAErB,CACA,EAAgB,YAAc,kB"}

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

@@ -1,8 +1,47 @@
 import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import * as React from 'react';
-declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.Props<string> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<TogglePrimitive.Props<string> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+/**
+ * Coordinates a collection of toggle values through Base UI group state.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToggleGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place distinct value-bearing items under ToggleGroup. The wrappers use Base UI ToggleGroup and Toggle directly; group selection behavior follows the upstream props. Unlike Toggle, these wrappers do not apply toggleVariants. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ToggleGroup defaultValue={["bold"]} aria-label="Text style"><ToggleGroupItem value="bold" aria-label="Bold">B</ToggleGroupItem><ToggleGroupItem value="italic" aria-label="Italic">I</ToggleGroupItem></ToggleGroup>);
+ * }
+ * ```
+ */
+declare function ToggleGroup({ ref, className, children, ...props }: React.PropsWithoutRef<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive>> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace ToggleGroup {
+    var displayName: string;
+}
+/**
+ * Renders a value-bearing toggle inside its surrounding toggle group.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToggleGroupItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place distinct value-bearing items under ToggleGroup. The wrappers use Base UI ToggleGroup and Toggle directly; group selection behavior follows the upstream props. Unlike Toggle, these wrappers do not apply toggleVariants. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ToggleGroup defaultValue={["bold"]} aria-label="Text style"><ToggleGroupItem value="bold" aria-label="Bold">B</ToggleGroupItem><ToggleGroupItem value="italic" aria-label="Italic">I</ToggleGroupItem></ToggleGroup>);
+ * }
+ * ```
+ */
+declare function ToggleGroupItem({ ref, className, children, ...props }: React.PropsWithoutRef<React.ComponentPropsWithoutRef<typeof TogglePrimitive> & {
+    /**
+     * Identity for this choice within the surrounding group; provide a distinct stable string.
+     */
     value: string;
-} & React.RefAttributes<HTMLButtonElement>>;
+}> & React.RefAttributes<HTMLButtonElement>): React.JSX.Element;
+declare namespace ToggleGroupItem {
+    var displayName: string;
+}
 export { ToggleGroup, ToggleGroupItem };

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

@@ -1,8 +1,47 @@
 import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import * as React from 'react';
-declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.Props<string> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<TogglePrimitive.Props<string> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+/**
+ * Coordinates a collection of toggle values through Base UI group state.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToggleGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place distinct value-bearing items under ToggleGroup. The wrappers use Base UI ToggleGroup and Toggle directly; group selection behavior follows the upstream props. Unlike Toggle, these wrappers do not apply toggleVariants. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ToggleGroup defaultValue={["bold"]} aria-label="Text style"><ToggleGroupItem value="bold" aria-label="Bold">B</ToggleGroupItem><ToggleGroupItem value="italic" aria-label="Italic">I</ToggleGroupItem></ToggleGroup>);
+ * }
+ * ```
+ */
+declare function ToggleGroup({ ref, className, children, ...props }: React.PropsWithoutRef<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive>> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace ToggleGroup {
+    var displayName: string;
+}
+/**
+ * Renders a value-bearing toggle inside its surrounding toggle group.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToggleGroupItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place distinct value-bearing items under ToggleGroup. The wrappers use Base UI ToggleGroup and Toggle directly; group selection behavior follows the upstream props. Unlike Toggle, these wrappers do not apply toggleVariants. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ToggleGroup defaultValue={["bold"]} aria-label="Text style"><ToggleGroupItem value="bold" aria-label="Bold">B</ToggleGroupItem><ToggleGroupItem value="italic" aria-label="Italic">I</ToggleGroupItem></ToggleGroup>);
+ * }
+ * ```
+ */
+declare function ToggleGroupItem({ ref, className, children, ...props }: React.PropsWithoutRef<React.ComponentPropsWithoutRef<typeof TogglePrimitive> & {
+    /**
+     * Identity for this choice within the surrounding group; provide a distinct stable string.
+     */
     value: string;
-} & React.RefAttributes<HTMLButtonElement>>;
+}> & React.RefAttributes<HTMLButtonElement>): React.JSX.Element;
+declare namespace ToggleGroupItem {
+    var displayName: string;
+}
 export { ToggleGroup, ToggleGroupItem };

package/dist/ui/components/ui/toggle-group.js

@@ -1,25 +1,29 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { jsx as t } from "react/jsx-runtime";
-import * as n from "react";
-import { ToggleGroup as r } from "@base-ui/react/toggle-group";
-import { Toggle as i } from "@base-ui/react/toggle";
+import "react";
+import { ToggleGroup as n } from "@base-ui/react/toggle-group";
+import { Toggle as r } from "@base-ui/react/toggle";
 //#region src/ui/components/ui/toggle-group.tsx
-var a = n.forwardRef(({ className: n, children: i, ...a }, o) => /* @__PURE__ */ t(r, {
-	ref: o,
-	className: e("flex items-center justify-center gap-1", n),
-	...a,
-	children: i
-}));
-a.displayName = "ToggleGroup";
-var o = n.forwardRef(({ className: n, children: r, ...a }, o) => /* @__PURE__ */ t(i, {
-	ref: o,
-	className: e("inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground first:rounded-l-md last:rounded-r-md", n),
-	...a,
-	children: r
-}));
-o.displayName = "ToggleGroupItem";
+function i({ ref: r, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ t(n, {
+		ref: r,
+		className: e("flex items-center justify-center gap-1", i),
+		...o,
+		children: a
+	});
+}
+i.displayName = "ToggleGroup";
+function a({ ref: n, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ t(r, {
+		ref: n,
+		className: e("inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground first:rounded-l-md last:rounded-r-md", i),
+		...o,
+		children: a
+	});
+}
+a.displayName = "ToggleGroupItem";
 //#endregion
-export { a as ToggleGroup, o as ToggleGroupItem };
+export { i as ToggleGroup, a as ToggleGroupItem };
 
 //# sourceMappingURL=toggle-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","names":["React","ToggleGroupPrimitive","TogglePrimitive","React$1","ToggleGroup$1","ToggleGroup","props","cn","className","ToggleGroupItem","Toggle"],"sources":["../../../../src/ui/components/ui/toggle-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\n\nimport { cn } from '../../lib/utils';\n\nconst ToggleGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive>\n>(({ className, children, ...props }, ref) => (\n  <ToggleGroupPrimitive\n    ref={ref}\n    className={cn('flex items-center justify-center gap-1', className)}\n    {...props}\n  >\n    {children}\n  </ToggleGroupPrimitive>\n));\nToggleGroup.displayName = 'ToggleGroup';\n\nconst ToggleGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive> & {\n    value: string;\n  }\n>(({ className, children, ...props }, ref) => {\n  // In Base UI, we just use Toggle inside ToggleGroup?\n  // Or is there a ToggleGroup.Item?\n  // Docs/Exports showed ToggleGroup export.\n  // Usually standard pattern is ToggleGroup.Item.\n  // But if ToggleGroup is a component, maybe it accepts Toggles?\n  // Let's assume we use Toggle as Item, but wrapped.\n  // Wait, Toggle needs to know if it's checked based on Group.\n  // If Base UI ToggleGroup communicates via Context, then Toggle inside it works.\n  // Explicitly importing standard Toggle.\n  return (\n    <TogglePrimitive\n      ref={ref}\n      className={cn(\n        'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground first:rounded-l-md last:rounded-r-md',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  );\n});\nToggleGroupItem.displayName = 'ToggleGroupItem';\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":";;;;;;;AAMA,IAAMK,IAAcL,EAAM,YAGvB,EAAE,cAAW,aAAU,GAAGM,KAAS,MACpC,kBAACL,GAAD;CACO;CACL,WAAWM,EAAG,0CAA0CC,CAAS;CACjE,GAAIF;CAEH;AACmB,CAAA,CACvB;AACD,EAAY,cAAc;AAE1B,IAAMG,IAAkBT,EAAM,YAK3B,EAAE,cAAW,aAAU,GAAGM,KAAS,MAWlC,kBAACJ,GAAD;CACO;CACL,WAAWK,EACT,uZACAC,CACF;CACA,GAAIF;CAEH;AACc,CAAA,CAEpB;AACD,EAAgB,cAAc"}
+{"version":3,"file":"toggle-group.js","names":["ToggleGroupPrimitive","TogglePrimitive","ToggleGroup$1","ToggleGroup","props","cn","className","ToggleGroupItem","Toggle"],"sources":["../../../../src/ui/components/ui/toggle-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates a collection of toggle values through Base UI group state.\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 ToggleGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place distinct value-bearing items under ToggleGroup. The wrappers use Base UI ToggleGroup and Toggle directly; group selection behavior follows the upstream props. Unlike Toggle, these wrappers do not apply toggleVariants. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ToggleGroup defaultValue={[\"bold\"]} aria-label=\"Text style\"><ToggleGroupItem value=\"bold\" aria-label=\"Bold\">B</ToggleGroupItem><ToggleGroupItem value=\"italic\" aria-label=\"Italic\">I</ToggleGroupItem></ToggleGroup>);\n * }\n * ```\n */\nfunction ToggleGroup({\n  ref,\n  className,\n  children,\n  ...props\n}: React.PropsWithoutRef<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive>> &\n  React.RefAttributes<HTMLDivElement>) {\n  return (\n    <ToggleGroupPrimitive\n      ref={ref}\n      className={cn('flex items-center justify-center gap-1', className)}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive>\n  );\n}\nToggleGroup.displayName = 'ToggleGroup';\n\n/**\n * Renders a value-bearing toggle inside its surrounding toggle 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 ToggleGroupItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place distinct value-bearing items under ToggleGroup. The wrappers use Base UI ToggleGroup and Toggle directly; group selection behavior follows the upstream props. Unlike Toggle, these wrappers do not apply toggleVariants. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ToggleGroup defaultValue={[\"bold\"]} aria-label=\"Text style\"><ToggleGroupItem value=\"bold\" aria-label=\"Bold\">B</ToggleGroupItem><ToggleGroupItem value=\"italic\" aria-label=\"Italic\">I</ToggleGroupItem></ToggleGroup>);\n * }\n * ```\n */\nfunction ToggleGroupItem({\n  ref,\n  className,\n  children,\n  ...props\n}: React.PropsWithoutRef<\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive> & {\n    /**\n     * Identity for this choice within the surrounding group; provide a distinct stable string.\n     */\n    value: string;\n  }\n> &\n  React.RefAttributes<HTMLButtonElement>) {\n  // In Base UI, we just use Toggle inside ToggleGroup?\n  // Or is there a ToggleGroup.Item?\n  // Docs/Exports showed ToggleGroup export.\n  // Usually standard pattern is ToggleGroup.Item.\n  // But if ToggleGroup is a component, maybe it accepts Toggles?\n  // Let's assume we use Toggle as Item, but wrapped.\n  // Wait, Toggle needs to know if it's checked based on Group.\n  // If Base UI ToggleGroup communicates via Context, then Toggle inside it works.\n  // Explicitly importing standard Toggle.\n  return (\n    <TogglePrimitive\n      ref={ref}\n      className={cn(\n        'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground first:rounded-l-md last:rounded-r-md',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  );\n}\nToggleGroupItem.displayName = 'ToggleGroupItem';\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":";;;;;;;AAqBA,SAASG,EAAY,EACnB,QACA,cACA,aACA,GAAGC,KAEkC;CACrC,OACE,kBAACJ,GAAD;EACO;EACL,WAAWK,EAAG,0CAA0CC,CAAS;EACjE,GAAIF;EAEH;CACmB,CAAA;AAE1B;AACA,EAAY,cAAc;AAiB1B,SAASG,EAAgB,EACvB,QACA,cACA,aACA,GAAGH,KASqC;CAUxC,OACE,kBAACH,GAAD;EACO;EACL,WAAWI,EACT,uZACAC,CACF;EACA,GAAIF;EAEH;CACc,CAAA;AAErB;AACA,EAAgB,cAAc"}

package/dist/ui/components/ui/toggle-variants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-variants.cjs","names":["cva","toggleVariants"],"sources":["../../../../src/ui/components/ui/toggle-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border-input hover:bg-muted border bg-transparent',\n      },\n      size: {\n        default: 'h-8 min-w-8 px-2',\n        sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',\n        lg: 'h-9 min-w-9 px-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n"],"mappings":"A,gFAEA,IAAaC,GAAA,E,kCAAiBD,CAAAA,CAAAA,IAAAA,CAC5B,shBACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,iBACT,QAAS,mDACX,EACA,KAAM,CACJ,QAAS,mBACT,GAAI,wEACJ,GAAI,oBACN,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,E"}
+{"version":3,"file":"toggle-variants.cjs","names":["cva","toggleVariants"],"sources":["../../../../src/ui/components/ui/toggle-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Builds classes for default/outline pressed-state controls and their sizes.\n * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.\n * @returns The combined CSS class string for the supplied variant axes and additional class/className values.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm and lg are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.\n * @example\n * ```tsx\n * import { toggleVariants } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<div className={toggleVariants()}>Styled content</div>);\n * }\n * ```\n */\nexport const toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      /**\n       * Visual treatment selected by the consumer; these values change CSS classes only.\n       * Accepted values: default, outline.\n       * @defaultValue 'default'\n       * @see toggleVariants\n       */\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border-input hover:bg-muted border bg-transparent',\n      },\n      /**\n       * Control size preset selected by the consumer; sizes are class-based rather than numeric dimensions.\n       * Accepted values: default, sm, lg.\n       * @defaultValue 'default'\n       * @see toggleVariants\n       */\n      size: {\n        default: 'h-8 min-w-8 px-2',\n        sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',\n        lg: 'h-9 min-w-9 px-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n"],"mappings":"A,gFAiBA,IAAaC,GAAA,E,kCAAiBD,CAAAA,CAAAA,IAAAA,CAC5B,shBACA,CACE,SAAU,CAOR,QAAS,CACP,QAAS,iBACT,QAAS,mDACX,EAOA,KAAM,CACJ,QAAS,mBACT,GAAI,wEACJ,GAAI,oBACN,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,E"}

package/dist/ui/components/ui/toggle-variants.d.cts

@@ -1,3 +1,18 @@
+/**
+ * Builds classes for default/outline pressed-state controls and their sizes.
+ * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.
+ * @returns The combined CSS class string for the supplied variant axes and additional class/className values.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm and lg are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.
+ * @example
+ * ```tsx
+ * import { toggleVariants } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<div className={toggleVariants()}>Styled content</div>);
+ * }
+ * ```
+ */
 export declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;

package/dist/ui/components/ui/toggle-variants.d.ts

@@ -1,3 +1,18 @@
+/**
+ * Builds classes for default/outline pressed-state controls and their sizes.
+ * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.
+ * @returns The combined CSS class string for the supplied variant axes and additional class/className values.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm and lg are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.
+ * @example
+ * ```tsx
+ * import { toggleVariants } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<div className={toggleVariants()}>Styled content</div>);
+ * }
+ * ```
+ */
 export declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;

package/dist/ui/components/ui/toggle-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-variants.js","names":["toggleVariants","cva"],"sources":["../../../../src/ui/components/ui/toggle-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border-input hover:bg-muted border bg-transparent',\n      },\n      size: {\n        default: 'h-8 min-w-8 px-2',\n        sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',\n        lg: 'h-9 min-w-9 px-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n"],"mappings":";;;AAEA,IAAaA,IAAiBC,EAC5B,uhBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;EACX;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF"}
+{"version":3,"file":"toggle-variants.js","names":["toggleVariants","cva"],"sources":["../../../../src/ui/components/ui/toggle-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Builds classes for default/outline pressed-state controls and their sizes.\n * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.\n * @returns The combined CSS class string for the supplied variant axes and additional class/className values.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm and lg are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.\n * @example\n * ```tsx\n * import { toggleVariants } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<div className={toggleVariants()}>Styled content</div>);\n * }\n * ```\n */\nexport const toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      /**\n       * Visual treatment selected by the consumer; these values change CSS classes only.\n       * Accepted values: default, outline.\n       * @defaultValue 'default'\n       * @see toggleVariants\n       */\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border-input hover:bg-muted border bg-transparent',\n      },\n      /**\n       * Control size preset selected by the consumer; sizes are class-based rather than numeric dimensions.\n       * Accepted values: default, sm, lg.\n       * @defaultValue 'default'\n       * @see toggleVariants\n       */\n      size: {\n        default: 'h-8 min-w-8 px-2',\n        sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',\n        lg: 'h-9 min-w-9 px-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n"],"mappings":";;;AAiBA,IAAaA,IAAiBC,EAC5B,uhBACA;CACE,UAAU;EAOR,SAAS;GACP,SAAS;GACT,SAAS;EACX;EAOA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.cjs","names":["ToolbarPrimitive","cn","TogglePrimitive","ToggleGroupPrimitive","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_toggle_group","_base_ui_react_toggle","_base_ui_react_toolbar","Toolbar","props","className","ToolbarGroup","ToolbarButton","ToolbarSeparator","ToolbarLink","ToolbarToggleItem","ToolbarToggleGroup"],"sources":["../../../../src/ui/components/ui/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { cn } from '../../lib/utils';\n\n/**\n * ツールバーのルートコンテナ。\n */\nfunction Toolbar({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Root>) {\n  return (\n    <ToolbarPrimitive.Root\n      data-slot='toolbar'\n      className={cn(\n        'flex h-10 items-center justify-between rounded-md border bg-background p-1',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * ツールバー内のアイテムをグループ化するためのコンポーネント。\n */\nfunction ToolbarGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToolbarPrimitive.Group>) {\n  return (\n    <ToolbarPrimitive.Group\n      data-slot='toolbar-group'\n      className={cn('flex items-center gap-1', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * ツールバー内に配置されるアクション実行用ボタン。\n */\nfunction ToolbarButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToolbarPrimitive.Button>) {\n  return (\n    <ToolbarPrimitive.Button\n      data-slot='toolbar-button'\n      className={cn(\n        'inline-flexitems-center justify-center whitespace-nowrap rounded-sm px-2.5 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground hover:bg-muted hover:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * ツールバー内のグループやアイテム同士を区切るためのセパレーター。\n */\nfunction ToolbarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToolbarPrimitive.Separator>) {\n  return (\n    <ToolbarPrimitive.Separator\n      data-slot='toolbar-separator'\n      className={cn('mx-1 h-5 w-[1px] bg-border', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * ツールバー内に配置されるナビゲーション用のリンク。\n */\nfunction ToolbarLink({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Link>) {\n  return (\n    <ToolbarPrimitive.Link\n      data-slot='toolbar-link'\n      className={cn(\n        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-2.5 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-muted-foreground data-[state=active]:bg-accent data-[state=active]:text-accent-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * オン・オフの状態を切り替えるトグル式のツールバーアイテム。\n */\nfunction ToolbarToggleItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive> & { value: string }) {\n  return (\n    <TogglePrimitive\n      data-slot='toolbar-toggle-item'\n      className={cn(\n        'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground p-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 複数のトグルアイテムをまとめて選択状態を管理するグループコンポーネント。\n */\nfunction ToolbarToggleGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive>) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot='toolbar-toggle-group'\n      className={cn('flex items-center gap-1', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Toolbar,\n  ToolbarGroup,\n  ToolbarButton,\n  ToolbarSeparator,\n  ToolbarLink,\n  ToolbarToggleGroup,\n  ToolbarToggleItem,\n};\n"],"mappings":"A,oXAWA,SAASW,EAAQ,CAAE,YAAW,GAAGC,GAA6D,CAC5F,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,KAAlB,CACE,YAAU,UACV,UAAWC,EAAAA,GACT,6EACAY,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAKA,SAASE,EAAa,CACpB,YACA,GAAGF,GACmD,CACtD,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,MAAlB,CACE,YAAU,gBACV,UAAWC,EAAAA,GAAG,0BAA2BY,CAAS,EAClD,GAAID,CACL,CAAA,CAEL,CAKA,SAASG,EAAc,CACrB,YACA,GAAGH,GACoD,CACvD,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,OAAlB,CACE,YAAU,iBACV,UAAWC,EAAAA,GACT,+YACAY,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAKA,SAASI,EAAiB,CACxB,YACA,GAAGJ,GACuD,CAC1D,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,UAAlB,CACE,YAAU,oBACV,UAAWC,EAAAA,GAAG,6BAA8BY,CAAS,EACrD,GAAID,CACL,CAAA,CAEL,CAKA,SAASK,EAAY,CAAE,YAAW,GAAGL,GAA6D,CAChG,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,KAAlB,CACE,YAAU,eACV,UAAWC,EAAAA,GACT,wZACAY,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAKA,SAASM,EAAkB,CACzB,YACA,GAAGN,GACgE,CACnE,OACE,EAAAN,EAAA,IAAA,CAACJ,EAAAA,OAAD,CACE,YAAU,sBACV,UAAWD,EAAAA,GACT,kUACAY,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAKA,SAASO,EAAmB,CAC1B,YACA,GAAGP,GACiD,CACpD,OACE,EAAAN,EAAA,IAAA,CAACH,EAAAA,YAAD,CACE,YAAU,uBACV,UAAWF,EAAAA,GAAG,0BAA2BY,CAAS,EAClD,GAAID,CACL,CAAA,CAEL,C"}
+{"version":3,"file":"toolbar.cjs","names":["ToolbarPrimitive","cn","TogglePrimitive","ToggleGroupPrimitive","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_toggle_group","_base_ui_react_toggle","_base_ui_react_toolbar","Toolbar","props","className","ToolbarGroup","ToolbarButton","ToolbarSeparator","ToolbarLink","ToolbarToggleItem","ToolbarToggleGroup"],"sources":["../../../../src/ui/components/ui/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates keyboard navigation for a horizontal action toolbar.\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 Toolbar composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.\n * @example\n * ```tsx\n * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Toolbar aria-label=\"Editor\"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href=\"/help\">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={[\"bold\"]}><ToolbarToggleItem value=\"bold\" aria-label=\"Bold\">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);\n * }\n * ```\n */\nfunction Toolbar({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Root>) {\n  return (\n    <ToolbarPrimitive.Root\n      data-slot='toolbar'\n      className={cn(\n        'flex h-10 items-center justify-between rounded-md border bg-background p-1',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Lays out a related group of toolbar 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 ToolbarGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.\n * @example\n * ```tsx\n * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Toolbar aria-label=\"Editor\"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href=\"/help\">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={[\"bold\"]}><ToolbarToggleItem value=\"bold\" aria-label=\"Bold\">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);\n * }\n * ```\n */\nfunction ToolbarGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToolbarPrimitive.Group>) {\n  return (\n    <ToolbarPrimitive.Group\n      data-slot='toolbar-group'\n      className={cn('flex items-center gap-1', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders an action button participating in toolbar focus 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 ToolbarButton composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.\n * @example\n * ```tsx\n * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Toolbar aria-label=\"Editor\"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href=\"/help\">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={[\"bold\"]}><ToolbarToggleItem value=\"bold\" aria-label=\"Bold\">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);\n * }\n * ```\n */\nfunction ToolbarButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToolbarPrimitive.Button>) {\n  return (\n    <ToolbarPrimitive.Button\n      data-slot='toolbar-button'\n      className={cn(\n        'inline-flexitems-center justify-center whitespace-nowrap rounded-sm px-2.5 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground hover:bg-muted hover:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Separates toolbar control groups with a vertical rule.\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 ToolbarSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.\n * @example\n * ```tsx\n * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Toolbar aria-label=\"Editor\"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href=\"/help\">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={[\"bold\"]}><ToolbarToggleItem value=\"bold\" aria-label=\"Bold\">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);\n * }\n * ```\n */\nfunction ToolbarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToolbarPrimitive.Separator>) {\n  return (\n    <ToolbarPrimitive.Separator\n      data-slot='toolbar-separator'\n      className={cn('mx-1 h-5 w-[1px] bg-border', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders a navigation link participating in toolbar focus 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 ToolbarLink composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.\n * @example\n * ```tsx\n * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Toolbar aria-label=\"Editor\"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href=\"/help\">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={[\"bold\"]}><ToolbarToggleItem value=\"bold\" aria-label=\"Bold\">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);\n * }\n * ```\n */\nfunction ToolbarLink({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Link>) {\n  return (\n    <ToolbarPrimitive.Link\n      data-slot='toolbar-link'\n      className={cn(\n        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-2.5 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-muted-foreground data-[state=active]:bg-accent data-[state=active]:text-accent-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders one value-bearing Base UI toggle within a toolbar toggle 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 ToolbarToggleItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.\n * @example\n * ```tsx\n * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Toolbar aria-label=\"Editor\"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href=\"/help\">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={[\"bold\"]}><ToolbarToggleItem value=\"bold\" aria-label=\"Bold\">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);\n * }\n * ```\n */\nfunction ToolbarToggleItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive> & { /**\n * Identity for this choice within the surrounding group; provide a distinct stable string.\n */\n/**\n * Identity for this choice within the surrounding group; provide a distinct stable string.\n */\nvalue: string }) {\n  return (\n    <TogglePrimitive\n      data-slot='toolbar-toggle-item'\n      className={cn(\n        'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground p-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Coordinates a value collection of toggle buttons within a toolbar.\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 ToolbarToggleGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.\n * @example\n * ```tsx\n * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Toolbar aria-label=\"Editor\"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href=\"/help\">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={[\"bold\"]}><ToolbarToggleItem value=\"bold\" aria-label=\"Bold\">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);\n * }\n * ```\n */\nfunction ToolbarToggleGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive>) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot='toolbar-toggle-group'\n      className={cn('flex items-center gap-1', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Toolbar,\n  ToolbarGroup,\n  ToolbarButton,\n  ToolbarSeparator,\n  ToolbarLink,\n  ToolbarToggleGroup,\n  ToolbarToggleItem,\n};\n"],"mappings":"A,oXAuBA,SAASW,EAAQ,CAAE,YAAW,GAAGC,GAA6D,CAC5F,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,KAAlB,CACE,YAAU,UACV,UAAWC,EAAAA,GACT,6EACAY,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAiBA,SAASE,EAAa,CACpB,YACA,GAAGF,GACmD,CACtD,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,MAAlB,CACE,YAAU,gBACV,UAAWC,EAAAA,GAAG,0BAA2BY,CAAS,EAClD,GAAID,CACL,CAAA,CAEL,CAiBA,SAASG,EAAc,CACrB,YACA,GAAGH,GACoD,CACvD,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,OAAlB,CACE,YAAU,iBACV,UAAWC,EAAAA,GACT,+YACAY,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAiBA,SAASI,EAAiB,CACxB,YACA,GAAGJ,GACuD,CAC1D,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,UAAlB,CACE,YAAU,oBACV,UAAWC,EAAAA,GAAG,6BAA8BY,CAAS,EACrD,GAAID,CACL,CAAA,CAEL,CAiBA,SAASK,EAAY,CAAE,YAAW,GAAGL,GAA6D,CAChG,OACE,EAAAN,EAAA,IAAA,CAACN,EAAAA,QAAiB,KAAlB,CACE,YAAU,eACV,UAAWC,EAAAA,GACT,wZACAY,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAiBA,SAASM,EAAkB,CACzB,YACA,GAAGN,GAOY,CACf,OACE,EAAAN,EAAA,IAAA,CAACJ,EAAAA,OAAD,CACE,YAAU,sBACV,UAAWD,EAAAA,GACT,kUACAY,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAiBA,SAASO,EAAmB,CAC1B,YACA,GAAGP,GACiD,CACpD,OACE,EAAAN,EAAA,IAAA,CAACH,EAAAA,YAAD,CACE,YAAU,uBACV,UAAWF,EAAAA,GAAG,0BAA2BY,CAAS,EAClD,GAAID,CACL,CAAA,CAEL,C"}

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

@@ -3,33 +3,120 @@ import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import * as React from 'react';
 /**
- * ツールバーのルートコンテナ。
+ * Coordinates keyboard navigation for a horizontal action toolbar.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Toolbar composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function Toolbar({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Root>): React.JSX.Element;
 /**
- * ツールバー内のアイテムをグループ化するためのコンポーネント。
+ * Lays out a related group of toolbar controls.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarGroup({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Group>): React.JSX.Element;
 /**
- * ツールバー内に配置されるアクション実行用ボタン。
+ * Renders an action button participating in toolbar focus navigation.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarButton composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarButton({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Button>): React.JSX.Element;
 /**
- * ツールバー内のグループやアイテム同士を区切るためのセパレーター。
+ * Separates toolbar control groups with a vertical rule.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarSeparator({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Separator>): React.JSX.Element;
 /**
- * ツールバー内に配置されるナビゲーション用のリンク。
+ * Renders a navigation link participating in toolbar focus navigation.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarLink composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarLink({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Link>): React.JSX.Element;
 /**
- * オン・オフの状態を切り替えるトグル式のツールバーアイテム。
+ * Renders one value-bearing Base UI toggle within a toolbar toggle group.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarToggleItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarToggleItem({ className, ...props }: React.ComponentProps<typeof TogglePrimitive> & {
+    /**
+     * Identity for this choice within the surrounding group; provide a distinct stable string.
+     */
     value: string;
 }): React.JSX.Element;
 /**
- * 複数のトグルアイテムをまとめて選択状態を管理するグループコンポーネント。
+ * Coordinates a value collection of toggle buttons within a toolbar.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarToggleGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarToggleGroup({ className, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive>): React.JSX.Element;
 export { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem, };

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

@@ -3,33 +3,120 @@ import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import * as React from 'react';
 /**
- * ツールバーのルートコンテナ。
+ * Coordinates keyboard navigation for a horizontal action toolbar.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Toolbar composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function Toolbar({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Root>): React.JSX.Element;
 /**
- * ツールバー内のアイテムをグループ化するためのコンポーネント。
+ * Lays out a related group of toolbar controls.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarGroup({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Group>): React.JSX.Element;
 /**
- * ツールバー内に配置されるアクション実行用ボタン。
+ * Renders an action button participating in toolbar focus navigation.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarButton composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarButton({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Button>): React.JSX.Element;
 /**
- * ツールバー内のグループやアイテム同士を区切るためのセパレーター。
+ * Separates toolbar control groups with a vertical rule.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarSeparator({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Separator>): React.JSX.Element;
 /**
- * ツールバー内に配置されるナビゲーション用のリンク。
+ * Renders a navigation link participating in toolbar focus navigation.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarLink composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarLink({ className, ...props }: React.ComponentProps<typeof ToolbarPrimitive.Link>): React.JSX.Element;
 /**
- * オン・オフの状態を切り替えるトグル式のツールバーアイテム。
+ * Renders one value-bearing Base UI toggle within a toolbar toggle group.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarToggleItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarToggleItem({ className, ...props }: React.ComponentProps<typeof TogglePrimitive> & {
+    /**
+     * Identity for this choice within the surrounding group; provide a distinct stable string.
+     */
     value: string;
 }): React.JSX.Element;
 /**
- * 複数のトグルアイテムをまとめて選択状態を管理するグループコンポーネント。
+ * Coordinates a value collection of toggle buttons within a toolbar.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ToolbarToggleGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose buttons/links/groups under Toolbar and toggle items under ToolbarToggleGroup. Base UI owns focus navigation and pressed selection. Callbacks and navigation effects remain host-owned.
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toolbar aria-label="Editor"><ToolbarGroup><ToolbarButton>Save</ToolbarButton><ToolbarLink href="/help">Help</ToolbarLink></ToolbarGroup><ToolbarSeparator /><ToolbarToggleGroup defaultValue={["bold"]}><ToolbarToggleItem value="bold" aria-label="Bold">B</ToolbarToggleItem></ToolbarToggleGroup></Toolbar>);
+ * }
+ * ```
  */
 declare function ToolbarToggleGroup({ className, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive>): React.JSX.Element;
 export { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator, ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem, };