@music-vine/cadence 0.1.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/README.md +146 -0
- package/dist/components/accordion.d.ts +35 -0
- package/dist/components/accordion.d.ts.map +1 -0
- package/dist/components/accordion.js +95 -0
- package/dist/components/accordion.js.map +7 -0
- package/dist/components/badge.d.ts +14 -0
- package/dist/components/badge.d.ts.map +1 -0
- package/dist/components/badge.js +78 -0
- package/dist/components/badge.js.map +7 -0
- package/dist/components/breadcrumb.d.ts +20 -0
- package/dist/components/breadcrumb.d.ts.map +1 -0
- package/dist/components/breadcrumb.js +98 -0
- package/dist/components/breadcrumb.js.map +7 -0
- package/dist/components/button.d.ts +47 -0
- package/dist/components/button.d.ts.map +1 -0
- package/dist/components/button.js +295 -0
- package/dist/components/button.js.map +7 -0
- package/dist/components/card.d.ts +9 -0
- package/dist/components/card.d.ts.map +1 -0
- package/dist/components/card.js +65 -0
- package/dist/components/card.js.map +7 -0
- package/dist/components/carousel-dots.d.ts +9 -0
- package/dist/components/carousel-dots.d.ts.map +1 -0
- package/dist/components/carousel-dots.js +55 -0
- package/dist/components/carousel-dots.js.map +7 -0
- package/dist/components/carousel.d.ts +33 -0
- package/dist/components/carousel.d.ts.map +1 -0
- package/dist/components/carousel.js +217 -0
- package/dist/components/carousel.js.map +7 -0
- package/dist/components/checkbox.d.ts +13 -0
- package/dist/components/checkbox.d.ts.map +1 -0
- package/dist/components/checkbox.js +57 -0
- package/dist/components/checkbox.js.map +7 -0
- package/dist/components/context-menu.d.ts +28 -0
- package/dist/components/context-menu.d.ts.map +1 -0
- package/dist/components/context-menu.js +154 -0
- package/dist/components/context-menu.js.map +7 -0
- package/dist/components/dialog.d.ts +20 -0
- package/dist/components/dialog.d.ts.map +1 -0
- package/dist/components/dialog.js +98 -0
- package/dist/components/dialog.js.map +7 -0
- package/dist/components/drawer.d.ts +26 -0
- package/dist/components/drawer.d.ts.map +1 -0
- package/dist/components/drawer.js +133 -0
- package/dist/components/drawer.js.map +7 -0
- package/dist/components/index.d.ts +35 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +277 -0
- package/dist/components/index.js.map +7 -0
- package/dist/components/input.d.ts +20 -0
- package/dist/components/input.d.ts.map +1 -0
- package/dist/components/input.js +174 -0
- package/dist/components/input.js.map +7 -0
- package/dist/components/label.d.ts +6 -0
- package/dist/components/label.d.ts.map +1 -0
- package/dist/components/label.js +21 -0
- package/dist/components/label.js.map +7 -0
- package/dist/components/popover.d.ts +8 -0
- package/dist/components/popover.d.ts.map +1 -0
- package/dist/components/popover.js +38 -0
- package/dist/components/popover.js.map +7 -0
- package/dist/components/price-tag.d.ts +11 -0
- package/dist/components/price-tag.d.ts.map +1 -0
- package/dist/components/price-tag.js +31 -0
- package/dist/components/price-tag.js.map +7 -0
- package/dist/components/radio-group.d.ts +6 -0
- package/dist/components/radio-group.d.ts.map +1 -0
- package/dist/components/radio-group.js +84 -0
- package/dist/components/radio-group.js.map +7 -0
- package/dist/components/scroll-area.d.ts +15 -0
- package/dist/components/scroll-area.d.ts.map +1 -0
- package/dist/components/scroll-area.js +132 -0
- package/dist/components/scroll-area.js.map +7 -0
- package/dist/components/select.d.ts +59 -0
- package/dist/components/select.d.ts.map +1 -0
- package/dist/components/select.js +210 -0
- package/dist/components/select.js.map +7 -0
- package/dist/components/separator.d.ts +5 -0
- package/dist/components/separator.d.ts.map +1 -0
- package/dist/components/separator.js +25 -0
- package/dist/components/separator.js.map +7 -0
- package/dist/components/skeleton.d.ts +10 -0
- package/dist/components/skeleton.d.ts.map +1 -0
- package/dist/components/skeleton.js +29 -0
- package/dist/components/skeleton.js.map +7 -0
- package/dist/components/slider.d.ts +15 -0
- package/dist/components/slider.d.ts.map +1 -0
- package/dist/components/slider.js +95 -0
- package/dist/components/slider.js.map +7 -0
- package/dist/components/stacking-card.d.ts +54 -0
- package/dist/components/stacking-card.d.ts.map +1 -0
- package/dist/components/stacking-card.js +636 -0
- package/dist/components/stacking-card.js.map +7 -0
- package/dist/components/tabs.d.ts +8 -0
- package/dist/components/tabs.d.ts.map +1 -0
- package/dist/components/tabs.js +48 -0
- package/dist/components/tabs.js.map +7 -0
- package/dist/components/textarea.d.ts +11 -0
- package/dist/components/textarea.d.ts.map +1 -0
- package/dist/components/textarea.js +43 -0
- package/dist/components/textarea.js.map +7 -0
- package/dist/components/toast.d.ts +7 -0
- package/dist/components/toast.d.ts.map +1 -0
- package/dist/components/toast.js +53 -0
- package/dist/components/toast.js.map +7 -0
- package/dist/components/toggle-button.d.ts +20 -0
- package/dist/components/toggle-button.d.ts.map +1 -0
- package/dist/components/toggle-button.js +56 -0
- package/dist/components/toggle-button.js.map +7 -0
- package/dist/components/typography/heading.d.ts +18 -0
- package/dist/components/typography/heading.d.ts.map +1 -0
- package/dist/components/typography/heading.js +105 -0
- package/dist/components/typography/heading.js.map +7 -0
- package/dist/components/typography/index.d.ts +5 -0
- package/dist/components/typography/index.d.ts.map +1 -0
- package/dist/components/typography/index.js +36 -0
- package/dist/components/typography/index.js.map +7 -0
- package/dist/components/typography/list.d.ts +17 -0
- package/dist/components/typography/list.d.ts.map +1 -0
- package/dist/components/typography/list.js +73 -0
- package/dist/components/typography/list.js.map +7 -0
- package/dist/components/typography/prose.d.ts +5 -0
- package/dist/components/typography/prose.d.ts.map +1 -0
- package/dist/components/typography/prose.js +50 -0
- package/dist/components/typography/prose.js.map +7 -0
- package/dist/components/typography/text.d.ts +11 -0
- package/dist/components/typography/text.d.ts.map +1 -0
- package/dist/components/typography/text.js +38 -0
- package/dist/components/typography/text.js.map +7 -0
- package/dist/icons/custom/boards-indicator.d.ts +7 -0
- package/dist/icons/custom/boards-indicator.d.ts.map +1 -0
- package/dist/icons/custom/boards-indicator.js +70 -0
- package/dist/icons/custom/boards-indicator.js.map +7 -0
- package/dist/icons/custom/download-history.d.ts +6 -0
- package/dist/icons/custom/download-history.d.ts.map +1 -0
- package/dist/icons/custom/download-history.js +19 -0
- package/dist/icons/custom/download-history.js.map +7 -0
- package/dist/icons/custom/exclamation-mark-in-octagon.d.ts +6 -0
- package/dist/icons/custom/exclamation-mark-in-octagon.d.ts.map +1 -0
- package/dist/icons/custom/exclamation-mark-in-octagon.js +57 -0
- package/dist/icons/custom/exclamation-mark-in-octagon.js.map +7 -0
- package/dist/icons/custom/pin.d.ts +6 -0
- package/dist/icons/custom/pin.d.ts.map +1 -0
- package/dist/icons/custom/pin.js +28 -0
- package/dist/icons/custom/pin.js.map +7 -0
- package/dist/icons/custom/premium-star.d.ts +10 -0
- package/dist/icons/custom/premium-star.d.ts.map +1 -0
- package/dist/icons/custom/premium-star.js +191 -0
- package/dist/icons/custom/premium-star.js.map +7 -0
- package/dist/icons/custom/social/discord.d.ts +6 -0
- package/dist/icons/custom/social/discord.d.ts.map +1 -0
- package/dist/icons/custom/social/discord.js +27 -0
- package/dist/icons/custom/social/discord.js.map +7 -0
- package/dist/icons/custom/social/index.d.ts +4 -0
- package/dist/icons/custom/social/index.d.ts.map +1 -0
- package/dist/icons/custom/social/index.js +4 -0
- package/dist/icons/custom/social/index.js.map +7 -0
- package/dist/icons/custom/social/tiktok.d.ts +6 -0
- package/dist/icons/custom/social/tiktok.d.ts.map +1 -0
- package/dist/icons/custom/social/tiktok.js +27 -0
- package/dist/icons/custom/social/tiktok.js.map +7 -0
- package/dist/icons/custom/social/twitter-x.d.ts +6 -0
- package/dist/icons/custom/social/twitter-x.d.ts.map +1 -0
- package/dist/icons/custom/social/twitter-x.js +29 -0
- package/dist/icons/custom/social/twitter-x.js.map +7 -0
- package/dist/icons/custom/tick-in-circle.d.ts +7 -0
- package/dist/icons/custom/tick-in-circle.d.ts.map +1 -0
- package/dist/icons/custom/tick-in-circle.js +32 -0
- package/dist/icons/custom/tick-in-circle.js.map +7 -0
- package/dist/icons/custom/tick-small.d.ts +6 -0
- package/dist/icons/custom/tick-small.d.ts.map +1 -0
- package/dist/icons/custom/tick-small.js +16 -0
- package/dist/icons/custom/tick-small.js.map +7 -0
- package/dist/icons/custom/tick.d.ts +3 -0
- package/dist/icons/custom/tick.d.ts.map +1 -0
- package/dist/icons/custom/tick.js +31 -0
- package/dist/icons/custom/tick.js.map +7 -0
- package/dist/icons/custom/uppbeat-credit.d.ts +4 -0
- package/dist/icons/custom/uppbeat-credit.d.ts.map +1 -0
- package/dist/icons/custom/uppbeat-credit.js +55 -0
- package/dist/icons/custom/uppbeat-credit.js.map +7 -0
- package/dist/icons/index.d.ts +20 -0
- package/dist/icons/index.d.ts.map +1 -0
- package/dist/icons/index.js +15 -0
- package/dist/icons/index.js.map +7 -0
- package/dist/index.d.ts +19 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +6 -0
- package/dist/index.js.map +7 -0
- package/dist/lib/utils.d.ts +7 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/lib/utils.js +9 -0
- package/dist/lib/utils.js.map +7 -0
- package/dist/styles/index.css +3 -0
- package/dist/styles/storybook.css +14 -0
- package/package.json +107 -0
- package/tailwind.config.ts +299 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/stacking-card.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { LucideProps } from \"lucide-react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport type { Variants } from \"motion/react\";\nimport { motion } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { DummyCheckbox } from \"./checkbox\";\nimport { Separator } from \"./separator\";\n\nimport type { ListItemProps, ListProps } from \"./typography/list\";\nimport { List, ListItem } from \"./typography/list\";\nimport { Text } from \"./typography/text\";\n\n// Motion transition configuration\nconst motionTransition = {\n duration: 0.4,\n type: \"spring\" as const,\n bounce: 0,\n};\n\nconst motionVariantsChevron: Variants = {\n collapsed: {\n rotate: 0,\n transition: motionTransition,\n },\n expanded: {\n rotate: 180,\n transition: motionTransition,\n },\n};\n\n// Hook to handle auto height animation for collapsible content\nconst useAutoHeight = () => {\n const [height, setHeight] = React.useState<number | \"auto\">(\"auto\");\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const resizeObserver = new ResizeObserver((entries) => {\n const entry = entries[0];\n\n if (entry) {\n setHeight(entry.contentRect.height);\n }\n });\n\n resizeObserver.observe(ref.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n\n const variants: Variants = React.useMemo(\n () => ({\n collapsed: {\n height: 0,\n opacity: 0,\n transition: motionTransition,\n },\n expanded: {\n height: height === \"auto\" ? \"auto\" : height,\n opacity: 1,\n transition: motionTransition,\n },\n }),\n [height]\n );\n\n return { ref, variants };\n};\n\ninterface StackingCardGroupContextValue {\n selectedValue: string;\n expandedValue: string | null;\n onValueChange?: (value: string) => void;\n onExpandedChange?: (value: string | null) => void;\n registerCardRef?: (value: string, element: HTMLElement | null) => void;\n}\n\nconst StackingCardGroupContext =\n React.createContext<StackingCardGroupContextValue | null>(null);\n\nconst useStackingCardGroup = () => {\n const context = React.useContext(StackingCardGroupContext);\n\n return context;\n};\n\ninterface StackingCardContextValue {\n isSelected?: boolean;\n isCollapsed?: boolean;\n selectable?: boolean;\n onSelectedChange?: (selected: boolean) => void;\n onToggleCollapse?: () => void;\n setHasCollapsibleContent?: (hasCollapsible: boolean) => void;\n contentId?: string;\n}\n\nconst StackingCardContext = React.createContext<StackingCardContextValue>({});\n\nconst useStackingCard = () => {\n const context = React.useContext(StackingCardContext);\n\n return context;\n};\n\ninterface StackingCardProps extends React.HTMLAttributes<HTMLDivElement> {\n selectable?: boolean;\n selected?: boolean;\n onSelectedChange?: (selected: boolean) => void;\n variant?: \"default\" | \"selected\";\n value?: string;\n initiallyCollapsed?: boolean;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n}\n\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Complex component with many state interactions\nfunction StackingCard({\n className,\n children,\n selectable = false,\n selected = false,\n onSelectedChange,\n variant,\n onClick,\n value,\n onKeyDown,\n initiallyCollapsed = true,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n \"aria-describedby\": ariaDescribedby,\n ref,\n ...props\n}: StackingCardProps & { ref?: React.Ref<HTMLDivElement> }) {\n const [isCollapsed, setIsCollapsed] = React.useState(true);\n const [hasCollapsibleContent, setHasCollapsibleContent] =\n React.useState(false);\n\n const [wasSelected, setWasSelected] = React.useState(false);\n\n const ignoreInitiallyCollapsedAfterRenderRef = React.useRef(false);\n const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);\n\n // Generate unique ID for this card instance\n const cardId = React.useId();\n const contentId = `${cardId}-content`;\n\n const group = useStackingCardGroup();\n\n // Determine if we're in a group\n const isInGroup = group !== null;\n\n // Determine selection state\n const isSelected = isInGroup\n ? group.selectedValue === value\n : variant === \"selected\" || selected;\n\n // Auto-expand logic: if card becomes selected and has collapsible content, expand it\n // This is calculated during render, not in useEffect\n const justBecameSelected = isSelected && !wasSelected;\n\n if (justBecameSelected && hasCollapsibleContent) {\n if (isInGroup) {\n // In group mode, expand this card\n group?.onExpandedChange?.(value ?? null);\n } else {\n // In standalone mode, expand this card\n setIsCollapsed(false);\n }\n }\n\n // Update wasSelected for next render (this is safe during render)\n if (isSelected !== wasSelected) {\n setWasSelected(isSelected);\n }\n\n // Determine collapse state\n let shouldBeCollapsed = isCollapsed;\n\n if (initiallyCollapsed && !ignoreInitiallyCollapsedAfterRenderRef.current) {\n shouldBeCollapsed = true;\n } else if (isInGroup) {\n shouldBeCollapsed = group.expandedValue !== value;\n }\n\n const ignoreInitiallyCollapsedRef = React.useCallback(() => {\n if (initiallyCollapsed && !ignoreInitiallyCollapsedAfterRenderRef.current) {\n ignoreInitiallyCollapsedAfterRenderRef.current = true;\n }\n }, [initiallyCollapsed]);\n\n const handleSelect = React.useCallback(() => {\n if (selectable) {\n if (isInGroup && value) {\n group?.onValueChange?.(value);\n } else if (!isInGroup && onSelectedChange) {\n onSelectedChange(!selected);\n }\n }\n }, [selectable, isInGroup, value, onSelectedChange, group, selected]);\n\n const handleToggleCollapse = React.useCallback(() => {\n if (isInGroup) {\n // In group mode, toggle between this card and null (all collapsed)\n group?.onExpandedChange?.(\n group.expandedValue === value ? null : (value ?? null)\n );\n } else {\n setIsCollapsed(!isCollapsed);\n }\n }, [isInGroup, group, value, isCollapsed]);\n\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n // Immediately mark that we're no longer in the initial state\n ignoreInitiallyCollapsedRef();\n\n if (selectable && (e.key === \"Enter\" || e.key === \" \")) {\n e.preventDefault();\n handleSelect();\n }\n\n onKeyDown?.(e);\n },\n [selectable, handleSelect, onKeyDown, ignoreInitiallyCollapsedRef]\n );\n\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n\n // Immediately mark that we're no longer in the initial state\n ignoreInitiallyCollapsedRef();\n\n handleSelect();\n\n if (isSelected) {\n handleToggleCollapse();\n }\n\n onClick?.(e);\n },\n [\n handleSelect,\n onClick,\n isSelected,\n handleToggleCollapse,\n ignoreInitiallyCollapsedRef,\n ]\n );\n\n const contextValue: StackingCardContextValue = React.useMemo(\n () => ({\n isSelected,\n isCollapsed: shouldBeCollapsed,\n selectable,\n onSelectedChange,\n onToggleCollapse: handleToggleCollapse,\n setHasCollapsibleContent,\n contentId,\n }),\n [\n isSelected,\n shouldBeCollapsed,\n selectable,\n onSelectedChange,\n handleToggleCollapse,\n contentId,\n ]\n );\n\n // Generate accessible label if not provided\n const accessibleLabel = ariaLabel ?? (isInGroup ? `Option ${value}` : \"Card\");\n\n // Compute role separately to avoid nested ternary\n const computeRole = (): \"radio\" | \"button\" | undefined => {\n if (isInGroup) {\n return \"radio\";\n }\n if (selectable) {\n return \"button\";\n }\n return undefined;\n };\n const cardRole = computeRole();\n\n // Combined ref callback that handles both forwarded ref and group registration\n const combinedRef = React.useCallback(\n (element: HTMLDivElement | null) => {\n // Handle forwarded ref\n if (typeof ref === \"function\") {\n ref(element);\n } else if (ref) {\n ref.current = element;\n }\n\n // Register with group if needed\n if (isInGroup && value && group?.registerCardRef) {\n group.registerCardRef(value, element);\n }\n },\n [ref, isInGroup, value, group]\n );\n\n React.useEffect(() => {\n if (initiallyCollapsed && !ignoreInitiallyCollapsedAfterRenderRef.current) {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n timeoutRef.current = setTimeout(() => {\n ignoreInitiallyCollapsedAfterRenderRef.current = true;\n }, 1500); // delay to allow for rapid re-renders to settle\n }\n\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [initiallyCollapsed]);\n\n return (\n <StackingCardContext.Provider value={contextValue}>\n {/* biome-ignore lint/a11y/noStaticElementInteractions: Role is dynamically assigned based on context */}\n {/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: Interactive behavior with proper role */}\n {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-checked is valid for radio role */}\n <div\n aria-checked={isInGroup ? isSelected : undefined}\n aria-describedby={ariaDescribedby}\n aria-expanded={hasCollapsibleContent ? !shouldBeCollapsed : undefined}\n aria-label={accessibleLabel}\n aria-labelledby={ariaLabelledby}\n aria-pressed={!isInGroup && selectable ? isSelected : undefined}\n className={cn(\n \"relative flex w-full min-w-64 max-w-96 flex-col overflow-hidden border border-solid\",\n \"rounded-2xl shadow-sm transition-colors\",\n selectable && \"cursor-pointer\",\n isSelected\n ? \"border-gray-950 dark:border-white\"\n : \"border-gray-150 dark:border-gray-800\",\n \"focus-visible:ring-pink-500 focus-visible:ring-offset-2\",\n className\n )}\n key={value}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n ref={combinedRef}\n role={cardRole}\n style={props.style}\n tabIndex={selectable ? 0 : undefined}\n {...props}\n >\n {children}\n </div>\n </StackingCardContext.Provider>\n );\n}\n\ntype StackingCardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\n\nfunction StackingCardHeader({\n className,\n children,\n ref,\n ...props\n}: StackingCardHeaderProps) {\n const { selectable, isSelected } = useStackingCard();\n\n return (\n <div\n className={cn(\n \"flex items-center justify-between gap-2 px-6 pt-4 pb-1\",\n isSelected && \"bg-gray-100 dark:bg-gray-800\",\n className\n )}\n ref={ref}\n {...props}\n >\n <div className=\"flex flex-1 items-center gap-2\">\n {selectable && (\n <DummyCheckbox checked={isSelected} tabIndex={-1} variant=\"rounded\" />\n )}\n {children}\n </div>\n </div>\n );\n}\n\ntype StackingCardTitleProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\n\nfunction StackingCardTitle({\n className,\n ref,\n ...props\n}: StackingCardTitleProps) {\n return (\n <Text\n className={cn(\n \"font-sans font-semibold text-gray-950 text-sm leading-6 dark:text-white\",\n className\n )}\n ref={ref}\n {...props}\n />\n );\n}\n\ntype StackingCardDescriptionProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\n\nfunction StackingCardDescription({\n className,\n ref,\n ...props\n}: StackingCardDescriptionProps) {\n return (\n <Text\n className={cn(\"text-gray-700 text-sm dark:text-gray-200\", className)}\n ref={ref}\n {...props}\n />\n );\n}\n\nconst MotionChevron = ({ isCollapsed }: { isCollapsed: boolean }) => (\n <motion.div\n animate={isCollapsed ? \"collapsed\" : \"expanded\"}\n className=\"flex items-center justify-center\"\n initial=\"collapsed\"\n variants={motionVariantsChevron}\n >\n <ChevronDown className=\"h-3 w-3 fill-none\" />\n </motion.div>\n);\n\ninterface StackingCardContentProps\n extends React.HTMLAttributes<HTMLDivElement> {\n collapsible?: boolean;\n minimal?: boolean;\n description?: React.ReactNode;\n ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction StackingCardContent({\n className,\n children,\n collapsible = false,\n minimal = false,\n description,\n ref,\n ...props\n}: StackingCardContentProps) {\n const {\n isCollapsed,\n isSelected,\n onToggleCollapse,\n setHasCollapsibleContent,\n contentId,\n } = useStackingCard();\n\n const { ref: autoHeightRef, variants: autoHeightVariants } = useAutoHeight();\n\n // Register this component as having collapsible content\n React.useEffect(() => {\n if (collapsible) {\n setHasCollapsibleContent?.(true);\n }\n\n return () => {\n setHasCollapsibleContent?.(false);\n };\n }, [collapsible, setHasCollapsibleContent]);\n\n if (!collapsible) {\n return (\n <div\n className={cn(\n \"flex flex-col gap-1.5 px-6 pt-0 pb-4\",\n isSelected && \"bg-gray-100 dark:bg-gray-800\",\n className\n )}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n return (\n <>\n <div\n className={cn(\n \"flex items-center justify-between gap-2 px-6 pb-4\",\n isSelected && \"bg-gray-100 dark:bg-gray-800\"\n )}\n >\n {description ? (\n <div className=\"flex-1\">{description}</div>\n ) : (\n <div aria-hidden className=\"flex-1\" />\n )}\n <Button\n aria-controls={contentId}\n aria-expanded={!isCollapsed}\n aria-label={isCollapsed ? \"Show details\" : \"Hide details\"}\n borderRadius=\"full\"\n className={cn(isSelected && \"bg-white dark:bg-gray-900\", \"h-3\")}\n onClick={(e) => {\n e.stopPropagation();\n onToggleCollapse?.();\n }}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.stopPropagation();\n }\n }}\n size=\"xs\"\n variant=\"light\"\n >\n <span className={cn({ \"sr-only\": minimal })}>Details</span>\n <MotionChevron isCollapsed={isCollapsed ?? false} />\n </Button>\n </div>\n <motion.div\n animate={isCollapsed ? \"collapsed\" : \"expanded\"}\n aria-hidden={isCollapsed}\n className=\"overflow-hidden\"\n id={contentId}\n initial=\"collapsed\"\n variants={autoHeightVariants}\n >\n <div className=\"flex flex-col\" ref={autoHeightRef}>\n <Separator\n className={cn(\n \"mt-0 mb-0\",\n isSelected\n ? \"bg-gray-950 dark:bg-white\"\n : \"border-gray-150 dark:border-gray-800\"\n )}\n />\n <div\n className={cn(\"flex flex-col gap-1.5\", className)}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n </div>\n </motion.div>\n </>\n );\n}\n\nfunction StackingCardList({\n className,\n children,\n ref,\n ...props\n}: ListProps & { ref?: React.Ref<HTMLUListElement | HTMLOListElement> }) {\n return (\n <List\n className={cn(\"list-none px-6 pt-3 pb-5\", className)}\n ref={ref}\n {...props}\n >\n {children}\n </List>\n );\n}\n\nconst StackingCardCheck = React.memo<LucideProps>(({ className, ...props }) => {\n const { selectable, isSelected } = useStackingCard();\n\n return (\n <Check\n className={cn(\n \"-mt-0.5 size-[14px] fill-none\",\n {\n \"text-current\": !selectable,\n \"text-pink-500\": isSelected && selectable,\n \"text-gray-950 dark:text-white\": !isSelected && selectable,\n },\n className\n )}\n {...props}\n />\n );\n});\n\nStackingCardCheck.displayName = \"StackingCardCheck\";\n\nfunction StackingCardListItem({\n className,\n children,\n ref,\n ...props\n}: ListItemProps & { ref?: React.Ref<HTMLLIElement> }) {\n return (\n <ListItem\n className={cn(\n \"flex font-sans text-gray-700 text-sm first:mt-0 dark:text-gray-200\",\n className\n )}\n customBullet={<StackingCardCheck />}\n ref={ref}\n {...props}\n >\n {children}\n </ListItem>\n );\n}\n\ninterface StackingCardGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n value?: string;\n onValueChange?: (value: string) => void;\n defaultValue?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction StackingCardGroup({\n className,\n children,\n value,\n onValueChange,\n defaultValue,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n ref,\n ...props\n}: StackingCardGroupProps) {\n const [internalSelectedValue, setInternalSelectedValue] = React.useState(\n defaultValue ?? \"\"\n );\n\n const [internalExpandedValue, setInternalExpandedValue] = React.useState<\n string | null\n >(defaultValue ?? null);\n\n // For controlled mode, we need to manage expansion state separately\n const [controlledExpandedValue, setControlledExpandedValue] = React.useState<\n string | null\n >(value ?? null);\n\n // Calculate effective values during render (controlled vs uncontrolled pattern)\n const effectiveSelectedValue =\n value !== undefined ? value : internalSelectedValue;\n\n const effectiveExpandedValue =\n value !== undefined ? controlledExpandedValue : internalExpandedValue;\n\n // Auto-expand selected card in controlled mode\n React.useEffect(() => {\n if (value !== undefined) {\n setControlledExpandedValue(value);\n }\n }, [value]);\n\n const handleValueChange = React.useCallback(\n (newValue: string) => {\n // Only update internal state if uncontrolled\n if (value === undefined) {\n setInternalSelectedValue(newValue);\n setInternalExpandedValue(newValue);\n } else {\n // In controlled mode, auto-expand the newly selected card\n setControlledExpandedValue(newValue);\n }\n\n onValueChange?.(newValue);\n },\n [value, onValueChange]\n );\n\n const handleExpandedChange = React.useCallback(\n (newExpandedValue: string | null) => {\n if (value === undefined) {\n // Uncontrolled mode\n setInternalExpandedValue(newExpandedValue);\n } else {\n // Controlled mode\n setControlledExpandedValue(newExpandedValue);\n }\n },\n [value]\n );\n\n // Extract card values from children for arrow key navigation\n const cardValues = React.useMemo(() => {\n const values: string[] = [];\n\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child)) {\n const childValue = (child.props as { value?: unknown }).value;\n\n if (typeof childValue === \"string\") {\n values.push(childValue);\n }\n }\n });\n\n return values;\n }, [children]);\n\n // Store card refs for navigation\n const cardRefsRef = React.useRef<Map<string, HTMLElement>>(new Map());\n\n const registerCardRef = React.useCallback(\n (cardValue: string, element: HTMLElement | null) => {\n if (element) {\n cardRefsRef.current.set(cardValue, element);\n } else {\n cardRefsRef.current.delete(cardValue);\n }\n },\n []\n );\n\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (cardValues.length === 0) {\n return;\n }\n\n const currentIndex = cardValues.indexOf(effectiveSelectedValue);\n let nextIndex = currentIndex;\n\n switch (e.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n e.preventDefault();\n nextIndex =\n currentIndex < cardValues.length - 1 ? currentIndex + 1 : 0;\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n e.preventDefault();\n nextIndex =\n currentIndex > 0 ? currentIndex - 1 : cardValues.length - 1;\n break;\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n case \"End\":\n e.preventDefault();\n nextIndex = cardValues.length - 1;\n break;\n default:\n return;\n }\n\n const nextValue = cardValues[nextIndex];\n\n if (nextValue && nextValue !== effectiveSelectedValue) {\n handleValueChange(nextValue);\n\n // Focus the newly selected card using registered ref\n setTimeout(() => {\n const targetCard = cardRefsRef.current.get(nextValue);\n\n targetCard?.focus();\n }, 0);\n }\n },\n [cardValues, effectiveSelectedValue, handleValueChange]\n );\n\n const contextValue: StackingCardGroupContextValue = React.useMemo(\n () => ({\n selectedValue: effectiveSelectedValue,\n expandedValue: effectiveExpandedValue,\n onValueChange: handleValueChange,\n onExpandedChange: handleExpandedChange,\n registerCardRef,\n }),\n [\n effectiveSelectedValue,\n effectiveExpandedValue,\n handleValueChange,\n handleExpandedChange,\n registerCardRef,\n ]\n );\n\n // Generate accessible label if not provided\n const accessibleLabel = ariaLabel ?? \"Select an option\";\n\n return (\n <StackingCardGroupContext.Provider value={contextValue}>\n <div\n aria-label={accessibleLabel}\n aria-labelledby={ariaLabelledby}\n className={cn(\"flex flex-col gap-4\", className)}\n onKeyDown={handleKeyDown}\n ref={ref}\n role=\"radiogroup\"\n tabIndex={-1}\n {...props}\n >\n {children}\n </div>\n </StackingCardGroupContext.Provider>\n );\n}\n\nexport {\n StackingCard,\n StackingCardCheck,\n StackingCardContent,\n StackingCardDescription,\n StackingCardGroup,\n StackingCardHeader,\n StackingCardList,\n StackingCardListItem,\n StackingCardTitle,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Tabs as TabsPrimitive } from "radix-ui";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
|
8
|
+
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,IAAI,gGAAqB,CAAC;AAEhC,QAAA,MAAM,QAAQ,uJAYZ,CAAC;AAIH,QAAA,MAAM,WAAW,gKAYf,CAAC;AAIH,QAAA,MAAM,WAAW,0JAYf,CAAC;AAIH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Tabs as TabsPrimitive } from "radix-ui";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
const Tabs = TabsPrimitive.Root;
|
|
6
|
+
const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
7
|
+
TabsPrimitive.List,
|
|
8
|
+
{
|
|
9
|
+
className: cn(
|
|
10
|
+
"inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-900 dark:bg-gray-900 dark:text-gray-100",
|
|
11
|
+
className
|
|
12
|
+
),
|
|
13
|
+
ref,
|
|
14
|
+
...props
|
|
15
|
+
}
|
|
16
|
+
));
|
|
17
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
18
|
+
const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
19
|
+
TabsPrimitive.Trigger,
|
|
20
|
+
{
|
|
21
|
+
className: cn(
|
|
22
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-semibold text-sm ring-offset-gray-100 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-950 data-[state=active]:shadow-sm dark:ring-offset-gray-900 dark:data-[state=active]:bg-gray-800 dark:data-[state=active]:text-gray-50 dark:focus-visible:ring-pink-500",
|
|
23
|
+
className
|
|
24
|
+
),
|
|
25
|
+
ref,
|
|
26
|
+
...props
|
|
27
|
+
}
|
|
28
|
+
));
|
|
29
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
30
|
+
const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
31
|
+
TabsPrimitive.Content,
|
|
32
|
+
{
|
|
33
|
+
className: cn(
|
|
34
|
+
"mt-2 ring-offset-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-500 focus-visible:ring-offset-2 dark:ring-offset-gray-900 dark:focus-visible:ring-pink-500",
|
|
35
|
+
className
|
|
36
|
+
),
|
|
37
|
+
ref,
|
|
38
|
+
...props
|
|
39
|
+
}
|
|
40
|
+
));
|
|
41
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
42
|
+
export {
|
|
43
|
+
Tabs,
|
|
44
|
+
TabsContent,
|
|
45
|
+
TabsList,
|
|
46
|
+
TabsTrigger
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/tabs.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.List\n className={cn(\n \"inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-900 dark:bg-gray-900 dark:text-gray-100\",\n className\n )}\n ref={ref}\n {...props}\n />\n));\n\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Trigger\n className={cn(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-semibold text-sm ring-offset-gray-100 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-950 data-[state=active]:shadow-sm dark:ring-offset-gray-900 dark:data-[state=active]:bg-gray-800 dark:data-[state=active]:text-gray-50 dark:focus-visible:ring-pink-500\",\n className\n )}\n ref={ref}\n {...props}\n />\n));\n\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n className={cn(\n \"mt-2 ring-offset-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-500 focus-visible:ring-offset-2 dark:ring-offset-gray-900 dark:focus-visible:ring-pink-500\",\n className\n )}\n ref={ref}\n {...props}\n />\n));\n\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],
|
|
5
|
+
"mappings": "AAWE;AAXF,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,MAAM,OAAO,cAAc;AAE3B,MAAM,WAAW,MAAM,WAGrB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,SAAS,cAAc,cAAc,KAAK;AAE1C,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,YAAY,cAAc,cAAc,QAAQ;AAEhD,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,YAAY,cAAc,cAAc,QAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare const textareaVariants: (props?: ({
|
|
4
|
+
size?: "default" | "sm" | null | undefined;
|
|
5
|
+
resize?: "none" | "horizontal" | "vertical" | "both" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
|
|
8
|
+
}
|
|
9
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
10
|
+
export { Textarea, textareaVariants };
|
|
11
|
+
//# sourceMappingURL=textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,gBAAgB;;;8EAoBrB,CAAC;AAEF,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACvD,YAAY,CAAC,OAAO,gBAAgB,CAAC;CAAG;AAE5C,QAAA,MAAM,QAAQ,2FAQb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
import { inputVariants } from "./input";
|
|
6
|
+
const textareaVariants = cva(
|
|
7
|
+
inputVariants(),
|
|
8
|
+
// inherits the base classes of the input component. Input variants will either be replaced by the Textarea variants or ignored.
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
size: {
|
|
12
|
+
default: "min-h-[80px] px-4 py-3",
|
|
13
|
+
sm: "min-h-[60px] px-3 py-2"
|
|
14
|
+
},
|
|
15
|
+
resize: {
|
|
16
|
+
none: "resize-none",
|
|
17
|
+
vertical: "resize-y",
|
|
18
|
+
horizontal: "resize-x",
|
|
19
|
+
both: "resize"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: {
|
|
23
|
+
size: "default",
|
|
24
|
+
resize: "none"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
const Textarea = React.forwardRef(
|
|
29
|
+
({ className, resize, size, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
30
|
+
"textarea",
|
|
31
|
+
{
|
|
32
|
+
className: cn(textareaVariants({ resize, size, className })),
|
|
33
|
+
ref,
|
|
34
|
+
...props
|
|
35
|
+
}
|
|
36
|
+
)
|
|
37
|
+
);
|
|
38
|
+
Textarea.displayName = "Textarea";
|
|
39
|
+
export {
|
|
40
|
+
Textarea,
|
|
41
|
+
textareaVariants
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=textarea.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/textarea.tsx"],
|
|
4
|
+
"sourcesContent": ["import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport { inputVariants } from \"./input\";\n\nconst textareaVariants = cva(\n inputVariants(), // inherits the base classes of the input component. Input variants will either be replaced by the Textarea variants or ignored.\n {\n variants: {\n size: {\n default: \"min-h-[80px] px-4 py-3\",\n sm: \"min-h-[60px] px-3 py-2\",\n },\n resize: {\n none: \"resize-none\",\n vertical: \"resize-y\",\n horizontal: \"resize-x\",\n both: \"resize\",\n },\n },\n defaultVariants: {\n size: \"default\",\n resize: \"none\",\n },\n }\n);\n\nexport interface TextareaProps\n extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n VariantProps<typeof textareaVariants> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ className, resize, size, ...props }, ref) => (\n <textarea\n className={cn(textareaVariants({ resize, size, className }))}\n ref={ref}\n {...props}\n />\n )\n);\n\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea, textareaVariants };\n"],
|
|
5
|
+
"mappings": "AAkCI;AAlCJ,SAAS,WAA8B;AACvC,YAAY,WAAW;AAEvB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAE9B,MAAM,mBAAmB;AAAA,EACvB,cAAc;AAAA;AAAA,EACd;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAMA,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC,EAAE,WAAW,QAAQ,MAAM,GAAG,MAAM,GAAG,QACtC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,iBAAiB,EAAE,QAAQ,MAAM,UAAU,CAAC,CAAC;AAAA,MAC3D;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
import { Toaster as SonnerToaster, toast as sonnerToast } from "sonner";
|
|
3
|
+
type ToasterProps = React.ComponentProps<typeof SonnerToaster>;
|
|
4
|
+
declare const Toaster: React.FC<ToasterProps>;
|
|
5
|
+
declare const toast: typeof sonnerToast;
|
|
6
|
+
export { toast, Toaster, type ToasterProps };
|
|
7
|
+
//# sourceMappingURL=toast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/components/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,OAAO,IAAI,aAAa,EACxB,KAAK,IAAI,WAAW,EACrB,MAAM,QAAQ,CAAC;AAEhB,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAI/D,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6BnC,CAAC;AAEF,QAAA,MAAM,KAAK,EAIF,OAAO,WAAW,CAAC;AA0B5B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import {
|
|
3
|
+
Toaster as SonnerToaster,
|
|
4
|
+
toast as sonnerToast
|
|
5
|
+
} from "sonner";
|
|
6
|
+
const GLOBAL_TOASTER_ID = "global";
|
|
7
|
+
const Toaster = ({ toastOptions, ...props }) => {
|
|
8
|
+
return /* @__PURE__ */ jsx(
|
|
9
|
+
SonnerToaster,
|
|
10
|
+
{
|
|
11
|
+
id: GLOBAL_TOASTER_ID,
|
|
12
|
+
position: "bottom-right",
|
|
13
|
+
visibleToasts: 4,
|
|
14
|
+
...props,
|
|
15
|
+
toastOptions: {
|
|
16
|
+
...toastOptions,
|
|
17
|
+
toasterId: GLOBAL_TOASTER_ID,
|
|
18
|
+
unstyled: true,
|
|
19
|
+
classNames: {
|
|
20
|
+
...toastOptions?.classNames,
|
|
21
|
+
toast: "text-md border-solid border font-sans flex flex-wrap gap-2 items-center rounded-lg shadow p-4 w-[var(--width)] text-pretty",
|
|
22
|
+
default: "bg-white dark:bg-gray-950 text-black dark:text-white border-0",
|
|
23
|
+
error: "!bg-red !text-white border-0",
|
|
24
|
+
success: "!bg-green !text-white border-0",
|
|
25
|
+
actionButton: "border border-solid border-white rounded px-1.5 text-sm text-nowrap cursor-pointer py-1",
|
|
26
|
+
cancelButton: "rounded px-1.5 text-sm text-nowrap cursor-pointer py-1",
|
|
27
|
+
content: "max-w-[calc(100%-2rem)]",
|
|
28
|
+
icon: "self-start mt-[.215em]"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
const toast = (message, options) => sonnerToast(message, {
|
|
35
|
+
toasterId: GLOBAL_TOASTER_ID,
|
|
36
|
+
...options
|
|
37
|
+
});
|
|
38
|
+
toast.success = (message, options) => sonnerToast.success(message, { toasterId: GLOBAL_TOASTER_ID, ...options });
|
|
39
|
+
toast.error = (message, options) => sonnerToast.error(message, { toasterId: GLOBAL_TOASTER_ID, ...options });
|
|
40
|
+
toast.info = (message, options) => sonnerToast.info(message, { toasterId: GLOBAL_TOASTER_ID, ...options });
|
|
41
|
+
toast.warning = (message, options) => sonnerToast.warning(message, { toasterId: GLOBAL_TOASTER_ID, ...options });
|
|
42
|
+
toast.message = (message, options) => sonnerToast.message(message, { toasterId: GLOBAL_TOASTER_ID, ...options });
|
|
43
|
+
toast.loading = (message, options) => sonnerToast.loading(message, { toasterId: GLOBAL_TOASTER_ID, ...options });
|
|
44
|
+
toast.custom = sonnerToast.custom;
|
|
45
|
+
toast.promise = sonnerToast.promise;
|
|
46
|
+
toast.dismiss = sonnerToast.dismiss;
|
|
47
|
+
toast.getHistory = sonnerToast.getHistory;
|
|
48
|
+
toast.getToasts = sonnerToast.getToasts;
|
|
49
|
+
export {
|
|
50
|
+
Toaster,
|
|
51
|
+
toast
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=toast.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/toast.tsx"],
|
|
4
|
+
"sourcesContent": ["import type React from \"react\";\nimport {\n type ExternalToast,\n Toaster as SonnerToaster,\n toast as sonnerToast,\n} from \"sonner\";\n\ntype ToasterProps = React.ComponentProps<typeof SonnerToaster>;\n\nconst GLOBAL_TOASTER_ID = \"global\";\n\nconst Toaster: React.FC<ToasterProps> = ({ toastOptions, ...props }) => {\n return (\n <SonnerToaster\n id={GLOBAL_TOASTER_ID}\n position=\"bottom-right\"\n visibleToasts={4}\n {...props}\n toastOptions={{\n ...toastOptions,\n toasterId: GLOBAL_TOASTER_ID,\n unstyled: true,\n classNames: {\n ...toastOptions?.classNames,\n toast:\n \"text-md border-solid border font-sans flex flex-wrap gap-2 items-center rounded-lg shadow p-4 w-[var(--width)] text-pretty\",\n default:\n \"bg-white dark:bg-gray-950 text-black dark:text-white border-0\",\n error: \"!bg-red !text-white border-0\",\n success: \"!bg-green !text-white border-0\",\n actionButton:\n \"border border-solid border-white rounded px-1.5 text-sm text-nowrap cursor-pointer py-1\",\n cancelButton:\n \"rounded px-1.5 text-sm text-nowrap cursor-pointer py-1\",\n content: \"max-w-[calc(100%-2rem)]\",\n icon: \"self-start mt-[.215em]\",\n },\n }}\n />\n );\n};\n\nconst toast = ((message: React.ReactNode, options?: ExternalToast) =>\n sonnerToast(message, {\n toasterId: GLOBAL_TOASTER_ID,\n ...options,\n })) as typeof sonnerToast;\n\ntoast.success = (message, options) =>\n sonnerToast.success(message, { toasterId: GLOBAL_TOASTER_ID, ...options });\n\ntoast.error = (message, options) =>\n sonnerToast.error(message, { toasterId: GLOBAL_TOASTER_ID, ...options });\n\ntoast.info = (message, options) =>\n sonnerToast.info(message, { toasterId: GLOBAL_TOASTER_ID, ...options });\n\ntoast.warning = (message, options) =>\n sonnerToast.warning(message, { toasterId: GLOBAL_TOASTER_ID, ...options });\n\ntoast.message = (message, options) =>\n sonnerToast.message(message, { toasterId: GLOBAL_TOASTER_ID, ...options });\n\ntoast.loading = (message, options) =>\n sonnerToast.loading(message, { toasterId: GLOBAL_TOASTER_ID, ...options });\n\ntoast.custom = sonnerToast.custom;\ntoast.promise = sonnerToast.promise;\ntoast.dismiss = sonnerToast.dismiss;\ntoast.getHistory = sonnerToast.getHistory;\ntoast.getToasts = sonnerToast.getToasts;\n\nexport { toast, Toaster, type ToasterProps };\n"],
|
|
5
|
+
"mappings": "AAaI;AAZJ;AAAA,EAEE,WAAW;AAAA,EACX,SAAS;AAAA,OACJ;AAIP,MAAM,oBAAoB;AAE1B,MAAM,UAAkC,CAAC,EAAE,cAAc,GAAG,MAAM,MAAM;AACtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,UAAS;AAAA,MACT,eAAe;AAAA,MACd,GAAG;AAAA,MACJ,cAAc;AAAA,QACZ,GAAG;AAAA,QACH,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,UACV,GAAG,cAAc;AAAA,UACjB,OACE;AAAA,UACF,SACE;AAAA,UACF,OAAO;AAAA,UACP,SAAS;AAAA,UACT,cACE;AAAA,UACF,cACE;AAAA,UACF,SAAS;AAAA,UACT,MAAM;AAAA,QACR;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAS,CAAC,SAA0B,YACxC,YAAY,SAAS;AAAA,EACnB,WAAW;AAAA,EACX,GAAG;AACL,CAAC;AAEH,MAAM,UAAU,CAAC,SAAS,YACxB,YAAY,QAAQ,SAAS,EAAE,WAAW,mBAAmB,GAAG,QAAQ,CAAC;AAE3E,MAAM,QAAQ,CAAC,SAAS,YACtB,YAAY,MAAM,SAAS,EAAE,WAAW,mBAAmB,GAAG,QAAQ,CAAC;AAEzE,MAAM,OAAO,CAAC,SAAS,YACrB,YAAY,KAAK,SAAS,EAAE,WAAW,mBAAmB,GAAG,QAAQ,CAAC;AAExE,MAAM,UAAU,CAAC,SAAS,YACxB,YAAY,QAAQ,SAAS,EAAE,WAAW,mBAAmB,GAAG,QAAQ,CAAC;AAE3E,MAAM,UAAU,CAAC,SAAS,YACxB,YAAY,QAAQ,SAAS,EAAE,WAAW,mBAAmB,GAAG,QAAQ,CAAC;AAE3E,MAAM,UAAU,CAAC,SAAS,YACxB,YAAY,QAAQ,SAAS,EAAE,WAAW,mBAAmB,GAAG,QAAQ,CAAC;AAE3E,MAAM,SAAS,YAAY;AAC3B,MAAM,UAAU,YAAY;AAC5B,MAAM,UAAU,YAAY;AAC5B,MAAM,aAAa,YAAY;AAC/B,MAAM,YAAY,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type Ref } from "react";
|
|
2
|
+
import { type ButtonProps } from "./button";
|
|
3
|
+
export interface ToggleButtonProps extends Omit<ButtonProps, "type" | "role" | "aria-checked"> {
|
|
4
|
+
/** The variant to use when the button is not selected */
|
|
5
|
+
variant?: ButtonProps["variant"];
|
|
6
|
+
/** The variant to use when the button is checked */
|
|
7
|
+
checkedVariant?: ButtonProps["variant"];
|
|
8
|
+
/** Whether the button is checked (controlled mode) */
|
|
9
|
+
checked?: boolean;
|
|
10
|
+
/** Whether the button is checked by default (uncontrolled mode) */
|
|
11
|
+
defaultChecked?: boolean;
|
|
12
|
+
/** Callback when the checked state changes */
|
|
13
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
14
|
+
/** The label to use for the checkbox */
|
|
15
|
+
label: string;
|
|
16
|
+
/** Ref to the button element */
|
|
17
|
+
ref?: Ref<HTMLButtonElement>;
|
|
18
|
+
}
|
|
19
|
+
export declare const ToggleButton: ({ variant, checkedVariant, checked: checkedProp, defaultChecked, onCheckedChange, className, children, onClick, label, ref, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
//# sourceMappingURL=toggle-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../src/components/toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,GAAG,EAAY,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,cAAc,CAAC;IAC3D,yDAAyD;IACzD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,GAAI,wIAY1B,iBAAiB,4CA6CnB,CAAC"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Button } from "./button";
|
|
4
|
+
const ToggleButton = ({
|
|
5
|
+
variant = "subtle",
|
|
6
|
+
checkedVariant = "subtle",
|
|
7
|
+
checked: checkedProp,
|
|
8
|
+
defaultChecked = false,
|
|
9
|
+
onCheckedChange,
|
|
10
|
+
className,
|
|
11
|
+
children,
|
|
12
|
+
onClick,
|
|
13
|
+
label,
|
|
14
|
+
ref,
|
|
15
|
+
...props
|
|
16
|
+
}) => {
|
|
17
|
+
const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
|
|
18
|
+
const checked = checkedProp ?? uncontrolledChecked;
|
|
19
|
+
const handleClick = (e) => {
|
|
20
|
+
if (!props.disabled) {
|
|
21
|
+
const newChecked = !checked;
|
|
22
|
+
if (checkedProp === void 0) {
|
|
23
|
+
setUncontrolledChecked(newChecked);
|
|
24
|
+
}
|
|
25
|
+
onCheckedChange?.(newChecked);
|
|
26
|
+
onClick?.(e);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
const handleKeyDown = (e) => {
|
|
30
|
+
if (e.key === " " || e.key === "Enter") {
|
|
31
|
+
e.preventDefault();
|
|
32
|
+
handleClick(e);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
return /* @__PURE__ */ jsx(
|
|
36
|
+
Button,
|
|
37
|
+
{
|
|
38
|
+
...props,
|
|
39
|
+
"aria-checked": checked,
|
|
40
|
+
"aria-label": label,
|
|
41
|
+
className,
|
|
42
|
+
"data-checked": checked,
|
|
43
|
+
onClick: handleClick,
|
|
44
|
+
onKeyDown: handleKeyDown,
|
|
45
|
+
ref,
|
|
46
|
+
role: "checkbox",
|
|
47
|
+
type: "button",
|
|
48
|
+
variant: checked ? checkedVariant : variant,
|
|
49
|
+
children
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
};
|
|
53
|
+
export {
|
|
54
|
+
ToggleButton
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=toggle-button.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/toggle-button.tsx"],
|
|
4
|
+
"sourcesContent": ["import { type KeyboardEvent, type MouseEvent, type Ref, useState } from \"react\";\n\nimport { Button, type ButtonProps } from \"./button\";\n\nexport interface ToggleButtonProps\n extends Omit<ButtonProps, \"type\" | \"role\" | \"aria-checked\"> {\n /** The variant to use when the button is not selected */\n variant?: ButtonProps[\"variant\"];\n /** The variant to use when the button is checked */\n checkedVariant?: ButtonProps[\"variant\"];\n /** Whether the button is checked (controlled mode) */\n checked?: boolean;\n /** Whether the button is checked by default (uncontrolled mode) */\n defaultChecked?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: (checked: boolean) => void;\n /** The label to use for the checkbox */\n label: string;\n /** Ref to the button element */\n ref?: Ref<HTMLButtonElement>;\n}\n\nexport const ToggleButton = ({\n variant = \"subtle\",\n checkedVariant = \"subtle\",\n checked: checkedProp,\n defaultChecked = false,\n onCheckedChange,\n className,\n children,\n onClick,\n label,\n ref,\n ...props\n}: ToggleButtonProps) => {\n const [uncontrolledChecked, setUncontrolledChecked] =\n useState(defaultChecked);\n\n // Use the controlled value if provided, otherwise use internal state\n const checked = checkedProp ?? uncontrolledChecked;\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n if (!props.disabled) {\n const newChecked = !checked;\n\n // Only update internal state if we're in uncontrolled mode\n if (checkedProp === undefined) {\n setUncontrolledChecked(newChecked);\n }\n\n onCheckedChange?.(newChecked);\n onClick?.(e);\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \" \" || e.key === \"Enter\") {\n e.preventDefault();\n handleClick(e as unknown as MouseEvent<HTMLButtonElement>);\n }\n };\n\n return (\n <Button\n {...props}\n aria-checked={checked}\n aria-label={label}\n className={className}\n data-checked={checked}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n ref={ref}\n role=\"checkbox\"\n type=\"button\"\n variant={checked ? checkedVariant : variant}\n >\n {children}\n </Button>\n );\n};\n"],
|
|
5
|
+
"mappings": "AA+DI;AA/DJ,SAAwD,gBAAgB;AAExE,SAAS,cAAgC;AAoBlC,MAAM,eAAe,CAAC;AAAA,EAC3B,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,CAAC,qBAAqB,sBAAsB,IAChD,SAAS,cAAc;AAGzB,QAAM,UAAU,eAAe;AAE/B,QAAM,cAAc,CAAC,MAAqC;AACxD,QAAI,CAAC,MAAM,UAAU;AACnB,YAAM,aAAa,CAAC;AAGpB,UAAI,gBAAgB,QAAW;AAC7B,+BAAuB,UAAU;AAAA,MACnC;AAEA,wBAAkB,UAAU;AAC5B,gBAAU,CAAC;AAAA,IACb;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAAwC;AAC7D,QAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,QAAE,eAAe;AACjB,kBAAY,CAA6C;AAAA,IAC3D;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAc;AAAA,MACd,cAAY;AAAA,MACZ;AAAA,MACA,gBAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS,UAAU,iBAAiB;AAAA,MAEnC;AAAA;AAAA,EACH;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
declare const headingVariants: (props?: ({
|
|
4
|
+
variant?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
|
|
5
|
+
fontFamily?: "brand" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
11
|
+
declare const Alpha: React.ForwardRefExoticComponent<Omit<HeadingProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
12
|
+
declare const Bravo: React.ForwardRefExoticComponent<Omit<HeadingProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
13
|
+
declare const Charlie: React.ForwardRefExoticComponent<Omit<HeadingProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
14
|
+
declare const Delta: React.ForwardRefExoticComponent<Omit<HeadingProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
15
|
+
declare const Echo: React.ForwardRefExoticComponent<Omit<HeadingProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
16
|
+
declare const Foxtrot: React.ForwardRefExoticComponent<Omit<HeadingProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
17
|
+
export { Heading, Alpha, Bravo, Charlie, Delta, Echo, Foxtrot, headingVariants, };
|
|
18
|
+
//# sourceMappingURL=heading.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/components/typography/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,QAAA,MAAM,eAAe;;;8EAkDnB,CAAC;AAEH,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAC9C,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,OAAO,yFAYZ,CAAC;AAIF,QAAA,MAAM,KAAK,0GAEV,CAAC;AAIF,QAAA,MAAM,KAAK,0GAEV,CAAC;AAIF,QAAA,MAAM,OAAO,0GAEZ,CAAC;AAIF,QAAA,MAAM,KAAK,0GAEV,CAAC;AAIF,QAAA,MAAM,IAAI,0GAET,CAAC;AAIF,QAAA,MAAM,OAAO,0GAEZ,CAAC;AAIF,OAAO,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,EACP,eAAe,GAChB,CAAC"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { Slot as SlotPrimitive } from "radix-ui";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
const headingVariants = cva("font-semibold text-gray-950 dark:text-white", {
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
h1: "~@md:~text-4xl/5xl",
|
|
10
|
+
h2: "~@md:~text-3xl/4xl",
|
|
11
|
+
h3: "~@md:~text-2xl/3xl",
|
|
12
|
+
h4: "~@md:~text-xl/2xl",
|
|
13
|
+
h5: "~@md:~text-lg/xl",
|
|
14
|
+
h6: "~@md:~text-base/lg"
|
|
15
|
+
},
|
|
16
|
+
fontFamily: {
|
|
17
|
+
brand: "font-heading"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
compoundVariants: [
|
|
21
|
+
{
|
|
22
|
+
variant: "h1",
|
|
23
|
+
fontFamily: "brand",
|
|
24
|
+
className: "font-bold"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
variant: "h2",
|
|
28
|
+
fontFamily: "brand",
|
|
29
|
+
className: "font-bold"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
variant: "h3",
|
|
33
|
+
fontFamily: "brand",
|
|
34
|
+
className: "font-semibold"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
variant: "h4",
|
|
38
|
+
fontFamily: "brand",
|
|
39
|
+
className: "font-semibold"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
variant: "h5",
|
|
43
|
+
fontFamily: "brand",
|
|
44
|
+
className: "font-semibold"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
variant: "h6",
|
|
48
|
+
fontFamily: "brand",
|
|
49
|
+
className: "font-semibold"
|
|
50
|
+
}
|
|
51
|
+
],
|
|
52
|
+
defaultVariants: {
|
|
53
|
+
variant: "h1",
|
|
54
|
+
fontFamily: "brand"
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
const Heading = forwardRef(
|
|
58
|
+
({ className, variant, fontFamily, asChild = false, ...props }, ref) => {
|
|
59
|
+
const Comp = asChild ? SlotPrimitive.Slot : variant ?? "h1";
|
|
60
|
+
return /* @__PURE__ */ jsx(
|
|
61
|
+
Comp,
|
|
62
|
+
{
|
|
63
|
+
className: cn(headingVariants({ variant, fontFamily, className })),
|
|
64
|
+
ref,
|
|
65
|
+
...props
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
Heading.displayName = "Heading";
|
|
71
|
+
const Alpha = forwardRef(
|
|
72
|
+
(props, ref) => /* @__PURE__ */ jsx(Heading, { ref, variant: "h1", ...props })
|
|
73
|
+
);
|
|
74
|
+
Alpha.displayName = "Alpha";
|
|
75
|
+
const Bravo = forwardRef(
|
|
76
|
+
(props, ref) => /* @__PURE__ */ jsx(Heading, { ref, variant: "h2", ...props })
|
|
77
|
+
);
|
|
78
|
+
Bravo.displayName = "Bravo";
|
|
79
|
+
const Charlie = forwardRef(
|
|
80
|
+
(props, ref) => /* @__PURE__ */ jsx(Heading, { ref, variant: "h3", ...props })
|
|
81
|
+
);
|
|
82
|
+
Charlie.displayName = "Charlie";
|
|
83
|
+
const Delta = forwardRef(
|
|
84
|
+
(props, ref) => /* @__PURE__ */ jsx(Heading, { ref, variant: "h4", ...props })
|
|
85
|
+
);
|
|
86
|
+
Delta.displayName = "Delta";
|
|
87
|
+
const Echo = forwardRef(
|
|
88
|
+
(props, ref) => /* @__PURE__ */ jsx(Heading, { ref, variant: "h5", ...props })
|
|
89
|
+
);
|
|
90
|
+
Echo.displayName = "Echo";
|
|
91
|
+
const Foxtrot = forwardRef(
|
|
92
|
+
(props, ref) => /* @__PURE__ */ jsx(Heading, { ref, variant: "h6", ...props })
|
|
93
|
+
);
|
|
94
|
+
Foxtrot.displayName = "Foxtrot";
|
|
95
|
+
export {
|
|
96
|
+
Alpha,
|
|
97
|
+
Bravo,
|
|
98
|
+
Charlie,
|
|
99
|
+
Delta,
|
|
100
|
+
Echo,
|
|
101
|
+
Foxtrot,
|
|
102
|
+
Heading,
|
|
103
|
+
headingVariants
|
|
104
|
+
};
|
|
105
|
+
//# sourceMappingURL=heading.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/typography/heading.tsx"],
|
|
4
|
+
"sourcesContent": ["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst headingVariants = cva(\"font-semibold text-gray-950 dark:text-white\", {\n variants: {\n variant: {\n h1: \"~@md:~text-4xl/5xl\",\n h2: \"~@md:~text-3xl/4xl\",\n h3: \"~@md:~text-2xl/3xl\",\n h4: \"~@md:~text-xl/2xl\",\n h5: \"~@md:~text-lg/xl\",\n h6: \"~@md:~text-base/lg\",\n },\n fontFamily: {\n brand: \"font-heading\",\n },\n },\n compoundVariants: [\n {\n variant: \"h1\",\n fontFamily: \"brand\",\n className: \"font-bold\",\n },\n {\n variant: \"h2\",\n fontFamily: \"brand\",\n className: \"font-bold\",\n },\n {\n variant: \"h3\",\n fontFamily: \"brand\",\n className: \"font-semibold\",\n },\n {\n variant: \"h4\",\n fontFamily: \"brand\",\n className: \"font-semibold\",\n },\n {\n variant: \"h5\",\n fontFamily: \"brand\",\n className: \"font-semibold\",\n },\n {\n variant: \"h6\",\n fontFamily: \"brand\",\n className: \"font-semibold\",\n },\n ],\n defaultVariants: {\n variant: \"h1\",\n fontFamily: \"brand\",\n },\n});\n\nexport interface HeadingProps\n extends React.HTMLAttributes<HTMLHeadingElement>,\n VariantProps<typeof headingVariants> {\n asChild?: boolean;\n}\n\nconst Heading = forwardRef<HTMLHeadingElement, HeadingProps>(\n ({ className, variant, fontFamily, asChild = false, ...props }, ref) => {\n const Comp = asChild ? SlotPrimitive.Slot : (variant ?? \"h1\");\n\n return (\n <Comp\n className={cn(headingVariants({ variant, fontFamily, className }))}\n ref={ref}\n {...props}\n />\n );\n }\n);\n\nHeading.displayName = \"Heading\";\n\nconst Alpha = forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"variant\">>(\n (props, ref) => <Heading ref={ref} variant=\"h1\" {...props} />\n);\n\nAlpha.displayName = \"Alpha\";\n\nconst Bravo = forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"variant\">>(\n (props, ref) => <Heading ref={ref} variant=\"h2\" {...props} />\n);\n\nBravo.displayName = \"Bravo\";\n\nconst Charlie = forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"variant\">>(\n (props, ref) => <Heading ref={ref} variant=\"h3\" {...props} />\n);\n\nCharlie.displayName = \"Charlie\";\n\nconst Delta = forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"variant\">>(\n (props, ref) => <Heading ref={ref} variant=\"h4\" {...props} />\n);\n\nDelta.displayName = \"Delta\";\n\nconst Echo = forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"variant\">>(\n (props, ref) => <Heading ref={ref} variant=\"h5\" {...props} />\n);\n\nEcho.displayName = \"Echo\";\n\nconst Foxtrot = forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"variant\">>(\n (props, ref) => <Heading ref={ref} variant=\"h6\" {...props} />\n);\n\nFoxtrot.displayName = \"Foxtrot\";\n\nexport {\n Heading,\n Alpha,\n Bravo,\n Charlie,\n Delta,\n Echo,\n Foxtrot,\n headingVariants,\n};\n"],
|
|
5
|
+
"mappings": "AAsEM;AAtEN,SAAS,WAA8B;AACvC,SAAS,QAAQ,qBAAqB;AAEtC,SAAS,kBAAkB;AAE3B,SAAS,UAAU;AAEnB,MAAM,kBAAkB,IAAI,+CAA+C;AAAA,EACzE,UAAU;AAAA,IACR,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF,CAAC;AAQD,MAAM,UAAU;AAAA,EACd,CAAC,EAAE,WAAW,SAAS,YAAY,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AACtE,UAAM,OAAO,UAAU,cAAc,OAAQ,WAAW;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,gBAAgB,EAAE,SAAS,YAAY,UAAU,CAAC,CAAC;AAAA,QACjE;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,MAAM,QAAQ;AAAA,EACZ,CAAC,OAAO,QAAQ,oBAAC,WAAQ,KAAU,SAAQ,MAAM,GAAG,OAAO;AAC7D;AAEA,MAAM,cAAc;AAEpB,MAAM,QAAQ;AAAA,EACZ,CAAC,OAAO,QAAQ,oBAAC,WAAQ,KAAU,SAAQ,MAAM,GAAG,OAAO;AAC7D;AAEA,MAAM,cAAc;AAEpB,MAAM,UAAU;AAAA,EACd,CAAC,OAAO,QAAQ,oBAAC,WAAQ,KAAU,SAAQ,MAAM,GAAG,OAAO;AAC7D;AAEA,QAAQ,cAAc;AAEtB,MAAM,QAAQ;AAAA,EACZ,CAAC,OAAO,QAAQ,oBAAC,WAAQ,KAAU,SAAQ,MAAM,GAAG,OAAO;AAC7D;AAEA,MAAM,cAAc;AAEpB,MAAM,OAAO;AAAA,EACX,CAAC,OAAO,QAAQ,oBAAC,WAAQ,KAAU,SAAQ,MAAM,GAAG,OAAO;AAC7D;AAEA,KAAK,cAAc;AAEnB,MAAM,UAAU;AAAA,EACd,CAAC,OAAO,QAAQ,oBAAC,WAAQ,KAAU,SAAQ,MAAM,GAAG,OAAO;AAC7D;AAEA,QAAQ,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { Alpha, Bravo, Charlie, Delta, Echo, Foxtrot, Heading, type HeadingProps, headingVariants, } from "./heading";
|
|
2
|
+
export { List, ListItem, type ListItemProps, ListItemTick, type ListProps, listVariants, } from "./list";
|
|
3
|
+
export { Prose } from "./prose";
|
|
4
|
+
export { Text, type TextProps, textVariants } from "./text";
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,KAAK,YAAY,EACjB,eAAe,GAChB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,aAAa,EAClB,YAAY,EACZ,KAAK,SAAS,EACd,YAAY,GACb,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Alpha,
|
|
3
|
+
Bravo,
|
|
4
|
+
Charlie,
|
|
5
|
+
Delta,
|
|
6
|
+
Echo,
|
|
7
|
+
Foxtrot,
|
|
8
|
+
Heading,
|
|
9
|
+
headingVariants
|
|
10
|
+
} from "./heading";
|
|
11
|
+
import {
|
|
12
|
+
List,
|
|
13
|
+
ListItem,
|
|
14
|
+
ListItemTick,
|
|
15
|
+
listVariants
|
|
16
|
+
} from "./list";
|
|
17
|
+
import { Prose } from "./prose";
|
|
18
|
+
import { Text, textVariants } from "./text";
|
|
19
|
+
export {
|
|
20
|
+
Alpha,
|
|
21
|
+
Bravo,
|
|
22
|
+
Charlie,
|
|
23
|
+
Delta,
|
|
24
|
+
Echo,
|
|
25
|
+
Foxtrot,
|
|
26
|
+
Heading,
|
|
27
|
+
List,
|
|
28
|
+
ListItem,
|
|
29
|
+
ListItemTick,
|
|
30
|
+
Prose,
|
|
31
|
+
Text,
|
|
32
|
+
headingVariants,
|
|
33
|
+
listVariants,
|
|
34
|
+
textVariants
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/typography/index.ts"],
|
|
4
|
+
"sourcesContent": ["export {\n Alpha,\n Bravo,\n Charlie,\n Delta,\n Echo,\n Foxtrot,\n Heading,\n type HeadingProps,\n headingVariants,\n} from \"./heading\";\nexport {\n List,\n ListItem,\n type ListItemProps,\n ListItemTick,\n type ListProps,\n listVariants,\n} from \"./list\";\nexport { Prose } from \"./prose\";\nexport { Text, type TextProps, textVariants } from \"./text\";\n"],
|
|
5
|
+
"mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,aAAa;AACtB,SAAS,MAAsB,oBAAoB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|