@alneas/appkit-react 0.1.0 → 0.2.0

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

@@ -1,7 +1,16 @@
 /**
- * トースト通知を画面上に描画するためのコンテナコンポーネント。
+ * Renders notifications from the module-level Appkit toast store and supplies a Base UI provider/viewport.
+ * @returns The rendered Toaster composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Mount one Toaster in the client application shell. It subscribes through useToast; it does not require an external ToastProvider or QueryClient. Notifications use the custom div-based Toast wrapper, not Base UI toast manager data. State is in-memory/module-scoped rather than durable or per-request; the host owns notification content. Mapped Toast divs are siblings of ToastViewport rather than children of it, so the viewport does not position those notification elements; provide host layout if needed.
+ * @example
+ * ```tsx
+ * import { toast } from '@alneas/appkit-react/ui/hooks';
+ * import { Toaster } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
  *
- * アプリケーションのルート付近に一度だけ配置することで、
- * `useToast` フックによる通知が表示されるようになります。
+ * export function Example() {
+ *   return (<><button onClick={() => toast({ title: "Draft ready", description: "Review your draft." })}>Notify</button><Toaster /></>);
+ * }
+ * ```
  */
 export declare function Toaster(): import('react').JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"toaster.js","names":["Toaster","useToast","ToastProvider","toasts","props","Toast","title","ToastTitle","description","ToastDescription","action","ToastClose","id","ToastViewport"],"sources":["../../../../src/ui/components/ui/toaster.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from './toast';\nimport { useToast } from '../../lib/hooks/use-toast';\n\n/**\n * トースト通知を画面上に描画するためのコンテナコンポーネント。\n *\n * アプリケーションのルート付近に一度だけ配置することで、\n * `useToast` フックによる通知が表示されるようになります。\n */\nexport function Toaster() {\n  const { toasts } = useToast();\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ id, title, description, action, ...props }) {\n        return (\n          <Toast key={id} toast={{ id } as unknown as { id: string }} {...props}>\n            <div className='grid gap-1'>\n              {title && <ToastTitle>{title}</ToastTitle>}\n              {description && <ToastDescription>{description}</ToastDescription>}\n            </div>\n            {action}\n            <ToastClose />\n          </Toast>\n        );\n      })}\n      <ToastViewport />\n    </ToastProvider>\n  );\n}\n"],"mappings":";;;;;;AAkBA,SAAgBA,IAAU;CACxB,IAAM,EAAE,cAAWC,EAAS;CAE5B,OACE,kBAACC,GAAD,EAAA,UAAA,CACGC,EAAO,IAAI,SAAU,EAAE,OAAI,UAAO,gBAAa,WAAQ,GAAGC,KAAS;EAClE,OACE,kBAACC,GAAD;GAAgB,OAAO,EAAE,MAAG;GAAgC,GAAID;GAAhE,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACGE,KAAS,kBAACC,GAAD,EAAA,UAAaD,EAAkB,CAAA,GACxCE,KAAe,kBAACC,GAAD,EAAA,UAAmBD,EAA8B,CAAA,CAC9D;;IACJE;IACD,kBAACC,GAAD,CAAa,CAAA;GACR;EAPK,GAAAC,CAOL;CAEX,CAAC,GACD,kBAACC,GAAD,CAAgB,CAAA,CACH,EAAA,CAAA;AAEnB"}
+{"version":3,"file":"toaster.js","names":["Toaster","useToast","ToastProvider","toasts","props","Toast","title","ToastTitle","description","ToastDescription","action","ToastClose","id","ToastViewport"],"sources":["../../../../src/ui/components/ui/toaster.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from './toast';\nimport { useToast } from '../../lib/hooks/use-toast';\n\n/**\n * Renders notifications from the module-level Appkit toast store and supplies a Base UI provider/viewport.\n * @returns The rendered Toaster composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Mount one Toaster in the client application shell. It subscribes through useToast; it does not require an external ToastProvider or QueryClient. Notifications use the custom div-based Toast wrapper, not Base UI toast manager data. State is in-memory/module-scoped rather than durable or per-request; the host owns notification content. Mapped Toast divs are siblings of ToastViewport rather than children of it, so the viewport does not position those notification elements; provide host layout if needed.\n * @example\n * ```tsx\n * import { toast } from '@alneas/appkit-react/ui/hooks';\n * import { Toaster } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><button onClick={() => toast({ title: \"Draft ready\", description: \"Review your draft.\" })}>Notify</button><Toaster /></>);\n * }\n * ```\n */\nexport function Toaster() {\n  const { toasts } = useToast();\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ id, title, description, action, ...props }) {\n        return (\n          <Toast key={id} toast={{ id } as unknown as { id: string }} {...props}>\n            <div className='grid gap-1'>\n              {title && <ToastTitle>{title}</ToastTitle>}\n              {description && <ToastDescription>{description}</ToastDescription>}\n            </div>\n            {action}\n            <ToastClose />\n          </Toast>\n        );\n      })}\n      <ToastViewport />\n    </ToastProvider>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgBA,IAAU;CACxB,IAAM,EAAE,cAAWC,EAAS;CAE5B,OACE,kBAACC,GAAD,EAAA,UAAA,CACGC,EAAO,IAAI,SAAU,EAAE,OAAI,UAAO,gBAAa,WAAQ,GAAGC,KAAS;EAClE,OACE,kBAACC,GAAD;GAAgB,OAAO,EAAE,MAAG;GAAgC,GAAID;GAAhE,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACGE,KAAS,kBAACC,GAAD,EAAA,UAAaD,EAAkB,CAAA,GACxCE,KAAe,kBAACC,GAAD,EAAA,UAAmBD,EAA8B,CAAA,CAC9D;;IACJE;IACD,kBAACC,GAAD,CAAa,CAAA;GACR;EAPK,GAAAC,CAOL;CAEX,CAAC,GACD,kBAACC,GAAD,CAAgB,CAAA,CACH,EAAA,CAAA;AAEnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-components.cjs","names":["React","TogglePrimitive","cn","toggleVariants","require_runtime","require_ui_lib_utils","require_ui_components_ui_toggle_variants","react_jsx_runtime","react","_base_ui_react_toggle","Toggle","props"],"sources":["../../../../src/ui/components/ui/toggle-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { toggleVariants } from './toggle-variants';\n\nconst Toggle = React.forwardRef<\n  HTMLButtonElement,\n  TogglePrimitive.Props & VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive\n    ref={ref}\n    data-slot='toggle'\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n));\nToggle.displayName = 'Toggle';\n\nexport { Toggle };\n"],"mappings":"A,6TAOA,IAAMU,EAASV,EAAM,YAGlB,CAAE,YAAW,UAAS,OAAM,GAAGW,GAAS,KACzC,EAAAJ,EAAA,IAAA,CAACN,EAAAA,OAAD,CACO,MACL,YAAU,SACV,UAAWC,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,OAAM,WAAU,CAAC,CAAC,EAC1D,GAAIQ,CACL,CAAA,CACF,EACD,EAAO,YAAc,S"}
+{"version":3,"file":"toggle-components.cjs","names":["React","TogglePrimitive","cn","toggleVariants","require_runtime","require_ui_lib_utils","require_ui_components_ui_toggle_variants","react_jsx_runtime","react","_base_ui_react_toggle","Toggle","props"],"sources":["../../../../src/ui/components/ui/toggle-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { toggleVariants } from './toggle-variants';\n\n/**\n * Renders a binary pressed-state control with Appkit toggle variants.\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 Toggle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size use toggleVariants defaults (default). Base UI owns pressed/defaultPressed and onPressedChange behavior; this is a toggle button rather than a form checkbox. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Toggle } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Toggle aria-label=\"Bold\" defaultPressed>B</Toggle>);\n * }\n * ```\n */\nconst Toggle = React.forwardRef<\n  HTMLButtonElement,\n  TogglePrimitive.Props & VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive\n    ref={ref}\n    data-slot='toggle'\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n));\nToggle.displayName = 'Toggle';\n\nexport { Toggle };\n"],"mappings":"A,6TAsBA,IAAMU,EAASV,EAAM,YAGlB,CAAE,YAAW,UAAS,OAAM,GAAGW,GAAS,KACzC,EAAAJ,EAAA,IAAA,CAACN,EAAAA,OAAD,CACO,MACL,YAAU,SACV,UAAWC,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,OAAM,WAAU,CAAC,CAAC,EAC1D,GAAIQ,CACL,CAAA,CACF,EACD,EAAO,YAAc,S"}

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

@@ -1,6 +1,21 @@
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
+/**
+ * Renders a binary pressed-state control with Appkit toggle variants.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Toggle composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size use toggleVariants defaults (default). Base UI owns pressed/defaultPressed and onPressedChange behavior; this is a toggle button rather than a form checkbox. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Toggle } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toggle aria-label="Bold" defaultPressed>B</Toggle>);
+ * }
+ * ```
+ */
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.Props<string> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;

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

@@ -1,6 +1,21 @@
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
+/**
+ * Renders a binary pressed-state control with Appkit toggle variants.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Toggle composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size use toggleVariants defaults (default). Base UI owns pressed/defaultPressed and onPressedChange behavior; this is a toggle button rather than a form checkbox. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Toggle } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Toggle aria-label="Bold" defaultPressed>B</Toggle>);
+ * }
+ * ```
+ */
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.Props<string> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-components.js","names":["React","TogglePrimitive","React$1","Toggle$1","Toggle","props","cn","toggleVariants"],"sources":["../../../../src/ui/components/ui/toggle-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { toggleVariants } from './toggle-variants';\n\nconst Toggle = React.forwardRef<\n  HTMLButtonElement,\n  TogglePrimitive.Props & VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive\n    ref={ref}\n    data-slot='toggle'\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n));\nToggle.displayName = 'Toggle';\n\nexport { Toggle };\n"],"mappings":";;;;;;;AAOA,IAAMI,IAASJ,EAAM,YAGlB,EAAE,cAAW,YAAS,SAAM,GAAGK,KAAS,MACzC,kBAACJ,GAAD;CACO;CACL,aAAU;CACV,WAAWK,EAAGC,EAAe;EAAE;EAAS;EAAM;CAAU,CAAC,CAAC;CAC1D,GAAIF;AACL,CAAA,CACF;AACD,EAAO,cAAc"}
+{"version":3,"file":"toggle-components.js","names":["React","TogglePrimitive","React$1","Toggle$1","Toggle","props","cn","toggleVariants"],"sources":["../../../../src/ui/components/ui/toggle-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { toggleVariants } from './toggle-variants';\n\n/**\n * Renders a binary pressed-state control with Appkit toggle variants.\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 Toggle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size use toggleVariants defaults (default). Base UI owns pressed/defaultPressed and onPressedChange behavior; this is a toggle button rather than a form checkbox. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Toggle } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Toggle aria-label=\"Bold\" defaultPressed>B</Toggle>);\n * }\n * ```\n */\nconst Toggle = React.forwardRef<\n  HTMLButtonElement,\n  TogglePrimitive.Props & VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive\n    ref={ref}\n    data-slot='toggle'\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n));\nToggle.displayName = 'Toggle';\n\nexport { Toggle };\n"],"mappings":";;;;;;;AAsBA,IAAMI,IAASJ,EAAM,YAGlB,EAAE,cAAW,YAAS,SAAM,GAAGK,KAAS,MACzC,kBAACJ,GAAD;CACO;CACL,aAAU;CACV,WAAWK,EAAGC,EAAe;EAAE;EAAS;EAAM;CAAU,CAAC,CAAC;CAC1D,GAAIF;AACL,CAAA,CACF;AACD,EAAO,cAAc"}

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":["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\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 */\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\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 */\nconst ToggleGroupItem = React.forwardRef<\n  HTMLButtonElement,\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>(({ 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,mUAqBA,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,cAiB1B,IAAME,EAAkBb,EAAM,YAQ3B,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"}

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

@@ -1,8 +1,41 @@
 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 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 const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.Props<string> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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 const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<TogglePrimitive.Props<string> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /**
+     * Identity for this choice within the surrounding group; provide a distinct stable string.
+     */
     value: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleGroup, ToggleGroupItem };

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

@@ -1,8 +1,41 @@
 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 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 const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.Props<string> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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 const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<TogglePrimitive.Props<string> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /**
+     * Identity for this choice within the surrounding group; provide a distinct stable string.
+     */
     value: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleGroup, ToggleGroupItem };

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":["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\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 */\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\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 */\nconst ToggleGroupItem = React.forwardRef<\n  HTMLButtonElement,\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>(({ 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":";;;;;;;AAqBA,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;AAiB1B,IAAMG,IAAkBT,EAAM,YAQ3B,EAAE,cAAW,aAAU,GAAGM,KAAS,MAWlC,kBAACJ,GAAD;CACO;CACL,WAAWK,EACT,uZACAC,CACF;CACA,GAAIF;CAEH;AACc,CAAA,CAEpB;AACD,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, };