@n3wth/ui 0.8.0 → 0.9.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/dist/atoms/AnimatedText/AnimatedText.js +65 -0
- package/dist/atoms/AnimatedText/AnimatedText.js.map +1 -0
- package/dist/atoms/Avatar/Avatar.js +55 -0
- package/dist/atoms/Avatar/Avatar.js.map +1 -0
- package/dist/atoms/Badge/Badge.js +57 -0
- package/dist/atoms/Badge/Badge.js.map +1 -0
- package/dist/atoms/Button/Button.js +92 -0
- package/dist/atoms/Button/Button.js.map +1 -0
- package/dist/atoms/Character/Character.js +155 -0
- package/dist/atoms/Character/Character.js.map +1 -0
- package/dist/atoms/CodeBlock/CodeBlock.js +75 -0
- package/dist/atoms/CodeBlock/CodeBlock.js.map +1 -0
- package/dist/atoms/HamburgerIcon/HamburgerIcon.js +50 -0
- package/dist/atoms/HamburgerIcon/HamburgerIcon.js.map +1 -0
- package/dist/atoms/Icon/Icon.js +199 -0
- package/dist/atoms/Icon/Icon.js.map +1 -0
- package/dist/atoms/Input/Input.js +80 -0
- package/dist/atoms/Input/Input.js.map +1 -0
- package/dist/atoms/Label/Label.js +32 -0
- package/dist/atoms/Label/Label.js.map +1 -0
- package/dist/atoms/NoiseOverlay/NoiseOverlay.js +32 -0
- package/dist/atoms/NoiseOverlay/NoiseOverlay.js.map +1 -0
- package/dist/atoms/Progress/Progress.js +63 -0
- package/dist/atoms/Progress/Progress.js.map +1 -0
- package/dist/atoms/ScrollIndicator/ScrollIndicator.js +51 -0
- package/dist/atoms/ScrollIndicator/ScrollIndicator.js.map +1 -0
- package/dist/atoms/Separator/Separator.js +28 -0
- package/dist/atoms/Separator/Separator.js.map +1 -0
- package/dist/atoms/Shape/Shape.js +110 -0
- package/dist/atoms/Shape/Shape.js.map +1 -0
- package/dist/atoms/Shape/patterns.js +66 -0
- package/dist/atoms/Shape/patterns.js.map +1 -0
- package/dist/atoms/Skeleton/Skeleton.js +77 -0
- package/dist/atoms/Skeleton/Skeleton.js.map +1 -0
- package/dist/atoms/SpeechBubble/SpeechBubble.js +98 -0
- package/dist/atoms/SpeechBubble/SpeechBubble.js.map +1 -0
- package/dist/atoms/Switch/Switch.js +78 -0
- package/dist/atoms/Switch/Switch.js.map +1 -0
- package/dist/atoms/Textarea/Textarea.js +40 -0
- package/dist/atoms/Textarea/Textarea.js.map +1 -0
- package/dist/atoms/Tooltip/Tooltip.js +153 -0
- package/dist/atoms/Tooltip/Tooltip.js.map +1 -0
- package/dist/hooks/useButtonPulse.js +43 -0
- package/dist/hooks/useButtonPulse.js.map +1 -0
- package/dist/hooks/useCountUp.js +52 -0
- package/dist/hooks/useCountUp.js.map +1 -0
- package/dist/hooks/useKeyboardShortcuts.js +37 -0
- package/dist/hooks/useKeyboardShortcuts.js.map +1 -0
- package/dist/hooks/useMediaQuery.js +59 -0
- package/dist/hooks/useMediaQuery.js.map +1 -0
- package/dist/hooks/usePageTransition.js +39 -0
- package/dist/hooks/usePageTransition.js.map +1 -0
- package/dist/hooks/useReducedMotion.js +57 -0
- package/dist/hooks/useReducedMotion.js.map +1 -0
- package/dist/hooks/useScrollReveal.js +61 -0
- package/dist/hooks/useScrollReveal.js.map +1 -0
- package/dist/hooks/useStaggerList.js +54 -0
- package/dist/hooks/useStaggerList.js.map +1 -0
- package/dist/hooks/useTextReveal.js +59 -0
- package/dist/hooks/useTextReveal.js.map +1 -0
- package/dist/hooks/useTheme.js +37 -0
- package/dist/hooks/useTheme.js.map +1 -0
- package/dist/hooks/useToast.js +84 -0
- package/dist/hooks/useToast.js.map +1 -0
- package/dist/index.js +147 -7925
- package/dist/index.js.map +1 -1
- package/dist/molecules/Accordion/Accordion.js +178 -0
- package/dist/molecules/Accordion/Accordion.js.map +1 -0
- package/dist/molecules/Card/Card.js +104 -0
- package/dist/molecules/Card/Card.js.map +1 -0
- package/dist/molecules/CommandBox/CommandBox.js +65 -0
- package/dist/molecules/CommandBox/CommandBox.js.map +1 -0
- package/dist/molecules/CompositeShape/CompositeShape.js +69 -0
- package/dist/molecules/CompositeShape/CompositeShape.js.map +1 -0
- package/dist/molecules/CompositeShape/presets.js +71 -0
- package/dist/molecules/CompositeShape/presets.js.map +1 -0
- package/dist/molecules/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/molecules/Dropdown/Dropdown.js +530 -0
- package/dist/molecules/Dropdown/Dropdown.js.map +1 -0
- package/dist/molecules/ErrorBoundary/ErrorBoundary.js +128 -0
- package/dist/molecules/ErrorBoundary/ErrorBoundary.js.map +1 -0
- package/dist/molecules/MobileDrawer/MobileDrawer.js +78 -0
- package/dist/molecules/MobileDrawer/MobileDrawer.js.map +1 -0
- package/dist/molecules/Modal/Modal.js +262 -0
- package/dist/molecules/Modal/Modal.js.map +1 -0
- package/dist/molecules/NavLink/NavLink.js +38 -0
- package/dist/molecules/NavLink/NavLink.js.map +1 -0
- package/dist/molecules/Tabs/Tabs.js +188 -0
- package/dist/molecules/Tabs/Tabs.js.map +1 -0
- package/dist/molecules/ThemeToggle/ThemeToggle.js +48 -0
- package/dist/molecules/ThemeToggle/ThemeToggle.js.map +1 -0
- package/dist/molecules/Toast/Toast.js +156 -0
- package/dist/molecules/Toast/Toast.js.map +1 -0
- package/dist/node_modules/clsx/dist/clsx.js +17 -0
- package/dist/node_modules/clsx/dist/clsx.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/IconoirContext.js +6 -0
- package/dist/node_modules/iconoir-react/dist/esm/IconoirContext.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowDown.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowDown.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowLeft.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowLeft.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowRight.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowRight.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowUp.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowUp.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowUpRight.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ArrowUpRight.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Bell.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Bell.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Calendar.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Calendar.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Check.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Check.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/CheckCircle.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/CheckCircle.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Clock.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Clock.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Code.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Code.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Copy.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Copy.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Download.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Download.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/EditPencil.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/EditPencil.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Eye.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Eye.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/EyeClosed.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/EyeClosed.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Filter.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Filter.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Folder.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Folder.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Github.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Github.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/HalfMoon.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/HalfMoon.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Heart.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Heart.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Home.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Home.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/InfoCircle.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/InfoCircle.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Link.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Link.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/List.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/List.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Lock.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Lock.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/LockSlash.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/LockSlash.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Mail.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Mail.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Menu.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Menu.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Minus.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Minus.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/MoreHoriz.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/MoreHoriz.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/MoreVert.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/MoreVert.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/NavArrowDown.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/NavArrowDown.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/NavArrowLeft.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/NavArrowLeft.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/NavArrowRight.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/NavArrowRight.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/NavArrowUp.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/NavArrowUp.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/OpenInWindow.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/OpenInWindow.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Page.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Page.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Plus.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Plus.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/RefreshDouble.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/RefreshDouble.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Search.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Search.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Settings.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Settings.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/SortDown.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/SortDown.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Sparks.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Sparks.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Star.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Star.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/SunLight.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/SunLight.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Terminal.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Terminal.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Trash.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Trash.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Upload.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Upload.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/User.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/User.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ViewGrid.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/ViewGrid.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/WarningTriangle.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/WarningTriangle.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Xmark.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/Xmark.js.map +1 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/XmarkCircle.js +17 -0
- package/dist/node_modules/iconoir-react/dist/esm/regular/XmarkCircle.js.map +1 -0
- package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js +2996 -0
- package/dist/node_modules/tailwind-merge/dist/bundle-mjs.js.map +1 -0
- package/dist/organisms/Footer/Footer.js +108 -0
- package/dist/organisms/Footer/Footer.js.map +1 -0
- package/dist/organisms/Hero/Hero.d.ts.map +1 -1
- package/dist/organisms/Hero/Hero.js +101 -0
- package/dist/organisms/Hero/Hero.js.map +1 -0
- package/dist/organisms/Nav/Nav.js +177 -0
- package/dist/organisms/Nav/Nav.js.map +1 -0
- package/dist/organisms/Section/Section.js +57 -0
- package/dist/organisms/Section/Section.js.map +1 -0
- package/dist/tokens/colors.js +105 -0
- package/dist/tokens/colors.js.map +1 -0
- package/dist/tokens/effects.js +26 -0
- package/dist/tokens/effects.js.map +1 -0
- package/dist/tokens/motion.js +25 -0
- package/dist/tokens/motion.js.map +1 -0
- package/dist/tokens/spacing.js +31 -0
- package/dist/tokens/spacing.js.map +1 -0
- package/dist/tokens/typography.js +63 -0
- package/dist/tokens/typography.js.map +1 -0
- package/dist/utils/cn.js +9 -0
- package/dist/utils/cn.js.map +1 -0
- package/package.json +5 -3
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsx as y } from "react/jsx-runtime";
|
|
2
|
+
import { cn as p } from "../../utils/cn.js";
|
|
3
|
+
const u = {
|
|
4
|
+
"fade-up": {
|
|
5
|
+
initial: "opacity-0 translate-y-8",
|
|
6
|
+
animate: "opacity-100 translate-y-0"
|
|
7
|
+
},
|
|
8
|
+
"fade-in": {
|
|
9
|
+
initial: "opacity-0",
|
|
10
|
+
animate: "opacity-100"
|
|
11
|
+
},
|
|
12
|
+
"slide-up": {
|
|
13
|
+
initial: "opacity-0 translate-y-full",
|
|
14
|
+
animate: "opacity-100 translate-y-0"
|
|
15
|
+
},
|
|
16
|
+
"blur-in": {
|
|
17
|
+
initial: "opacity-0 blur-sm",
|
|
18
|
+
animate: "opacity-100 blur-0"
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
function $({
|
|
22
|
+
children: t,
|
|
23
|
+
animation: n = "fade-up",
|
|
24
|
+
delay: a = 0,
|
|
25
|
+
duration: i = 600,
|
|
26
|
+
as: o = "span",
|
|
27
|
+
animateOnScroll: e = !0,
|
|
28
|
+
className: m,
|
|
29
|
+
style: s,
|
|
30
|
+
...l
|
|
31
|
+
}) {
|
|
32
|
+
const { initial: r } = u[n], c = {
|
|
33
|
+
"--animation-delay": `${a}ms`,
|
|
34
|
+
"--animation-duration": `${i}ms`,
|
|
35
|
+
...s
|
|
36
|
+
};
|
|
37
|
+
return /* @__PURE__ */ y(
|
|
38
|
+
o,
|
|
39
|
+
{
|
|
40
|
+
className: p(
|
|
41
|
+
"transition-all ease-out",
|
|
42
|
+
e ? "motion-safe:animate-fade-up" : "",
|
|
43
|
+
// Fallback for reduced motion
|
|
44
|
+
"motion-reduce:opacity-100 motion-reduce:translate-y-0 motion-reduce:blur-0",
|
|
45
|
+
r,
|
|
46
|
+
// Apply animate class after mount via CSS animation
|
|
47
|
+
"[animation-fill-mode:forwards]",
|
|
48
|
+
m
|
|
49
|
+
),
|
|
50
|
+
style: {
|
|
51
|
+
transitionDuration: `${i}ms`,
|
|
52
|
+
transitionDelay: `${a}ms`,
|
|
53
|
+
animationDelay: `${a}ms`,
|
|
54
|
+
animationDuration: `${i}ms`,
|
|
55
|
+
...c
|
|
56
|
+
},
|
|
57
|
+
...l,
|
|
58
|
+
children: t
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
export {
|
|
63
|
+
$ as AnimatedText
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=AnimatedText.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatedText.js","sources":["../../../src/atoms/AnimatedText/AnimatedText.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface AnimatedTextProps extends HTMLAttributes<HTMLElement> {\n /** Text content or children */\n children: ReactNode\n /** Animation type */\n animation?: 'fade-up' | 'fade-in' | 'slide-up' | 'blur-in'\n /** Delay before animation starts (ms) */\n delay?: number\n /** Duration of animation (ms) */\n duration?: number\n /** HTML tag to render */\n as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'\n /** Whether to animate on scroll into view */\n animateOnScroll?: boolean\n}\n\nconst animationStyles = {\n 'fade-up': {\n initial: 'opacity-0 translate-y-8',\n animate: 'opacity-100 translate-y-0',\n },\n 'fade-in': {\n initial: 'opacity-0',\n animate: 'opacity-100',\n },\n 'slide-up': {\n initial: 'opacity-0 translate-y-full',\n animate: 'opacity-100 translate-y-0',\n },\n 'blur-in': {\n initial: 'opacity-0 blur-sm',\n animate: 'opacity-100 blur-0',\n },\n}\n\nexport function AnimatedText({\n children,\n animation = 'fade-up',\n delay = 0,\n duration = 600,\n as: Component = 'span',\n animateOnScroll = true,\n className,\n style,\n ...props\n}: AnimatedTextProps) {\n const { initial } = animationStyles[animation]\n\n // CSS-only animation using animation-timeline for scroll-based\n // Falls back to immediate animation if not supported\n const animationStyle = {\n '--animation-delay': `${delay}ms`,\n '--animation-duration': `${duration}ms`,\n ...style,\n } as React.CSSProperties\n\n return (\n <Component\n className={cn(\n 'transition-all ease-out',\n animateOnScroll ? 'motion-safe:animate-fade-up' : '',\n // Fallback for reduced motion\n 'motion-reduce:opacity-100 motion-reduce:translate-y-0 motion-reduce:blur-0',\n initial,\n // Apply animate class after mount via CSS animation\n '[animation-fill-mode:forwards]',\n className\n )}\n style={{\n transitionDuration: `${duration}ms`,\n transitionDelay: `${delay}ms`,\n animationDelay: `${delay}ms`,\n animationDuration: `${duration}ms`,\n ...animationStyle,\n }}\n {...props}\n >\n {children}\n </Component>\n )\n}\n"],"names":["animationStyles","AnimatedText","children","animation","delay","duration","Component","animateOnScroll","className","style","props","initial","animationStyle","jsx","cn"],"mappings":";;AAkBA,MAAMA,IAAkB;AAAA,EACtB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,WAAW;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,YAAY;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,WAAW;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAEb;AAEO,SAASC,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,IAAIC,IAAY;AAAA,EAChB,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAM,EAAE,SAAAC,EAAA,IAAYX,EAAgBG,CAAS,GAIvCS,IAAiB;AAAA,IACrB,qBAAqB,GAAGR,CAAK;AAAA,IAC7B,wBAAwB,GAAGC,CAAQ;AAAA,IACnC,GAAGI;AAAA,EAAA;AAGL,SACE,gBAAAI;AAAA,IAACP;AAAA,IAAA;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACAP,IAAkB,gCAAgC;AAAA;AAAA,QAElD;AAAA,QACAI;AAAA;AAAA,QAEA;AAAA,QACAH;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,oBAAoB,GAAGH,CAAQ;AAAA,QAC/B,iBAAiB,GAAGD,CAAK;AAAA,QACzB,gBAAgB,GAAGA,CAAK;AAAA,QACxB,mBAAmB,GAAGC,CAAQ;AAAA,QAC9B,GAAGO;AAAA,MAAA;AAAA,MAEJ,GAAGF;AAAA,MAEH,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as c, useState as f } from "react";
|
|
3
|
+
import { cn as x } from "../../utils/cn.js";
|
|
4
|
+
const h = {
|
|
5
|
+
xs: "w-6 h-6 text-[10px]",
|
|
6
|
+
sm: "w-8 h-8 text-xs",
|
|
7
|
+
md: "w-10 h-10 text-sm",
|
|
8
|
+
lg: "w-12 h-12 text-base",
|
|
9
|
+
xl: "w-16 h-16 text-lg"
|
|
10
|
+
}, g = c(
|
|
11
|
+
({
|
|
12
|
+
src: r,
|
|
13
|
+
alt: t = "",
|
|
14
|
+
fallback: o,
|
|
15
|
+
size: a = "md",
|
|
16
|
+
className: l,
|
|
17
|
+
...n
|
|
18
|
+
}, m) => {
|
|
19
|
+
const [i, d] = f(!1), s = r && !i;
|
|
20
|
+
return /* @__PURE__ */ e(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
ref: m,
|
|
24
|
+
className: x(
|
|
25
|
+
"relative inline-flex shrink-0 items-center justify-center rounded-full overflow-hidden",
|
|
26
|
+
!s && "bg-[var(--glass-bg)] border border-[var(--glass-border)]",
|
|
27
|
+
h[a],
|
|
28
|
+
l
|
|
29
|
+
),
|
|
30
|
+
children: s ? /* @__PURE__ */ e(
|
|
31
|
+
"img",
|
|
32
|
+
{
|
|
33
|
+
src: r,
|
|
34
|
+
alt: t,
|
|
35
|
+
onError: () => d(!0),
|
|
36
|
+
className: "h-full w-full object-cover rounded-full",
|
|
37
|
+
...n
|
|
38
|
+
}
|
|
39
|
+
) : /* @__PURE__ */ e(
|
|
40
|
+
"span",
|
|
41
|
+
{
|
|
42
|
+
className: "font-medium text-[var(--color-grey-400)] select-none",
|
|
43
|
+
"aria-hidden": !!t,
|
|
44
|
+
children: o || ""
|
|
45
|
+
}
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
g.displayName = "Avatar";
|
|
52
|
+
export {
|
|
53
|
+
g as Avatar
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=Avatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../src/atoms/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState, type ImgHTMLAttributes } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'size'> {\n src?: string\n alt?: string\n fallback?: string\n size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n className?: string\n}\n\nconst sizes = {\n xs: 'w-6 h-6 text-[10px]',\n sm: 'w-8 h-8 text-xs',\n md: 'w-10 h-10 text-sm',\n lg: 'w-12 h-12 text-base',\n xl: 'w-16 h-16 text-lg',\n}\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n src,\n alt = '',\n fallback,\n size = 'md',\n className,\n ...props\n },\n ref\n ) => {\n const [imgError, setImgError] = useState(false)\n const showImage = src && !imgError\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative inline-flex shrink-0 items-center justify-center rounded-full overflow-hidden',\n !showImage && 'bg-[var(--glass-bg)] border border-[var(--glass-border)]',\n sizes[size],\n className\n )}\n >\n {showImage ? (\n <img\n src={src}\n alt={alt}\n onError={() => setImgError(true)}\n className=\"h-full w-full object-cover rounded-full\"\n {...props}\n />\n ) : (\n <span\n className=\"font-medium text-[var(--color-grey-400)] select-none\"\n aria-hidden={!!alt}\n >\n {fallback || ''}\n </span>\n )}\n </div>\n )\n }\n)\n\nAvatar.displayName = 'Avatar'\n"],"names":["sizes","Avatar","forwardRef","src","alt","fallback","size","className","props","ref","imgError","setImgError","useState","showImage","jsx","cn"],"mappings":";;;AAWA,MAAMA,IAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAASC;AAAA,EACpB,CACE;AAAA,IACE,KAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAYV,KAAO,CAACO;AAE1B,WACE,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAL;AAAA,QACA,WAAWM;AAAA,UACT;AAAA,UACA,CAACF,KAAa;AAAA,UACdb,EAAMM,CAAI;AAAA,UACVC;AAAA,QAAA;AAAA,QAGD,UAAAM,IACC,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAX;AAAA,YACA,KAAAC;AAAA,YACA,SAAS,MAAMO,EAAY,EAAI;AAAA,YAC/B,WAAU;AAAA,YACT,GAAGH;AAAA,UAAA;AAAA,QAAA,IAGN,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAa,CAAC,CAACV;AAAA,YAEd,UAAAC,KAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EAIR;AACF;AAEAJ,EAAO,cAAc;"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import { cn as n } from "../../utils/cn.js";
|
|
3
|
+
function i({
|
|
4
|
+
variant: r = "default",
|
|
5
|
+
size: o = "sm",
|
|
6
|
+
children: e,
|
|
7
|
+
className: a,
|
|
8
|
+
...t
|
|
9
|
+
}) {
|
|
10
|
+
const l = [
|
|
11
|
+
"inline-flex items-center justify-center",
|
|
12
|
+
"font-medium",
|
|
13
|
+
"rounded-full",
|
|
14
|
+
"whitespace-nowrap",
|
|
15
|
+
"transition-colors duration-200",
|
|
16
|
+
"backdrop-blur-sm"
|
|
17
|
+
], s = {
|
|
18
|
+
default: [
|
|
19
|
+
"bg-[var(--glass-bg)]",
|
|
20
|
+
"text-[var(--color-grey-400)]",
|
|
21
|
+
"border border-[var(--glass-border)]"
|
|
22
|
+
],
|
|
23
|
+
sage: [
|
|
24
|
+
"bg-[var(--color-sage)]/10",
|
|
25
|
+
"text-[var(--color-sage)]",
|
|
26
|
+
"border border-[var(--color-sage)]/20"
|
|
27
|
+
],
|
|
28
|
+
coral: [
|
|
29
|
+
"bg-[var(--color-coral)]/10",
|
|
30
|
+
"text-[var(--color-coral)]",
|
|
31
|
+
"border border-[var(--color-coral)]/20"
|
|
32
|
+
],
|
|
33
|
+
mint: [
|
|
34
|
+
"bg-[var(--color-mint)]/10",
|
|
35
|
+
"text-[var(--color-mint)]",
|
|
36
|
+
"border border-[var(--color-mint)]/20"
|
|
37
|
+
],
|
|
38
|
+
gold: [
|
|
39
|
+
"bg-[var(--color-gold)]/10",
|
|
40
|
+
"text-[var(--color-gold)]",
|
|
41
|
+
"border border-[var(--color-gold)]/20"
|
|
42
|
+
],
|
|
43
|
+
outline: [
|
|
44
|
+
"bg-transparent",
|
|
45
|
+
"text-[var(--color-grey-400)]",
|
|
46
|
+
"border border-[var(--glass-border)]"
|
|
47
|
+
]
|
|
48
|
+
}, c = {
|
|
49
|
+
sm: "px-2 py-0.5 text-[10px] tracking-wide uppercase",
|
|
50
|
+
md: "px-3 py-1 text-xs"
|
|
51
|
+
};
|
|
52
|
+
return /* @__PURE__ */ d("span", { className: n(l, s[r], c[o], a), ...t, children: e });
|
|
53
|
+
}
|
|
54
|
+
export {
|
|
55
|
+
i as Badge
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../src/atoms/Badge/Badge.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n variant?: 'default' | 'sage' | 'coral' | 'mint' | 'gold' | 'outline'\n size?: 'sm' | 'md'\n children: ReactNode\n}\n\nexport function Badge({\n variant = 'default',\n size = 'sm',\n children,\n className,\n ...props\n}: BadgeProps) {\n const baseStyles = [\n 'inline-flex items-center justify-center',\n 'font-medium',\n 'rounded-full',\n 'whitespace-nowrap',\n 'transition-colors duration-200',\n 'backdrop-blur-sm',\n ]\n\n const variants = {\n default: [\n 'bg-[var(--glass-bg)]',\n 'text-[var(--color-grey-400)]',\n 'border border-[var(--glass-border)]',\n ],\n sage: [\n 'bg-[var(--color-sage)]/10',\n 'text-[var(--color-sage)]',\n 'border border-[var(--color-sage)]/20',\n ],\n coral: [\n 'bg-[var(--color-coral)]/10',\n 'text-[var(--color-coral)]',\n 'border border-[var(--color-coral)]/20',\n ],\n mint: [\n 'bg-[var(--color-mint)]/10',\n 'text-[var(--color-mint)]',\n 'border border-[var(--color-mint)]/20',\n ],\n gold: [\n 'bg-[var(--color-gold)]/10',\n 'text-[var(--color-gold)]',\n 'border border-[var(--color-gold)]/20',\n ],\n outline: [\n 'bg-transparent',\n 'text-[var(--color-grey-400)]',\n 'border border-[var(--glass-border)]',\n ],\n }\n\n const sizes = {\n sm: 'px-2 py-0.5 text-[10px] tracking-wide uppercase',\n md: 'px-3 py-1 text-xs',\n }\n\n return (\n <span className={cn(baseStyles, variants[variant], sizes[size], className)} {...props}>\n {children}\n </span>\n )\n}\n"],"names":["Badge","variant","size","children","className","props","baseStyles","variants","sizes","jsx","cn"],"mappings":";;AASO,SAASA,EAAM;AAAA,EACpB,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIC,IAAW;AAAA,IACf,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF,GAGIC,IAAQ;AAAA,IACZ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAGN,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAGJ,GAAYC,EAASN,CAAO,GAAGO,EAAMN,CAAI,GAAGE,CAAS,GAAI,GAAGC,GAC7E,UAAAF,GACH;AAEJ;"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { jsx as d, jsxs as N, Fragment as E } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as S, isValidElement as k, cloneElement as B } from "react";
|
|
3
|
+
import { cn as b } from "../../utils/cn.js";
|
|
4
|
+
const $ = S(
|
|
5
|
+
({
|
|
6
|
+
variant: g = "primary",
|
|
7
|
+
size: r = "md",
|
|
8
|
+
children: s,
|
|
9
|
+
isLoading: a = !1,
|
|
10
|
+
leftIcon: p,
|
|
11
|
+
rightIcon: m,
|
|
12
|
+
className: h,
|
|
13
|
+
disabled: u,
|
|
14
|
+
asChild: l = !1,
|
|
15
|
+
touchTarget: v = !1,
|
|
16
|
+
...f
|
|
17
|
+
}, n) => {
|
|
18
|
+
const x = [
|
|
19
|
+
"inline-flex items-center justify-center gap-2",
|
|
20
|
+
"font-medium",
|
|
21
|
+
"border",
|
|
22
|
+
"rounded-full",
|
|
23
|
+
"transition-[transform,background-color,border-color,color,opacity] duration-200 ease-out",
|
|
24
|
+
"focus-ring",
|
|
25
|
+
"disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
|
|
26
|
+
// Active state for touch feedback
|
|
27
|
+
"active:scale-[0.96]"
|
|
28
|
+
], y = {
|
|
29
|
+
primary: [
|
|
30
|
+
"bg-[var(--color-white)] text-[var(--color-bg)]",
|
|
31
|
+
"border-[var(--color-white)]",
|
|
32
|
+
"hover:scale-[1.02]",
|
|
33
|
+
"glow-white"
|
|
34
|
+
],
|
|
35
|
+
secondary: [
|
|
36
|
+
"bg-transparent text-[var(--color-white)]",
|
|
37
|
+
"border-[var(--glass-border)]",
|
|
38
|
+
"hover:border-[var(--glass-highlight)] hover:bg-[var(--glass-bg)]"
|
|
39
|
+
],
|
|
40
|
+
ghost: [
|
|
41
|
+
"bg-transparent text-[var(--color-grey-400)]",
|
|
42
|
+
"border-transparent",
|
|
43
|
+
"hover:text-[var(--color-white)] hover:bg-[var(--glass-bg)]"
|
|
44
|
+
],
|
|
45
|
+
glass: [
|
|
46
|
+
"bg-[var(--glass-bg)] text-[var(--color-white)]",
|
|
47
|
+
"border-[var(--glass-border)]",
|
|
48
|
+
"backdrop-blur-lg",
|
|
49
|
+
"hover:bg-[rgba(255,255,255,0.1)] hover:border-[var(--glass-highlight)]",
|
|
50
|
+
"hover:scale-[1.02]"
|
|
51
|
+
]
|
|
52
|
+
}, e = {
|
|
53
|
+
sm: "px-3 py-1.5 text-xs",
|
|
54
|
+
md: "px-4 py-2 text-sm",
|
|
55
|
+
lg: "px-6 py-3 text-base"
|
|
56
|
+
}, w = () => {
|
|
57
|
+
if (typeof r == "string")
|
|
58
|
+
return e[r];
|
|
59
|
+
const o = [];
|
|
60
|
+
return r.base && o.push(e[r.base]), r.md && o.push(`md:${e[r.md].split(" ").join(" md:")}`), r.lg && o.push(`lg:${e[r.lg].split(" ").join(" lg:")}`), !r.base && (r.md || r.lg) && o.unshift(e.sm), o.join(" ");
|
|
61
|
+
}, j = v ? "min-w-[44px] min-h-[44px]" : "", c = b(
|
|
62
|
+
x,
|
|
63
|
+
y[g],
|
|
64
|
+
w(),
|
|
65
|
+
j,
|
|
66
|
+
h
|
|
67
|
+
), t = k(s) ? s : null, i = /* @__PURE__ */ N(E, { children: [
|
|
68
|
+
a ? /* @__PURE__ */ d("span", { className: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" }) : p,
|
|
69
|
+
l && t ? t.props.children : s,
|
|
70
|
+
!a && m
|
|
71
|
+
] });
|
|
72
|
+
return l && t ? B(t, {
|
|
73
|
+
className: b(c, t.props.className),
|
|
74
|
+
ref: n,
|
|
75
|
+
children: i
|
|
76
|
+
}) : /* @__PURE__ */ d(
|
|
77
|
+
"button",
|
|
78
|
+
{
|
|
79
|
+
ref: n,
|
|
80
|
+
className: c,
|
|
81
|
+
disabled: u || a,
|
|
82
|
+
...f,
|
|
83
|
+
children: i
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
);
|
|
88
|
+
$.displayName = "Button";
|
|
89
|
+
export {
|
|
90
|
+
$ as Button
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/atoms/Button/Button.tsx"],"sourcesContent":["import {\n forwardRef,\n type ButtonHTMLAttributes,\n type ReactNode,\n cloneElement,\n isValidElement,\n} from 'react'\nimport { cn } from '../../utils/cn'\n\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'ghost' | 'glass'\n /** Size of the button. Can be a single value or responsive object */\n size?: ButtonSize | { base?: ButtonSize; md?: ButtonSize; lg?: ButtonSize }\n children: ReactNode\n isLoading?: boolean\n leftIcon?: ReactNode\n rightIcon?: ReactNode\n asChild?: boolean\n /** Ensures minimum 44px touch target for accessibility (WCAG 2.5.5) */\n touchTarget?: boolean\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'md',\n children,\n isLoading = false,\n leftIcon,\n rightIcon,\n className,\n disabled,\n asChild = false,\n touchTarget = false,\n ...props\n },\n ref\n ) => {\n const baseStyles = [\n 'inline-flex items-center justify-center gap-2',\n 'font-medium',\n 'border',\n 'rounded-full',\n 'transition-[transform,background-color,border-color,color,opacity] duration-200 ease-out',\n 'focus-ring',\n 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',\n // Active state for touch feedback\n 'active:scale-[0.96]',\n ]\n\n const variants = {\n primary: [\n 'bg-[var(--color-white)] text-[var(--color-bg)]',\n 'border-[var(--color-white)]',\n 'hover:scale-[1.02]',\n 'glow-white',\n ],\n secondary: [\n 'bg-transparent text-[var(--color-white)]',\n 'border-[var(--glass-border)]',\n 'hover:border-[var(--glass-highlight)] hover:bg-[var(--glass-bg)]',\n ],\n ghost: [\n 'bg-transparent text-[var(--color-grey-400)]',\n 'border-transparent',\n 'hover:text-[var(--color-white)] hover:bg-[var(--glass-bg)]',\n ],\n glass: [\n 'bg-[var(--glass-bg)] text-[var(--color-white)]',\n 'border-[var(--glass-border)]',\n 'backdrop-blur-lg',\n 'hover:bg-[rgba(255,255,255,0.1)] hover:border-[var(--glass-highlight)]',\n 'hover:scale-[1.02]',\n ],\n }\n\n const sizes = {\n sm: 'px-3 py-1.5 text-xs',\n md: 'px-4 py-2 text-sm',\n lg: 'px-6 py-3 text-base',\n }\n\n // Handle responsive size prop\n const getSizeClasses = () => {\n if (typeof size === 'string') {\n return sizes[size]\n }\n\n // Responsive size object\n const classes: string[] = []\n if (size.base) classes.push(sizes[size.base])\n if (size.md) classes.push(`md:${sizes[size.md].split(' ').join(' md:')}`)\n if (size.lg) classes.push(`lg:${sizes[size.lg].split(' ').join(' lg:')}`)\n\n // If no base specified, default to sm for mobile-first\n if (!size.base && (size.md || size.lg)) {\n classes.unshift(sizes.sm)\n }\n\n return classes.join(' ')\n }\n\n const touchTargetStyles = touchTarget ? 'min-w-[44px] min-h-[44px]' : ''\n\n const buttonClassName = cn(\n baseStyles,\n variants[variant],\n getSizeClasses(),\n touchTargetStyles,\n className\n )\n\n type ChildProps = { children?: ReactNode; className?: string }\n const childElement = isValidElement<ChildProps>(children) ? children : null\n\n const content = (\n <>\n {isLoading ? (\n <span className=\"w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin\" />\n ) : (\n leftIcon\n )}\n {asChild && childElement ? childElement.props.children : children}\n {!isLoading && rightIcon}\n </>\n )\n\n if (asChild && childElement) {\n return cloneElement(childElement, {\n className: cn(buttonClassName, childElement.props.className),\n ref,\n children: content,\n } as ChildProps)\n }\n\n return (\n <button\n ref={ref}\n className={buttonClassName}\n disabled={disabled || isLoading}\n {...props}\n >\n {content}\n </button>\n )\n }\n)\n\nButton.displayName = 'Button'\n"],"names":["Button","forwardRef","variant","size","children","isLoading","leftIcon","rightIcon","className","disabled","asChild","touchTarget","props","ref","baseStyles","variants","sizes","getSizeClasses","classes","touchTargetStyles","buttonClassName","cn","childElement","isValidElement","content","jsxs","Fragment","jsx","cloneElement"],"mappings":";;;AAwBO,MAAMA,IAASC;AAAA,EACpB,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,aAAAC,IAAc;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,IAAA,GAGIC,IAAW;AAAA,MACf,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF,GAGIC,IAAQ;AAAA,MACZ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,GAIAC,IAAiB,MAAM;AAC3B,UAAI,OAAOd,KAAS;AAClB,eAAOa,EAAMb,CAAI;AAInB,YAAMe,IAAoB,CAAA;AAC1B,aAAIf,EAAK,QAAMe,EAAQ,KAAKF,EAAMb,EAAK,IAAI,CAAC,GACxCA,EAAK,MAAIe,EAAQ,KAAK,MAAMF,EAAMb,EAAK,EAAE,EAAE,MAAM,GAAG,EAAE,KAAK,MAAM,CAAC,EAAE,GACpEA,EAAK,MAAIe,EAAQ,KAAK,MAAMF,EAAMb,EAAK,EAAE,EAAE,MAAM,GAAG,EAAE,KAAK,MAAM,CAAC,EAAE,GAGpE,CAACA,EAAK,SAASA,EAAK,MAAMA,EAAK,OACjCe,EAAQ,QAAQF,EAAM,EAAE,GAGnBE,EAAQ,KAAK,GAAG;AAAA,IACzB,GAEMC,IAAoBR,IAAc,8BAA8B,IAEhES,IAAkBC;AAAA,MACtBP;AAAA,MACAC,EAASb,CAAO;AAAA,MAChBe,EAAA;AAAA,MACAE;AAAA,MACAX;AAAA,IAAA,GAIIc,IAAeC,EAA2BnB,CAAQ,IAAIA,IAAW,MAEjEoB,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,MAAArB,IACC,gBAAAsB,EAAC,QAAA,EAAK,WAAU,iFAAA,CAAiF,IAEjGrB;AAAA,MAEDI,KAAWY,IAAeA,EAAa,MAAM,WAAWlB;AAAA,MACxD,CAACC,KAAaE;AAAA,IAAA,GACjB;AAGF,WAAIG,KAAWY,IACNM,EAAaN,GAAc;AAAA,MAChC,WAAWD,EAAGD,GAAiBE,EAAa,MAAM,SAAS;AAAA,MAC3D,KAAAT;AAAA,MACA,UAAUW;AAAA,IAAA,CACG,IAIf,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAd;AAAA,QACA,WAAWO;AAAA,QACX,UAAUX,KAAYJ;AAAA,QACrB,GAAGO;AAAA,QAEH,UAAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAxB,EAAO,cAAc;"}
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { jsxs as r, jsx as c, Fragment as n } from "react/jsx-runtime";
|
|
2
|
+
import { cn as p } from "../../utils/cn.js";
|
|
3
|
+
function x(t, e) {
|
|
4
|
+
switch (t) {
|
|
5
|
+
case "happy":
|
|
6
|
+
return /* @__PURE__ */ r(n, { children: [
|
|
7
|
+
/* @__PURE__ */ c("circle", { cx: "9", cy: "10", r: "1.5", fill: e }),
|
|
8
|
+
/* @__PURE__ */ c("circle", { cx: "15", cy: "10", r: "1.5", fill: e })
|
|
9
|
+
] });
|
|
10
|
+
case "wink":
|
|
11
|
+
return /* @__PURE__ */ r(n, { children: [
|
|
12
|
+
/* @__PURE__ */ c("circle", { cx: "9", cy: "10", r: "1.5", fill: e }),
|
|
13
|
+
/* @__PURE__ */ c("path", { d: "M13.5 10.5L16.5 9.5", stroke: e, strokeWidth: "1.5", strokeLinecap: "round" })
|
|
14
|
+
] });
|
|
15
|
+
case "surprised":
|
|
16
|
+
return /* @__PURE__ */ r(n, { children: [
|
|
17
|
+
/* @__PURE__ */ c("circle", { cx: "9", cy: "10", r: "2", fill: e }),
|
|
18
|
+
/* @__PURE__ */ c("circle", { cx: "15", cy: "10", r: "2", fill: e })
|
|
19
|
+
] });
|
|
20
|
+
case "excited":
|
|
21
|
+
return /* @__PURE__ */ r(n, { children: [
|
|
22
|
+
/* @__PURE__ */ c("path", { d: "M7 9L11 11", stroke: e, strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
23
|
+
/* @__PURE__ */ c("path", { d: "M17 9L13 11", stroke: e, strokeWidth: "1.5", strokeLinecap: "round" })
|
|
24
|
+
] });
|
|
25
|
+
case "thinking":
|
|
26
|
+
return /* @__PURE__ */ r(n, { children: [
|
|
27
|
+
/* @__PURE__ */ c("circle", { cx: "9", cy: "10", r: "1.5", fill: e }),
|
|
28
|
+
/* @__PURE__ */ c("circle", { cx: "15", cy: "11", r: "1.5", fill: e })
|
|
29
|
+
] });
|
|
30
|
+
case "cool":
|
|
31
|
+
return null;
|
|
32
|
+
// Glasses cover eyes
|
|
33
|
+
case "sleepy":
|
|
34
|
+
return /* @__PURE__ */ r(n, { children: [
|
|
35
|
+
/* @__PURE__ */ c("path", { d: "M7 10H11", stroke: e, strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
36
|
+
/* @__PURE__ */ c("path", { d: "M13 10H17", stroke: e, strokeWidth: "1.5", strokeLinecap: "round" })
|
|
37
|
+
] });
|
|
38
|
+
case "love":
|
|
39
|
+
return /* @__PURE__ */ r(n, { children: [
|
|
40
|
+
/* @__PURE__ */ c("path", { d: "M7.5 9.5C7.5 8.5 8.5 8 9 8.5C9.5 8 10.5 8.5 10.5 9.5C10.5 10.5 9 12 9 12C9 12 7.5 10.5 7.5 9.5Z", fill: "#FF6B9D" }),
|
|
41
|
+
/* @__PURE__ */ c("path", { d: "M13.5 9.5C13.5 8.5 14.5 8 15 8.5C15.5 8 16.5 8.5 16.5 9.5C16.5 10.5 15 12 15 12C15 12 13.5 10.5 13.5 9.5Z", fill: "#FF6B9D" })
|
|
42
|
+
] });
|
|
43
|
+
default:
|
|
44
|
+
return /* @__PURE__ */ r(n, { children: [
|
|
45
|
+
/* @__PURE__ */ c("circle", { cx: "9", cy: "10", r: "1.5", fill: e }),
|
|
46
|
+
/* @__PURE__ */ c("circle", { cx: "15", cy: "10", r: "1.5", fill: e })
|
|
47
|
+
] });
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
function f(t, e) {
|
|
51
|
+
switch (t) {
|
|
52
|
+
case "happy":
|
|
53
|
+
case "wink":
|
|
54
|
+
return /* @__PURE__ */ c("path", { d: "M8 14C8 14 10 16 12 16C14 16 16 14 16 14", stroke: e, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" });
|
|
55
|
+
case "surprised":
|
|
56
|
+
return /* @__PURE__ */ c("circle", { cx: "12", cy: "15", r: "2", fill: e });
|
|
57
|
+
case "excited":
|
|
58
|
+
return /* @__PURE__ */ c("path", { d: "M8 13C8 13 10 17 12 17C14 17 16 13 16 13", stroke: e, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" });
|
|
59
|
+
case "thinking":
|
|
60
|
+
return /* @__PURE__ */ c("path", { d: "M10 15L14 14", stroke: e, strokeWidth: "1.5", strokeLinecap: "round" });
|
|
61
|
+
case "cool":
|
|
62
|
+
return /* @__PURE__ */ c("path", { d: "M9 14C9 14 10.5 15.5 12 15.5C13.5 15.5 15 14 15 14", stroke: e, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" });
|
|
63
|
+
case "sleepy":
|
|
64
|
+
return /* @__PURE__ */ c("path", { d: "M10 15L14 15", stroke: e, strokeWidth: "1.5", strokeLinecap: "round" });
|
|
65
|
+
case "love":
|
|
66
|
+
return /* @__PURE__ */ c("path", { d: "M8 14C8 14 10 16 12 16C14 16 16 14 16 14", stroke: e, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" });
|
|
67
|
+
default:
|
|
68
|
+
return /* @__PURE__ */ c("path", { d: "M8 14C8 14 10 16 12 16C14 16 16 14 16 14", stroke: e, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" });
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
function u(t, e, i) {
|
|
72
|
+
switch (t) {
|
|
73
|
+
case "glasses":
|
|
74
|
+
return /* @__PURE__ */ r("g", { children: [
|
|
75
|
+
/* @__PURE__ */ c("circle", { cx: "9", cy: "10", r: "3", fill: "none", stroke: i, strokeWidth: "1.5" }),
|
|
76
|
+
/* @__PURE__ */ c("circle", { cx: "15", cy: "10", r: "3", fill: "none", stroke: i, strokeWidth: "1.5" }),
|
|
77
|
+
/* @__PURE__ */ c("path", { d: "M12 10H12", stroke: i, strokeWidth: "1.5" }),
|
|
78
|
+
/* @__PURE__ */ c("path", { d: "M6 10H6", stroke: i, strokeWidth: "1.5" }),
|
|
79
|
+
/* @__PURE__ */ c("path", { d: "M18 10H18", stroke: i, strokeWidth: "1.5" })
|
|
80
|
+
] });
|
|
81
|
+
case "hat":
|
|
82
|
+
return /* @__PURE__ */ r("g", { children: [
|
|
83
|
+
/* @__PURE__ */ c("rect", { x: "6", y: "1", width: "12", height: "3", rx: "1", fill: e }),
|
|
84
|
+
/* @__PURE__ */ c("rect", { x: "8", y: "-2", width: "8", height: "4", rx: "1", fill: e })
|
|
85
|
+
] });
|
|
86
|
+
case "flower":
|
|
87
|
+
return /* @__PURE__ */ r("g", { transform: "translate(16, 2)", children: [
|
|
88
|
+
/* @__PURE__ */ c("circle", { cx: "0", cy: "0", r: "2", fill: e }),
|
|
89
|
+
/* @__PURE__ */ c("circle", { cx: "2", cy: "-1", r: "2", fill: e }),
|
|
90
|
+
/* @__PURE__ */ c("circle", { cx: "2", cy: "1", r: "2", fill: e }),
|
|
91
|
+
/* @__PURE__ */ c("circle", { cx: "-1", cy: "-1.5", r: "2", fill: e }),
|
|
92
|
+
/* @__PURE__ */ c("circle", { cx: "-1", cy: "1.5", r: "2", fill: e }),
|
|
93
|
+
/* @__PURE__ */ c("circle", { cx: "0.5", cy: "0", r: "1.5", fill: "#FFD93D" })
|
|
94
|
+
] });
|
|
95
|
+
case "bowtie":
|
|
96
|
+
return /* @__PURE__ */ r("g", { transform: "translate(12, 19)", children: [
|
|
97
|
+
/* @__PURE__ */ c("path", { d: "M-3 0L0 2L3 0L0 -2L-3 0Z", fill: e }),
|
|
98
|
+
/* @__PURE__ */ c("circle", { cx: "0", cy: "0", r: "1", fill: i })
|
|
99
|
+
] });
|
|
100
|
+
default:
|
|
101
|
+
return null;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
function L({
|
|
105
|
+
expression: t = "happy",
|
|
106
|
+
size: e = 48,
|
|
107
|
+
color: i = "#A78BFA",
|
|
108
|
+
featureColor: s = "#1d1d1f",
|
|
109
|
+
accessory: d = "none",
|
|
110
|
+
accessoryColor: h = "#FF6B9D",
|
|
111
|
+
animate: l = !1,
|
|
112
|
+
className: a,
|
|
113
|
+
style: k
|
|
114
|
+
}) {
|
|
115
|
+
return /* @__PURE__ */ r(
|
|
116
|
+
"svg",
|
|
117
|
+
{
|
|
118
|
+
viewBox: "0 0 24 24",
|
|
119
|
+
width: e,
|
|
120
|
+
height: e,
|
|
121
|
+
className: p(
|
|
122
|
+
"character",
|
|
123
|
+
l && "character-animate",
|
|
124
|
+
a
|
|
125
|
+
),
|
|
126
|
+
style: k,
|
|
127
|
+
children: [
|
|
128
|
+
/* @__PURE__ */ c("style", { children: l ? `
|
|
129
|
+
.character-animate .character-face {
|
|
130
|
+
animation: characterBounce 2s ease-in-out infinite;
|
|
131
|
+
}
|
|
132
|
+
@keyframes characterBounce {
|
|
133
|
+
0%, 100% { transform: translateY(0); }
|
|
134
|
+
50% { transform: translateY(-1px); }
|
|
135
|
+
}
|
|
136
|
+
@media (prefers-reduced-motion: reduce) {
|
|
137
|
+
.character-animate .character-face {
|
|
138
|
+
animation: none;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
` : "" }),
|
|
142
|
+
/* @__PURE__ */ r("g", { className: "character-face", children: [
|
|
143
|
+
/* @__PURE__ */ c("circle", { cx: "12", cy: "12", r: "10", fill: i }),
|
|
144
|
+
x(t, s),
|
|
145
|
+
f(t, s),
|
|
146
|
+
u(d, h, s)
|
|
147
|
+
] })
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
export {
|
|
153
|
+
L as Character
|
|
154
|
+
};
|
|
155
|
+
//# sourceMappingURL=Character.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Character.js","sources":["../../../src/atoms/Character/Character.tsx"],"sourcesContent":["import { cn } from '../../utils/cn'\n\nexport type Expression =\n | 'happy'\n | 'wink'\n | 'surprised'\n | 'excited'\n | 'thinking'\n | 'cool'\n | 'sleepy'\n | 'love'\n\nexport type Accessory = 'none' | 'glasses' | 'hat' | 'flower' | 'bowtie'\n\nexport interface CharacterProps {\n expression?: Expression\n size?: number\n color?: string\n featureColor?: string\n accessory?: Accessory\n accessoryColor?: string\n animate?: boolean\n className?: string\n style?: React.CSSProperties\n}\n\nfunction renderEyes(expression: Expression, featureColor: string) {\n switch (expression) {\n case 'happy':\n return (\n <>\n <circle cx=\"9\" cy=\"10\" r=\"1.5\" fill={featureColor} />\n <circle cx=\"15\" cy=\"10\" r=\"1.5\" fill={featureColor} />\n </>\n )\n case 'wink':\n return (\n <>\n <circle cx=\"9\" cy=\"10\" r=\"1.5\" fill={featureColor} />\n <path d=\"M13.5 10.5L16.5 9.5\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </>\n )\n case 'surprised':\n return (\n <>\n <circle cx=\"9\" cy=\"10\" r=\"2\" fill={featureColor} />\n <circle cx=\"15\" cy=\"10\" r=\"2\" fill={featureColor} />\n </>\n )\n case 'excited':\n return (\n <>\n <path d=\"M7 9L11 11\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n <path d=\"M17 9L13 11\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </>\n )\n case 'thinking':\n return (\n <>\n <circle cx=\"9\" cy=\"10\" r=\"1.5\" fill={featureColor} />\n <circle cx=\"15\" cy=\"11\" r=\"1.5\" fill={featureColor} />\n </>\n )\n case 'cool':\n return null // Glasses cover eyes\n case 'sleepy':\n return (\n <>\n <path d=\"M7 10H11\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n <path d=\"M13 10H17\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </>\n )\n case 'love':\n return (\n <>\n <path d=\"M7.5 9.5C7.5 8.5 8.5 8 9 8.5C9.5 8 10.5 8.5 10.5 9.5C10.5 10.5 9 12 9 12C9 12 7.5 10.5 7.5 9.5Z\" fill=\"#FF6B9D\" />\n <path d=\"M13.5 9.5C13.5 8.5 14.5 8 15 8.5C15.5 8 16.5 8.5 16.5 9.5C16.5 10.5 15 12 15 12C15 12 13.5 10.5 13.5 9.5Z\" fill=\"#FF6B9D\" />\n </>\n )\n default:\n return (\n <>\n <circle cx=\"9\" cy=\"10\" r=\"1.5\" fill={featureColor} />\n <circle cx=\"15\" cy=\"10\" r=\"1.5\" fill={featureColor} />\n </>\n )\n }\n}\n\nfunction renderMouth(expression: Expression, featureColor: string) {\n switch (expression) {\n case 'happy':\n case 'wink':\n return (\n <path d=\"M8 14C8 14 10 16 12 16C14 16 16 14 16 14\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" fill=\"none\" />\n )\n case 'surprised':\n return <circle cx=\"12\" cy=\"15\" r=\"2\" fill={featureColor} />\n case 'excited':\n return (\n <path d=\"M8 13C8 13 10 17 12 17C14 17 16 13 16 13\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" fill=\"none\" />\n )\n case 'thinking':\n return (\n <path d=\"M10 15L14 14\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n )\n case 'cool':\n return (\n <path d=\"M9 14C9 14 10.5 15.5 12 15.5C13.5 15.5 15 14 15 14\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" fill=\"none\" />\n )\n case 'sleepy':\n return (\n <path d=\"M10 15L14 15\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n )\n case 'love':\n return (\n <path d=\"M8 14C8 14 10 16 12 16C14 16 16 14 16 14\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" fill=\"none\" />\n )\n default:\n return (\n <path d=\"M8 14C8 14 10 16 12 16C14 16 16 14 16 14\" stroke={featureColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" fill=\"none\" />\n )\n }\n}\n\nfunction renderAccessory(accessory: Accessory, accessoryColor: string, featureColor: string) {\n switch (accessory) {\n case 'glasses':\n return (\n <g>\n <circle cx=\"9\" cy=\"10\" r=\"3\" fill=\"none\" stroke={featureColor} strokeWidth=\"1.5\" />\n <circle cx=\"15\" cy=\"10\" r=\"3\" fill=\"none\" stroke={featureColor} strokeWidth=\"1.5\" />\n <path d=\"M12 10H12\" stroke={featureColor} strokeWidth=\"1.5\" />\n <path d=\"M6 10H6\" stroke={featureColor} strokeWidth=\"1.5\" />\n <path d=\"M18 10H18\" stroke={featureColor} strokeWidth=\"1.5\" />\n </g>\n )\n case 'hat':\n return (\n <g>\n <rect x=\"6\" y=\"1\" width=\"12\" height=\"3\" rx=\"1\" fill={accessoryColor} />\n <rect x=\"8\" y=\"-2\" width=\"8\" height=\"4\" rx=\"1\" fill={accessoryColor} />\n </g>\n )\n case 'flower':\n return (\n <g transform=\"translate(16, 2)\">\n <circle cx=\"0\" cy=\"0\" r=\"2\" fill={accessoryColor} />\n <circle cx=\"2\" cy=\"-1\" r=\"2\" fill={accessoryColor} />\n <circle cx=\"2\" cy=\"1\" r=\"2\" fill={accessoryColor} />\n <circle cx=\"-1\" cy=\"-1.5\" r=\"2\" fill={accessoryColor} />\n <circle cx=\"-1\" cy=\"1.5\" r=\"2\" fill={accessoryColor} />\n <circle cx=\"0.5\" cy=\"0\" r=\"1.5\" fill=\"#FFD93D\" />\n </g>\n )\n case 'bowtie':\n return (\n <g transform=\"translate(12, 19)\">\n <path d=\"M-3 0L0 2L3 0L0 -2L-3 0Z\" fill={accessoryColor} />\n <circle cx=\"0\" cy=\"0\" r=\"1\" fill={featureColor} />\n </g>\n )\n default:\n return null\n }\n}\n\nexport function Character({\n expression = 'happy',\n size = 48,\n color = '#A78BFA',\n featureColor = '#1d1d1f',\n accessory = 'none',\n accessoryColor = '#FF6B9D',\n animate = false,\n className,\n style,\n}: CharacterProps) {\n return (\n <svg\n viewBox=\"0 0 24 24\"\n width={size}\n height={size}\n className={cn(\n 'character',\n animate && 'character-animate',\n className\n )}\n style={style}\n >\n <style>\n {animate\n ? `\n .character-animate .character-face {\n animation: characterBounce 2s ease-in-out infinite;\n }\n @keyframes characterBounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-1px); }\n }\n @media (prefers-reduced-motion: reduce) {\n .character-animate .character-face {\n animation: none;\n }\n }\n `\n : ''}\n </style>\n <g className=\"character-face\">\n {/* Face */}\n <circle cx=\"12\" cy=\"12\" r=\"10\" fill={color} />\n\n {/* Eyes */}\n {renderEyes(expression, featureColor)}\n\n {/* Mouth */}\n {renderMouth(expression, featureColor)}\n\n {/* Accessory */}\n {renderAccessory(accessory, accessoryColor, featureColor)}\n </g>\n </svg>\n )\n}\n"],"names":["renderEyes","expression","featureColor","jsxs","Fragment","jsx","renderMouth","renderAccessory","accessory","accessoryColor","Character","size","color","animate","className","style","cn"],"mappings":"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"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { jsx as n, jsxs as m } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as i } from "react";
|
|
3
|
+
import { cn as p } from "../../utils/cn.js";
|
|
4
|
+
const d = {
|
|
5
|
+
keyword: "var(--color-coral)",
|
|
6
|
+
string: "var(--color-mint)",
|
|
7
|
+
number: "var(--color-gold)",
|
|
8
|
+
comment: "var(--color-grey-500)",
|
|
9
|
+
property: "var(--color-sage)",
|
|
10
|
+
punctuation: "var(--color-grey-400)",
|
|
11
|
+
text: "var(--color-grey-200)"
|
|
12
|
+
};
|
|
13
|
+
function u(t) {
|
|
14
|
+
const a = [];
|
|
15
|
+
let e = t;
|
|
16
|
+
const s = [
|
|
17
|
+
[/^\/\/.*$/m, "comment"],
|
|
18
|
+
[/^\/\*[\s\S]*?\*\//, "comment"],
|
|
19
|
+
[/^#.*$/m, "comment"],
|
|
20
|
+
// bash comments
|
|
21
|
+
[/^'[^']*'/, "string"],
|
|
22
|
+
[/^"[^"]*"/, "string"],
|
|
23
|
+
[/^`[^`]*`/, "string"],
|
|
24
|
+
[
|
|
25
|
+
/^\b(const|let|var|function|return|if|else|for|while|import|export|from|default|class|extends|new|this|true|false|null|undefined|async|await|try|catch|throw|finally|typeof|instanceof|in|of|yield|switch|case|break|continue|do|with|debugger|delete|void)\b/,
|
|
26
|
+
"keyword"
|
|
27
|
+
],
|
|
28
|
+
[/^\b\d+(\.\d+)?\b/, "number"],
|
|
29
|
+
[/^[a-zA-Z_][a-zA-Z0-9_]*(?=\s*:)/, "property"],
|
|
30
|
+
[/^[{}[\](),;:=<>!&|?+\-*/%^~]/, "punctuation"],
|
|
31
|
+
[/^\s+/, "text"],
|
|
32
|
+
[/^[^\s{}[\](),;:'"`=<>!&|?+\-*/%^~]+/, "text"]
|
|
33
|
+
];
|
|
34
|
+
for (; e.length > 0; ) {
|
|
35
|
+
let l = !1;
|
|
36
|
+
for (const [c, o] of s) {
|
|
37
|
+
const r = e.match(c);
|
|
38
|
+
if (r) {
|
|
39
|
+
a.push({ type: o, value: r[0] }), e = e.slice(r[0].length), l = !0;
|
|
40
|
+
break;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
l || (a.push({ type: "text", value: e[0] }), e = e.slice(1));
|
|
44
|
+
}
|
|
45
|
+
return a;
|
|
46
|
+
}
|
|
47
|
+
function h({
|
|
48
|
+
code: t,
|
|
49
|
+
language: a = "javascript",
|
|
50
|
+
showLineNumbers: e = !1,
|
|
51
|
+
className: s
|
|
52
|
+
}) {
|
|
53
|
+
const l = i(() => u(t), [t]), c = i(() => t.split(`
|
|
54
|
+
`), [t]);
|
|
55
|
+
return /* @__PURE__ */ n(
|
|
56
|
+
"pre",
|
|
57
|
+
{
|
|
58
|
+
className: p(
|
|
59
|
+
"text-sm font-mono whitespace-pre overflow-x-auto",
|
|
60
|
+
"bg-[var(--glass-bg)] rounded-lg p-4",
|
|
61
|
+
"border border-[var(--glass-border)]",
|
|
62
|
+
s
|
|
63
|
+
),
|
|
64
|
+
style: { color: "var(--color-grey-200)" },
|
|
65
|
+
children: /* @__PURE__ */ m("code", { className: e ? "flex" : void 0, children: [
|
|
66
|
+
e && /* @__PURE__ */ n("span", { className: "select-none pr-4 text-[var(--color-grey-600)] border-r border-[var(--glass-border)] mr-4", children: c.map((o, r) => /* @__PURE__ */ n("span", { className: "block", children: r + 1 }, r)) }),
|
|
67
|
+
/* @__PURE__ */ n("span", { className: e ? "flex-1" : void 0, children: l.map((o, r) => /* @__PURE__ */ n("span", { style: { color: d[o.type] }, children: o.value }, r)) })
|
|
68
|
+
] })
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
export {
|
|
73
|
+
h as CodeBlock
|
|
74
|
+
};
|
|
75
|
+
//# sourceMappingURL=CodeBlock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodeBlock.js","sources":["../../../src/atoms/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface CodeBlockProps {\n /** Code string to display */\n code: string\n /** Programming language for syntax highlighting */\n language?: 'javascript' | 'typescript' | 'json' | 'bash' | 'css'\n /** Show line numbers */\n showLineNumbers?: boolean\n /** Additional class names */\n className?: string\n}\n\ninterface Token {\n type:\n | 'keyword'\n | 'string'\n | 'number'\n | 'comment'\n | 'property'\n | 'punctuation'\n | 'text'\n value: string\n}\n\nconst COLORS = {\n keyword: 'var(--color-coral)',\n string: 'var(--color-mint)',\n number: 'var(--color-gold)',\n comment: 'var(--color-grey-500)',\n property: 'var(--color-sage)',\n punctuation: 'var(--color-grey-400)',\n text: 'var(--color-grey-200)',\n}\n\nfunction tokenize(code: string): Token[] {\n const tokens: Token[] = []\n let remaining = code\n\n const patterns: [RegExp, Token['type']][] = [\n [/^\\/\\/.*$/m, 'comment'],\n [/^\\/\\*[\\s\\S]*?\\*\\//, 'comment'],\n [/^#.*$/m, 'comment'], // bash comments\n [/^'[^']*'/, 'string'],\n [/^\"[^\"]*\"/, 'string'],\n [/^`[^`]*`/, 'string'],\n [\n /^\\b(const|let|var|function|return|if|else|for|while|import|export|from|default|class|extends|new|this|true|false|null|undefined|async|await|try|catch|throw|finally|typeof|instanceof|in|of|yield|switch|case|break|continue|do|with|debugger|delete|void)\\b/,\n 'keyword',\n ],\n [/^\\b\\d+(\\.\\d+)?\\b/, 'number'],\n [/^[a-zA-Z_][a-zA-Z0-9_]*(?=\\s*:)/, 'property'],\n [/^[{}[\\](),;:=<>!&|?+\\-*/%^~]/, 'punctuation'],\n [/^\\s+/, 'text'],\n [/^[^\\s{}[\\](),;:'\"`=<>!&|?+\\-*/%^~]+/, 'text'],\n ]\n\n while (remaining.length > 0) {\n let matched = false\n\n for (const [pattern, type] of patterns) {\n const match = remaining.match(pattern)\n if (match) {\n tokens.push({ type, value: match[0] })\n remaining = remaining.slice(match[0].length)\n matched = true\n break\n }\n }\n\n if (!matched) {\n tokens.push({ type: 'text', value: remaining[0] })\n remaining = remaining.slice(1)\n }\n }\n\n return tokens\n}\n\n/**\n * Lightweight syntax highlighting code block\n * No external dependencies, uses CSS custom properties for theming\n */\nexport function CodeBlock({\n code,\n language: _language = 'javascript',\n showLineNumbers = false,\n className,\n}: CodeBlockProps) {\n const tokens = useMemo(() => tokenize(code), [code])\n const lines = useMemo(() => code.split('\\n'), [code])\n\n return (\n <pre\n className={cn(\n 'text-sm font-mono whitespace-pre overflow-x-auto',\n 'bg-[var(--glass-bg)] rounded-lg p-4',\n 'border border-[var(--glass-border)]',\n className\n )}\n style={{ color: 'var(--color-grey-200)' }}\n >\n <code className={showLineNumbers ? 'flex' : undefined}>\n {showLineNumbers && (\n <span className=\"select-none pr-4 text-[var(--color-grey-600)] border-r border-[var(--glass-border)] mr-4\">\n {lines.map((_, i) => (\n <span key={i} className=\"block\">\n {i + 1}\n </span>\n ))}\n </span>\n )}\n <span className={showLineNumbers ? 'flex-1' : undefined}>\n {tokens.map((token, i) => (\n <span key={i} style={{ color: COLORS[token.type] }}>\n {token.value}\n </span>\n ))}\n </span>\n </code>\n </pre>\n )\n}\n"],"names":["COLORS","tokenize","code","tokens","remaining","patterns","matched","pattern","type","match","CodeBlock","_language","showLineNumbers","className","useMemo","lines","jsx","cn","jsxs","_","i","token"],"mappings":";;;AA0BA,MAAMA,IAAS;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,aAAa;AAAA,EACb,MAAM;AACR;AAEA,SAASC,EAASC,GAAuB;AACvC,QAAMC,IAAkB,CAAA;AACxB,MAAIC,IAAYF;AAEhB,QAAMG,IAAsC;AAAA,IAC1C,CAAC,aAAa,SAAS;AAAA,IACvB,CAAC,qBAAqB,SAAS;AAAA,IAC/B,CAAC,UAAU,SAAS;AAAA;AAAA,IACpB,CAAC,YAAY,QAAQ;AAAA,IACrB,CAAC,YAAY,QAAQ;AAAA,IACrB,CAAC,YAAY,QAAQ;AAAA,IACrB;AAAA,MACE;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,oBAAoB,QAAQ;AAAA,IAC7B,CAAC,mCAAmC,UAAU;AAAA,IAC9C,CAAC,gCAAgC,aAAa;AAAA,IAC9C,CAAC,QAAQ,MAAM;AAAA,IACf,CAAC,uCAAuC,MAAM;AAAA,EAAA;AAGhD,SAAOD,EAAU,SAAS,KAAG;AAC3B,QAAIE,IAAU;AAEd,eAAW,CAACC,GAASC,CAAI,KAAKH,GAAU;AACtC,YAAMI,IAAQL,EAAU,MAAMG,CAAO;AACrC,UAAIE,GAAO;AACT,QAAAN,EAAO,KAAK,EAAE,MAAAK,GAAM,OAAOC,EAAM,CAAC,GAAG,GACrCL,IAAYA,EAAU,MAAMK,EAAM,CAAC,EAAE,MAAM,GAC3CH,IAAU;AACV;AAAA,MACF;AAAA,IACF;AAEA,IAAKA,MACHH,EAAO,KAAK,EAAE,MAAM,QAAQ,OAAOC,EAAU,CAAC,GAAG,GACjDA,IAAYA,EAAU,MAAM,CAAC;AAAA,EAEjC;AAEA,SAAOD;AACT;AAMO,SAASO,EAAU;AAAA,EACxB,MAAAR;AAAA,EACA,UAAUS,IAAY;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AACF,GAAmB;AACjB,QAAMV,IAASW,EAAQ,MAAMb,EAASC,CAAI,GAAG,CAACA,CAAI,CAAC,GAC7Ca,IAAQD,EAAQ,MAAMZ,EAAK,MAAM;AAAA,CAAI,GAAG,CAACA,CAAI,CAAC;AAEpD,SACE,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,OAAO,wBAAA;AAAA,MAEhB,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWN,IAAkB,SAAS,QACzC,UAAA;AAAA,QAAAA,uBACE,QAAA,EAAK,WAAU,4FACb,UAAAG,EAAM,IAAI,CAACI,GAAGC,MACb,gBAAAJ,EAAC,UAAa,WAAU,SACrB,cAAI,EAAA,GADII,CAEX,CACD,GACH;AAAA,QAEF,gBAAAJ,EAAC,QAAA,EAAK,WAAWJ,IAAkB,WAAW,QAC3C,UAAAT,EAAO,IAAI,CAACkB,GAAOD,MAClB,gBAAAJ,EAAC,UAAa,OAAO,EAAE,OAAOhB,EAAOqB,EAAM,IAAI,KAC5C,UAAAA,EAAM,SADED,CAEX,CACD,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsxs as e, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { cn as n } from "../../utils/cn.js";
|
|
3
|
+
function h({
|
|
4
|
+
isOpen: r,
|
|
5
|
+
size: o = 24,
|
|
6
|
+
className: i,
|
|
7
|
+
...a
|
|
8
|
+
}) {
|
|
9
|
+
return /* @__PURE__ */ e(
|
|
10
|
+
"svg",
|
|
11
|
+
{
|
|
12
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
13
|
+
width: o,
|
|
14
|
+
height: o,
|
|
15
|
+
viewBox: "0 0 24 24",
|
|
16
|
+
fill: "none",
|
|
17
|
+
stroke: "currentColor",
|
|
18
|
+
strokeWidth: "2",
|
|
19
|
+
strokeLinecap: "round",
|
|
20
|
+
strokeLinejoin: "round",
|
|
21
|
+
className: n("transition-transform duration-300", i),
|
|
22
|
+
"aria-hidden": "true",
|
|
23
|
+
...a,
|
|
24
|
+
children: [
|
|
25
|
+
/* @__PURE__ */ t(
|
|
26
|
+
"path",
|
|
27
|
+
{
|
|
28
|
+
d: r ? "M18 6L6 18" : "M4 6h16",
|
|
29
|
+
className: "origin-center transition-all duration-300"
|
|
30
|
+
}
|
|
31
|
+
),
|
|
32
|
+
/* @__PURE__ */ t(
|
|
33
|
+
"path",
|
|
34
|
+
{
|
|
35
|
+
d: r ? "M6 6l12 12" : "M4 12h16",
|
|
36
|
+
className: n(
|
|
37
|
+
"origin-center transition-all duration-300",
|
|
38
|
+
r && "opacity-0"
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
),
|
|
42
|
+
!r && /* @__PURE__ */ t("path", { d: "M4 18h16" })
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
export {
|
|
48
|
+
h as HamburgerIcon
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=HamburgerIcon.js.map
|