@karakuri-ui/react 0.2.2 → 0.2.4

package/dist/components/ui/avatar.d.mts

@@ -0,0 +1,232 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { VariantProps } from 'class-variance-authority';
+
+declare const avatarVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const avatarColors: readonly [{
+    readonly vivid: {
+        readonly bg: "bg-[#DC2626]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEE2E2]";
+        readonly text: "text-[#DC2626]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#EA580C]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FFEDD5]";
+        readonly text: "text-[#EA580C]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#D97706]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEF3C7]";
+        readonly text: "text-[#B45309]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#CA8A04]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEF9C3]";
+        readonly text: "text-[#A16207]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#059669]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#D1FAE5]";
+        readonly text: "text-[#047857]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#0D9488]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#CCFBF1]";
+        readonly text: "text-[#0F766E]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#0891B2]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#CFFAFE]";
+        readonly text: "text-[#0E7490]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#2563EB]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#DBEAFE]";
+        readonly text: "text-[#1D4ED8]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#4F46E5]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#E0E7FF]";
+        readonly text: "text-[#4338CA]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#7C3AED]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#EDE9FE]";
+        readonly text: "text-[#6D28D9]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#9333EA]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#F3E8FF]";
+        readonly text: "text-[#7E22CE]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#DB2777]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FCE7F3]";
+        readonly text: "text-[#BE185D]";
+    };
+}];
+type AvatarColorVariant = 'vivid' | 'soft';
+/** Extract initials from a name string (e.g. "John Doe" → "JD", "김민수" → "김민") */
+declare function getAvatarInitials(name: string, maxChars?: number): string;
+/** Hash a name string to a deterministic avatar color pair (djb2 xor variant) */
+declare function getAvatarColor(name: string, variant?: AvatarColorVariant): {
+    readonly bg: "bg-[#DC2626]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEE2E2]";
+    readonly text: "text-[#DC2626]";
+} | {
+    readonly bg: "bg-[#EA580C]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FFEDD5]";
+    readonly text: "text-[#EA580C]";
+} | {
+    readonly bg: "bg-[#D97706]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEF3C7]";
+    readonly text: "text-[#B45309]";
+} | {
+    readonly bg: "bg-[#CA8A04]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEF9C3]";
+    readonly text: "text-[#A16207]";
+} | {
+    readonly bg: "bg-[#059669]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#D1FAE5]";
+    readonly text: "text-[#047857]";
+} | {
+    readonly bg: "bg-[#0D9488]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#CCFBF1]";
+    readonly text: "text-[#0F766E]";
+} | {
+    readonly bg: "bg-[#0891B2]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#CFFAFE]";
+    readonly text: "text-[#0E7490]";
+} | {
+    readonly bg: "bg-[#2563EB]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#DBEAFE]";
+    readonly text: "text-[#1D4ED8]";
+} | {
+    readonly bg: "bg-[#4F46E5]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#E0E7FF]";
+    readonly text: "text-[#4338CA]";
+} | {
+    readonly bg: "bg-[#7C3AED]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#EDE9FE]";
+    readonly text: "text-[#6D28D9]";
+} | {
+    readonly bg: "bg-[#9333EA]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#F3E8FF]";
+    readonly text: "text-[#7E22CE]";
+} | {
+    readonly bg: "bg-[#DB2777]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FCE7F3]";
+    readonly text: "text-[#BE185D]";
+};
+type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl';
+type AvatarShape = 'circle' | 'square';
+type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+    status?: AvatarStatus;
+}
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+}
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+    size?: AvatarSize;
+    /** Shorthand: auto-generates initials + color from a name. Children override auto-initials. */
+    name?: string;
+    /** Pass a name/key to enable colorized mode. The string is hashed to pick a deterministic color. */
+    colorized?: string;
+    /** Color style: "vivid" (strong bg + white text) or "soft" (pastel bg + dark text). Default: "vivid" */
+    colorVariant?: AvatarColorVariant;
+}
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    max?: number;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>> & {
+    Image: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+    Fallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+    Group: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+};
+declare namespace Avatar {
+    type ImageProps = AvatarImageProps;
+    type FallbackProps = AvatarFallbackProps;
+    type GroupProps = AvatarGroupProps;
+}
+
+export { Avatar, type AvatarColorVariant, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, avatarColors, avatarVariants, getAvatarColor, getAvatarInitials };

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

@@ -0,0 +1,232 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { VariantProps } from 'class-variance-authority';
+
+declare const avatarVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
+    shape?: "circle" | "square" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const avatarColors: readonly [{
+    readonly vivid: {
+        readonly bg: "bg-[#DC2626]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEE2E2]";
+        readonly text: "text-[#DC2626]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#EA580C]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FFEDD5]";
+        readonly text: "text-[#EA580C]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#D97706]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEF3C7]";
+        readonly text: "text-[#B45309]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#CA8A04]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FEF9C3]";
+        readonly text: "text-[#A16207]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#059669]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#D1FAE5]";
+        readonly text: "text-[#047857]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#0D9488]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#CCFBF1]";
+        readonly text: "text-[#0F766E]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#0891B2]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#CFFAFE]";
+        readonly text: "text-[#0E7490]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#2563EB]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#DBEAFE]";
+        readonly text: "text-[#1D4ED8]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#4F46E5]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#E0E7FF]";
+        readonly text: "text-[#4338CA]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#7C3AED]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#EDE9FE]";
+        readonly text: "text-[#6D28D9]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#9333EA]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#F3E8FF]";
+        readonly text: "text-[#7E22CE]";
+    };
+}, {
+    readonly vivid: {
+        readonly bg: "bg-[#DB2777]";
+        readonly text: "text-white";
+    };
+    readonly soft: {
+        readonly bg: "bg-[#FCE7F3]";
+        readonly text: "text-[#BE185D]";
+    };
+}];
+type AvatarColorVariant = 'vivid' | 'soft';
+/** Extract initials from a name string (e.g. "John Doe" → "JD", "김민수" → "김민") */
+declare function getAvatarInitials(name: string, maxChars?: number): string;
+/** Hash a name string to a deterministic avatar color pair (djb2 xor variant) */
+declare function getAvatarColor(name: string, variant?: AvatarColorVariant): {
+    readonly bg: "bg-[#DC2626]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEE2E2]";
+    readonly text: "text-[#DC2626]";
+} | {
+    readonly bg: "bg-[#EA580C]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FFEDD5]";
+    readonly text: "text-[#EA580C]";
+} | {
+    readonly bg: "bg-[#D97706]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEF3C7]";
+    readonly text: "text-[#B45309]";
+} | {
+    readonly bg: "bg-[#CA8A04]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FEF9C3]";
+    readonly text: "text-[#A16207]";
+} | {
+    readonly bg: "bg-[#059669]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#D1FAE5]";
+    readonly text: "text-[#047857]";
+} | {
+    readonly bg: "bg-[#0D9488]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#CCFBF1]";
+    readonly text: "text-[#0F766E]";
+} | {
+    readonly bg: "bg-[#0891B2]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#CFFAFE]";
+    readonly text: "text-[#0E7490]";
+} | {
+    readonly bg: "bg-[#2563EB]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#DBEAFE]";
+    readonly text: "text-[#1D4ED8]";
+} | {
+    readonly bg: "bg-[#4F46E5]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#E0E7FF]";
+    readonly text: "text-[#4338CA]";
+} | {
+    readonly bg: "bg-[#7C3AED]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#EDE9FE]";
+    readonly text: "text-[#6D28D9]";
+} | {
+    readonly bg: "bg-[#9333EA]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#F3E8FF]";
+    readonly text: "text-[#7E22CE]";
+} | {
+    readonly bg: "bg-[#DB2777]";
+    readonly text: "text-white";
+} | {
+    readonly bg: "bg-[#FCE7F3]";
+    readonly text: "text-[#BE185D]";
+};
+type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl';
+type AvatarShape = 'circle' | 'square';
+type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+    status?: AvatarStatus;
+}
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+}
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+    size?: AvatarSize;
+    /** Shorthand: auto-generates initials + color from a name. Children override auto-initials. */
+    name?: string;
+    /** Pass a name/key to enable colorized mode. The string is hashed to pick a deterministic color. */
+    colorized?: string;
+    /** Color style: "vivid" (strong bg + white text) or "soft" (pastel bg + dark text). Default: "vivid" */
+    colorVariant?: AvatarColorVariant;
+}
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    max?: number;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>> & {
+    Image: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+    Fallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+    Group: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+};
+declare namespace Avatar {
+    type ImageProps = AvatarImageProps;
+    type FallbackProps = AvatarFallbackProps;
+    type GroupProps = AvatarGroupProps;
+}
+
+export { Avatar, type AvatarColorVariant, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, avatarColors, avatarVariants, getAvatarColor, getAvatarInitials };