@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.
- package/.turbo/turbo-build.log +2 -2
- package/.turbo/turbo-check.log +3 -3
- package/.turbo/turbo-type.log +1 -1
- package/CHANGELOG.md +12 -0
- package/dist/components/alert/alert.d.ts +18 -0
- package/dist/components/alert/alert.d.ts.map +1 -0
- package/dist/components/alert/alert.js +123 -0
- package/dist/components/alert/alert.js.map +1 -0
- package/dist/components/alert/alert.stories.js +112 -0
- package/dist/components/alert/alert.stories.js.map +1 -0
- package/dist/components/alert/index.d.ts +2 -0
- package/dist/components/alert/index.d.ts.map +1 -0
- package/dist/components/alert/index.js +3 -0
- package/dist/components/alert/index.js.map +1 -0
- package/dist/components/avatar/avatar-group.d.ts +18 -0
- package/dist/components/avatar/avatar-group.d.ts.map +1 -0
- package/dist/components/avatar/avatar-group.js +132 -0
- package/dist/components/avatar/avatar-group.js.map +1 -0
- package/dist/components/avatar/avatar.d.ts +21 -0
- package/dist/components/avatar/avatar.d.ts.map +1 -0
- package/dist/components/avatar/avatar.js +166 -0
- package/dist/components/avatar/avatar.js.map +1 -0
- package/dist/components/avatar/avatar.stories.js +255 -0
- package/dist/components/avatar/avatar.stories.js.map +1 -0
- package/dist/components/avatar/index.d.ts +3 -0
- package/dist/components/avatar/index.d.ts.map +1 -0
- package/dist/components/avatar/index.js +4 -0
- package/dist/components/avatar/index.js.map +1 -0
- package/dist/components/icon/custom/index.d.ts +1 -0
- package/dist/components/icon/custom/index.d.ts.map +1 -1
- package/dist/components/icon/custom/index.js +1 -0
- package/dist/components/icon/custom/index.js.map +1 -1
- package/dist/components/icon/custom/shipfox-logo.d.ts +8 -0
- package/dist/components/icon/custom/shipfox-logo.d.ts.map +1 -0
- package/dist/components/icon/custom/shipfox-logo.js +22 -0
- package/dist/components/icon/custom/shipfox-logo.js.map +1 -0
- package/dist/components/icon/icon.d.ts +4 -1
- package/dist/components/icon/icon.d.ts.map +1 -1
- package/dist/components/icon/icon.js +6 -3
- package/dist/components/icon/icon.js.map +1 -1
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +4 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/inline-tips/index.d.ts +2 -0
- package/dist/components/inline-tips/index.d.ts.map +1 -0
- package/dist/components/inline-tips/index.js +3 -0
- package/dist/components/inline-tips/index.js.map +1 -0
- package/dist/components/inline-tips/inline-tips.d.ts +19 -0
- package/dist/components/inline-tips/inline-tips.d.ts.map +1 -0
- package/dist/components/inline-tips/inline-tips.js +98 -0
- package/dist/components/inline-tips/inline-tips.js.map +1 -0
- package/dist/components/inline-tips/inline-tips.stories.js +214 -0
- package/dist/components/inline-tips/inline-tips.stories.js.map +1 -0
- package/dist/components/textarea/index.d.ts +2 -0
- package/dist/components/textarea/index.d.ts.map +1 -0
- package/dist/components/textarea/index.js +3 -0
- package/dist/components/textarea/index.js.map +1 -0
- package/dist/components/textarea/textarea.d.ts +10 -0
- package/dist/components/textarea/textarea.d.ts.map +1 -0
- package/dist/components/textarea/textarea.js +31 -0
- package/dist/components/textarea/textarea.js.map +1 -0
- package/dist/components/textarea/textarea.stories.js +333 -0
- package/dist/components/textarea/textarea.stories.js.map +1 -0
- package/dist/components/tooltip/tooltip.d.ts +7 -0
- package/dist/components/tooltip/tooltip.d.ts.map +1 -0
- package/dist/components/tooltip/tooltip.js +38 -0
- package/dist/components/tooltip/tooltip.js.map +1 -0
- package/dist/utils/avatar.d.ts +3 -0
- package/dist/utils/avatar.d.ts.map +1 -0
- package/dist/utils/avatar.js +32 -0
- package/dist/utils/avatar.js.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -0
- package/dist/utils/index.js.map +1 -1
- package/index.css +32 -1
- package/package.json +5 -5
- package/src/components/alert/alert.stories.tsx +77 -0
- package/src/components/alert/alert.tsx +144 -0
- package/src/components/alert/index.ts +1 -0
- package/src/components/avatar/avatar-group.tsx +186 -0
- package/src/components/avatar/avatar.stories.tsx +172 -0
- package/src/components/avatar/avatar.tsx +215 -0
- package/src/components/avatar/index.ts +2 -0
- package/src/components/icon/custom/index.ts +1 -0
- package/src/components/icon/custom/shipfox-logo.tsx +20 -0
- package/src/components/icon/icon.tsx +11 -1
- package/src/components/index.ts +4 -0
- package/src/components/inline-tips/index.ts +1 -0
- package/src/components/inline-tips/inline-tips.stories.tsx +126 -0
- package/src/components/inline-tips/inline-tips.tsx +132 -0
- package/src/components/textarea/index.ts +1 -0
- package/src/components/textarea/textarea.stories.tsx +190 -0
- package/src/components/textarea/textarea.tsx +42 -0
- package/src/components/tooltip/tooltip.tsx +52 -0
- package/src/utils/avatar.ts +27 -0
- package/src/utils/index.ts +1 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -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.
|
|
3
|
+
> @shipfox/react-ui@0.3.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
|
|
4
4
|
> swc
|
|
5
5
|
|
|
6
|
-
Successfully compiled:
|
|
6
|
+
Successfully compiled: 61 files with swc (164.23ms)
|
package/.turbo/turbo-check.log
CHANGED
|
@@ -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.
|
|
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
|
|
6
|
+
Checked 77 files in 116ms. No fixes applied.
|
package/.turbo/turbo-type.log
CHANGED
|
@@ -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.
|
|
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
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
|
|
@@ -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"}
|