npm - @alneas/appkit-react - Versions diffs - 0.1.0 → 0.3.0 - Mend

@alneas/appkit-react 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1983) hide show

package/dist/ui/components/ui/avatar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.cjs","names":["React","AvatarPrimitive","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_avatar","Avatar","props","size","className","AvatarImage","AvatarFallback","AvatarBadge","AvatarGroup","AvatarGroupCount"],"sources":["../../../../src/ui/components/ui/avatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\n\nimport { cn } from '../../lib/utils';\n\nconst Avatar = React.forwardRef<\n HTMLSpanElement,\n AvatarPrimitive.Root.Props & { size?: 'default' \| 'sm' \| 'lg' }\n>(({ className, size = 'default', ...props }, ref) => (\n <AvatarPrimitive.Root\n ref={ref}\n data-slot='avatar'\n data-size={size}\n className={cn(\n 'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',\n className,\n )}\n {...props}\n />\n));\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nconst AvatarImage = React.forwardRef<HTMLImageElement, AvatarPrimitive.Image.Props>(\n ({ className, ...props }, ref) => (\n <AvatarPrimitive.Image\n ref={ref}\n data-slot='avatar-image'\n className={cn('rounded-full aspect-square size-full object-cover', className)}\n {...props}\n />\n ),\n);\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarPrimitive.Fallback.Props>(\n ({ className, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n data-slot='avatar-fallback'\n className={cn(\n 'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',\n className,\n )}\n {...props}\n />\n ),\n);\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\n/*\n アバターの右下などにステータス（オンラインなど）を示すためのバッジ。\n /\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot='avatar-badge'\n className={cn(\n 'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',\n 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n className,\n )}\n {...props}\n />\n );\n}\n\n/\n 複数のアバターを重ねて表示するグループコンテナ。\n /\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot='avatar-group'\n className={cn(\n ':data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 :data-[slot=avatar]:ring-2',\n className,\n )}\n {...props}\n />\n );\n}\n\n/\n アバターグループにおいて、表示制限を超えた残りのアバター数を表示するコンポーネント。\n */\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot='avatar-group-count'\n className={cn(\n 'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };\n"],"mappings":"A,uSAOA,IAAMQ,EAASR,EAAM,YAGlB,CAAE,YAAW,OAAO,UAAW,GAAGS,GAAS,KAC5C,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,OAAgB,KAAjB,CACO,MACL,YAAU,SACV,YAAWS,EACX,UAAWR,EAAAA,GACT,wPACAS,CACF,EACA,GAAIF,CACL,CAAA,CACF,EACD,EAAO,YAAcR,EAAAA,OAAgB,KAAK,YAE1C,IAAMW,EAAcZ,EAAM,YACvB,CAAE,YAAW,GAAGS,GAAS,KACxB,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,OAAgB,MAAjB,CACO,MACL,YAAU,eACV,UAAWC,EAAAA,GAAG,oDAAqDS,CAAS,EAC5E,GAAIF,CACL,CAAA,CAEL,EACA,EAAY,YAAcR,EAAAA,OAAgB,MAAM,YAEhD,IAAMY,EAAiBb,EAAM,YAC1B,CAAE,YAAW,GAAGS,GAAS,KACxB,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,OAAgB,SAAjB,CACO,MACL,YAAU,kBACV,UAAWC,EAAAA,GACT,qIACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,EACA,EAAe,YAAcR,EAAAA,OAAgB,SAAS,YAKtD,SAASa,EAAY,CAAE,YAAW,GAAGL,GAAuC,CAC1E,OACE,EAAAJ,EAAA,IAAA,CAAC,OAAD,CACE,YAAU,eACV,UAAWH,EAAAA,GACT,2KACA,gFACA,4FACA,gFACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CAKA,SAASM,EAAY,CAAE,YAAW,GAAGN,GAAsC,CACzE,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,eACV,UAAWH,EAAAA,GACT,sGACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CAKA,SAASO,EAAiB,CAAE,YAAW,GAAGP,GAAsC,CAC9E,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,qBACV,UAAWH,EAAAA,GACT,2VACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,C"}
1	+ {"version":3,"file":"avatar.cjs","names":["AvatarPrimitive","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_avatar","Avatar","props","size","className","AvatarImage","AvatarFallback","AvatarBadge","AvatarGroup","AvatarGroupCount"],"sources":["../../../../src/ui/components/ui/avatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\n\nimport { cn } from '../../lib/utils';\n\n/*\n Coordinates avatar image/fallback rendering and size styling.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: size='default'.\n * @returns The rendered Avatar composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction Avatar({\n ref,\n className,\n size = 'default',\n ...props\n}: React.PropsWithoutRef<\n AvatarPrimitive.Root.Props & {\n /\n Visual size preset; defaults to default unless the owning component states otherwise.\n /\n /\n Visual size preset; defaults to default unless the owning component states otherwise.\n /\n size?: 'default' \| 'sm' \| 'lg';\n }\n> &\n React.RefAttributes<HTMLSpanElement>) {\n return (\n <AvatarPrimitive.Root\n ref={ref}\n data-slot='avatar'\n data-size={size}\n className={cn(\n 'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',\n className,\n )}\n {...props}\n />\n );\n}\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\n/\n Renders the avatar image using Base UI loading behavior.\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 AvatarImage composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction AvatarImage({\n ref,\n className,\n ...props\n}: React.PropsWithoutRef<AvatarPrimitive.Image.Props> & React.RefAttributes<HTMLImageElement>) {\n return (\n <AvatarPrimitive.Image\n ref={ref}\n data-slot='avatar-image'\n className={cn('rounded-full aspect-square size-full object-cover', className)}\n {...props}\n />\n );\n}\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\n/\n Renders replacement avatar content when the image is unavailable.\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 AvatarFallback composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction AvatarFallback({\n ref,\n className,\n ...props\n}: React.PropsWithoutRef<AvatarPrimitive.Fallback.Props> & React.RefAttributes<HTMLSpanElement>) {\n return (\n <AvatarPrimitive.Fallback\n ref={ref}\n data-slot='avatar-fallback'\n className={cn(\n 'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',\n className,\n )}\n {...props}\n />\n );\n}\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\n/\n Positions a status indicator over the lower-right corner of an avatar.\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 AvatarBadge composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot='avatar-badge'\n className={cn(\n 'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',\n 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n className,\n )}\n {...props}\n />\n );\n}\n\n/\n Overlaps adjacent avatars with matching background rings.\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 AvatarGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot='avatar-group'\n className={cn(\n ':data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 :data-[slot=avatar]:ring-2',\n className,\n )}\n {...props}\n />\n );\n}\n\n/\n Styles caller-provided overflow text after a group of avatars.\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 AvatarGroupCount composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot='avatar-group-count'\n className={cn(\n 'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };\n"],"mappings":"A,uSAsBA,SAASO,EAAO,CACd,MACA,YACA,OAAO,UACP,GAAGC,GAYmC,CACtC,OACE,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,OAAgB,KAAjB,CACO,MACL,YAAU,SACV,YAAWS,EACX,UAAWR,EAAAA,GACT,wPACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CACA,EAAO,YAAcR,EAAAA,OAAgB,KAAK,YAiB1C,SAASW,EAAY,CACnB,MACA,YACA,GAAGH,GAC0F,CAC7F,OACE,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,OAAgB,MAAjB,CACO,MACL,YAAU,eACV,UAAWC,EAAAA,GAAG,oDAAqDS,CAAS,EAC5E,GAAIF,CACL,CAAA,CAEL,CACA,EAAY,YAAcR,EAAAA,OAAgB,MAAM,YAiBhD,SAASY,EAAe,CACtB,MACA,YACA,GAAGJ,GAC4F,CAC/F,OACE,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,OAAgB,SAAjB,CACO,MACL,YAAU,kBACV,UAAWC,EAAAA,GACT,qIACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CACA,EAAe,YAAcR,EAAAA,OAAgB,SAAS,YAiBtD,SAASa,EAAY,CAAE,YAAW,GAAGL,GAAuC,CAC1E,OACE,EAAAJ,EAAA,IAAA,CAAC,OAAD,CACE,YAAU,eACV,UAAWH,EAAAA,GACT,2KACA,gFACA,4FACA,gFACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CAiBA,SAASM,EAAY,CAAE,YAAW,GAAGN,GAAsC,CACzE,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,eACV,UAAWH,EAAAA,GACT,sGACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CAiBA,SAASO,EAAiB,CAAE,YAAW,GAAGP,GAAsC,CAC9E,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,qBACV,UAAWH,EAAAA,GACT,2VACAS,CACF,EACA,GAAIF,CACL,CAAA,CAEL,C"}

package/dist/ui/components/ui/avatar.d.cts CHANGED Viewed

@@ -1,19 +1,116 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import * as React from 'react';
-declare const Avatar: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarRootProps & {
-    size?: "default" | "sm" | "lg";
-}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 /**
- * アバターの右下などにステータス（オンラインなど）を示すためのバッジ。
+ * Coordinates avatar image/fallback rendering and size styling.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: size='default'.
+ * @returns The rendered Avatar composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
+ */
+declare function Avatar({ ref, className, size, ...props }: React.PropsWithoutRef<AvatarPrimitive.Root.Props & {
+    /**
+     * Visual size preset; defaults to default unless the owning component states otherwise.
+     */
+    /**
+     * Visual size preset; defaults to default unless the owning component states otherwise.
+     */
+    size?: 'default' | 'sm' | 'lg';
+}> & React.RefAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace Avatar {
+    var displayName: string | undefined;
+}
+/**
+ * Renders the avatar image using Base UI loading behavior.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarImage composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
+ */
+declare function AvatarImage({ ref, className, ...props }: React.PropsWithoutRef<AvatarPrimitive.Image.Props> & React.RefAttributes<HTMLImageElement>): React.JSX.Element;
+declare namespace AvatarImage {
+    var displayName: string | undefined;
+}
+/**
+ * Renders replacement avatar content when the image is unavailable.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarFallback composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
+ */
+declare function AvatarFallback({ ref, className, ...props }: React.PropsWithoutRef<AvatarPrimitive.Fallback.Props> & React.RefAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace AvatarFallback {
+    var displayName: string | undefined;
+}
+/**
+ * Positions a status indicator over the lower-right corner of an avatar.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarBadge composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
  */
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 /**
- * 複数のアバターを重ねて表示するグループコンテナ。
+ * Overlaps adjacent avatars with matching background rings.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
  */
 declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アバターグループにおいて、表示制限を超えた残りのアバター数を表示するコンポーネント。
+ * Styles caller-provided overflow text after a group of avatars.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarGroupCount composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
  */
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/dist/ui/components/ui/avatar.d.ts CHANGED Viewed

@@ -1,19 +1,116 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import * as React from 'react';
-declare const Avatar: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarRootProps & {
-    size?: "default" | "sm" | "lg";
-}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 /**
- * アバターの右下などにステータス（オンラインなど）を示すためのバッジ。
+ * Coordinates avatar image/fallback rendering and size styling.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: size='default'.
+ * @returns The rendered Avatar composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
+ */
+declare function Avatar({ ref, className, size, ...props }: React.PropsWithoutRef<AvatarPrimitive.Root.Props & {
+    /**
+     * Visual size preset; defaults to default unless the owning component states otherwise.
+     */
+    /**
+     * Visual size preset; defaults to default unless the owning component states otherwise.
+     */
+    size?: 'default' | 'sm' | 'lg';
+}> & React.RefAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace Avatar {
+    var displayName: string | undefined;
+}
+/**
+ * Renders the avatar image using Base UI loading behavior.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarImage composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
+ */
+declare function AvatarImage({ ref, className, ...props }: React.PropsWithoutRef<AvatarPrimitive.Image.Props> & React.RefAttributes<HTMLImageElement>): React.JSX.Element;
+declare namespace AvatarImage {
+    var displayName: string | undefined;
+}
+/**
+ * Renders replacement avatar content when the image is unavailable.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarFallback composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
+ */
+declare function AvatarFallback({ ref, className, ...props }: React.PropsWithoutRef<AvatarPrimitive.Fallback.Props> & React.RefAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace AvatarFallback {
+    var displayName: string | undefined;
+}
+/**
+ * Positions a status indicator over the lower-right corner of an avatar.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarBadge composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
  */
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 /**
- * 複数のアバターを重ねて表示するグループコンテナ。
+ * Overlaps adjacent avatars with matching background rings.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
  */
 declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アバターグループにおいて、表示制限を超えた残りのアバター数を表示するコンポーネント。
+ * Styles caller-provided overflow text after a group of avatars.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AvatarGroupCount composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AvatarGroup><Avatar><AvatarImage src="/avatar.png" alt="Ada" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label="Online" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);
+ * }
+ * ```
  */
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/dist/ui/components/ui/avatar.js CHANGED Viewed

@@ -2,46 +2,52 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { jsx as t } from "react/jsx-runtime";
-import * as n from "react";
-import { Avatar as r } from "@base-ui/react/avatar";
+import "react";
+import { Avatar as n } from "@base-ui/react/avatar";
 //#region src/ui/components/ui/avatar.tsx
-var i = n.forwardRef(({ className: n, size: i = "default", ...a }, o) => /* @__PURE__ */ t(r.Root, {
-	ref: o,
-	"data-slot": "avatar",
-	"data-size": i,
-	className: e("size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten", n),
-	...a
-}));
-i.displayName = r.Root.displayName;
-var a = n.forwardRef(({ className: n, ...i }, a) => /* @__PURE__ */ t(r.Image, {
-	ref: a,
-	"data-slot": "avatar-image",
-	className: e("rounded-full aspect-square size-full object-cover", n),
-	...i
-}));
-a.displayName = r.Image.displayName;
-var o = n.forwardRef(({ className: n, ...i }, a) => /* @__PURE__ */ t(r.Fallback, {
-	ref: a,
-	"data-slot": "avatar-fallback",
-	className: e("bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs", n),
-	...i
-}));
-o.displayName = r.Fallback.displayName;
-function s({ className: n, ...r }) {
+function r({ ref: r, className: i, size: a = "default", ...o }) {
+	return /* @__PURE__ */ t(n.Root, {
+		ref: r,
+		"data-slot": "avatar",
+		"data-size": a,
+		className: e("size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten", i),
+		...o
+	});
+}
+r.displayName = n.Root.displayName;
+function i({ ref: r, className: i, ...a }) {
+	return /* @__PURE__ */ t(n.Image, {
+		ref: r,
+		"data-slot": "avatar-image",
+		className: e("rounded-full aspect-square size-full object-cover", i),
+		...a
+	});
+}
+i.displayName = n.Image.displayName;
+function a({ ref: r, className: i, ...a }) {
+	return /* @__PURE__ */ t(n.Fallback, {
+		ref: r,
+		"data-slot": "avatar-fallback",
+		className: e("bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs", i),
+		...a
+	});
+}
+a.displayName = n.Fallback.displayName;
+function o({ className: n, ...r }) {
 	return /* @__PURE__ */ t("span", {
 		"data-slot": "avatar-badge",
 		className: e("bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", n),
 		...r
 	});
 }
-function c({ className: n, ...r }) {
+function s({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "avatar-group",
 		className: e("*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2", n),
 		...r
 	});
 }
-function l({ className: n, ...r }) {
+function c({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "avatar-group-count",
 		className: e("bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", n),
@@ -49,6 +55,6 @@ function l({ className: n, ...r }) {
 	});
 }
 //#endregion
-export { i as Avatar, s as AvatarBadge, o as AvatarFallback, c as AvatarGroup, l as AvatarGroupCount, a as AvatarImage };
+export { r as Avatar, o as AvatarBadge, a as AvatarFallback, s as AvatarGroup, c as AvatarGroupCount, i as AvatarImage };
 //# sourceMappingURL=avatar.js.map

package/dist/ui/components/ui/avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.js","names":["React","AvatarPrimitive","React$1","Avatar$1","Avatar","props","size","cn","className","AvatarImage","AvatarFallback","AvatarBadge","AvatarGroup","AvatarGroupCount"],"sources":["../../../../src/ui/components/ui/avatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\n\nimport { cn } from '../../lib/utils';\n\nconst Avatar = React.forwardRef<\n HTMLSpanElement,\n AvatarPrimitive.Root.Props & { size?: 'default' \| 'sm' \| 'lg' }\n>(({ className, size = 'default', ...props }, ref) => (\n <AvatarPrimitive.Root\n ref={ref}\n data-slot='avatar'\n data-size={size}\n className={cn(\n 'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',\n className,\n )}\n {...props}\n />\n));\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nconst AvatarImage = React.forwardRef<HTMLImageElement, AvatarPrimitive.Image.Props>(\n ({ className, ...props }, ref) => (\n <AvatarPrimitive.Image\n ref={ref}\n data-slot='avatar-image'\n className={cn('rounded-full aspect-square size-full object-cover', className)}\n {...props}\n />\n ),\n);\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarPrimitive.Fallback.Props>(\n ({ className, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n data-slot='avatar-fallback'\n className={cn(\n 'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',\n className,\n )}\n {...props}\n />\n ),\n);\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\n/*\n アバターの右下などにステータス（オンラインなど）を示すためのバッジ。\n /\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot='avatar-badge'\n className={cn(\n 'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',\n 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n className,\n )}\n {...props}\n />\n );\n}\n\n/\n 複数のアバターを重ねて表示するグループコンテナ。\n /\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot='avatar-group'\n className={cn(\n ':data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 :data-[slot=avatar]:ring-2',\n className,\n )}\n {...props}\n />\n );\n}\n\n/\n アバターグループにおいて、表示制限を超えた残りのアバター数を表示するコンポーネント。\n */\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot='avatar-group-count'\n className={cn(\n 'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };\n"],"mappings":";;;;;;;AAOA,IAAMI,IAASJ,EAAM,YAGlB,EAAE,cAAW,UAAO,WAAW,GAAGK,KAAS,MAC5C,kBAACJ,EAAgB,MAAjB;CACO;CACL,aAAU;CACV,aAAWK;CACX,WAAWC,EACT,yPACAC,CACF;CACA,GAAIH;AACL,CAAA,CACF;AACD,EAAO,cAAcJ,EAAgB,KAAK;AAE1C,IAAMQ,IAAcT,EAAM,YACvB,EAAE,cAAW,GAAGK,KAAS,MACxB,kBAACJ,EAAgB,OAAjB;CACO;CACL,aAAU;CACV,WAAWM,EAAG,qDAAqDC,CAAS;CAC5E,GAAIH;AACL,CAAA,CAEL;AACA,EAAY,cAAcJ,EAAgB,MAAM;AAEhD,IAAMS,IAAiBV,EAAM,YAC1B,EAAE,cAAW,GAAGK,KAAS,MACxB,kBAACJ,EAAgB,UAAjB;CACO;CACL,aAAU;CACV,WAAWM,EACT,sIACAC,CACF;CACA,GAAIH;AACL,CAAA,CAEL;AACA,EAAe,cAAcJ,EAAgB,SAAS;AAKtD,SAASU,EAAY,EAAE,cAAW,GAAGN,KAAuC;CAC1E,OACE,kBAAC,QAAD;EACE,aAAU;EACV,WAAWE,EACT,4KACA,iFACA,6FACA,iFACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAKA,SAASO,EAAY,EAAE,cAAW,GAAGP,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,uGACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAKA,SAASQ,EAAiB,EAAE,cAAW,GAAGR,KAAsC;CAC9E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,4VACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL"}
1	+ {"version":3,"file":"avatar.js","names":["AvatarPrimitive","Avatar$1","Avatar","props","size","cn","className","AvatarImage","AvatarFallback","AvatarBadge","AvatarGroup","AvatarGroupCount"],"sources":["../../../../src/ui/components/ui/avatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\n\nimport { cn } from '../../lib/utils';\n\n/*\n Coordinates avatar image/fallback rendering and size styling.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: size='default'.\n * @returns The rendered Avatar composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction Avatar({\n ref,\n className,\n size = 'default',\n ...props\n}: React.PropsWithoutRef<\n AvatarPrimitive.Root.Props & {\n /\n Visual size preset; defaults to default unless the owning component states otherwise.\n /\n /\n Visual size preset; defaults to default unless the owning component states otherwise.\n /\n size?: 'default' \| 'sm' \| 'lg';\n }\n> &\n React.RefAttributes<HTMLSpanElement>) {\n return (\n <AvatarPrimitive.Root\n ref={ref}\n data-slot='avatar'\n data-size={size}\n className={cn(\n 'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',\n className,\n )}\n {...props}\n />\n );\n}\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\n/\n Renders the avatar image using Base UI loading behavior.\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 AvatarImage composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction AvatarImage({\n ref,\n className,\n ...props\n}: React.PropsWithoutRef<AvatarPrimitive.Image.Props> & React.RefAttributes<HTMLImageElement>) {\n return (\n <AvatarPrimitive.Image\n ref={ref}\n data-slot='avatar-image'\n className={cn('rounded-full aspect-square size-full object-cover', className)}\n {...props}\n />\n );\n}\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\n/\n Renders replacement avatar content when the image is unavailable.\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 AvatarFallback composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction AvatarFallback({\n ref,\n className,\n ...props\n}: React.PropsWithoutRef<AvatarPrimitive.Fallback.Props> & React.RefAttributes<HTMLSpanElement>) {\n return (\n <AvatarPrimitive.Fallback\n ref={ref}\n data-slot='avatar-fallback'\n className={cn(\n 'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',\n className,\n )}\n {...props}\n />\n );\n}\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\n/\n Positions a status indicator over the lower-right corner of an avatar.\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 AvatarBadge composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot='avatar-badge'\n className={cn(\n 'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',\n 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n className,\n )}\n {...props}\n />\n );\n}\n\n/\n Overlaps adjacent avatars with matching background rings.\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 AvatarGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n /\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot='avatar-group'\n className={cn(\n ':data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 :data-[slot=avatar]:ring-2',\n className,\n )}\n {...props}\n />\n );\n}\n\n/\n Styles caller-provided overflow text after a group of avatars.\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 AvatarGroupCount composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot='avatar-group-count'\n className={cn(\n 'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };\n"],"mappings":";;;;;;;AAsBA,SAASE,EAAO,EACd,QACA,cACA,UAAO,WACP,GAAGC,KAYmC;CACtC,OACE,kBAACH,EAAgB,MAAjB;EACO;EACL,aAAU;EACV,aAAWI;EACX,WAAWC,EACT,yPACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AACA,EAAO,cAAcH,EAAgB,KAAK;AAiB1C,SAASO,EAAY,EACnB,QACA,cACA,GAAGJ,KAC0F;CAC7F,OACE,kBAACH,EAAgB,OAAjB;EACO;EACL,aAAU;EACV,WAAWK,EAAG,qDAAqDC,CAAS;EAC5E,GAAIH;CACL,CAAA;AAEL;AACA,EAAY,cAAcH,EAAgB,MAAM;AAiBhD,SAASQ,EAAe,EACtB,QACA,cACA,GAAGL,KAC4F;CAC/F,OACE,kBAACH,EAAgB,UAAjB;EACO;EACL,aAAU;EACV,WAAWK,EACT,sIACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AACA,EAAe,cAAcH,EAAgB,SAAS;AAiBtD,SAASS,EAAY,EAAE,cAAW,GAAGN,KAAuC;CAC1E,OACE,kBAAC,QAAD;EACE,aAAU;EACV,WAAWE,EACT,4KACA,iFACA,6FACA,iFACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASO,EAAY,EAAE,cAAW,GAAGP,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,uGACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASQ,EAAiB,EAAE,cAAW,GAAGR,KAAsC;CAC9E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,4VACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL"}

package/dist/ui/components/ui/badge-components.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge-components.cjs","names":["useRender","mergeProps","cn","badgeVariants","require_ui_lib_utils","require_ui_components_ui_badge_variants","_base_ui_react_merge_props","_base_ui_react_use_render","Badge","props"],"sources":["../../../../src/ui/components/ui/badge-components.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { badgeVariants } from './badge-variants';\n\n/*\n ~~ステータスやタグなどの短い情報を表示するためのバッジコンポーネント。\~~n */\nfunction Badge({\n className,\n variant = 'default',\n render,\n ...props\n}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {\n return useRender({\n defaultTagName: 'span',\n props: mergeProps<'span'>(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props,\n ),\n render,\n state: {\n slot: 'badge',\n variant,\n },\n });\n}\n\nexport { Badge };\n"],"mappings":"A,~~4OAUA~~,SAASQ,EAAM,CACb,YACA,UAAU,UACV,SACA,GAAGC,GACqE,CACxE,OAAA,EAAOT,EAAAA,UAAAA,CAAU,CACf,eAAgB,OAChB,OAAA,EAAOC,EAAAA,WAAAA,CACL,CACE,UAAWC,EAAAA,GAAGC,EAAAA,cAAc,CAAE,YAAW,SAAQ,CAAC,CAAC,CACrD,EACAM,CACF,EACA,SACA,MAAO,CACL,KAAM,QACN,SACF,CACF,CAAC,CACH,C"}
1	+ {"version":3,"file":"badge-components.cjs","names":["useRender","mergeProps","cn","badgeVariants","require_ui_lib_utils","require_ui_components_ui_badge_variants","_base_ui_react_merge_props","_base_ui_react_use_render","Badge","props"],"sources":["../../../../src/ui/components/ui/badge-components.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { badgeVariants } from './badge-variants';\n\n/*\n Renders a compact status or tag using a span or a caller-supplied render element.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.\n * @returns The rendered Badge composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant defaults to default. render follows Base UI useRender composition and must accept the merged props; no asChild adapter is provided. A badge has no built-in interaction or dismissal.\n * @example\n * ```tsx\n * import { Badge } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<Badge variant=\"secondary\">Draft</Badge>);\n * }\n * ```\n */\nfunction Badge({\n className,\n variant = 'default',\n render,\n ...props\n}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {\n return useRender({\n defaultTagName: 'span',\n props: mergeProps<'span'>(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props,\n ),\n render,\n state: {\n slot: 'badge',\n variant,\n },\n });\n}\n\nexport { Badge };\n"],"mappings":"A,4OAsBA,SAASQ,EAAM,CACb,YACA,UAAU,UACV,SACA,GAAGC,GACqE,CACxE,OAAA,EAAOT,EAAAA,UAAAA,CAAU,CACf,eAAgB,OAChB,OAAA,EAAOC,EAAAA,WAAAA,CACL,CACE,UAAWC,EAAAA,GAAGC,EAAAA,cAAc,CAAE,YAAW,SAAQ,CAAC,CAAC,CACrD,EACAM,CACF,EACA,SACA,MAAO,CACL,KAAM,QACN,SACF,CACF,CAAC,CACH,C"}

package/dist/ui/components/ui/badge-components.d.cts CHANGED Viewed

@@ -2,7 +2,19 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import { badgeVariants } from './badge-variants.cjs';
 /**
- * ステータスやタグなどの短い情報を表示するためのバッジコンポーネント。
+ * Renders a compact status or tag using a span or a caller-supplied render element.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.
+ * @returns The rendered Badge composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant defaults to default. render follows Base UI useRender composition and must accept the merged props; no asChild adapter is provided. A badge has no built-in interaction or dismissal.
+ * @example
+ * ```tsx
+ * import { Badge } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Badge variant="secondary">Draft</Badge>);
+ * }
+ * ```
  */
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export { Badge };

package/dist/ui/components/ui/badge-components.d.ts CHANGED Viewed

@@ -2,7 +2,19 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import { badgeVariants } from './badge-variants.js';
 /**
- * ステータスやタグなどの短い情報を表示するためのバッジコンポーネント。
+ * Renders a compact status or tag using a span or a caller-supplied render element.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.
+ * @returns The rendered Badge composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant defaults to default. render follows Base UI useRender composition and must accept the merged props; no asChild adapter is provided. A badge has no built-in interaction or dismissal.
+ * @example
+ * ```tsx
+ * import { Badge } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Badge variant="secondary">Draft</Badge>);
+ * }
+ * ```
  */
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export { Badge };

package/dist/ui/components/ui/badge-components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge-components.js","names":["Badge","props","useRender","mergeProps","cn","badgeVariants"],"sources":["../../../../src/ui/components/ui/badge-components.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { badgeVariants } from './badge-variants';\n\n/*\n ~~ステータスやタグなどの短い情報を表示するためのバッジコンポーネント。\~~n */\nfunction Badge({\n className,\n variant = 'default',\n render,\n ...props\n}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {\n return useRender({\n defaultTagName: 'span',\n props: mergeProps<'span'>(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props,\n ),\n render,\n state: {\n slot: 'badge',\n variant,\n },\n });\n}\n\nexport { Badge };\n"],"mappings":";;;;;;~~AAUA~~,SAASA,EAAM,EACb,cACA,aAAU,WACV,WACA,GAAGC,KACqE;CACxE,OAAOC,EAAU;EACf,gBAAgB;EAChB,OAAOC,EACL,EACE,WAAWC,EAAGC,EAAc;GAAE;GAAW;EAAQ,CAAC,CAAC,EACrD,GACAJ,CACF;EACA;EACA,OAAO;GACL,MAAM;GACN;EACF;CACF,CAAC;AACH"}
1	+ {"version":3,"file":"badge-components.js","names":["Badge","props","useRender","mergeProps","cn","badgeVariants"],"sources":["../../../../src/ui/components/ui/badge-components.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { badgeVariants } from './badge-variants';\n\n/*\n Renders a compact status or tag using a span or a caller-supplied render element.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.\n * @returns The rendered Badge composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant defaults to default. render follows Base UI useRender composition and must accept the merged props; no asChild adapter is provided. A badge has no built-in interaction or dismissal.\n * @example\n * ```tsx\n * import { Badge } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<Badge variant=\"secondary\">Draft</Badge>);\n * }\n * ```\n */\nfunction Badge({\n className,\n variant = 'default',\n render,\n ...props\n}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {\n return useRender({\n defaultTagName: 'span',\n props: mergeProps<'span'>(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props,\n ),\n render,\n state: {\n slot: 'badge',\n variant,\n },\n });\n}\n\nexport { Badge };\n"],"mappings":";;;;;;AAsBA,SAASA,EAAM,EACb,cACA,aAAU,WACV,WACA,GAAGC,KACqE;CACxE,OAAOC,EAAU;EACf,gBAAgB;EAChB,OAAOC,EACL,EACE,WAAWC,EAAGC,EAAc;GAAE;GAAW;EAAQ,CAAC,CAAC,EACrD,GACAJ,CACF;EACA;EACA,OAAO;GACL,MAAM;GACN;EACF;CACF,CAAC;AACH"}

package/dist/ui/components/ui/badge-variants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge-variants.cjs","names":["cva","badgeVariants"],"sources":["../../../../src/ui/components/ui/badge-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const badgeVariants = cva(\n 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n destructive:\n 'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',\n outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n"],"mappings":"A,~~gFAEA~~,IAAaC,GAAA,E,kCAAgBD,CAAAA,CAAAA,IAAAA,CAC3B,+fACA,CACE,SAAU,~~CACR~~,QAAS,CACP,QAAS,6DACT,UAAW,mEACX,YACE,iKACF,QAAS,mFACT,MAAO,oEACP,KAAM,iDACR,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CACF,E"}
1	+ {"version":3,"file":"badge-variants.cjs","names":["cva","badgeVariants"],"sources":["../../../../src/ui/components/ui/badge-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/*\n Builds class names for compact badge visual treatments.\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 defaults to default; secondary, destructive, outline, ghost and link are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.\n * @example\n * ```tsx\n * import { badgeVariants } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<div className={badgeVariants()}>Styled content</div>);\n * }\n * ```\n /\nexport const badgeVariants = cva(\n 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge',\n {\n variants: {\n /\n Visual treatment selected by the consumer; these values change CSS classes only.\n * Accepted values: default, secondary, destructive, outline, ghost, link.\n * @defaultValue 'default'\n * @see badgeVariants\n */\n variant: {\n default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n destructive:\n 'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',\n outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n"],"mappings":"A,gFAiBA,IAAaC,GAAA,E,kCAAgBD,CAAAA,CAAAA,IAAAA,CAC3B,+fACA,CACE,SAAU,CAOR,QAAS,CACP,QAAS,6DACT,UAAW,mEACX,YACE,iKACF,QAAS,mFACT,MAAO,oEACP,KAAM,iDACR,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CACF,E"}

package/dist/ui/components/ui/badge-variants.d.cts CHANGED Viewed

@@ -1,3 +1,18 @@
+/**
+ * Builds class names for compact badge visual treatments.
+ * @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 defaults to default; secondary, destructive, outline, ghost and link are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.
+ * @example
+ * ```tsx
+ * import { badgeVariants } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<div className={badgeVariants()}>Styled content</div>);
+ * }
+ * ```
+ */
 export declare const badgeVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/ui/components/ui/badge-variants.d.ts CHANGED Viewed

@@ -1,3 +1,18 @@
+/**
+ * Builds class names for compact badge visual treatments.
+ * @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 defaults to default; secondary, destructive, outline, ghost and link are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.
+ * @example
+ * ```tsx
+ * import { badgeVariants } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<div className={badgeVariants()}>Styled content</div>);
+ * }
+ * ```
+ */
 export declare const badgeVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/ui/components/ui/badge-variants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge-variants.js","names":["badgeVariants","cva"],"sources":["../../../../src/ui/components/ui/badge-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const badgeVariants = cva(\n 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n destructive:\n 'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',\n outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n"],"mappings":";;;~~AAEA~~,IAAaA,IAAgBC,EAC3B,ggBACA;CACE,UAAU,~~EACR~~,SAAS;EACP,SAAS;EACT,WAAW;EACX,aACE;EACF,SAAS;EACT,OAAO;EACP,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF"}
1	+ {"version":3,"file":"badge-variants.js","names":["badgeVariants","cva"],"sources":["../../../../src/ui/components/ui/badge-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/*\n Builds class names for compact badge visual treatments.\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 defaults to default; secondary, destructive, outline, ghost and link are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.\n * @example\n * ```tsx\n * import { badgeVariants } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function Example() {\n * return (<div className={badgeVariants()}>Styled content</div>);\n * }\n * ```\n /\nexport const badgeVariants = cva(\n 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge',\n {\n variants: {\n /\n Visual treatment selected by the consumer; these values change CSS classes only.\n * Accepted values: default, secondary, destructive, outline, ghost, link.\n * @defaultValue 'default'\n * @see badgeVariants\n */\n variant: {\n default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n destructive:\n 'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',\n outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n"],"mappings":";;;AAiBA,IAAaA,IAAgBC,EAC3B,ggBACA;CACE,UAAU,EAOR,SAAS;EACP,SAAS;EACT,WAAW;EACX,aACE;EACF,SAAS;EACT,OAAO;EACP,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF"}