@shipfox/react-ui 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 (98) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/.turbo/turbo-check.log +3 -3
  3. package/.turbo/turbo-type.log +1 -1
  4. package/CHANGELOG.md +12 -0
  5. package/dist/components/alert/alert.d.ts +18 -0
  6. package/dist/components/alert/alert.d.ts.map +1 -0
  7. package/dist/components/alert/alert.js +123 -0
  8. package/dist/components/alert/alert.js.map +1 -0
  9. package/dist/components/alert/alert.stories.js +112 -0
  10. package/dist/components/alert/alert.stories.js.map +1 -0
  11. package/dist/components/alert/index.d.ts +2 -0
  12. package/dist/components/alert/index.d.ts.map +1 -0
  13. package/dist/components/alert/index.js +3 -0
  14. package/dist/components/alert/index.js.map +1 -0
  15. package/dist/components/avatar/avatar-group.d.ts +18 -0
  16. package/dist/components/avatar/avatar-group.d.ts.map +1 -0
  17. package/dist/components/avatar/avatar-group.js +132 -0
  18. package/dist/components/avatar/avatar-group.js.map +1 -0
  19. package/dist/components/avatar/avatar.d.ts +21 -0
  20. package/dist/components/avatar/avatar.d.ts.map +1 -0
  21. package/dist/components/avatar/avatar.js +166 -0
  22. package/dist/components/avatar/avatar.js.map +1 -0
  23. package/dist/components/avatar/avatar.stories.js +255 -0
  24. package/dist/components/avatar/avatar.stories.js.map +1 -0
  25. package/dist/components/avatar/index.d.ts +3 -0
  26. package/dist/components/avatar/index.d.ts.map +1 -0
  27. package/dist/components/avatar/index.js +4 -0
  28. package/dist/components/avatar/index.js.map +1 -0
  29. package/dist/components/icon/custom/index.d.ts +1 -0
  30. package/dist/components/icon/custom/index.d.ts.map +1 -1
  31. package/dist/components/icon/custom/index.js +1 -0
  32. package/dist/components/icon/custom/index.js.map +1 -1
  33. package/dist/components/icon/custom/shipfox-logo.d.ts +8 -0
  34. package/dist/components/icon/custom/shipfox-logo.d.ts.map +1 -0
  35. package/dist/components/icon/custom/shipfox-logo.js +22 -0
  36. package/dist/components/icon/custom/shipfox-logo.js.map +1 -0
  37. package/dist/components/icon/icon.d.ts +4 -1
  38. package/dist/components/icon/icon.d.ts.map +1 -1
  39. package/dist/components/icon/icon.js +6 -3
  40. package/dist/components/icon/icon.js.map +1 -1
  41. package/dist/components/index.d.ts +4 -0
  42. package/dist/components/index.d.ts.map +1 -1
  43. package/dist/components/index.js +4 -0
  44. package/dist/components/index.js.map +1 -1
  45. package/dist/components/inline-tips/index.d.ts +2 -0
  46. package/dist/components/inline-tips/index.d.ts.map +1 -0
  47. package/dist/components/inline-tips/index.js +3 -0
  48. package/dist/components/inline-tips/index.js.map +1 -0
  49. package/dist/components/inline-tips/inline-tips.d.ts +19 -0
  50. package/dist/components/inline-tips/inline-tips.d.ts.map +1 -0
  51. package/dist/components/inline-tips/inline-tips.js +98 -0
  52. package/dist/components/inline-tips/inline-tips.js.map +1 -0
  53. package/dist/components/inline-tips/inline-tips.stories.js +214 -0
  54. package/dist/components/inline-tips/inline-tips.stories.js.map +1 -0
  55. package/dist/components/textarea/index.d.ts +2 -0
  56. package/dist/components/textarea/index.d.ts.map +1 -0
  57. package/dist/components/textarea/index.js +3 -0
  58. package/dist/components/textarea/index.js.map +1 -0
  59. package/dist/components/textarea/textarea.d.ts +10 -0
  60. package/dist/components/textarea/textarea.d.ts.map +1 -0
  61. package/dist/components/textarea/textarea.js +31 -0
  62. package/dist/components/textarea/textarea.js.map +1 -0
  63. package/dist/components/textarea/textarea.stories.js +333 -0
  64. package/dist/components/textarea/textarea.stories.js.map +1 -0
  65. package/dist/components/tooltip/tooltip.d.ts +7 -0
  66. package/dist/components/tooltip/tooltip.d.ts.map +1 -0
  67. package/dist/components/tooltip/tooltip.js +38 -0
  68. package/dist/components/tooltip/tooltip.js.map +1 -0
  69. package/dist/utils/avatar.d.ts +3 -0
  70. package/dist/utils/avatar.d.ts.map +1 -0
  71. package/dist/utils/avatar.js +32 -0
  72. package/dist/utils/avatar.js.map +1 -0
  73. package/dist/utils/index.d.ts +1 -0
  74. package/dist/utils/index.d.ts.map +1 -1
  75. package/dist/utils/index.js +1 -0
  76. package/dist/utils/index.js.map +1 -1
  77. package/index.css +32 -1
  78. package/package.json +5 -5
  79. package/src/components/alert/alert.stories.tsx +77 -0
  80. package/src/components/alert/alert.tsx +144 -0
  81. package/src/components/alert/index.ts +1 -0
  82. package/src/components/avatar/avatar-group.tsx +186 -0
  83. package/src/components/avatar/avatar.stories.tsx +172 -0
  84. package/src/components/avatar/avatar.tsx +215 -0
  85. package/src/components/avatar/index.ts +2 -0
  86. package/src/components/icon/custom/index.ts +1 -0
  87. package/src/components/icon/custom/shipfox-logo.tsx +20 -0
  88. package/src/components/icon/icon.tsx +11 -1
  89. package/src/components/index.ts +4 -0
  90. package/src/components/inline-tips/index.ts +1 -0
  91. package/src/components/inline-tips/inline-tips.stories.tsx +126 -0
  92. package/src/components/inline-tips/inline-tips.tsx +132 -0
  93. package/src/components/textarea/index.ts +1 -0
  94. package/src/components/textarea/textarea.stories.tsx +190 -0
  95. package/src/components/textarea/textarea.tsx +42 -0
  96. package/src/components/tooltip/tooltip.tsx +52 -0
  97. package/src/utils/avatar.ts +27 -0
  98. package/src/utils/index.ts +1 -0
@@ -1,6 +1,6 @@
1
1
   WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
2
2
 
3
- > @shipfox/react-ui@0.1.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
3
+ > @shipfox/react-ui@0.3.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
4
4
  > swc
5
5
 
6
- Successfully compiled: 45 files with swc (307.49ms)
6
+ Successfully compiled: 61 files with swc (164.23ms)
@@ -1,6 +1,6 @@
1
1
   WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
2
2
 
3
- > @shipfox/react-ui@0.1.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
4
- > biome --fix
3
+ > @shipfox/react-ui@0.3.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
4
+ > biome-check --fix
5
5
 
6
- Checked 61 files in 482ms. No fixes applied.
6
+ Checked 77 files in 116ms. No fixes applied.
@@ -1,5 +1,5 @@
1
1
   WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
2
2
 
3
- > @shipfox/react-ui@0.1.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
3
+ > @shipfox/react-ui@0.3.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
4
4
  > tsc-emit
5
5
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @shipfox/react-ui
2
2
 
3
+ ## 0.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - ab01d39: Add Avatar and Avatar Group components
8
+
9
+ ## 0.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - d2f5795: Add textarea component
14
+
3
15
  ## 0.1.0
4
16
 
5
17
  ### Minor Changes
@@ -0,0 +1,18 @@
1
+ import { type VariantProps } from 'class-variance-authority';
2
+ import type { ComponentProps } from 'react';
3
+ declare const alertVariants: (props?: ({
4
+ variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
5
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
+ declare const closeIconVariants: (props?: ({
7
+ variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
8
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
9
+ type AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;
10
+ declare function Alert({ className, variant, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
11
+ declare function AlertContent({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
12
+ declare function AlertTitle({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
13
+ declare function AlertDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
14
+ declare function AlertActions({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
15
+ declare function AlertAction({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
16
+ declare function AlertClose({ className, variant, ...props }: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>): import("react/jsx-runtime").JSX.Element;
17
+ export { Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose };
18
+ //# sourceMappingURL=alert.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAEhE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,QAAA,MAAM,aAAa;;8EAgBlB,CAAC;AAiBF,QAAA,MAAM,iBAAiB;;8EAarB,CAAC;AAEH,KAAK,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE7E,iBAAS,KAAK,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,2CAclE;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAEjE;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAQ/D;AAED,iBAAS,gBAAgB,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAWrE;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,KAAK,CAAC,2CAQjE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAYnE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,2CAenE;AAED,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAC,CAAC"}
@@ -0,0 +1,123 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { cva } from 'class-variance-authority';
3
+ import { Icon } from '../../components/icon/index.js';
4
+ import { cn } from '../../utils/cn.js';
5
+ const alertVariants = cva('relative w-full rounded-l-4 rounded-r-8 px-16 py-12 text-sm flex gap-12 items-start border', {
6
+ variants: {
7
+ variant: {
8
+ default: 'bg-tag-neutral-bg text-foreground-neutral-base border-tag-neutral-border',
9
+ info: 'bg-tag-blue-bg text-foreground-neutral-base border-tag-blue-border',
10
+ success: 'bg-tag-success-bg text-foreground-neutral-base border-tag-success-border',
11
+ warning: 'bg-tag-warning-bg text-foreground-neutral-base border-tag-warning-border',
12
+ destructive: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border'
13
+ }
14
+ },
15
+ defaultVariants: {
16
+ variant: 'default'
17
+ }
18
+ });
19
+ const alertLineVariants = cva('w-4 self-stretch rounded-full', {
20
+ variants: {
21
+ variant: {
22
+ default: 'bg-tag-neutral-icon',
23
+ info: 'bg-tag-blue-icon',
24
+ success: 'bg-tag-success-icon',
25
+ warning: 'bg-tag-warning-icon',
26
+ destructive: 'bg-tag-error-icon'
27
+ }
28
+ },
29
+ defaultVariants: {
30
+ variant: 'default'
31
+ }
32
+ });
33
+ const closeIconVariants = cva('w-16 h-16', {
34
+ variants: {
35
+ variant: {
36
+ default: 'text-tag-neutral-icon',
37
+ info: 'text-tag-blue-icon',
38
+ success: 'text-tag-success-icon',
39
+ warning: 'text-tag-warning-icon',
40
+ destructive: 'text-tag-error-icon'
41
+ }
42
+ },
43
+ defaultVariants: {
44
+ variant: 'default'
45
+ }
46
+ });
47
+ function Alert({ className, variant, children, ...props }) {
48
+ return /*#__PURE__*/ _jsxs("div", {
49
+ className: "w-full flex items-start gap-4",
50
+ children: [
51
+ /*#__PURE__*/ _jsx("div", {
52
+ "data-slot": "alert-line",
53
+ className: cn(alertLineVariants({
54
+ variant
55
+ })),
56
+ "aria-hidden": "true"
57
+ }),
58
+ /*#__PURE__*/ _jsx("div", {
59
+ "data-slot": "alert",
60
+ role: "alert",
61
+ className: cn(alertVariants({
62
+ variant
63
+ }), className),
64
+ ...props,
65
+ children: children
66
+ })
67
+ ]
68
+ });
69
+ }
70
+ function AlertContent({ className, ...props }) {
71
+ return /*#__PURE__*/ _jsx("div", {
72
+ "data-slot": "alert-content",
73
+ className: cn('flex-1 min-w-0', className),
74
+ ...props
75
+ });
76
+ }
77
+ function AlertTitle({ className, ...props }) {
78
+ return /*#__PURE__*/ _jsx("div", {
79
+ "data-slot": "alert-title",
80
+ className: cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className),
81
+ ...props
82
+ });
83
+ }
84
+ function AlertDescription({ className, ...props }) {
85
+ return /*#__PURE__*/ _jsx("div", {
86
+ "data-slot": "alert-description",
87
+ className: cn('text-xs leading-20 text-foreground-neutral-base [&_p]:leading-relaxed', className),
88
+ ...props
89
+ });
90
+ }
91
+ function AlertActions({ className, ...props }) {
92
+ return /*#__PURE__*/ _jsx("div", {
93
+ "data-slot": "alert-actions",
94
+ className: cn('flex items-center gap-8 mt-8', className),
95
+ ...props
96
+ });
97
+ }
98
+ function AlertAction({ className, ...props }) {
99
+ return /*#__PURE__*/ _jsx("button", {
100
+ "data-slot": "alert-action",
101
+ type: "button",
102
+ className: cn('bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2', className),
103
+ ...props
104
+ });
105
+ }
106
+ function AlertClose({ className, variant = 'default', ...props }) {
107
+ return /*#__PURE__*/ _jsx("button", {
108
+ "data-slot": "alert-close",
109
+ type: "button",
110
+ className: cn('absolute cursor-pointer top-12 right-12 rounded-4 p-4 bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2', className),
111
+ "aria-label": "Close",
112
+ ...props,
113
+ children: /*#__PURE__*/ _jsx(Icon, {
114
+ name: "close",
115
+ className: cn(closeIconVariants({
116
+ variant
117
+ }))
118
+ })
119
+ });
120
+ }
121
+ export { Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose };
122
+
123
+ //# sourceMappingURL=alert.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nconst alertVariants = cva(\n 'relative w-full rounded-l-4 rounded-r-8 px-16 py-12 text-sm flex gap-12 items-start border',\n {\n variants: {\n variant: {\n default: 'bg-tag-neutral-bg text-foreground-neutral-base border-tag-neutral-border',\n info: 'bg-tag-blue-bg text-foreground-neutral-base border-tag-blue-border',\n success: 'bg-tag-success-bg text-foreground-neutral-base border-tag-success-border',\n warning: 'bg-tag-warning-bg text-foreground-neutral-base border-tag-warning-border',\n destructive: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n\nconst alertLineVariants = cva('w-4 self-stretch rounded-full', {\n variants: {\n variant: {\n default: 'bg-tag-neutral-icon',\n info: 'bg-tag-blue-icon',\n success: 'bg-tag-success-icon',\n warning: 'bg-tag-warning-icon',\n destructive: 'bg-tag-error-icon',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nconst closeIconVariants = cva('w-16 h-16', {\n variants: {\n variant: {\n default: 'text-tag-neutral-icon',\n info: 'text-tag-blue-icon',\n success: 'text-tag-success-icon',\n warning: 'text-tag-warning-icon',\n destructive: 'text-tag-error-icon',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\ntype AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;\n\nfunction Alert({className, variant, children, ...props}: AlertProps) {\n return (\n <div className=\"w-full flex items-start gap-4\">\n <div data-slot=\"alert-line\" className={cn(alertLineVariants({variant}))} aria-hidden=\"true\" />\n <div\n data-slot=\"alert\"\n role=\"alert\"\n className={cn(alertVariants({variant}), className)}\n {...props}\n >\n {children}\n </div>\n </div>\n );\n}\n\nfunction AlertContent({className, ...props}: ComponentProps<'div'>) {\n return <div data-slot=\"alert-content\" className={cn('flex-1 min-w-0', className)} {...props} />;\n}\n\nfunction AlertTitle({className, ...props}: ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-title\"\n className={cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className)}\n {...props}\n />\n );\n}\n\nfunction AlertDescription({className, ...props}: ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-description\"\n className={cn(\n 'text-xs leading-20 text-foreground-neutral-base [&_p]:leading-relaxed',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertActions({className, ...props}: ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-actions\"\n className={cn('flex items-center gap-8 mt-8', className)}\n {...props}\n />\n );\n}\n\nfunction AlertAction({className, ...props}: ComponentProps<'button'>) {\n return (\n <button\n data-slot=\"alert-action\"\n type=\"button\"\n className={cn(\n 'bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertClose({\n className,\n variant = 'default',\n ...props\n}: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>) {\n return (\n <button\n data-slot=\"alert-close\"\n type=\"button\"\n className={cn(\n 'absolute cursor-pointer top-12 right-12 rounded-4 p-4 bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',\n className,\n )}\n aria-label=\"Close\"\n {...props}\n >\n <Icon name=\"close\" className={cn(closeIconVariants({variant}))} />\n </button>\n );\n}\n\nexport {Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose};\n"],"names":["cva","Icon","cn","alertVariants","variants","variant","default","info","success","warning","destructive","defaultVariants","alertLineVariants","closeIconVariants","Alert","className","children","props","div","data-slot","aria-hidden","role","AlertContent","AlertTitle","AlertDescription","AlertActions","AlertAction","button","type","AlertClose","aria-label","name"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAO,kBAAkB;AAErC,SAAQC,EAAE,QAAO,WAAW;AAE5B,MAAMC,gBAAgBH,IACpB,8FACA;IACEI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,aAAa;QACf;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAGF,MAAMO,oBAAoBZ,IAAI,iCAAiC;IAC7DI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,aAAa;QACf;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAEA,MAAMQ,oBAAoBb,IAAI,aAAa;IACzCI,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,MAAM;YACNC,SAAS;YACTC,SAAS;YACTC,aAAa;QACf;IACF;IACAC,iBAAiB;QACfN,SAAS;IACX;AACF;AAIA,SAASS,MAAM,EAACC,SAAS,EAAEV,OAAO,EAAEW,QAAQ,EAAE,GAAGC,OAAkB;IACjE,qBACE,MAACC;QAAIH,WAAU;;0BACb,KAACG;gBAAIC,aAAU;gBAAaJ,WAAWb,GAAGU,kBAAkB;oBAACP;gBAAO;gBAAKe,eAAY;;0BACrF,KAACF;gBACCC,aAAU;gBACVE,MAAK;gBACLN,WAAWb,GAAGC,cAAc;oBAACE;gBAAO,IAAIU;gBACvC,GAAGE,KAAK;0BAERD;;;;AAIT;AAEA,SAASM,aAAa,EAACP,SAAS,EAAE,GAAGE,OAA6B;IAChE,qBAAO,KAACC;QAAIC,aAAU;QAAgBJ,WAAWb,GAAG,kBAAkBa;QAAa,GAAGE,KAAK;;AAC7F;AAEA,SAASM,WAAW,EAACR,SAAS,EAAE,GAAGE,OAA6B;IAC9D,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GAAG,oEAAoEa;QACjF,GAAGE,KAAK;;AAGf;AAEA,SAASO,iBAAiB,EAACT,SAAS,EAAE,GAAGE,OAA6B;IACpE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GACT,yEACAa;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASQ,aAAa,EAACV,SAAS,EAAE,GAAGE,OAA6B;IAChE,qBACE,KAACC;QACCC,aAAU;QACVJ,WAAWb,GAAG,gCAAgCa;QAC7C,GAAGE,KAAK;;AAGf;AAEA,SAASS,YAAY,EAACX,SAAS,EAAE,GAAGE,OAAgC;IAClE,qBACE,KAACU;QACCR,aAAU;QACVS,MAAK;QACLb,WAAWb,GACT,8RACAa;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASY,WAAW,EAClBd,SAAS,EACTV,UAAU,SAAS,EACnB,GAAGY,OAC+D;IAClE,qBACE,KAACU;QACCR,aAAU;QACVS,MAAK;QACLb,WAAWb,GACT,sUACAa;QAEFe,cAAW;QACV,GAAGb,KAAK;kBAET,cAAA,KAAChB;YAAK8B,MAAK;YAAQhB,WAAWb,GAAGW,kBAAkB;gBAACR;YAAO;;;AAGjE;AAEA,SAAQS,KAAK,EAAEQ,YAAY,EAAEC,UAAU,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,WAAW,EAAEG,UAAU,GAAE"}
@@ -0,0 +1,112 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Header } from '../../components/typography/index.js';
3
+ import { Alert, AlertAction, AlertActions, AlertClose, AlertContent, AlertDescription, AlertTitle } from './alert.js';
4
+ const meta = {
5
+ title: 'Components/Alert',
6
+ component: Alert,
7
+ tags: [
8
+ 'autodocs'
9
+ ],
10
+ argTypes: {
11
+ variant: {
12
+ control: 'select',
13
+ options: [
14
+ 'default',
15
+ 'info',
16
+ 'success',
17
+ 'warning',
18
+ 'destructive'
19
+ ]
20
+ }
21
+ },
22
+ args: {
23
+ variant: 'default'
24
+ }
25
+ };
26
+ export default meta;
27
+ const variants = [
28
+ 'default',
29
+ 'info',
30
+ 'success',
31
+ 'warning',
32
+ 'destructive'
33
+ ];
34
+ export const Default = {
35
+ render: (args)=>{
36
+ return /*#__PURE__*/ _jsxs(Alert, {
37
+ ...args,
38
+ children: [
39
+ /*#__PURE__*/ _jsxs(AlertContent, {
40
+ children: [
41
+ /*#__PURE__*/ _jsx(AlertTitle, {
42
+ children: "Title"
43
+ }),
44
+ /*#__PURE__*/ _jsx(AlertDescription, {
45
+ children: "Description"
46
+ }),
47
+ /*#__PURE__*/ _jsxs(AlertActions, {
48
+ children: [
49
+ /*#__PURE__*/ _jsx(AlertAction, {
50
+ children: "Download"
51
+ }),
52
+ /*#__PURE__*/ _jsx(AlertAction, {
53
+ children: "View"
54
+ })
55
+ ]
56
+ })
57
+ ]
58
+ }),
59
+ /*#__PURE__*/ _jsx(AlertClose, {
60
+ variant: args.variant
61
+ })
62
+ ]
63
+ });
64
+ }
65
+ };
66
+ export const DesignMock = {
67
+ render: ()=>{
68
+ return /*#__PURE__*/ _jsxs("div", {
69
+ className: "flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base",
70
+ children: [
71
+ /*#__PURE__*/ _jsx(Header, {
72
+ variant: "h3",
73
+ className: "text-foreground-neutral-subtle",
74
+ children: "ALERTS"
75
+ }),
76
+ /*#__PURE__*/ _jsx("div", {
77
+ className: "flex flex-col gap-16",
78
+ children: variants.map((variant)=>/*#__PURE__*/ _jsxs(Alert, {
79
+ variant: variant,
80
+ children: [
81
+ /*#__PURE__*/ _jsxs(AlertContent, {
82
+ children: [
83
+ /*#__PURE__*/ _jsx(AlertTitle, {
84
+ children: "Title"
85
+ }),
86
+ /*#__PURE__*/ _jsx(AlertDescription, {
87
+ children: "Description"
88
+ }),
89
+ /*#__PURE__*/ _jsxs(AlertActions, {
90
+ children: [
91
+ /*#__PURE__*/ _jsx(AlertAction, {
92
+ children: "Download"
93
+ }),
94
+ /*#__PURE__*/ _jsx(AlertAction, {
95
+ children: "View"
96
+ })
97
+ ]
98
+ })
99
+ ]
100
+ }),
101
+ /*#__PURE__*/ _jsx(AlertClose, {
102
+ variant: variant
103
+ })
104
+ ]
105
+ }, variant))
106
+ })
107
+ ]
108
+ });
109
+ }
110
+ };
111
+
112
+ //# sourceMappingURL=alert.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/alert/alert.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Header} from 'components/typography';\nimport {\n Alert,\n AlertAction,\n AlertActions,\n AlertClose,\n AlertContent,\n AlertDescription,\n AlertTitle,\n} from './alert';\n\nconst meta = {\n title: 'Components/Alert',\n component: Alert,\n tags: ['autodocs'],\n argTypes: {\n variant: {\n control: 'select',\n options: ['default', 'info', 'success', 'warning', 'destructive'],\n },\n },\n args: {\n variant: 'default',\n },\n} satisfies Meta<typeof Alert>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst variants = ['default', 'info', 'success', 'warning', 'destructive'] as const;\n\nexport const Default: Story = {\n render: (args) => {\n return (\n <Alert {...args}>\n <AlertContent>\n <AlertTitle>Title</AlertTitle>\n <AlertDescription>Description</AlertDescription>\n <AlertActions>\n <AlertAction>Download</AlertAction>\n <AlertAction>View</AlertAction>\n </AlertActions>\n </AlertContent>\n <AlertClose variant={args.variant} />\n </Alert>\n );\n },\n};\n\nexport const DesignMock: Story = {\n render: () => {\n return (\n <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n <Header variant=\"h3\" className=\"text-foreground-neutral-subtle\">\n ALERTS\n </Header>\n <div className=\"flex flex-col gap-16\">\n {variants.map((variant) => (\n <Alert key={variant} variant={variant}>\n <AlertContent>\n <AlertTitle>Title</AlertTitle>\n <AlertDescription>Description</AlertDescription>\n <AlertActions>\n <AlertAction>Download</AlertAction>\n <AlertAction>View</AlertAction>\n </AlertActions>\n </AlertContent>\n <AlertClose variant={variant} />\n </Alert>\n ))}\n </div>\n </div>\n );\n },\n};\n"],"names":["Header","Alert","AlertAction","AlertActions","AlertClose","AlertContent","AlertDescription","AlertTitle","meta","title","component","tags","argTypes","variant","control","options","args","variants","Default","render","DesignMock","div","className","map"],"mappings":";AACA,SAAQA,MAAM,QAAO,wBAAwB;AAC7C,SACEC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,UAAU,QACL,UAAU;AAEjB,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWT;IACXU,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAS;gBAAC;gBAAW;gBAAQ;gBAAW;gBAAW;aAAc;QACnE;IACF;IACAC,MAAM;QACJH,SAAS;IACX;AACF;AAEA,eAAeL,KAAK;AAIpB,MAAMS,WAAW;IAAC;IAAW;IAAQ;IAAW;IAAW;CAAc;AAEzE,OAAO,MAAMC,UAAiB;IAC5BC,QAAQ,CAACH;QACP,qBACE,MAACf;YAAO,GAAGe,IAAI;;8BACb,MAACX;;sCACC,KAACE;sCAAW;;sCACZ,KAACD;sCAAiB;;sCAClB,MAACH;;8CACC,KAACD;8CAAY;;8CACb,KAACA;8CAAY;;;;;;8BAGjB,KAACE;oBAAWS,SAASG,KAAKH,OAAO;;;;IAGvC;AACF,EAAE;AAEF,OAAO,MAAMO,aAAoB;IAC/BD,QAAQ;QACN,qBACE,MAACE;YAAIC,WAAU;;8BACb,KAACtB;oBAAOa,SAAQ;oBAAKS,WAAU;8BAAiC;;8BAGhE,KAACD;oBAAIC,WAAU;8BACZL,SAASM,GAAG,CAAC,CAACV,wBACb,MAACZ;4BAAoBY,SAASA;;8CAC5B,MAACR;;sDACC,KAACE;sDAAW;;sDACZ,KAACD;sDAAiB;;sDAClB,MAACH;;8DACC,KAACD;8DAAY;;8DACb,KAACA;8DAAY;;;;;;8CAGjB,KAACE;oCAAWS,SAASA;;;2BATXA;;;;IAetB;AACF,EAAE"}
@@ -0,0 +1,2 @@
1
+ export * from './alert';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from './alert.js';
2
+
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/alert/index.ts"],"sourcesContent":["export * from './alert';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}
@@ -0,0 +1,18 @@
1
+ import { type VariantProps } from 'class-variance-authority';
2
+ import { type ComponentProps, type ReactElement } from 'react';
3
+ import { TooltipContent } from '../tooltip/tooltip';
4
+ declare const avatarGroupVariants: (props?: ({
5
+ size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
6
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
+ type TooltipContentProps = ComponentProps<typeof TooltipContent>;
8
+ type AvatarGroupTooltipProps = TooltipContentProps;
9
+ declare function AvatarGroupTooltip(props: AvatarGroupTooltipProps): import("react/jsx-runtime").JSX.Element;
10
+ type AvatarGroupProps = ComponentProps<'div'> & VariantProps<typeof avatarGroupVariants> & {
11
+ children: ReactElement[];
12
+ maxVisible?: number;
13
+ animateOnHover?: boolean;
14
+ tooltipProps?: Partial<TooltipContentProps>;
15
+ };
16
+ export declare function AvatarGroup({ className, size, children, maxVisible, animateOnHover, tooltipProps, ...props }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
17
+ export { AvatarGroupTooltip, type AvatarGroupTooltipProps };
18
+ //# sourceMappingURL=avatar-group.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAC,cAAc,EAAkC,MAAM,oBAAoB,CAAC;AAEnF,QAAA,MAAM,mBAAmB;;8EAiBvB,CAAC;AAwBH,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAkDjE,KAAK,uBAAuB,GAAG,mBAAmB,CAAC;AAEnD,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAEzD;AAED,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAC3C,YAAY,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACzC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CAC7C,CAAC;AAEJ,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,IAAW,EACX,QAAQ,EACR,UAAU,EACV,cAAsB,EACtB,YAA2C,EAC3C,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAyDlB;AAED,OAAO,EAAC,kBAAkB,EAAE,KAAK,uBAAuB,EAAC,CAAC"}
@@ -0,0 +1,132 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
3
+ import { cva } from 'class-variance-authority';
4
+ import { Children, cloneElement, useMemo } from 'react';
5
+ import { cn } from '../../utils/cn.js';
6
+ import { TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip/tooltip.js';
7
+ const avatarGroupVariants = cva('flex items-start', {
8
+ variants: {
9
+ size: {
10
+ '3xs': '-space-x-4',
11
+ '2xs': '-space-x-4',
12
+ xs: '-space-x-4',
13
+ sm: '-space-x-4',
14
+ md: '-space-x-4',
15
+ lg: '-space-x-6',
16
+ xl: '-space-x-6',
17
+ '2xl': '-space-x-12',
18
+ '3xl': '-space-x-12'
19
+ }
20
+ },
21
+ defaultVariants: {
22
+ size: 'md'
23
+ }
24
+ });
25
+ const avatarGroupOverflowVariants = cva('flex shrink-0 items-center justify-center rounded-full bg-background-components-base text-foreground-neutral-subtle font-medium ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral', {
26
+ variants: {
27
+ size: {
28
+ '3xs': 'size-[18px] text-[10px] leading-[10px]',
29
+ '2xs': 'size-[20px] text-[11px] leading-[11px]',
30
+ xs: 'size-[24px] text-xs leading-4',
31
+ sm: 'size-[28px] text-xs leading-5',
32
+ md: 'size-[32px] text-sm leading-5',
33
+ lg: 'size-[36px] text-sm leading-5',
34
+ xl: 'size-[40px] text-base leading-6',
35
+ '2xl': 'size-[80px] text-2xl leading-8',
36
+ '3xl': 'size-[120px] text-4xl leading-[56px]'
37
+ }
38
+ },
39
+ defaultVariants: {
40
+ size: 'md'
41
+ }
42
+ });
43
+ function AvatarContainer({ children, zIndex, tooltipContent, tooltipProps, animateOnHover = false }) {
44
+ return /*#__PURE__*/ _jsxs(TooltipPrimitive.Root, {
45
+ children: [
46
+ /*#__PURE__*/ _jsx(TooltipTrigger, {
47
+ asChild: true,
48
+ children: /*#__PURE__*/ _jsx("div", {
49
+ "data-slot": "avatar-container",
50
+ className: cn('relative', animateOnHover && 'transition-transform duration-300 ease-out hover:-translate-y-2'),
51
+ style: {
52
+ zIndex
53
+ },
54
+ children: children
55
+ })
56
+ }),
57
+ tooltipContent && /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
58
+ ...tooltipProps,
59
+ children: tooltipContent
60
+ })
61
+ ]
62
+ });
63
+ }
64
+ function getTooltipContent(children) {
65
+ const tooltip = Children.toArray(children).find((child)=>typeof child === 'object' && child !== null && 'type' in child && child.type === AvatarGroupTooltip);
66
+ return tooltip?.props.children || null;
67
+ }
68
+ function AvatarGroupTooltip(props) {
69
+ return /*#__PURE__*/ _jsx(TooltipContent, {
70
+ ...props
71
+ });
72
+ }
73
+ export function AvatarGroup({ className, size = 'md', children, maxVisible, animateOnHover = false, tooltipProps = {
74
+ side: 'top',
75
+ sideOffset: 8
76
+ }, ...props }) {
77
+ const normalizedSize = size ?? 'md';
78
+ const childrenArray = Children.toArray(children);
79
+ const { visibleCount, visibleAvatars, overflowCount } = useMemo(()=>{
80
+ const count = maxVisible !== undefined ? Math.min(maxVisible, childrenArray.length) : childrenArray.length;
81
+ return {
82
+ visibleCount: count,
83
+ visibleAvatars: childrenArray.slice(0, count),
84
+ overflowCount: childrenArray.length - count
85
+ };
86
+ }, [
87
+ childrenArray,
88
+ maxVisible
89
+ ]);
90
+ return /*#__PURE__*/ _jsx(TooltipProvider, {
91
+ delayDuration: 0,
92
+ children: /*#__PURE__*/ _jsxs("div", {
93
+ className: cn(avatarGroupVariants({
94
+ size: normalizedSize
95
+ }), className),
96
+ "data-slot": "avatar-group",
97
+ ...props,
98
+ children: [
99
+ visibleAvatars.map((child, index)=>{
100
+ const zIndex = index + 1;
101
+ const childProps = 'props' in child ? child.props : {};
102
+ const tooltipContent = getTooltipContent(childProps.children);
103
+ return /*#__PURE__*/ _jsx(AvatarContainer, {
104
+ zIndex: zIndex,
105
+ tooltipContent: tooltipContent,
106
+ tooltipProps: tooltipProps,
107
+ animateOnHover: animateOnHover,
108
+ children: /*#__PURE__*/ cloneElement(child, {
109
+ ...childProps,
110
+ children: tooltipContent ? undefined : childProps.children
111
+ })
112
+ }, child.key || index);
113
+ }),
114
+ overflowCount > 0 && /*#__PURE__*/ _jsxs("div", {
115
+ className: cn('relative', avatarGroupOverflowVariants({
116
+ size: normalizedSize
117
+ }), 'rounded-full'),
118
+ style: {
119
+ zIndex: visibleCount + 1
120
+ },
121
+ children: [
122
+ "+",
123
+ overflowCount
124
+ ]
125
+ })
126
+ ]
127
+ })
128
+ });
129
+ }
130
+ export { AvatarGroupTooltip };
131
+
132
+ //# sourceMappingURL=avatar-group.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {\n Children,\n type ComponentProps,\n cloneElement,\n type ReactElement,\n type ReactNode,\n useMemo,\n} from 'react';\nimport {cn} from 'utils/cn';\nimport {TooltipContent, TooltipProvider, TooltipTrigger} from '../tooltip/tooltip';\n\nconst avatarGroupVariants = cva('flex items-start', {\n variants: {\n size: {\n '3xs': '-space-x-4',\n '2xs': '-space-x-4',\n xs: '-space-x-4',\n sm: '-space-x-4',\n md: '-space-x-4',\n lg: '-space-x-6',\n xl: '-space-x-6',\n '2xl': '-space-x-12',\n '3xl': '-space-x-12',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nconst avatarGroupOverflowVariants = cva(\n 'flex shrink-0 items-center justify-center rounded-full bg-background-components-base text-foreground-neutral-subtle font-medium ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral',\n {\n variants: {\n size: {\n '3xs': 'size-[18px] text-[10px] leading-[10px]',\n '2xs': 'size-[20px] text-[11px] leading-[11px]',\n xs: 'size-[24px] text-xs leading-4',\n sm: 'size-[28px] text-xs leading-5',\n md: 'size-[32px] text-sm leading-5',\n lg: 'size-[36px] text-sm leading-5',\n xl: 'size-[40px] text-base leading-6',\n '2xl': 'size-[80px] text-2xl leading-8',\n '3xl': 'size-[120px] text-4xl leading-[56px]',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n },\n);\n\ntype TooltipContentProps = ComponentProps<typeof TooltipContent>;\n\ntype AvatarContainerProps = {\n children: ReactNode;\n zIndex: number;\n tooltipContent?: ReactNode;\n tooltipProps?: Partial<TooltipContentProps>;\n animateOnHover?: boolean;\n};\n\nfunction AvatarContainer({\n children,\n zIndex,\n tooltipContent,\n tooltipProps,\n animateOnHover = false,\n}: AvatarContainerProps) {\n return (\n <TooltipPrimitive.Root>\n <TooltipTrigger asChild>\n <div\n data-slot=\"avatar-container\"\n className={cn(\n 'relative',\n animateOnHover && 'transition-transform duration-300 ease-out hover:-translate-y-2',\n )}\n style={{zIndex}}\n >\n {children}\n </div>\n </TooltipTrigger>\n {tooltipContent && (\n <AvatarGroupTooltip {...tooltipProps}>{tooltipContent}</AvatarGroupTooltip>\n )}\n </TooltipPrimitive.Root>\n );\n}\n\nfunction getTooltipContent(children: ReactNode): ReactNode | null {\n const tooltip = Children.toArray(children).find(\n (child) =>\n typeof child === 'object' &&\n child !== null &&\n 'type' in child &&\n child.type === AvatarGroupTooltip,\n ) as ReactElement<ComponentProps<typeof AvatarGroupTooltip>> | undefined;\n\n return tooltip?.props.children || null;\n}\n\ntype AvatarGroupTooltipProps = TooltipContentProps;\n\nfunction AvatarGroupTooltip(props: AvatarGroupTooltipProps) {\n return <TooltipContent {...props} />;\n}\n\ntype AvatarGroupProps = ComponentProps<'div'> &\n VariantProps<typeof avatarGroupVariants> & {\n children: ReactElement[];\n maxVisible?: number;\n animateOnHover?: boolean;\n tooltipProps?: Partial<TooltipContentProps>;\n };\n\nexport function AvatarGroup({\n className,\n size = 'md',\n children,\n maxVisible,\n animateOnHover = false,\n tooltipProps = {side: 'top', sideOffset: 8},\n ...props\n}: AvatarGroupProps) {\n const normalizedSize = size ?? 'md';\n\n const childrenArray = Children.toArray(children) as ReactElement[];\n\n const {visibleCount, visibleAvatars, overflowCount} = useMemo(() => {\n const count =\n maxVisible !== undefined ? Math.min(maxVisible, childrenArray.length) : childrenArray.length;\n return {\n visibleCount: count,\n visibleAvatars: childrenArray.slice(0, count),\n overflowCount: childrenArray.length - count,\n };\n }, [childrenArray, maxVisible]);\n\n return (\n <TooltipProvider delayDuration={0}>\n <div\n className={cn(avatarGroupVariants({size: normalizedSize}), className)}\n data-slot=\"avatar-group\"\n {...props}\n >\n {visibleAvatars.map((child, index) => {\n const zIndex = index + 1;\n const childProps = 'props' in child ? (child.props as {children?: ReactNode}) : {};\n const tooltipContent = getTooltipContent(childProps.children);\n\n return (\n <AvatarContainer\n key={child.key || index}\n zIndex={zIndex}\n tooltipContent={tooltipContent}\n tooltipProps={tooltipProps}\n animateOnHover={animateOnHover}\n >\n {cloneElement(child, {\n ...childProps,\n children: tooltipContent ? undefined : childProps.children,\n } as Partial<typeof childProps>)}\n </AvatarContainer>\n );\n })}\n {overflowCount > 0 && (\n <div\n className={cn(\n 'relative',\n avatarGroupOverflowVariants({size: normalizedSize}),\n 'rounded-full',\n )}\n style={{zIndex: visibleCount + 1}}\n >\n +{overflowCount}\n </div>\n )}\n </div>\n </TooltipProvider>\n );\n}\n\nexport {AvatarGroupTooltip, type AvatarGroupTooltipProps};\n"],"names":["TooltipPrimitive","cva","Children","cloneElement","useMemo","cn","TooltipContent","TooltipProvider","TooltipTrigger","avatarGroupVariants","variants","size","xs","sm","md","lg","xl","defaultVariants","avatarGroupOverflowVariants","AvatarContainer","children","zIndex","tooltipContent","tooltipProps","animateOnHover","Root","asChild","div","data-slot","className","style","AvatarGroupTooltip","getTooltipContent","tooltip","toArray","find","child","type","props","AvatarGroup","maxVisible","side","sideOffset","normalizedSize","childrenArray","visibleCount","visibleAvatars","overflowCount","count","undefined","Math","min","length","slice","delayDuration","map","index","childProps","key"],"mappings":"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"}
@@ -0,0 +1,21 @@
1
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
2
+ import { type VariantProps } from 'class-variance-authority';
3
+ import type { ComponentProps } from 'react';
4
+ export declare const avatarVariants: (props?: ({
5
+ radius?: "full" | "rounded" | null | undefined;
6
+ size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
7
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
+ export type AvatarContent = 'letters' | 'logo' | 'logoPlaceholder' | 'image' | 'upload';
9
+ declare function AvatarRoot({ className, radius, size, ...props }: ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>): import("react/jsx-runtime").JSX.Element;
10
+ declare function AvatarImage({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
11
+ declare function AvatarFallback({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
12
+ export type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants> & {
13
+ content?: AvatarContent;
14
+ src?: string;
15
+ alt?: string;
16
+ fallback?: string;
17
+ animateOnHover?: boolean;
18
+ };
19
+ export declare function Avatar({ className, radius, size, content, src, alt, fallback, animateOnHover, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
20
+ export { AvatarRoot, AvatarImage, AvatarFallback };
21
+ //# sourceMappingURL=avatar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAY,MAAM,OAAO,CAAC;AAKrD,eAAO,MAAM,cAAc;;;8EAyB1B,CAAC;AAqBF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAiBxF,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAM,EACN,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQnF;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQvF;AAED,iBAAS,cAAc,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAQ7F;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GACnE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,MAAM,EACN,IAAW,EACX,OAAmB,EACnB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,WAAW,2CAwFb;AAED,OAAO,EAAC,UAAU,EAAE,WAAW,EAAE,cAAc,EAAC,CAAC"}