npm - @puzzle-ui/ui - Versions diffs - 0.3.0 → 0.5.0 - Mend

@puzzle-ui/ui 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (240) hide show

package/dist/components/utilities/preview/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/utilities/preview/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n type ComponentProps,\n type CSSProperties,\n type KeyboardEvent,\n type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { useRovingFocus } from \"@puzzle-ui/hooks\";\nimport { Icon } from \"@puzzle-ui/icons\";\nimport { ThemeScopeProvider, useThemeScope } from \"@puzzle-ui/theme/scope-context\";\n\nimport { Background } from \"../../layout/background\";\nimport { highlightCode } from \"./highlight\";\n\nimport \"./preview.css\";\n\ntype PreviewDevice = \"mobile\" \| \"tablet\" \| \"desktop\";\ntype PreviewTab = \"preview\" \| \"code\";\n\ntype DeviceConfig = {\n label: string;\n width: number;\n height: number;\n};\n\ntype PreviewAlign = \"start\" \| \"center\" \| \"end\" \| \"stretch\";\ntype PreviewJustify =\n \| \"start\"\n \| \"center\"\n \| \"end\"\n \| \"between\"\n \| \"around\"\n \| \"evenly\";\n\ntype PreviewProps = {\n children: ReactNode;\n className?: string;\n defaultDevice?: PreviewDevice;\n code?: string;\n /** Frame height in pixels. Defaults to the selected device's height. /\n height?: number;\n /* Vertical alignment of the content within the frame. /\n align?: PreviewAlign;\n /* Horizontal distribution of the content within the frame. /\n justify?: PreviewJustify;\n /* Hides the device selector. The default device is still used. /\n hideDevices?: boolean;\n};\n\nconst PREVIEW_DEVICES: Record<PreviewDevice, DeviceConfig> = {\n mobile: { label: \"Mobile\", width: 390, height: 844 },\n tablet: { label: \"Tablet\", width: 768, height: 1024 },\n desktop: { label: \"Desktop\", width: 1024, height: 768 },\n};\n\nconst PREVIEW_DEVICE_ITEMS = (\n Object.keys(PREVIEW_DEVICES) as PreviewDevice[]\n).map((id) => ({ id }));\n\nconst ALIGN_VALUES: Record<PreviewAlign, string> = {\n start: \"flex-start\",\n center: \"center\",\n end: \"flex-end\",\n stretch: \"stretch\",\n};\n\nconst JUSTIFY_VALUES: Record<PreviewJustify, string> = {\n start: \"flex-start\",\n center: \"center\",\n end: \"flex-end\",\n between: \"space-between\",\n around: \"space-around\",\n evenly: \"space-evenly\",\n};\n\nconst createPreviewDocument = (rootId: string) => `<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n </head>\n <body>\n <div id=\"${rootId}\"></div>\n </body>\n</html>`;\n\nconst useIsomorphicLayoutEffect =\n typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nconst PreviewBackground = (props: ComponentProps<\"div\">) => (\n <Background\n pattern=\"blueprint\"\n size={20}\n majorSize={100}\n lineWidth={1}\n patternOpacity={0.25}\n {...props}\n />\n);\n\nconst Preview = ({\n children,\n className,\n defaultDevice = \"mobile\",\n code,\n height,\n align,\n justify,\n hideDevices = false,\n}: PreviewProps) => {\n const generatedId = useId();\n const frameRootId = `${generatedId}-root`;\n const previewTabId = `${generatedId}-tab-preview`;\n const codeTabId = `${generatedId}-tab-code`;\n const panelId = `${generatedId}-panel`;\n\n const themeScope = useThemeScope();\n\n const [device, setDevice] = useState<PreviewDevice>(defaultDevice);\n const [activeTab, setActiveTab] = useState<PreviewTab>(\"preview\");\n const [frameRoot, setFrameRoot] = useState<HTMLElement \| null>(null);\n const [scale, setScale] = useState(1);\n const [copied, setCopied] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const config = PREVIEW_DEVICES[device];\n const frameHeight = height ?? config.height;\n const hasCode = code !== undefined;\n const [direction, setDirection] = useState<\"ltr\" \| \"rtl\">(\"ltr\");\n const sectionRef = useRef<HTMLElement>(null);\n const isKeyboardNavigation = useRef(false);\n\n useLayoutEffect(() => {\n const section = sectionRef.current;\n\n if (section) {\n const isRtl =\n getComputedStyle(section).direction === \"rtl\" \|\|\n section.closest(\"[dir]\")?.getAttribute(\"dir\")?.toLowerCase() === \"rtl\";\n\n setDirection(isRtl ? \"rtl\" : \"ltr\");\n }\n }, []);\n\n const rovingFocus = useRovingFocus<HTMLButtonElement>({\n items: hasCode ? [{ id: \"preview\" }, { id: \"code\" }] : [{ id: \"preview\" }],\n dir: direction,\n initialActiveId: activeTab,\n });\n\n const deviceFocus = useRovingFocus<HTMLButtonElement>({\n items: PREVIEW_DEVICE_ITEMS,\n dir: direction,\n initialActiveId: device,\n });\n\n const handleTabKeyDown = (\n event: KeyboardEvent<HTMLButtonElement>,\n tab: PreviewTab,\n ) => {\n isKeyboardNavigation.current = true;\n\n try {\n rovingFocus.onItemKeyDown(event, tab);\n } finally {\n isKeyboardNavigation.current = false;\n }\n };\n\n const handleTabFocus = (tab: PreviewTab) => {\n rovingFocus.onItemFocus(tab);\n\n if (isKeyboardNavigation.current) {\n setActiveTab(tab);\n }\n };\n\n const syncStyles = useCallback(() => {\n const frameDocument = iframeRef.current?.contentDocument;\n\n if (!frameDocument) return;\n\n const frameHead = frameDocument.head;\n\n frameHead\n .querySelectorAll(\"[data-puzzle-preview-style]\")\n .forEach((element) => element.remove());\n\n document\n .querySelectorAll(\n [\n \"head link[rel='stylesheet']\",\n \"head style\",\n \"style[data-puzzle-theme]\",\n \"style[data-puzzle-theme-scope-style]\",\n ].join(\", \"),\n )\n .forEach((element) => {\n const clone = element.cloneNode(true) as HTMLElement;\n\n clone.setAttribute(\"data-puzzle-preview-style\", \"\");\n frameHead.appendChild(clone);\n });\n\n const sourceRoot = document.documentElement;\n const targetRoot = frameDocument.documentElement;\n\n targetRoot.style.cssText = sourceRoot.style.cssText;\n targetRoot.className = sourceRoot.className;\n\n Array.from(sourceRoot.attributes).forEach((attribute) => {\n if (attribute.name === \"style\" \|\| attribute.name === \"class\") {\n return;\n }\n\n targetRoot.setAttribute(attribute.name, attribute.value);\n });\n\n const body = frameDocument.body;\n\n body.className = document.body.className;\n body.style.cssText = document.body.style.cssText;\n\n targetRoot.style.setProperty(\"box-sizing\", \"border-box\", \"important\");\n targetRoot.style.setProperty(\"width\", \"100%\", \"important\");\n targetRoot.style.setProperty(\"height\", \"100%\", \"important\");\n targetRoot.style.setProperty(\"min-height\", \"100%\", \"important\");\n targetRoot.style.setProperty(\"margin\", \"0\", \"important\");\n targetRoot.style.setProperty(\"overflow-x\", \"hidden\", \"important\");\n targetRoot.style.setProperty(\"overflow-y\", \"auto\", \"important\");\n targetRoot.style.setProperty(\"scrollbar-width\", \"none\", \"important\");\n targetRoot.style.setProperty(\"-ms-overflow-style\", \"none\", \"important\");\n\n body.style.setProperty(\"display\", \"block\", \"important\");\n body.style.setProperty(\"position\", \"static\", \"important\");\n body.style.setProperty(\"box-sizing\", \"border-box\", \"important\");\n body.style.setProperty(\"width\", \"100%\", \"important\");\n body.style.setProperty(\"height\", \"auto\", \"important\");\n body.style.setProperty(\"min-height\", \"100%\", \"important\");\n body.style.setProperty(\"margin\", \"0\", \"important\");\n body.style.setProperty(\"overflow\", \"visible\", \"important\");\n\n const previewRoot = frameDocument.getElementById(frameRootId);\n\n previewRoot?.style.removeProperty(\"min-height\");\n\n const scrollbarStyle = frameDocument.createElement(\"style\");\n\n scrollbarStyle.setAttribute(\"data-puzzle-preview-style\", \"\");\n scrollbarStyle.textContent = `\n html,\n body {\n scrollbar-width: none !important;\n -ms-overflow-style: none !important;\n }\n\n html::-webkit-scrollbar,\n body::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n }\n `;\n\n frameHead.appendChild(scrollbarStyle);\n }, [frameRootId]);\n\n const updateScale = useCallback(\n (availableWidth: number) => {\n const nextScale = Math.min(1, Math.max(0, availableWidth) / config.width);\n\n setScale((current) =>\n Math.abs(current - nextScale) < 0.001 ? current : nextScale,\n );\n },\n [config.width],\n );\n\n useIsomorphicLayoutEffect(() => {\n const container = containerRef.current;\n\n if (!container) return;\n\n const measure = () => {\n const styles = window.getComputedStyle(container);\n const horizontalPadding =\n parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);\n\n updateScale(container.clientWidth - horizontalPadding);\n };\n\n measure();\n\n const observer = new ResizeObserver((entries) => {\n const entry = entries[0];\n\n if (entry) {\n updateScale(entry.contentRect.width);\n }\n });\n\n observer.observe(container);\n\n return () => observer.disconnect();\n }, [updateScale]);\n\n useEffect(() => {\n const isStyleNode = (node: Node) =>\n node instanceof Element &&\n (node.matches(\"style, link[rel='stylesheet']\") \|\|\n node.querySelector(\"style, link[rel='stylesheet']\") !== null);\n\n const headObserver = new MutationObserver(syncStyles);\n\n headObserver.observe(document.head, {\n childList: true,\n subtree: true,\n characterData: true,\n attributes: true,\n });\n\n const bodyObserver = new MutationObserver((mutations) => {\n const affectsStyles = mutations.some((mutation) => {\n const target =\n mutation.target instanceof Element\n ? mutation.target\n : mutation.target.parentElement;\n\n return (\n target?.closest(\n \"style[data-puzzle-theme], style[data-puzzle-theme-scope-style]\",\n ) != null \|\|\n Array.from(mutation.addedNodes).some(isStyleNode) \|\|\n Array.from(mutation.removedNodes).some(isStyleNode)\n );\n });\n\n if (affectsStyles) {\n syncStyles();\n }\n });\n\n bodyObserver.observe(document.body, {\n childList: true,\n subtree: true,\n characterData: true,\n attributes: true,\n attributeFilter: [\"data-theme\"],\n });\n\n return () => {\n headObserver.disconnect();\n bodyObserver.disconnect();\n };\n }, [syncStyles]);\n\n const initializeFrame = useCallback(() => {\n const frameDocument = iframeRef.current?.contentDocument;\n const root = frameDocument?.getElementById(frameRootId);\n\n if (!root) return;\n\n syncStyles();\n setFrameRoot(root);\n }, [frameRootId, syncStyles]);\n\n useEffect(() => {\n initializeFrame();\n }, [initializeFrame]);\n\n const handleCopyCode = useCallback(async () => {\n if (code === undefined) return;\n\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n\n if (copyTimeoutRef.current) {\n clearTimeout(copyTimeoutRef.current);\n }\n\n copyTimeoutRef.current = setTimeout(() => {\n setCopied(false);\n }, 2000);\n } catch {\n setCopied(false);\n }\n }, [code]);\n\n useEffect(\n () => () => {\n if (copyTimeoutRef.current) {\n clearTimeout(copyTimeoutRef.current);\n }\n },\n [],\n );\n\n useEffect(() => {\n if (!hasCode && activeTab === \"code\") {\n setActiveTab(\"preview\");\n }\n }, [activeTab, hasCode]);\n\n const frameStyle: CSSProperties = {\n width: config.width,\n height: frameHeight,\n transform: `scale(${scale})`,\n transformOrigin: \"top left\",\n };\n\n const contentStyle: CSSProperties = {\n display: \"flex\",\n boxSizing: \"border-box\",\n minHeight: \"100vh\",\n alignItems: align ? ALIGN_VALUES[align] : undefined,\n justifyContent: justify ? JUSTIFY_VALUES[justify] : undefined,\n };\n\n const viewportStyle: CSSProperties = {\n width: config.width scale,\n aspectRatio: `${config.width} / ${frameHeight}`,\n };\n\n const panelProps = {\n id: panelId,\n role: \"tabpanel\",\n \"aria-labelledby\": activeTab === \"preview\" ? previewTabId : codeTabId,\n };\n\n return (\n <section ref={sectionRef} className={cn(\"puzzle-preview\", className)}>\n <div className=\"puzzle-preview__toolbar\">\n <div\n className=\"puzzle-preview__tabs\"\n role=\"tablist\"\n aria-label=\"Preview view\"\n >\n <button\n type=\"button\"\n role=\"tab\"\n id={previewTabId}\n ref={rovingFocus.getItemRef(\"preview\")}\n tabIndex={activeTab === \"preview\" ? 0 : -1}\n onFocus={() => handleTabFocus(\"preview\")}\n onKeyDown={(event) => handleTabKeyDown(event, \"preview\")}\n aria-selected={activeTab === \"preview\"}\n aria-controls={panelId}\n className={cn(\n \"puzzle-preview__tab\",\n activeTab === \"preview\" && \"puzzle-preview__tab--active\",\n )}\n onClick={() => setActiveTab(\"preview\")}\n >\n Preview\n </button>\n\n {hasCode && (\n <button\n type=\"button\"\n role=\"tab\"\n id={codeTabId}\n ref={rovingFocus.getItemRef(\"code\")}\n tabIndex={activeTab === \"code\" ? 0 : -1}\n onFocus={() => handleTabFocus(\"code\")}\n onKeyDown={(event) => handleTabKeyDown(event, \"code\")}\n aria-selected={activeTab === \"code\"}\n aria-controls={panelId}\n className={cn(\n \"puzzle-preview__tab\",\n activeTab === \"code\" && \"puzzle-preview__tab--active\",\n )}\n onClick={() => setActiveTab(\"code\")}\n >\n Code\n </button>\n )}\n </div>\n\n {activeTab === \"preview\" ? (\n <div className=\"puzzle-preview__toolbar-actions\">\n {!hideDevices && (\n <div\n className=\"puzzle-preview__devices\"\n role=\"group\"\n aria-label=\"Device size\"\n >\n {(Object.keys(PREVIEW_DEVICES) as PreviewDevice[]).map(\n (item) => (\n <button\n key={item}\n ref={deviceFocus.getItemRef(item)}\n type=\"button\"\n className={cn(\n \"puzzle-preview__device\",\n device === item && \"puzzle-preview__device--active\",\n )}\n aria-pressed={device === item}\n tabIndex={deviceFocus.getItemTabIndex(item)}\n onFocus={() => deviceFocus.onItemFocus(item)}\n onKeyDown={(event) =>\n deviceFocus.onItemKeyDown(event, item)\n }\n onClick={() => setDevice(item)}\n >\n {PREVIEW_DEVICES[item].label}\n </button>\n ),\n )}\n </div>\n )}\n\n <span className=\"puzzle-preview__dimensions\">\n {config.width} × {frameHeight}\n </span>\n </div>\n ) : (\n <button\n type=\"button\"\n className=\"puzzle-preview__copy\"\n onClick={handleCopyCode}\n aria-label={copied ? \"Code copied\" : \"Copy code\"}\n >\n <Icon\n name={copied ? \"tabler:check\" : \"tabler:copy\"}\n size={16}\n aria-hidden=\"true\"\n />\n <span>{copied ? \"Copied\" : \"Copy code\"}</span>\n </button>\n )}\n </div>\n\n <PreviewBackground {...panelProps} className=\"puzzle-preview__panel\">\n <div\n ref={containerRef}\n className=\"puzzle-preview__stage\"\n hidden={activeTab !== \"preview\"}\n >\n <div className=\"puzzle-preview__viewport\" style={viewportStyle}>\n <iframe\n ref={iframeRef}\n className=\"puzzle-preview__frame\"\n srcDoc={createPreviewDocument(frameRootId)}\n title={`${config.label} component preview`}\n onLoad={initializeFrame}\n style={frameStyle}\n />\n\n {frameRoot &&\n createPortal(\n <ThemeScopeProvider\n scopeId={themeScope?.scopeId ?? null}\n theme={themeScope?.theme ?? \"system\"}\n >\n <div style={contentStyle}>{children}</div>\n </ThemeScopeProvider>,\n frameRoot,\n )}\n </div>\n </div>\n\n {activeTab === \"code\" && (\n <div className=\"puzzle-preview__code\">\n <pre>\n <code className=\"language-tsx\">\n {code === undefined ? null : highlightCode(code)}\n </code>\n </pre>\n </div>\n )}\n </PreviewBackground>\n\n <span\n className=\"puzzle-preview__copy-status\"\n role=\"status\"\n aria-live=\"polite\"\n >\n {copied ? \"Code copied to clipboard.\" : \"\"}\n </span>\n </section>\n );\n};\n\nexport {\n Preview,\n type PreviewProps,\n type PreviewDevice,\n type PreviewAlign,\n type PreviewJustify,\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["BREAKPOINTS"],"sources":["../../../../src/components/utilities/preview/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n type ComponentProps,\n type CSSProperties,\n type KeyboardEvent,\n type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { useRovingFocus } from \"@puzzle-ui/hooks\";\nimport { Icon } from \"@puzzle-ui/icons\";\nimport { BREAKPOINTS } from \"@puzzle-ui/theme\";\nimport {\n ThemeScopeProvider,\n useThemeScope,\n} from \"@puzzle-ui/theme/scope-context\";\n\nimport { Background } from \"../../layout/background\";\nimport { highlightCode } from \"./highlight\";\n\nimport \"./preview.css\";\n\ntype PreviewDevice = \"mobile\" \| \"tablet\" \| \"desktop\";\ntype PreviewTab = \"preview\" \| \"code\";\n\ntype DeviceConfig = {\n label: string;\n width: number;\n height: number;\n};\n\ntype PreviewAlign = \"start\" \| \"center\" \| \"end\" \| \"stretch\";\ntype PreviewJustify =\n \| \"start\"\n \| \"center\"\n \| \"end\"\n \| \"between\"\n \| \"around\"\n \| \"evenly\";\n\ntype PreviewProps = {\n children: ReactNode;\n className?: string;\n defaultDevice?: PreviewDevice;\n code?: string;\n /** Size to content (capped at mobile height) or the selected device. /\n fit?: \"content\" \| \"device\";\n /* Frame height in pixels. Overrides fit. /\n height?: number;\n /* Space inside the preview frame, around the content. Numbers are pixels. /\n padding?: number \| string;\n /* Vertical alignment of the content within the frame. /\n align?: PreviewAlign;\n /* Horizontal distribution of the content within the frame. /\n justify?: PreviewJustify;\n /* Hides the device selector. The default device is still used. /\n hideDevices?: boolean;\n};\n\nconst PREVIEW_DEVICES: Record<PreviewDevice, DeviceConfig> = {\n mobile: { label: \"Mobile\", width: 390, height: 844 },\n tablet: { label: \"Tablet\", width: 768, height: 1024 },\n desktop: { label: \"Desktop\", width: 1024, height: 768 },\n};\n\nconst PREVIEW_DEVICE_ITEMS = (\n Object.keys(PREVIEW_DEVICES) as PreviewDevice[]\n).map((id) => ({ id }));\n\nconst ALIGN_VALUES: Record<PreviewAlign, string> = {\n start: \"flex-start\",\n center: \"center\",\n end: \"flex-end\",\n stretch: \"stretch\",\n};\n\nconst JUSTIFY_VALUES: Record<PreviewJustify, string> = {\n start: \"flex-start\",\n center: \"center\",\n end: \"flex-end\",\n between: \"space-between\",\n around: \"space-around\",\n evenly: \"space-evenly\",\n};\n\nconst createPreviewDocument = (rootId: string) => `<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n </head>\n <body>\n <div id=\"${rootId}\"></div>\n </body>\n</html>`;\n\nconst useIsomorphicLayoutEffect =\n typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nconst PreviewBackground = (props: ComponentProps<\"div\">) => (\n <Background\n pattern=\"blueprint\"\n size={20}\n majorSize={100}\n lineWidth={1}\n patternOpacity={0.25}\n {...props}\n />\n);\n\nconst Preview = ({\n children,\n className,\n defaultDevice = \"mobile\",\n code,\n fit = \"content\",\n height,\n padding = \"var(--puzzle-space-8, 2rem)\",\n align = \"center\",\n justify = \"center\",\n hideDevices = false,\n}: PreviewProps) => {\n const generatedId = useId();\n const frameRootId = `${generatedId}-root`;\n const previewTabId = `${generatedId}-tab-preview`;\n const codeTabId = `${generatedId}-tab-code`;\n const panelId = `${generatedId}-panel`;\n\n const themeScope = useThemeScope();\n\n const [device, setDevice] = useState<PreviewDevice>(defaultDevice);\n const [activeTab, setActiveTab] = useState<PreviewTab>(\"preview\");\n const [frameRoot, setFrameRoot] = useState<HTMLElement \| null>(null);\n const [scale, setScale] = useState(1);\n const [copied, setCopied] = useState(false);\n const [contentHeight, setContentHeight] = useState(PREVIEW_DEVICES.mobile.height);\n const [contentMeasured, setContentMeasured] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const config = PREVIEW_DEVICES[device];\n const fitsContent = height === undefined && fit === \"content\";\n const frameHeight = height ?? (fitsContent ? contentHeight : config.height);\n // Until the iframe content is measured, an inert inline copy sizes the viewport so SSR has no height jump.\n const showPlaceholder = fitsContent && !contentMeasured;\n const hasCode = code !== undefined;\n const [direction, setDirection] = useState<\"ltr\" \| \"rtl\">(\"ltr\");\n const [desktopControlsVisible, setDesktopControlsVisible] = useState(true);\n const sectionRef = useRef<HTMLElement>(null);\n const isKeyboardNavigation = useRef(false);\n\n useEffect(() => {\n const query = window.matchMedia(`(min-width: ${BREAKPOINTS.desktop}px)`);\n const update = () => setDesktopControlsVisible(query.matches);\n update();\n query.addEventListener(\"change\", update);\n return () => query.removeEventListener(\"change\", update);\n }, []);\n\n useLayoutEffect(() => {\n const section = sectionRef.current;\n\n if (section) {\n const isRtl =\n getComputedStyle(section).direction === \"rtl\" \|\|\n section.closest(\"[dir]\")?.getAttribute(\"dir\")?.toLowerCase() === \"rtl\";\n\n setDirection(isRtl ? \"rtl\" : \"ltr\");\n }\n }, []);\n\n const rovingFocus = useRovingFocus<HTMLButtonElement>({\n items: hasCode ? [{ id: \"preview\" }, { id: \"code\" }] : [{ id: \"preview\" }],\n dir: direction,\n initialActiveId: activeTab,\n });\n\n const deviceFocus = useRovingFocus<HTMLButtonElement>({\n items: PREVIEW_DEVICE_ITEMS.map((item) => ({\n ...item,\n disabled: item.id === \"desktop\" && !desktopControlsVisible,\n })),\n dir: direction,\n initialActiveId: device,\n });\n\n const handleTabKeyDown = (\n event: KeyboardEvent<HTMLButtonElement>,\n tab: PreviewTab,\n ) => {\n isKeyboardNavigation.current = true;\n\n try {\n rovingFocus.onItemKeyDown(event, tab);\n } finally {\n isKeyboardNavigation.current = false;\n }\n };\n\n const handleTabFocus = (tab: PreviewTab) => {\n rovingFocus.onItemFocus(tab);\n\n if (isKeyboardNavigation.current) {\n setActiveTab(tab);\n }\n };\n\n const syncStyles = useCallback(() => {\n const frameDocument = iframeRef.current?.contentDocument;\n\n if (!frameDocument) return;\n\n const frameHead = frameDocument.head;\n\n frameHead\n .querySelectorAll(\"[data-puzzle-preview-style]\")\n .forEach((element) => element.remove());\n\n document\n .querySelectorAll(\n [\n \"head link[rel='stylesheet']\",\n \"head style\",\n \"style[data-puzzle-theme]\",\n \"style[data-puzzle-theme-scope-style]\",\n ].join(\", \"),\n )\n .forEach((element) => {\n const clone = element.cloneNode(true) as HTMLElement;\n\n clone.setAttribute(\"data-puzzle-preview-style\", \"\");\n frameHead.appendChild(clone);\n });\n\n const sourceRoot = document.documentElement;\n const targetRoot = frameDocument.documentElement;\n\n targetRoot.style.cssText = sourceRoot.style.cssText;\n targetRoot.className = sourceRoot.className;\n\n Array.from(sourceRoot.attributes).forEach((attribute) => {\n if (attribute.name === \"style\" \|\| attribute.name === \"class\") {\n return;\n }\n\n targetRoot.setAttribute(attribute.name, attribute.value);\n });\n\n const body = frameDocument.body;\n\n body.className = document.body.className;\n body.style.cssText = document.body.style.cssText;\n\n targetRoot.style.setProperty(\"box-sizing\", \"border-box\", \"important\");\n targetRoot.style.setProperty(\"width\", \"100%\", \"important\");\n targetRoot.style.setProperty(\"height\", \"100%\", \"important\");\n targetRoot.style.setProperty(\"min-height\", \"100%\", \"important\");\n targetRoot.style.setProperty(\"margin\", \"0\", \"important\");\n targetRoot.style.setProperty(\"padding\", \"0\", \"important\");\n targetRoot.style.setProperty(\"overflow-x\", \"hidden\", \"important\");\n targetRoot.style.setProperty(\"overflow-y\", \"auto\", \"important\");\n targetRoot.style.setProperty(\"scrollbar-width\", \"none\", \"important\");\n targetRoot.style.setProperty(\"-ms-overflow-style\", \"none\", \"important\");\n\n body.style.setProperty(\"display\", \"block\", \"important\");\n body.style.setProperty(\"position\", \"static\", \"important\");\n body.style.setProperty(\"box-sizing\", \"border-box\", \"important\");\n body.style.setProperty(\"width\", \"100%\", \"important\");\n body.style.setProperty(\"height\", \"auto\", \"important\");\n body.style.setProperty(\"min-height\", \"100%\", \"important\");\n body.style.setProperty(\"margin\", \"0\", \"important\");\n body.style.setProperty(\"padding\", \"0\", \"important\");\n body.style.setProperty(\"overflow\", \"visible\", \"important\");\n\n const previewRoot = frameDocument.getElementById(frameRootId);\n\n previewRoot?.style.removeProperty(\"min-height\");\n\n const scrollbarStyle = frameDocument.createElement(\"style\");\n\n scrollbarStyle.setAttribute(\"data-puzzle-preview-style\", \"\");\n scrollbarStyle.textContent = `\n html,\n body {\n scrollbar-width: none !important;\n -ms-overflow-style: none !important;\n }\n\n html::-webkit-scrollbar,\n body::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n }\n `;\n\n frameHead.appendChild(scrollbarStyle);\n }, [frameRootId]);\n\n const updateScale = useCallback(\n (availableWidth: number) => {\n if (availableWidth <= 0) return;\n\n const nextScale = Math.min(1, Math.max(0, availableWidth) / config.width);\n\n setScale((current) =>\n Math.abs(current - nextScale) < 0.001 ? current : nextScale,\n );\n },\n [config.width],\n );\n\n useIsomorphicLayoutEffect(() => {\n const container = containerRef.current;\n\n if (!container) return;\n\n const measure = () => {\n const styles = window.getComputedStyle(container);\n const horizontalPadding =\n (Number.parseFloat(styles.paddingLeft) \|\| 0) +\n (Number.parseFloat(styles.paddingRight) \|\| 0);\n\n updateScale(container.clientWidth - horizontalPadding);\n };\n\n measure();\n\n const observer = new ResizeObserver((entries) => {\n const entry = entries[0];\n\n if (entry) {\n updateScale(entry.contentRect.width);\n }\n });\n\n observer.observe(container);\n\n return () => observer.disconnect();\n }, [updateScale]);\n\n useEffect(() => {\n const isStyleNode = (node: Node) =>\n node instanceof Element &&\n (node.matches(\"style, link[rel='stylesheet']\") \|\|\n node.querySelector(\"style, link[rel='stylesheet']\") !== null);\n\n const headObserver = new MutationObserver(syncStyles);\n\n headObserver.observe(document.head, {\n childList: true,\n subtree: true,\n characterData: true,\n attributes: true,\n });\n\n const bodyObserver = new MutationObserver((mutations) => {\n const affectsStyles = mutations.some((mutation) => {\n const target =\n mutation.target instanceof Element\n ? mutation.target\n : mutation.target.parentElement;\n\n return (\n target?.closest(\n \"style[data-puzzle-theme], style[data-puzzle-theme-scope-style]\",\n ) != null \|\|\n Array.from(mutation.addedNodes).some(isStyleNode) \|\|\n Array.from(mutation.removedNodes).some(isStyleNode)\n );\n });\n\n if (affectsStyles) {\n syncStyles();\n }\n });\n\n bodyObserver.observe(document.body, {\n childList: true,\n subtree: true,\n characterData: true,\n attributes: true,\n attributeFilter: [\"data-theme\"],\n });\n\n return () => {\n headObserver.disconnect();\n bodyObserver.disconnect();\n };\n }, [syncStyles]);\n\n const initializeFrame = useCallback(() => {\n const frameDocument = iframeRef.current?.contentDocument;\n const root = frameDocument?.getElementById(frameRootId);\n\n if (!root) return;\n\n syncStyles();\n setFrameRoot(root);\n }, [frameRootId, syncStyles]);\n\n useEffect(() => {\n initializeFrame();\n }, [initializeFrame]);\n\n useIsomorphicLayoutEffect(() => {\n const content = contentRef.current;\n\n if (!fitsContent \|\| !frameRoot \|\| !content \|\| activeTab !== \"preview\") return;\n\n const measure = () => {\n const measuredHeight = Math.ceil(\n Math.max(content.getBoundingClientRect().height, content.scrollHeight),\n );\n\n setContentHeight(\n Math.min(PREVIEW_DEVICES.mobile.height, Math.max(1, measuredHeight)),\n );\n setContentMeasured(true);\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n observer.observe(content);\n\n const mutations = new MutationObserver(measure);\n mutations.observe(content, {\n subtree: true,\n childList: true,\n characterData: true,\n attributes: true,\n });\n\n return () => {\n observer.disconnect();\n mutations.disconnect();\n };\n }, [activeTab, fitsContent, frameRoot]);\n\n const handleCopyCode = useCallback(async () => {\n if (code === undefined) return;\n\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n\n if (copyTimeoutRef.current) {\n clearTimeout(copyTimeoutRef.current);\n }\n\n copyTimeoutRef.current = setTimeout(() => {\n setCopied(false);\n }, 2000);\n } catch {\n setCopied(false);\n }\n }, [code]);\n\n useEffect(\n () => () => {\n if (copyTimeoutRef.current) {\n clearTimeout(copyTimeoutRef.current);\n }\n },\n [],\n );\n\n useEffect(() => {\n if (!hasCode && activeTab === \"code\") {\n setActiveTab(\"preview\");\n }\n }, [activeTab, hasCode]);\n\n const frameStyle: CSSProperties = {\n width: config.width,\n height: frameHeight,\n transform: `scale(${scale})`,\n transformOrigin: \"top left\",\n visibility: showPlaceholder ? \"hidden\" : undefined,\n };\n\n const contentStyle: CSSProperties = {\n display: \"flex\",\n boxSizing: \"border-box\",\n padding,\n minHeight: fitsContent ? undefined : \"100vh\",\n alignItems: align ? ALIGN_VALUES[align] : undefined,\n justifyContent: justify ? JUSTIFY_VALUES[justify] : undefined,\n };\n\n const viewportStyle: CSSProperties = {\n width: config.width scale,\n height: showPlaceholder ? undefined : frameHeight * scale,\n maxHeight: showPlaceholder\n ? PREVIEW_DEVICES.mobile.height * scale\n : undefined,\n };\n\n const placeholderStyle: CSSProperties = {\n ...contentStyle,\n width: config.width,\n zoom: scale === 1 ? undefined : scale,\n };\n\n const panelProps = {\n id: panelId,\n role: \"tabpanel\",\n \"aria-labelledby\": activeTab === \"preview\" ? previewTabId : codeTabId,\n };\n\n return (\n <section ref={sectionRef} className={cn(\"puzzle-preview\", className)}>\n <div className=\"puzzle-preview__toolbar\">\n <div\n className=\"puzzle-preview__tabs\"\n role=\"tablist\"\n aria-label=\"Preview view\"\n >\n <button\n type=\"button\"\n role=\"tab\"\n id={previewTabId}\n ref={rovingFocus.getItemRef(\"preview\")}\n tabIndex={activeTab === \"preview\" ? 0 : -1}\n onFocus={() => handleTabFocus(\"preview\")}\n onKeyDown={(event) => handleTabKeyDown(event, \"preview\")}\n aria-selected={activeTab === \"preview\"}\n aria-controls={panelId}\n className={cn(\n \"puzzle-preview__tab\",\n activeTab === \"preview\" && \"puzzle-preview__tab--active\",\n )}\n onClick={() => setActiveTab(\"preview\")}\n >\n Preview\n </button>\n\n {hasCode && (\n <button\n type=\"button\"\n role=\"tab\"\n id={codeTabId}\n ref={rovingFocus.getItemRef(\"code\")}\n tabIndex={activeTab === \"code\" ? 0 : -1}\n onFocus={() => handleTabFocus(\"code\")}\n onKeyDown={(event) => handleTabKeyDown(event, \"code\")}\n aria-selected={activeTab === \"code\"}\n aria-controls={panelId}\n className={cn(\n \"puzzle-preview__tab\",\n activeTab === \"code\" && \"puzzle-preview__tab--active\",\n )}\n onClick={() => setActiveTab(\"code\")}\n >\n Code\n </button>\n )}\n </div>\n\n {activeTab === \"preview\" ? (\n <div className=\"puzzle-preview__toolbar-actions\">\n {!hideDevices && (\n <div\n className=\"puzzle-preview__devices\"\n role=\"group\"\n aria-label=\"Device size\"\n >\n {(Object.keys(PREVIEW_DEVICES) as PreviewDevice[]).map(\n (item) => (\n <button\n key={item}\n data-device={item}\n ref={deviceFocus.getItemRef(item)}\n type=\"button\"\n className={cn(\n \"puzzle-preview__device\",\n device === item && \"puzzle-preview__device--active\",\n )}\n aria-pressed={device === item}\n tabIndex={deviceFocus.getItemTabIndex(item)}\n onFocus={() => deviceFocus.onItemFocus(item)}\n onKeyDown={(event) =>\n deviceFocus.onItemKeyDown(event, item)\n }\n onClick={() => setDevice(item)}\n >\n {PREVIEW_DEVICES[item].label}\n </button>\n ),\n )}\n </div>\n )}\n\n <span className=\"puzzle-preview__dimensions\">\n {config.width} × {frameHeight}\n </span>\n </div>\n ) : (\n <button\n type=\"button\"\n className=\"puzzle-preview__copy\"\n onClick={handleCopyCode}\n aria-label={copied ? \"Code copied\" : \"Copy code\"}\n >\n <Icon\n name={copied ? \"tabler:check\" : \"tabler:copy\"}\n size={16}\n aria-hidden=\"true\"\n />\n <span>{copied ? \"Copied\" : \"Copy code\"}</span>\n </button>\n )}\n </div>\n\n <PreviewBackground {...panelProps} className=\"puzzle-preview__panel\">\n <div\n ref={containerRef}\n className=\"puzzle-preview__stage\"\n hidden={activeTab !== \"preview\"}\n >\n <div className=\"puzzle-preview__viewport\" style={viewportStyle}>\n <iframe\n ref={iframeRef}\n className=\"puzzle-preview__frame\"\n srcDoc={createPreviewDocument(frameRootId)}\n title={`${config.label} component preview`}\n onLoad={initializeFrame}\n style={frameStyle}\n />\n\n {showPlaceholder && (\n <div\n className=\"puzzle-preview__placeholder\"\n style={placeholderStyle}\n aria-hidden=\"true\"\n inert\n data-preview-placeholder=\"\"\n >\n {children}\n </div>\n )}\n\n {frameRoot &&\n createPortal(\n <ThemeScopeProvider\n scopeId={themeScope?.scopeId ?? null}\n theme={themeScope?.theme ?? \"system\"}\n >\n <div ref={contentRef} style={contentStyle}>{children}</div>\n </ThemeScopeProvider>,\n frameRoot,\n )}\n </div>\n </div>\n\n {activeTab === \"code\" && (\n <div className=\"puzzle-preview__code\">\n <pre>\n <code className=\"language-tsx\">\n {code === undefined ? null : highlightCode(code)}\n </code>\n </pre>\n </div>\n )}\n </PreviewBackground>\n\n <span\n className=\"puzzle-preview__copy-status\"\n role=\"status\"\n aria-live=\"polite\"\n >\n {copied ? \"Code copied to clipboard.\" : \"\"}\n </span>\n </section>\n );\n};\n\nexport {\n Preview,\n type PreviewProps,\n type PreviewDevice,\n type PreviewAlign,\n type PreviewJustify,\n};\n"],"mappings":"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"}

package/dist/components/utilities/preview/preview.css CHANGED Viewed

@@ -133,14 +133,12 @@
 }
 .puzzle-preview__stage {
+  min-width: 0;
+  padding: var(--puzzle-space-6, 1.5rem);
   scrollbar-width: none;
   -ms-overflow-style: none;
-  min-width: 0;
-  min-height: 20rem;
-  max-height: 75vh;
-  padding: 1.5rem;
   display: flex;
-  overflow: clip auto;
+  overflow: clip;
 }
 .puzzle-preview__stage[hidden] {
@@ -176,6 +174,14 @@
   left: 0;
 }
+.puzzle-preview__placeholder {
+  max-width: none;
+  color: var(--puzzle-color-text, #171717);
+  pointer-events: none;
+  user-select: none;
+  overflow: hidden;
+}
 .puzzle-preview__code {
   min-width: 0;
   max-height: 75vh;
@@ -186,10 +192,7 @@
 }
 .puzzle-preview__code pre {
-  font-family: var(--puzzle-font-family-monospace, "SFMono-Regular",
-    Consolas,
-    "Liberation Mono",
-    monospace);
+  font-family: var(--puzzle-font-family-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace);
   tab-size: 2;
   white-space: pre;
   margin: 0;
@@ -220,7 +223,7 @@
 }
 .puzzle-preview__token--number {
-  color: var(--puzzle-color-warning, #a16207);
+  color: var(--puzzle-color-warning, #fabc0a);
 }
 .puzzle-preview__token--type {
@@ -252,7 +255,7 @@
   }
   .puzzle-preview__stage {
-    padding: 1rem;
+    padding: var(--puzzle-space-4, 1rem);
   }
   .puzzle-preview__code pre {
@@ -261,6 +264,18 @@
   }
 }
+@media (width < 768px) {
+  .puzzle-preview__devices {
+    display: none;
+  }
+}
+@media (768px <= width < 1024px) {
+  .puzzle-preview__device[data-device="desktop"] {
+    display: none;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .puzzle-preview__tab, .puzzle-preview__device, .puzzle-preview__copy {
     transition: none;

package/dist/components/utilities/transition/index.d.cts CHANGED Viewed

@@ -23,5 +23,5 @@ type TransitionProps<T extends ElementType = "div"> = {
   onExit?: () => void;
   onExited?: () => void;
 } & Omit<ComponentPropsWithoutRef<T>, "as" | "children" | "className">;
-declare const Transition: <T extends ElementType = "div">({ visible, children, as, template, enterFrom: enterFromProp, enterTo: enterToProp, exitTo: exitToProp, className, duration, unmountOnExit, forceMount, onEnter, onEntered, onExit, onExited, ...restProps }: TransitionProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | (string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[] | null | undefined;
+declare const Transition: <T extends ElementType = "div">({ visible, children, as, template, enterFrom: enterFromProp, enterTo: enterToProp, exitTo: exitToProp, className, duration, unmountOnExit, forceMount, onEnter, onEntered, onExit, onExited, ...restProps }: TransitionProps<T>) => (string | number | bigint | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>)[] | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null | undefined;
 export { Transition, type TransitionPhase, type TransitionProps, type TransitionTemplate };

package/dist/components/utilities/transition/index.d.ts CHANGED Viewed

@@ -23,5 +23,5 @@ type TransitionProps<T extends ElementType = "div"> = {
   onExit?: () => void;
   onExited?: () => void;
 } & Omit<ComponentPropsWithoutRef<T>, "as" | "children" | "className">;
-declare const Transition: <T extends ElementType = "div">({ visible, children, as, template, enterFrom: enterFromProp, enterTo: enterToProp, exitTo: exitToProp, className, duration, unmountOnExit, forceMount, onEnter, onEntered, onExit, onExited, ...restProps }: TransitionProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | (string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[] | null | undefined;
+declare const Transition: <T extends ElementType = "div">({ visible, children, as, template, enterFrom: enterFromProp, enterTo: enterToProp, exitTo: exitToProp, className, duration, unmountOnExit, forceMount, onEnter, onEntered, onExit, onExited, ...restProps }: TransitionProps<T>) => (string | number | bigint | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>)[] | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null | undefined;
 export { Transition, type TransitionPhase, type TransitionProps, type TransitionTemplate };

package/dist/index.cjs CHANGED Viewed

@@ -6,55 +6,66 @@ const require_index$3 = require("./components/data-display/alert/index.cjs");
 const require_index$4 = require("./components/data-display/avatar/index.cjs");
 const require_index$5 = require("./components/data-display/badge/index.cjs");
 const require_index$6 = require("./components/data-display/card/index.cjs");
-const require_index$7 = require("./components/data-display/image/index.cjs");
-const require_index$8 = require("./components/data-display/paper/index.cjs");
+const require_index$7 = require("./components/data-display/empty-state/index.cjs");
+const require_index$8 = require("./components/data-display/image/index.cjs");
+const require_index$9 = require("./components/data-display/paper/index.cjs");
 const require_circular_progress = require("./components/data-display/progress/circular-progress.cjs");
 const require_linear_progress = require("./components/data-display/progress/linear-progress.cjs");
-const require_index$9 = require("./components/data-display/skeleton/index.cjs");
-const require_index$10 = require("./components/editors/text-editor/index.cjs");
+const require_index$10 = require("./components/data-display/rating/index.cjs");
+const require_index$11 = require("./components/data-display/skeleton/index.cjs");
+const require_index$12 = require("./components/editors/text-editor/index.cjs");
 const require_text_editor_toolbar = require("./components/editors/text-editor/text-editor-toolbar.cjs");
 const require_text_renderer = require("./components/editors/text-editor/text-renderer.cjs");
-const require_index$11 = require("./components/forms/autocomplete/index.cjs");
-const require_index$12 = require("./components/forms/checkbox/index.cjs");
-const require_index$13 = require("./components/forms/date-picker/index.cjs");
-const require_index$14 = require("./components/forms/file-upload/index.cjs");
-const require_index$15 = require("./components/forms/form-field/index.cjs");
+const require_index$13 = require("./components/forms/autocomplete/index.cjs");
+const require_index$14 = require("./components/forms/checkbox/index.cjs");
+const require_index$15 = require("./components/forms/color-picker/index.cjs");
+const require_index$16 = require("./components/forms/date-picker/index.cjs");
+const require_index$17 = require("./components/forms/file-upload/index.cjs");
+const require_index$18 = require("./components/forms/form-field/index.cjs");
+const require_input_group = require("./components/forms/input-group/input-group.cjs");
 const require_number_input = require("./components/forms/input/number-input.cjs");
 const require_text_area_input = require("./components/forms/input/text-area-input.cjs");
 const require_text_input = require("./components/forms/input/text-input.cjs");
-const require_index$16 = require("./components/forms/label/index.cjs");
-const require_index$17 = require("./components/forms/radio-group/index.cjs");
-const require_index$18 = require("./components/forms/select/index.cjs");
-const require_index$19 = require("./components/forms/slider/index.cjs");
-const require_index$20 = require("./components/forms/stepper/index.cjs");
-const require_index$21 = require("./components/forms/switch/index.cjs");
-const require_index$22 = require("./components/layout/app-bar/index.cjs");
-const require_index$23 = require("./components/layout/background/index.cjs");
-const require_index$24 = require("./components/layout/bottom-navigation/index.cjs");
-const require_index$25 = require("./components/layout/breadcrumbs/index.cjs");
-const require_index$26 = require("./components/layout/collapsable-sidebar/index.cjs");
-const require_index$27 = require("./components/layout/container/index.cjs");
-const require_index$28 = require("./components/layout/page-layout/index.cjs");
-const require_index$29 = require("./components/layout/resizable-panels/index.cjs");
-const require_index$30 = require("./components/layout/section/index.cjs");
-const require_index$31 = require("./components/layout/section-stack/index.cjs");
-const require_index$32 = require("./components/layout/sidebar/index.cjs");
-const require_index$33 = require("./components/layout/stack/index.cjs");
-const require_index$34 = require("./components/navigation/accordion/index.cjs");
-const require_index$35 = require("./components/navigation/carousel/index.cjs");
+const require_index$19 = require("./components/forms/label/index.cjs");
+const require_index$20 = require("./components/forms/radio-group/index.cjs");
+const require_index$21 = require("./components/forms/select/index.cjs");
+const require_index$22 = require("./components/forms/slider/index.cjs");
+const require_index$23 = require("./components/forms/stepper/index.cjs");
+const require_index$24 = require("./components/forms/switch/index.cjs");
+const require_index$25 = require("./components/forms/time-picker/index.cjs");
+const require_index$26 = require("./components/forms/token-input/index.cjs");
+const require_index$27 = require("./components/layout/app-bar/index.cjs");
+const require_index$28 = require("./components/layout/aspect-ratio/index.cjs");
+const require_index$29 = require("./components/layout/background/index.cjs");
+const require_index$30 = require("./components/layout/bottom-navigation/index.cjs");
+const require_index$31 = require("./components/layout/breadcrumbs/index.cjs");
+const require_index$32 = require("./components/layout/collapsable-sidebar/index.cjs");
+const require_index$33 = require("./components/layout/container/index.cjs");
+const require_index$34 = require("./components/layout/page-layout/index.cjs");
+const require_index$35 = require("./components/layout/resizable-panels/index.cjs");
+const require_index$36 = require("./components/layout/scroll-area/index.cjs");
+const require_index$37 = require("./components/layout/section/index.cjs");
+const require_index$38 = require("./components/layout/section-stack/index.cjs");
+const require_index$39 = require("./components/layout/separator/index.cjs");
+const require_index$40 = require("./components/layout/sidebar/index.cjs");
+const require_index$41 = require("./components/layout/stack/index.cjs");
+const require_index$42 = require("./components/navigation/accordion/index.cjs");
+const require_index$43 = require("./components/navigation/carousel/index.cjs");
 const require_controller = require("./components/navigation/carousel/controller.cjs");
-const require_index$36 = require("./components/navigation/link/index.cjs");
-const require_index$37 = require("./components/navigation/tabs/index.cjs");
-const require_index$38 = require("./components/navigation/tree-view/index.cjs");
-const require_index$39 = require("./components/overlays/backdrop/index.cjs");
-const require_index$40 = require("./components/overlays/command/index.cjs");
-const require_index$41 = require("./components/overlays/dialog/index.cjs");
-const require_index$42 = require("./components/overlays/drawer/index.cjs");
-const require_index$43 = require("./components/overlays/dropdown-menu/index.cjs");
-const require_index$44 = require("./components/overlays/notification/index.cjs");
-const require_index$45 = require("./components/overlays/popout/index.cjs");
-const require_index$46 = require("./components/overlays/portal/index.cjs");
-const require_index$47 = require("./components/overlays/popover/index.cjs");
+const require_index$44 = require("./components/navigation/link/index.cjs");
+const require_index$45 = require("./components/navigation/pagination/index.cjs");
+const require_index$46 = require("./components/navigation/tabs/index.cjs");
+const require_index$47 = require("./components/navigation/tree-view/index.cjs");
+const require_index$48 = require("./components/overlays/backdrop/index.cjs");
+const require_index$49 = require("./components/overlays/command/index.cjs");
+const require_index$50 = require("./components/overlays/context-menu/index.cjs");
+const require_index$51 = require("./components/overlays/dialog/index.cjs");
+const require_index$52 = require("./components/overlays/drawer/index.cjs");
+const require_index$53 = require("./components/overlays/dropdown-menu/index.cjs");
+const require_index$54 = require("./components/overlays/notification/index.cjs");
+const require_index$55 = require("./components/overlays/popout/index.cjs");
+const require_index$56 = require("./components/overlays/portal/index.cjs");
+const require_index$57 = require("./components/overlays/popover/index.cjs");
 const require_dropdown_menu_content = require("./components/overlays/dropdown-menu/dropdown-menu-content.cjs");
 const require_dropdown_menu_trigger = require("./components/overlays/dropdown-menu/dropdown-menu-trigger.cjs");
 const require_dropdown_menu_items = require("./components/overlays/dropdown-menu/dropdown-menu-items.cjs");
@@ -62,23 +73,24 @@ const require_dropdown_menu_radio = require("./components/overlays/dropdown-menu
 const require_target = require("./components/overlays/portal/target.cjs");
 const require_notification_provider = require("./components/overlays/notification/notification-provider.cjs");
 const require_use_notification = require("./components/overlays/notification/use-notification.cjs");
-const require_index$48 = require("./components/overlays/tooltip/index.cjs");
+const require_index$58 = require("./components/overlays/tooltip/index.cjs");
 const require_text = require("./components/typography/text.cjs");
 const require_heading = require("./components/typography/heading.cjs");
-const require_index$49 = require("./components/utilities/preview/index.cjs");
-const require_index$50 = require("./components/utilities/scroll-lock/index.cjs");
-const require_index$51 = require("./components/utilities/transition/index.cjs");
-exports.Accordion = require_index$34.Accordion;
+const require_index$59 = require("./components/utilities/preview/index.cjs");
+const require_index$60 = require("./components/utilities/scroll-lock/index.cjs");
+const require_index$61 = require("./components/utilities/transition/index.cjs");
+exports.Accordion = require_index$42.Accordion;
 exports.Alert = require_index$3.Alert;
-exports.AppBar = require_index$22.AppBar;
-exports.Autocomplete = require_index$11.Autocomplete;
+exports.AppBar = require_index$27.AppBar;
+exports.AspectRatio = require_index$28.AspectRatio;
+exports.Autocomplete = require_index$13.Autocomplete;
 exports.Avatar = require_index$4.Avatar;
-exports.Backdrop = require_index$39.Backdrop;
-exports.Background = require_index$23.Background;
+exports.Backdrop = require_index$48.Backdrop;
+exports.Background = require_index$29.Background;
 exports.Badge = require_index$5.Badge;
-exports.BottomNavigation = require_index$24.BottomNavigation;
-exports.BottomNavigationItem = require_index$24.BottomNavigationItem;
-exports.Breadcrumbs = require_index$25.Breadcrumbs;
+exports.BottomNavigation = require_index$30.BottomNavigation;
+exports.BottomNavigationItem = require_index$30.BottomNavigationItem;
+exports.Breadcrumbs = require_index$31.Breadcrumbs;
 exports.Button = require_index.Button;
 exports.ButtonGroup = require_index$1.ButtonGroup;
 exports.Card = require_index$6.Card;
@@ -89,18 +101,32 @@ exports.CardFooter = require_index$6.CardFooter;
 exports.CardHeader = require_index$6.CardHeader;
 exports.CardMedia = require_index$6.CardMedia;
 exports.CardTitle = require_index$6.CardTitle;
-exports.Carousel = require_index$35.Carousel;
+exports.Carousel = require_index$43.Carousel;
 exports.CarouselController = require_controller.CarouselController;
-exports.Checkbox = require_index$12.Checkbox;
+exports.Checkbox = require_index$14.Checkbox;
 exports.CircularProgress = require_circular_progress.CircularProgress;
-exports.CollapsableSidebar = require_index$26.CollapsableSidebar;
-exports.Command = require_index$40.Command;
-exports.CommandDialog = require_index$40.CommandDialog;
-exports.Container = require_index$27.Container;
-exports.DatePicker = require_index$13.DatePicker;
-exports.Dialog = require_index$41.Dialog;
-exports.Drawer = require_index$42.Drawer;
-exports.DropdownMenu = require_index$43.DropdownMenu;
+exports.CollapsableSidebar = require_index$32.CollapsableSidebar;
+exports.ColorPicker = require_index$15.ColorPicker;
+exports.Command = require_index$49.Command;
+exports.CommandDialog = require_index$49.CommandDialog;
+exports.Container = require_index$33.Container;
+exports.ContextMenu = require_index$50.ContextMenu;
+exports.ContextMenuCheckboxItem = require_index$50.ContextMenuCheckboxItem;
+exports.ContextMenuContent = require_index$50.ContextMenuContent;
+exports.ContextMenuGroup = require_index$50.ContextMenuGroup;
+exports.ContextMenuItem = require_index$50.ContextMenuItem;
+exports.ContextMenuLabel = require_index$50.ContextMenuLabel;
+exports.ContextMenuRadioGroup = require_index$50.ContextMenuRadioGroup;
+exports.ContextMenuRadioItem = require_index$50.ContextMenuRadioItem;
+exports.ContextMenuSeparator = require_index$50.ContextMenuSeparator;
+exports.ContextMenuSub = require_index$50.ContextMenuSub;
+exports.ContextMenuSubContent = require_index$50.ContextMenuSubContent;
+exports.ContextMenuSubTrigger = require_index$50.ContextMenuSubTrigger;
+exports.ContextMenuTrigger = require_index$50.ContextMenuTrigger;
+exports.DatePicker = require_index$16.DatePicker;
+exports.Dialog = require_index$51.Dialog;
+exports.Drawer = require_index$52.Drawer;
+exports.DropdownMenu = require_index$53.DropdownMenu;
 exports.DropdownMenuCheckboxItem = require_dropdown_menu_items.DropdownMenuCheckboxItem;
 exports.DropdownMenuContent = require_dropdown_menu_content.DropdownMenuContent;
 exports.DropdownMenuGroup = require_dropdown_menu_items.DropdownMenuGroup;
@@ -110,50 +136,63 @@ exports.DropdownMenuRadioGroup = require_dropdown_menu_radio.DropdownMenuRadioGr
 exports.DropdownMenuRadioItem = require_dropdown_menu_radio.DropdownMenuRadioItem;
 exports.DropdownMenuSeparator = require_dropdown_menu_items.DropdownMenuSeparator;
 exports.DropdownMenuTrigger = require_dropdown_menu_trigger.DropdownMenuTrigger;
-exports.FileUpload = require_index$14.FileUpload;
-exports.FormField = require_index$15.FormField;
+exports.EmptyState = require_index$7.EmptyState;
+exports.EmptyStateContent = require_index$7.EmptyStateContent;
+exports.EmptyStateDescription = require_index$7.EmptyStateDescription;
+exports.EmptyStateHeader = require_index$7.EmptyStateHeader;
+exports.EmptyStateMedia = require_index$7.EmptyStateMedia;
+exports.EmptyStateTitle = require_index$7.EmptyStateTitle;
+exports.FileUpload = require_index$17.FileUpload;
+exports.FormField = require_index$18.FormField;
 exports.Heading = require_heading.Heading;
-exports.Image = require_index$7.Image;
-exports.Label = require_index$16.Label;
+exports.Image = require_index$8.Image;
+exports.InputGroup = require_input_group.InputGroup;
+exports.Label = require_index$19.Label;
 exports.LinearProgress = require_linear_progress.LinearProgress;
-exports.Link = require_index$36.Link;
-exports.Notification = require_index$44.Notification;
+exports.Link = require_index$44.Link;
+exports.Notification = require_index$54.Notification;
 exports.NotificationProvider = require_notification_provider.NotificationProvider;
-exports.NotificationViewport = require_index$44.NotificationViewport;
+exports.NotificationViewport = require_index$54.NotificationViewport;
 exports.NumberInput = require_number_input.NumberInput;
-exports.PageLayout = require_index$28.PageLayout;
-exports.Paper = require_index$8.Paper;
-exports.Popout = require_index$45.Popout;
-exports.Popover = require_index$47.Popover;
-exports.Portal = require_index$46.Portal;
+exports.PageLayout = require_index$34.PageLayout;
+exports.Pagination = require_index$45.Pagination;
+exports.Paper = require_index$9.Paper;
+exports.Popout = require_index$55.Popout;
+exports.Popover = require_index$57.Popover;
+exports.Portal = require_index$56.Portal;
 exports.PortalTarget = require_target.PortalTarget;
-exports.Preview = require_index$49.Preview;
-exports.Radio = require_index$17.Radio;
-exports.RadioGroup = require_index$17.RadioGroup;
-exports.ResizableHandle = require_index$29.ResizableHandle;
-exports.ResizablePanel = require_index$29.ResizablePanel;
-exports.ResizablePanels = require_index$29.ResizablePanels;
-exports.ScrollLock = require_index$50.ScrollLock;
-exports.Section = require_index$30.Section;
-exports.SectionStack = require_index$31.SectionStack;
-exports.Select = require_index$18.Select;
-exports.Sidebar = require_index$32.Sidebar;
-exports.Skeleton = require_index$9.Skeleton;
-exports.Slider = require_index$19.Slider;
-exports.Stack = require_index$33.Stack;
-exports.Stepper = require_index$20.Stepper;
-exports.Switch = require_index$21.Switch;
-exports.Tabs = require_index$37.Tabs;
-exports.TabsTab = require_index$37.TabsTab;
+exports.Preview = require_index$59.Preview;
+exports.Radio = require_index$20.Radio;
+exports.RadioGroup = require_index$20.RadioGroup;
+exports.Rating = require_index$10.Rating;
+exports.ResizableHandle = require_index$35.ResizableHandle;
+exports.ResizablePanel = require_index$35.ResizablePanel;
+exports.ResizablePanels = require_index$35.ResizablePanels;
+exports.ScrollArea = require_index$36.ScrollArea;
+exports.ScrollLock = require_index$60.ScrollLock;
+exports.Section = require_index$37.Section;
+exports.SectionStack = require_index$38.SectionStack;
+exports.Select = require_index$21.Select;
+exports.Separator = require_index$39.Separator;
+exports.Sidebar = require_index$40.Sidebar;
+exports.Skeleton = require_index$11.Skeleton;
+exports.Slider = require_index$22.Slider;
+exports.Stack = require_index$41.Stack;
+exports.Stepper = require_index$23.Stepper;
+exports.Switch = require_index$24.Switch;
+exports.Tabs = require_index$46.Tabs;
+exports.TabsTab = require_index$46.TabsTab;
 exports.Text = require_text.Text;
 exports.TextAreaInput = require_text_area_input.TextAreaInput;
-exports.TextEditor = require_index$10.TextEditor;
+exports.TextEditor = require_index$12.TextEditor;
 exports.TextEditorToolbar = require_text_editor_toolbar.TextEditorToolbar;
 exports.TextInput = require_text_input.TextInput;
 exports.TextRenderer = require_text_renderer.TextRenderer;
+exports.TimePicker = require_index$25.TimePicker;
 exports.ToggleGroup = require_index$2.ToggleGroup;
-exports.Tooltip = require_index$48.Tooltip;
-exports.Transition = require_index$51.Transition;
-exports.TreeView = require_index$38.TreeView;
+exports.TokenInput = require_index$26.TokenInput;
+exports.Tooltip = require_index$58.Tooltip;
+exports.Transition = require_index$61.Transition;
+exports.TreeView = require_index$47.TreeView;
 exports.useCarouselContext = require_controller.useCarouselContext;
 exports.useNotification = require_use_notification.useNotification;