@devalok/shilp-sutra 0.38.0 → 0.40.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/AGENTS.md +151 -0
- package/MIGRATION.md +255 -0
- package/README.md +3 -0
- package/dist/_chunks/badge-group.js +76 -75
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/chart-container.js +50 -0
- package/dist/_chunks/chart-container.js.map +1 -0
- package/dist/_chunks/chat.js +236 -228
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/colors.js +30 -0
- package/dist/_chunks/colors.js.map +1 -0
- package/dist/_chunks/document-preview.js +2 -2
- package/dist/_chunks/document-preview.js.map +1 -1
- package/dist/_chunks/emoji-data.js +45 -0
- package/dist/_chunks/emoji-data.js.map +1 -0
- package/dist/_chunks/grid-lines.js +72 -0
- package/dist/_chunks/grid-lines.js.map +1 -0
- package/dist/_chunks/image-preview.js +2 -2
- package/dist/_chunks/image-preview.js.map +1 -1
- package/dist/_chunks/mention-suggestion.js +35 -263
- package/dist/_chunks/mention-suggestion.js.map +1 -1
- package/dist/_chunks/normalize-icon.js +18 -0
- package/dist/_chunks/normalize-icon.js.map +1 -0
- package/dist/_chunks/oauth-button.js +227 -0
- package/dist/_chunks/oauth-button.js.map +1 -0
- package/dist/_chunks/popover.js +3 -3
- package/dist/_chunks/popover.js.map +1 -1
- package/dist/_chunks/primitives.js +107 -107
- package/dist/_chunks/primitives.js.map +1 -1
- package/dist/_chunks/shared.js +5 -5
- package/dist/_chunks/shared.js.map +1 -1
- package/dist/_chunks/{text.js → success.js} +26 -63
- package/dist/_chunks/success.js.map +1 -0
- package/dist/_chunks/tiptap.js +1952 -1949
- package/dist/_chunks/tiptap.js.map +1 -1
- package/dist/_chunks/tooltip.js +58 -0
- package/dist/_chunks/tooltip.js.map +1 -0
- package/dist/_chunks/tree-view.js +101 -96
- package/dist/_chunks/tree-view.js.map +1 -1
- package/dist/_chunks/use-calendar.js +5 -5
- package/dist/_chunks/use-calendar.js.map +1 -1
- package/dist/ai/ai-command-provider.d.ts +3 -2
- package/dist/ai/ai-command-provider.d.ts.map +1 -1
- package/dist/ai/ai-command-provider.js.map +1 -1
- package/dist/ai/block-renderer.js +11 -9
- package/dist/ai/block-renderer.js.map +1 -1
- package/dist/ai/blocks/error.js +31 -0
- package/dist/ai/blocks/error.js.map +1 -0
- package/dist/ai/blocks/index.d.ts +0 -2
- package/dist/ai/blocks/index.d.ts.map +1 -1
- package/dist/ai/blocks/index.js +2 -2
- package/dist/ai/blocks/text.js +19 -0
- package/dist/ai/blocks/text.js.map +1 -0
- package/dist/ai/command-bar.d.ts.map +1 -1
- package/dist/ai/command-bar.js +198 -193
- package/dist/ai/command-bar.js.map +1 -1
- package/dist/ai/conversation.d.ts +2 -1
- package/dist/ai/conversation.d.ts.map +1 -1
- package/dist/ai/conversation.js +92 -87
- package/dist/ai/conversation.js.map +1 -1
- package/dist/ai/index.d.ts +0 -4
- package/dist/ai/index.d.ts.map +1 -1
- package/dist/ai/index.js +45 -46
- package/dist/ai/index.js.map +1 -1
- package/dist/composed/activity-feed.d.ts +2 -1
- package/dist/composed/activity-feed.d.ts.map +1 -1
- package/dist/composed/activity-feed.js +5 -5
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/avatar-group.js +4 -4
- package/dist/composed/avatar-group.js.map +1 -1
- package/dist/composed/bulk-action-bar.d.ts +2 -2
- package/dist/composed/bulk-action-bar.d.ts.map +1 -1
- package/dist/composed/bulk-action-bar.js +12 -12
- package/dist/composed/bulk-action-bar.js.map +1 -1
- package/dist/composed/command-palette.d.ts +2 -1
- package/dist/composed/command-palette.d.ts.map +1 -1
- package/dist/composed/command-palette.js +106 -101
- package/dist/composed/command-palette.js.map +1 -1
- package/dist/composed/content-card.js +1 -1
- package/dist/composed/content-card.js.map +1 -1
- package/dist/composed/date-picker/index.js +747 -3
- package/dist/composed/date-picker/index.js.map +1 -0
- package/dist/composed/emoji-picker.js +4 -4
- package/dist/composed/emoji-picker.js.map +1 -1
- package/dist/composed/empty-state.d.ts +3 -3
- package/dist/composed/empty-state.d.ts.map +1 -1
- package/dist/composed/empty-state.js +40 -31
- package/dist/composed/empty-state.js.map +1 -1
- package/dist/composed/error-boundary.js +3 -3
- package/dist/composed/error-boundary.js.map +1 -1
- package/dist/composed/extensions/emoji-node.js +81 -0
- package/dist/composed/extensions/emoji-node.js.map +1 -0
- package/dist/composed/extensions/emoji-suggestion.js +117 -0
- package/dist/composed/extensions/emoji-suggestion.js.map +1 -0
- package/dist/composed/file-preview.js +498 -2
- package/dist/composed/file-preview.js.map +1 -0
- package/dist/composed/filter-bar.js +1 -1
- package/dist/composed/filter-bar.js.map +1 -1
- package/dist/composed/index.d.ts +0 -15
- package/dist/composed/index.d.ts.map +1 -1
- package/dist/composed/index.js +16 -24
- package/dist/composed/inline-edit.js +1 -1
- package/dist/composed/inline-edit.js.map +1 -1
- package/dist/composed/loading-skeleton.js +9 -9
- package/dist/composed/loading-skeleton.js.map +1 -1
- package/dist/composed/markdown-viewer.js +3 -3
- package/dist/composed/markdown-viewer.js.map +1 -1
- package/dist/composed/multi-select-popover.js +1 -1
- package/dist/composed/multi-select-popover.js.map +1 -1
- package/dist/composed/page-header.js +1 -1
- package/dist/composed/page-header.js.map +1 -1
- package/dist/composed/page-skeletons.js +15 -15
- package/dist/composed/page-skeletons.js.map +1 -1
- package/dist/composed/priority-indicator.js +3 -3
- package/dist/composed/priority-indicator.js.map +1 -1
- package/dist/composed/rich-chat-input.js +2073 -2
- package/dist/composed/rich-chat-input.js.map +1 -0
- package/dist/composed/rich-text-editor.js +75 -72
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/schedule-view.js +3 -3
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/composed/status-badge.d.ts +3 -2
- package/dist/composed/status-badge.d.ts.map +1 -1
- package/dist/composed/status-badge.js +58 -53
- package/dist/composed/status-badge.js.map +1 -1
- package/dist/shell/app-command-palette.d.ts +2 -1
- package/dist/shell/app-command-palette.d.ts.map +1 -1
- package/dist/shell/app-command-palette.js.map +1 -1
- package/dist/shell/bottom-navbar.d.ts +3 -1
- package/dist/shell/bottom-navbar.d.ts.map +1 -1
- package/dist/shell/bottom-navbar.js +94 -86
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/command-registry.d.ts +2 -1
- package/dist/shell/command-registry.d.ts.map +1 -1
- package/dist/shell/command-registry.js.map +1 -1
- package/dist/shell/notification-center.js +8 -8
- package/dist/shell/notification-center.js.map +1 -1
- package/dist/shell/notification-preferences.js +1 -1
- package/dist/shell/notification-preferences.js.map +1 -1
- package/dist/shell/sidebar.d.ts +7 -4
- package/dist/shell/sidebar.d.ts.map +1 -1
- package/dist/shell/sidebar.js +148 -134
- package/dist/shell/sidebar.js.map +1 -1
- package/dist/shell/top-bar.d.ts +4 -3
- package/dist/shell/top-bar.d.ts.map +1 -1
- package/dist/shell/top-bar.js +116 -108
- package/dist/shell/top-bar.js.map +1 -1
- package/dist/tokens/semantic.css +82 -9
- package/dist/ui/accordion.js +1 -1
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/alert-dialog.js +3 -3
- package/dist/ui/alert-dialog.js.map +1 -1
- package/dist/ui/alert.js +2 -2
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/autocomplete.js +2 -2
- package/dist/ui/autocomplete.js.map +1 -1
- package/dist/ui/avatar.js +11 -11
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/badge-indicator.js +1 -1
- package/dist/ui/badge-indicator.js.map +1 -1
- package/dist/ui/badge.d.ts +3 -2
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/banner.js +1 -1
- package/dist/ui/banner.js.map +1 -1
- package/dist/ui/breadcrumb.js +1 -1
- package/dist/ui/breadcrumb.js.map +1 -1
- package/dist/ui/button.d.ts +5 -4
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +66 -65
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/card.js +5 -5
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/charts/area-chart.js +177 -0
- package/dist/ui/charts/area-chart.js.map +1 -0
- package/dist/ui/charts/bar-chart.js +127 -0
- package/dist/ui/charts/bar-chart.js.map +1 -0
- package/dist/ui/charts/chart-container.js +3 -0
- package/dist/ui/charts/gauge-chart.js +72 -0
- package/dist/ui/charts/gauge-chart.js.map +1 -0
- package/dist/ui/charts/index.js +10 -1035
- package/dist/ui/charts/line-chart.js +135 -0
- package/dist/ui/charts/line-chart.js.map +1 -0
- package/dist/ui/charts/pie-chart.js +111 -0
- package/dist/ui/charts/pie-chart.js.map +1 -0
- package/dist/ui/charts/radar-chart.js +170 -0
- package/dist/ui/charts/radar-chart.js.map +1 -0
- package/dist/ui/charts/sparkline.js +119 -0
- package/dist/ui/charts/sparkline.js.map +1 -0
- package/dist/ui/chat/message.d.ts +3 -3
- package/dist/ui/chat/message.d.ts.map +1 -1
- package/dist/ui/chat/system-message.d.ts +2 -1
- package/dist/ui/chat/system-message.d.ts.map +1 -1
- package/dist/ui/checkbox.js +1 -1
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/code.js +2 -2
- package/dist/ui/code.js.map +1 -1
- package/dist/ui/color-input.js +10 -10
- package/dist/ui/color-input.js.map +1 -1
- package/dist/ui/color-swatch.js +3 -3
- package/dist/ui/color-swatch.js.map +1 -1
- package/dist/ui/combobox.d.ts +2 -1
- package/dist/ui/combobox.d.ts.map +1 -1
- package/dist/ui/combobox.js +100 -95
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/container.d.ts +6 -1
- package/dist/ui/container.d.ts.map +1 -1
- package/dist/ui/container.js +2 -1
- package/dist/ui/container.js.map +1 -1
- package/dist/ui/context-menu.js +6 -6
- package/dist/ui/context-menu.js.map +1 -1
- package/dist/ui/data-table-body.js +1 -1
- package/dist/ui/data-table-body.js.map +1 -1
- package/dist/ui/data-table-bulk-actions.js +2 -2
- package/dist/ui/data-table-bulk-actions.js.map +1 -1
- package/dist/ui/data-table-card.js +2 -2
- package/dist/ui/data-table-card.js.map +1 -1
- package/dist/ui/data-table-header.js +2 -2
- package/dist/ui/data-table-header.js.map +1 -1
- package/dist/ui/data-table-pagination.js +3 -3
- package/dist/ui/data-table-pagination.js.map +1 -1
- package/dist/ui/data-table-toolbar.js +1 -1
- package/dist/ui/data-table-toolbar.js.map +1 -1
- package/dist/ui/data-table.js +1 -1
- package/dist/ui/data-table.js.map +1 -1
- package/dist/ui/devalok-grain.d.ts +1 -1
- package/dist/ui/devalok-grain.js.map +1 -1
- package/dist/ui/dialog.js +2 -2
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/dropdown-menu.js +6 -6
- package/dist/ui/dropdown-menu.js.map +1 -1
- package/dist/ui/file-upload.js +4 -4
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/hover-card.js +1 -1
- package/dist/ui/hover-card.js.map +1 -1
- package/dist/ui/icon-button.d.ts +9 -2
- package/dist/ui/icon-button.d.ts.map +1 -1
- package/dist/ui/icon-button.js +14 -13
- package/dist/ui/icon-button.js.map +1 -1
- package/dist/ui/index.d.ts +1 -3
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +31 -33
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/input-otp.js +1 -1
- package/dist/ui/input-otp.js.map +1 -1
- package/dist/ui/input.js +2 -2
- package/dist/ui/input.js.map +1 -1
- package/dist/ui/lib/icon-input.d.ts +42 -0
- package/dist/ui/lib/icon-input.d.ts.map +1 -0
- package/dist/ui/lib/normalize-icon.d.ts +39 -0
- package/dist/ui/lib/normalize-icon.d.ts.map +1 -0
- package/dist/ui/link.js +1 -1
- package/dist/ui/link.js.map +1 -1
- package/dist/ui/menubar.js +8 -8
- package/dist/ui/menubar.js.map +1 -1
- package/dist/ui/navigation-menu.js +3 -3
- package/dist/ui/navigation-menu.js.map +1 -1
- package/dist/ui/number-input.js +3 -3
- package/dist/ui/number-input.js.map +1 -1
- package/dist/ui/oauth-button/index.d.ts +3 -0
- package/dist/ui/oauth-button/index.d.ts.map +1 -0
- package/dist/ui/oauth-button/index.js +3 -0
- package/dist/ui/oauth-button/oauth-button.d.ts +208 -0
- package/dist/ui/oauth-button/oauth-button.d.ts.map +1 -0
- package/dist/ui/pagination.js +1 -1
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/progress.js +2 -2
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/radio.js +1 -1
- package/dist/ui/radio.js.map +1 -1
- package/dist/ui/segmented-control.d.ts +3 -4
- package/dist/ui/segmented-control.d.ts.map +1 -1
- package/dist/ui/segmented-control.js +53 -45
- package/dist/ui/segmented-control.js.map +1 -1
- package/dist/ui/select.js +3 -3
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/sheet.js +2 -2
- package/dist/ui/sheet.js.map +1 -1
- package/dist/ui/sidebar.js +11 -11
- package/dist/ui/sidebar.js.map +1 -1
- package/dist/ui/skeleton.js +9 -9
- package/dist/ui/skeleton.js.map +1 -1
- package/dist/ui/slider.js +2 -2
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/split-button.js +7 -7
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/stack.d.ts +6 -1
- package/dist/ui/stack.d.ts.map +1 -1
- package/dist/ui/stack.js +2 -1
- package/dist/ui/stack.js.map +1 -1
- package/dist/ui/stat-card.d.ts +2 -3
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +118 -116
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/status-dot.js +2 -2
- package/dist/ui/status-dot.js.map +1 -1
- package/dist/ui/stepper.d.ts +2 -1
- package/dist/ui/stepper.d.ts.map +1 -1
- package/dist/ui/stepper.js +74 -69
- package/dist/ui/stepper.js.map +1 -1
- package/dist/ui/switch.js +2 -2
- package/dist/ui/switch.js.map +1 -1
- package/dist/ui/tabs.js +3 -3
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/text.d.ts +7 -2
- package/dist/ui/text.d.ts.map +1 -1
- package/dist/ui/text.js +2 -1
- package/dist/ui/text.js.map +1 -1
- package/dist/ui/textarea.js +1 -1
- package/dist/ui/textarea.js.map +1 -1
- package/dist/ui/toast.js +8 -8
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toaster.d.ts +11 -2
- package/dist/ui/toaster.d.ts.map +1 -1
- package/dist/ui/toaster.js.map +1 -1
- package/dist/ui/toggle.js +1 -1
- package/dist/ui/toggle.js.map +1 -1
- package/dist/ui/tooltip.js +12 -12
- package/dist/ui/tooltip.js.map +1 -1
- package/dist/ui/tree-view/tree-item.d.ts +3 -2
- package/dist/ui/tree-view/tree-item.d.ts.map +1 -1
- package/dist/ui/tree-view/use-tree.d.ts +2 -1
- package/dist/ui/tree-view/use-tree.d.ts.map +1 -1
- package/docs/components/_header.md +90 -1
- package/docs/components/ui/oauth-button.md +86 -0
- package/docs/recipes/customize-brand.md +100 -4
- package/docs/recipes/index.md +5 -1
- package/docs/recipes/install-astro.md +15 -0
- package/docs/recipes/install-next-app-router.md +21 -5
- package/docs/recipes/install-next-pages.md +2 -0
- package/docs/recipes/install-remix.md +15 -0
- package/docs/recipes/install-tanstack-start.md +15 -0
- package/docs/recipes/install-vite.md +15 -0
- package/docs/recipes/troubleshoot.md +22 -0
- package/llms-full.txt +177 -2
- package/llms-quick.txt +247 -0
- package/llms.txt +116 -3
- package/package.json +80 -2
- package/scripts/welcome.mjs +219 -0
- package/skill/README.md +99 -0
- package/skill/SKILL.md +163 -0
- package/skill/install.sh +59 -0
- package/skill/references/components-full.md +7083 -0
- package/skill/references/components.md +778 -0
- package/skill/references/customize-brand.md +314 -0
- package/skill/references/server-components.md +211 -0
- package/skill/references/setup-astro.md +195 -0
- package/skill/references/setup-next-app-router.md +248 -0
- package/skill/references/setup-next-pages.md +127 -0
- package/skill/references/setup-remix.md +188 -0
- package/skill/references/setup-tanstack-start.md +160 -0
- package/skill/references/setup-vite.md +187 -0
- package/skill/references/troubleshoot.md +241 -0
- package/dist/_chunks/date-picker.js +0 -748
- package/dist/_chunks/date-picker.js.map +0 -1
- package/dist/_chunks/file-preview.js +0 -499
- package/dist/_chunks/file-preview.js.map +0 -1
- package/dist/_chunks/rich-chat-input.js +0 -2071
- package/dist/_chunks/rich-chat-input.js.map +0 -1
- package/dist/_chunks/text.js.map +0 -1
- package/dist/ui/charts/index.js.map +0 -1
- /package/{LICENSE → skill/LICENSE} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sparkline.js","names":[],"sources":["../../../src/ui/charts/sparkline.tsx"],"sourcesContent":["'use client'\n\nimport { scaleLinear } from 'd3-scale'\nimport { area, curveMonotoneX,line } from 'd3-shape'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { useReducedMotion } from './_internal/animation'\nimport { resolveColor } from './_internal/colors'\n\nexport interface SparklineProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'children'> {\n /** Numeric data points */\n data: number[]\n /** Visual variant */\n variant?: 'line' | 'bar' | 'area'\n /** Width (default: 120) */\n width?: number\n /** Height (default: 32) */\n height?: number\n /** Color token or CSS color */\n color?: string\n /** Show a dot on the last data point (line/area only) */\n showLastDot?: boolean\n /** Line stroke width (line/area only, default: 1.5) */\n strokeWidth?: number\n /** Animate on mount (default: true) */\n animate?: boolean\n className?: string\n}\n\nconst pathDrawTransition = { duration: 1, ease: 'easeOut' as const }\n\nexport const Sparkline = React.forwardRef<SVGSVGElement, SparklineProps>(\n (\n {\n data,\n variant = 'line',\n width = 120,\n height = 32,\n color,\n showLastDot = false,\n strokeWidth = 1.5,\n animate = true,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedColor = resolveColor(color, 0)\n const reducedMotion = useReducedMotion()\n const shouldAnimate = animate && !reducedMotion\n\n if (!data.length) return null\n\n const padding = variant === 'bar' ? 1 : strokeWidth\n const innerWidth = width - padding * 2\n const innerHeight = height - padding * 2\n\n const xScale = scaleLinear()\n .domain([0, Math.max(data.length - 1, 1)])\n .range([padding, padding + innerWidth])\n\n const yMin = Math.min(...data)\n const yMax = Math.max(...data)\n const yDomain = yMin === yMax ? [yMin - 1, yMax + 1] : [yMin, yMax]\n\n const yScale = scaleLinear()\n .domain(yDomain)\n .range([padding + innerHeight, padding])\n\n if (variant === 'bar') {\n const barGap = 1\n const barWidth = Math.max(\n 1,\n (innerWidth - barGap * (data.length - 1)) / data.length,\n )\n // For bars, baseline is the bottom of the chart\n const baselineY = padding + innerHeight\n\n return (\n <svg\n ref={ref}\n width={width}\n height={height}\n role=\"img\"\n aria-label=\"Sparkline bar chart\"\n className={cn('inline-block align-middle', className)}\n {...props}\n >\n {data.map((value, i) => {\n const x = padding + i * (barWidth + barGap)\n const y = yScale(value)\n const barHeight = Math.max(1, baselineY - y)\n return (\n <rect\n key={i}\n x={x}\n y={y}\n width={barWidth}\n height={barHeight}\n rx={Math.min(1, barWidth / 2)}\n fill={resolvedColor}\n />\n )\n })}\n </svg>\n )\n }\n\n if (variant === 'area') {\n const areaGen = area<number>()\n .curve(curveMonotoneX)\n .x((_, i) => xScale(i))\n .y0(padding + innerHeight)\n .y1((d) => yScale(d))\n\n const lineGen = line<number>()\n .curve(curveMonotoneX)\n .x((_, i) => xScale(i))\n .y((d) => yScale(d))\n\n const areaD = areaGen(data) ?? ''\n const lineD = lineGen(data) ?? ''\n\n const lastX = xScale(data.length - 1)\n const lastY = yScale(data[data.length - 1])\n\n return (\n <svg\n ref={ref}\n width={width}\n height={height}\n role=\"img\"\n aria-label=\"Sparkline area chart\"\n className={cn('inline-block align-middle', className)}\n {...props}\n >\n <path d={areaD} fill={resolvedColor} opacity={0.2} />\n {shouldAnimate ? (\n <motion.path\n d={lineD}\n fill=\"none\"\n stroke={resolvedColor}\n strokeWidth={strokeWidth}\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n initial={{ pathLength: 0 }}\n animate={{ pathLength: 1 }}\n transition={pathDrawTransition}\n />\n ) : (\n <path\n d={lineD}\n fill=\"none\"\n stroke={resolvedColor}\n strokeWidth={strokeWidth}\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n />\n )}\n {showLastDot && (\n <circle\n cx={lastX}\n cy={lastY}\n r={strokeWidth + 1}\n fill={resolvedColor}\n />\n )}\n </svg>\n )\n }\n\n // Default: line variant\n const lineGen = line<number>()\n .curve(curveMonotoneX)\n .x((_, i) => xScale(i))\n .y((d) => yScale(d))\n\n const pathD = lineGen(data) ?? ''\n\n const lastX = xScale(data.length - 1)\n const lastY = yScale(data[data.length - 1])\n\n return (\n <svg\n ref={ref}\n width={width}\n height={height}\n role=\"img\"\n aria-label=\"Sparkline chart\"\n className={cn('inline-block align-middle', className)}\n {...props}\n >\n {shouldAnimate ? (\n <motion.path\n d={pathD}\n fill=\"none\"\n stroke={resolvedColor}\n strokeWidth={strokeWidth}\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n initial={{ pathLength: 0 }}\n animate={{ pathLength: 1 }}\n transition={pathDrawTransition}\n />\n ) : (\n <path\n d={pathD}\n fill=\"none\"\n stroke={resolvedColor}\n strokeWidth={strokeWidth}\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n />\n )}\n {showLastDot && (\n <circle\n cx={lastX}\n cy={lastY}\n r={strokeWidth + 1}\n fill={resolvedColor}\n />\n )}\n </svg>\n )\n },\n)\nSparkline.displayName = 'Sparkline'\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { IconInput } from '../lib/icon-input';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
interface MessageContextValue {
|
|
5
5
|
variant: 'flat' | 'bubble';
|
|
@@ -20,7 +20,7 @@ export interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
20
20
|
export interface MessageAvatarProps {
|
|
21
21
|
src?: string | null;
|
|
22
22
|
fallback?: string;
|
|
23
|
-
icon?:
|
|
23
|
+
icon?: IconInput;
|
|
24
24
|
size?: 'sm' | 'md';
|
|
25
25
|
children?: React.ReactNode;
|
|
26
26
|
}
|
|
@@ -85,7 +85,7 @@ declare namespace MessageActions {
|
|
|
85
85
|
var displayName: string;
|
|
86
86
|
}
|
|
87
87
|
export interface MessageActionProps {
|
|
88
|
-
icon:
|
|
88
|
+
icon: IconInput;
|
|
89
89
|
label: string;
|
|
90
90
|
onClick: () => void;
|
|
91
91
|
variant?: 'default' | 'danger';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/ui/chat/message.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/ui/chat/message.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { IconInput } from '../lib/icon-input';
|
|
2
3
|
import * as React from 'react';
|
|
3
4
|
export interface SystemMessageProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
-
icon?:
|
|
5
|
+
icon?: IconInput;
|
|
5
6
|
timestamp?: string;
|
|
6
7
|
variant?: 'event' | 'alert';
|
|
7
8
|
children: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"system-message.d.ts","sourceRoot":"","sources":["../../../src/ui/chat/system-message.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"system-message.d.ts","sourceRoot":"","sources":["../../../src/ui/chat/system-message.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAIlD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AASD,QAAA,MAAM,aAAa,2FAuClB,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}
|
package/dist/ui/checkbox.js
CHANGED
|
@@ -24,7 +24,7 @@ var l = {
|
|
|
24
24
|
checked: b || p ? D : void 0,
|
|
25
25
|
defaultChecked: !b && !p ? _ : void 0,
|
|
26
26
|
onCheckedChange: k,
|
|
27
|
-
className: r("touch-target peer flex items-center justify-center shrink-0 rounded-
|
|
27
|
+
className: r("touch-target peer flex items-center justify-center shrink-0 rounded-control-inner", l[m], "border border-surface-border-strong", "bg-surface-raised-hover", "transition-colors duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-action-disabled", "data-[state=unchecked]:hover:border-accent-7 data-[state=unchecked]:hover:bg-surface-raised-active", "data-[state=checked]:bg-accent-9 data-[state=checked]:border-accent-7 data-[state=checked]:text-accent-fg", "data-[state=indeterminate]:bg-accent-9 data-[state=indeterminate]:border-accent-7 data-[state=indeterminate]:text-accent-fg", w && "border-error-7 bg-error-3", d),
|
|
28
28
|
"aria-invalid": w || void 0,
|
|
29
29
|
"aria-describedby": T,
|
|
30
30
|
"aria-required": E || void 0,
|
package/dist/ui/checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as CheckboxPrimitive from '@primitives/react-checkbox'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { durations } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Props for Checkbox — a Radix-powered accessible checkbox with error state styling and\n * an indeterminate state for \"select all\" row controls.\n *\n * **Indeterminate:** Pass `indeterminate={true}` to show the \"−\" dash (overrides `checked`).\n * This is correct for \"select all\" headers when only some rows are selected.\n *\n * **Controlled:** Use `checked` + `onCheckedChange` for controlled usage.\n * `onCheckedChange` receives `true | false | 'indeterminate'` from Radix.\n *\n * @example\n * // Basic controlled checkbox:\n * <Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} />\n *\n * @example\n * // Error state when required checkbox is not checked:\n * <Checkbox error={!termsAccepted} checked={termsAccepted} onCheckedChange={(v) => setTerms(v === true)} />\n *\n * @example\n * // \"Select all\" checkbox with indeterminate state:\n * <Checkbox\n * indeterminate={someSelected && !allSelected}\n * checked={allSelected}\n * onCheckedChange={(v) => toggleAll(v === true)}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n error?: boolean\n indeterminate?: boolean\n /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n size?: 'sm' | 'md' | 'lg'\n}\n\nconst checkboxSizeClasses = {\n sm: 'h-5 w-5',\n md: 'h-6 w-6',\n lg: 'h-7 w-7',\n} as const\n\nconst checkboxIconClasses = {\n sm: 'h-[14px] w-[14px]',\n md: 'h-[18px] w-[18px]',\n lg: 'h-5 w-5',\n} as const\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(({ className, error, indeterminate, size = 'md', checked, onCheckedChange, defaultChecked, ...props }, ref) => {\n // Track internal state so AnimatePresence works for both controlled & uncontrolled usage\n const isControlled = checked !== undefined\n const [internalChecked, setInternalChecked] = React.useState<boolean | 'indeterminate'>(\n indeterminate ? 'indeterminate' : (defaultChecked ? true : false),\n )\n\n const fieldCtx = useFormField()\n const isError = error ?? fieldCtx.state === 'error'\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n const actualChecked = indeterminate ? 'indeterminate' : (isControlled ? checked : internalChecked)\n const isActive = actualChecked === true || actualChecked === 'indeterminate'\n\n const handleCheckedChange = React.useCallback(\n (value: boolean | 'indeterminate') => {\n if (!isControlled) setInternalChecked(value)\n onCheckedChange?.(value)\n },\n [isControlled, onCheckedChange],\n )\n\n return (\n <CheckboxPrimitive.Root\n ref={ref}\n checked={isControlled || indeterminate ? actualChecked : undefined}\n defaultChecked={!isControlled && !indeterminate ? defaultChecked : undefined}\n onCheckedChange={handleCheckedChange}\n className={cn(\n 'touch-target peer flex items-center justify-center shrink-0 rounded-
|
|
1
|
+
{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as CheckboxPrimitive from '@primitives/react-checkbox'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { durations } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Props for Checkbox — a Radix-powered accessible checkbox with error state styling and\n * an indeterminate state for \"select all\" row controls.\n *\n * **Indeterminate:** Pass `indeterminate={true}` to show the \"−\" dash (overrides `checked`).\n * This is correct for \"select all\" headers when only some rows are selected.\n *\n * **Controlled:** Use `checked` + `onCheckedChange` for controlled usage.\n * `onCheckedChange` receives `true | false | 'indeterminate'` from Radix.\n *\n * @example\n * // Basic controlled checkbox:\n * <Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} />\n *\n * @example\n * // Error state when required checkbox is not checked:\n * <Checkbox error={!termsAccepted} checked={termsAccepted} onCheckedChange={(v) => setTerms(v === true)} />\n *\n * @example\n * // \"Select all\" checkbox with indeterminate state:\n * <Checkbox\n * indeterminate={someSelected && !allSelected}\n * checked={allSelected}\n * onCheckedChange={(v) => toggleAll(v === true)}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n error?: boolean\n indeterminate?: boolean\n /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n size?: 'sm' | 'md' | 'lg'\n}\n\nconst checkboxSizeClasses = {\n sm: 'h-5 w-5',\n md: 'h-6 w-6',\n lg: 'h-7 w-7',\n} as const\n\nconst checkboxIconClasses = {\n sm: 'h-[14px] w-[14px]',\n md: 'h-[18px] w-[18px]',\n lg: 'h-5 w-5',\n} as const\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(({ className, error, indeterminate, size = 'md', checked, onCheckedChange, defaultChecked, ...props }, ref) => {\n // Track internal state so AnimatePresence works for both controlled & uncontrolled usage\n const isControlled = checked !== undefined\n const [internalChecked, setInternalChecked] = React.useState<boolean | 'indeterminate'>(\n indeterminate ? 'indeterminate' : (defaultChecked ? true : false),\n )\n\n const fieldCtx = useFormField()\n const isError = error ?? fieldCtx.state === 'error'\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n const actualChecked = indeterminate ? 'indeterminate' : (isControlled ? checked : internalChecked)\n const isActive = actualChecked === true || actualChecked === 'indeterminate'\n\n const handleCheckedChange = React.useCallback(\n (value: boolean | 'indeterminate') => {\n if (!isControlled) setInternalChecked(value)\n onCheckedChange?.(value)\n },\n [isControlled, onCheckedChange],\n )\n\n return (\n <CheckboxPrimitive.Root\n ref={ref}\n checked={isControlled || indeterminate ? actualChecked : undefined}\n defaultChecked={!isControlled && !indeterminate ? defaultChecked : undefined}\n onCheckedChange={handleCheckedChange}\n className={cn(\n 'touch-target peer flex items-center justify-center shrink-0 rounded-control-inner',\n checkboxSizeClasses[size],\n 'border border-surface-border-strong',\n 'bg-surface-raised-hover',\n 'transition-colors duration-fast-01 ease-productive-standard',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n 'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n 'data-[state=unchecked]:hover:border-accent-7 data-[state=unchecked]:hover:bg-surface-raised-active',\n 'data-[state=checked]:bg-accent-9 data-[state=checked]:border-accent-7 data-[state=checked]:text-accent-fg',\n 'data-[state=indeterminate]:bg-accent-9 data-[state=indeterminate]:border-accent-7 data-[state=indeterminate]:text-accent-fg',\n isError && 'border-error-7 bg-error-3',\n className,\n )}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n {...props}\n >\n <AnimatePresence>\n {isActive && (\n <CheckboxPrimitive.Indicator forceMount asChild>\n <motion.span\n className=\"flex items-center justify-center text-current\"\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: durations.fast01 }}\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n className={checkboxIconClasses[size]}\n >\n {actualChecked === 'indeterminate' ? (\n <motion.line\n x1=\"4\"\n y1=\"8\"\n x2=\"12\"\n y2=\"8\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n initial={{ pathLength: 0 }}\n animate={{ pathLength: 1 }}\n exit={{ pathLength: 0 }}\n transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n />\n ) : (\n <motion.path\n d=\"M3.5 8.5l3 3 6-6\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n initial={{ pathLength: 0 }}\n animate={{ pathLength: 1 }}\n exit={{ pathLength: 0 }}\n transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n />\n )}\n </svg>\n </motion.span>\n </CheckboxPrimitive.Indicator>\n )}\n </AnimatePresence>\n </CheckboxPrimitive.Root>\n )\n})\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"],"mappings":";;;;;;;;;AA4CA,IAAM,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAW,EAAM,YAGpB,EAAE,cAAW,UAAO,kBAAe,UAAO,MAAM,YAAS,oBAAiB,mBAAgB,GAAG,KAAS,MAAQ;CAE/G,IAAM,IAAe,MAAY,KAAA,GAC3B,CAAC,GAAiB,KAAsB,EAAM,SAClD,IAAgB,kBAAmB,IACpC,EAEK,IAAW,GAAc,EACzB,IAAU,KAAS,EAAS,UAAU,SACtC,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAgB,IAAgB,kBAAmB,IAAe,IAAU,GAC5E,IAAW,MAAkB,MAAQ,MAAkB,iBAEvD,IAAsB,EAAM,aAC/B,MAAqC;AAEpC,EADK,KAAc,EAAmB,EAAM,EAC5C,IAAkB,EAAM;IAE1B,CAAC,GAAc,EAAgB,CAChC;AAED,QACE,kBAAC,GAAD;EACO;EACL,SAAS,KAAgB,IAAgB,IAAgB,KAAA;EACzD,gBAAgB,CAAC,KAAgB,CAAC,IAAgB,IAAiB,KAAA;EACnE,iBAAiB;EACjB,WAAW,EACT,qFACA,EAAoB,IACpB,uCACA,2BACA,+DACA,6GACA,gEACA,sGACA,6GACA,+HACA,KAAW,6BACX,EACD;EACD,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;YAEJ,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;GAA6B,YAAA;GAAW,SAAA;aACtC,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,MAAM,EAAE,SAAS,GAAG;IACpB,YAAY,EAAE,UAAU,EAAU,QAAQ;cAE1C,kBAAC,OAAD;KACE,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,WAAW,EAAoB;eAE9B,MAAkB,kBACjB,kBAAC,EAAO,MAAR;MACE,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;MACH,QAAO;MACP,aAAY;MACZ,eAAc;MACd,SAAS,EAAE,YAAY,GAAG;MAC1B,SAAS,EAAE,YAAY,GAAG;MAC1B,MAAM,EAAE,YAAY,GAAG;MACvB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;OAAW;MAC/D,CAAA,GAEF,kBAAC,EAAO,MAAR;MACE,GAAE;MACF,QAAO;MACP,aAAY;MACZ,eAAc;MACd,gBAAe;MACf,MAAK;MACL,SAAS,EAAE,YAAY,GAAG;MAC1B,SAAS,EAAE,YAAY,GAAG;MAC1B,MAAM,EAAE,YAAY,GAAG;MACvB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;OAAW;MAC/D,CAAA;KAEA,CAAA;IACM,CAAA;GACc,CAAA,EAEhB,CAAA;EACK,CAAA;EAE3B;AACF,EAAS,cAAA,EAAqC"}
|
package/dist/ui/code.js
CHANGED
|
@@ -4,12 +4,12 @@ import { jsx as n } from "react/jsx-runtime";
|
|
|
4
4
|
//#region src/ui/code.tsx
|
|
5
5
|
var r = t.forwardRef(({ className: t, variant: r = "inline", children: i, ...a }, o) => r === "block" ? /* @__PURE__ */ n("pre", {
|
|
6
6
|
ref: o,
|
|
7
|
-
className: e("overflow-x-auto rounded-
|
|
7
|
+
className: e("overflow-x-auto rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg", t),
|
|
8
8
|
...a,
|
|
9
9
|
children: /* @__PURE__ */ n("code", { children: i })
|
|
10
10
|
}) : /* @__PURE__ */ n("code", {
|
|
11
11
|
ref: o,
|
|
12
|
-
className: e("rounded-
|
|
12
|
+
className: e("rounded-control-inner bg-surface-raised-hover border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg", t),
|
|
13
13
|
...a,
|
|
14
14
|
children: i
|
|
15
15
|
}));
|
package/dist/ui/code.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code.js","names":[],"sources":["../../src/ui/code.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/**\n * Props for Code — a typography component that renders either inline `<code>` or block `<pre><code>`\n * monospace text, styled with the design system's layer tokens.\n *\n * **`variant` options:**\n * - `\"inline\"` (default) — renders as `<code>` with a subtle layer-03 background, suitable for\n * short snippets within prose (e.g. \"Use the `onClick` prop to...\").\n * - `\"block\"` — renders as `<pre>` with a bordered, padded, horizontally-scrollable block for\n * multi-line code samples.\n *\n * @example\n * // Inline code reference in documentation:\n * <p>Pass <Code>loading={true}</Code> to show the spinner.</p>\n *\n * @example\n * // Block code sample (e.g. in a README or docs page):\n * <Code variant=\"block\">{`const greeting = \"Hello, world!\"\\nconsole.log(greeting)`}</Code>\n *\n * @example\n * // Inline API key display:\n * <p>Your API key: <Code>sk-dev-abc123xyz</Code></p>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\n variant?: 'inline' | 'block'\n}\n\nconst Code = React.forwardRef<HTMLPreElement | HTMLElement, CodeProps>(\n ({ className, variant = 'inline', children, ...props }, ref) => {\n if (variant === 'block') {\n return (\n <pre\n ref={ref as React.Ref<HTMLPreElement>}\n className={cn(\n 'overflow-x-auto rounded-
|
|
1
|
+
{"version":3,"file":"code.js","names":[],"sources":["../../src/ui/code.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/**\n * Props for Code — a typography component that renders either inline `<code>` or block `<pre><code>`\n * monospace text, styled with the design system's layer tokens.\n *\n * **`variant` options:**\n * - `\"inline\"` (default) — renders as `<code>` with a subtle layer-03 background, suitable for\n * short snippets within prose (e.g. \"Use the `onClick` prop to...\").\n * - `\"block\"` — renders as `<pre>` with a bordered, padded, horizontally-scrollable block for\n * multi-line code samples.\n *\n * @example\n * // Inline code reference in documentation:\n * <p>Pass <Code>loading={true}</Code> to show the spinner.</p>\n *\n * @example\n * // Block code sample (e.g. in a README or docs page):\n * <Code variant=\"block\">{`const greeting = \"Hello, world!\"\\nconsole.log(greeting)`}</Code>\n *\n * @example\n * // Inline API key display:\n * <p>Your API key: <Code>sk-dev-abc123xyz</Code></p>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\n variant?: 'inline' | 'block'\n}\n\nconst Code = React.forwardRef<HTMLPreElement | HTMLElement, CodeProps>(\n ({ className, variant = 'inline', children, ...props }, ref) => {\n if (variant === 'block') {\n return (\n <pre\n ref={ref as React.Ref<HTMLPreElement>}\n className={cn(\n 'overflow-x-auto rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg',\n className,\n )}\n {...props}\n >\n <code>{children}</code>\n </pre>\n )\n }\n\n return (\n <code\n ref={ref}\n className={cn(\n 'rounded-control-inner bg-surface-raised-hover border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg',\n className,\n )}\n {...props}\n >\n {children}\n </code>\n )\n },\n)\nCode.displayName = 'Code'\n\nexport { Code }\n"],"mappings":";;;;AAgCA,IAAM,IAAO,EAAM,YAChB,EAAE,cAAW,aAAU,UAAU,aAAU,GAAG,KAAS,MAClD,MAAY,UAEZ,kBAAC,OAAD;CACO;CACL,WAAW,EACT,yJACA,EACD;CACD,GAAI;WAEJ,kBAAC,QAAD,EAAO,aAAgB,CAAA;CACnB,CAAA,GAKR,kBAAC,QAAD;CACO;CACL,WAAW,EACT,qIACA,EACD;CACD,GAAI;CAEH;CACI,CAAA,CAGZ;AACD,EAAK,cAAc"}
|
package/dist/ui/color-input.js
CHANGED
|
@@ -122,7 +122,7 @@ function v({ label: e, value: t, onChange: r, onBlur: i, disabled: a, maxLength:
|
|
|
122
122
|
onChange: (e) => r(e.target.value),
|
|
123
123
|
onBlur: i,
|
|
124
124
|
maxLength: o,
|
|
125
|
-
className: n("h-ds-xs-plus w-full rounded-
|
|
125
|
+
className: n("h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors", "focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", a && "cursor-not-allowed opacity-50")
|
|
126
126
|
})]
|
|
127
127
|
})]
|
|
128
128
|
});
|
|
@@ -182,7 +182,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
|
|
|
182
182
|
children: E === "inline" ? /* @__PURE__ */ c(d.button, {
|
|
183
183
|
type: "button",
|
|
184
184
|
disabled: S,
|
|
185
|
-
className: n("group flex items-center justify-center rounded-
|
|
185
|
+
className: n("group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-ds-sm font-medium", "focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base", S && "cursor-not-allowed opacity-50"),
|
|
186
186
|
animate: {
|
|
187
187
|
backgroundColor: F,
|
|
188
188
|
color: _(F) ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.95)"
|
|
@@ -198,7 +198,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
|
|
|
198
198
|
}) : /* @__PURE__ */ l(d.button, {
|
|
199
199
|
type: "button",
|
|
200
200
|
disabled: S,
|
|
201
|
-
className: n("group relative flex items-center overflow-hidden rounded-
|
|
201
|
+
className: n("group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong", "hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", S && "cursor-not-allowed opacity-50"),
|
|
202
202
|
whileHover: { scale: 1.02 },
|
|
203
203
|
whileTap: { scale: .98 },
|
|
204
204
|
transition: t.snappy,
|
|
@@ -227,7 +227,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
|
|
|
227
227
|
"aria-label": "Color picker",
|
|
228
228
|
align: T,
|
|
229
229
|
sideOffset: 8,
|
|
230
|
-
className: "w-[272px] rounded-
|
|
230
|
+
className: "w-[272px] rounded-overlay-lg border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
|
|
231
231
|
children: /* @__PURE__ */ l("div", {
|
|
232
232
|
className: "flex flex-col",
|
|
233
233
|
children: [
|
|
@@ -249,10 +249,10 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
|
|
|
249
249
|
children: $.map((e) => /* @__PURE__ */ l("button", {
|
|
250
250
|
type: "button",
|
|
251
251
|
onClick: () => j(e),
|
|
252
|
-
className: n("relative min-h-6 rounded-
|
|
252
|
+
className: n("relative min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors", A === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
|
|
253
253
|
children: [A === e && /* @__PURE__ */ c(d.span, {
|
|
254
254
|
layoutId: `color-input-format-pill-${P}`,
|
|
255
|
-
className: "absolute inset-0 rounded-
|
|
255
|
+
className: "absolute inset-0 rounded-control-inner bg-accent-3",
|
|
256
256
|
transition: t.snappy
|
|
257
257
|
}), /* @__PURE__ */ c("span", {
|
|
258
258
|
className: "relative z-10",
|
|
@@ -405,7 +405,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
|
|
|
405
405
|
...t.bouncy,
|
|
406
406
|
delay: r * .02
|
|
407
407
|
},
|
|
408
|
-
className: n("h-6 w-6 rounded-
|
|
408
|
+
className: n("h-6 w-6 rounded-control-inner border", i ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border hover:border-surface-border-strong", S && "cursor-not-allowed opacity-50"),
|
|
409
409
|
style: { backgroundColor: e.hex },
|
|
410
410
|
title: e.label,
|
|
411
411
|
"aria-label": `${e.label}: ${e.hex}`
|
|
@@ -429,7 +429,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
|
|
|
429
429
|
className: "flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02",
|
|
430
430
|
children: [
|
|
431
431
|
/* @__PURE__ */ c("span", {
|
|
432
|
-
className: "h-4 w-4 shrink-0 rounded-
|
|
432
|
+
className: "h-4 w-4 shrink-0 rounded-pill border border-surface-border",
|
|
433
433
|
style: { backgroundColor: L },
|
|
434
434
|
title: `Original: ${L}`
|
|
435
435
|
}),
|
|
@@ -441,13 +441,13 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
|
|
|
441
441
|
z.length > 0 && /* @__PURE__ */ c("button", {
|
|
442
442
|
type: "button",
|
|
443
443
|
onClick: K,
|
|
444
|
-
className: "min-h-6 rounded-
|
|
444
|
+
className: "min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
|
|
445
445
|
children: "Undo"
|
|
446
446
|
}),
|
|
447
447
|
F !== L && /* @__PURE__ */ c("button", {
|
|
448
448
|
type: "button",
|
|
449
449
|
onClick: q,
|
|
450
|
-
className: "min-h-6 rounded-
|
|
450
|
+
className: "min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11",
|
|
451
451
|
children: "Reset"
|
|
452
452
|
})
|
|
453
453
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-input.js","names":[],"sources":["../../src/ui/color-input.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { HexColorPicker } from 'react-colorful'\n\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from './popover'\n\n// ── Color conversion helpers ──\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n const m = /^#?([0-9a-f]{6})$/i.exec(hex)\n if (!m) return null\n const n = parseInt(m[1], 16)\n return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } | null {\n const rgb = hexToRgb(hex)\n if (!rgb) return null\n const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255\n const max = Math.max(r, g, b), min = Math.min(r, g, b)\n const l = (max + min) / 2\n if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }\n const d = max - min\n const s = l > 0.5 ? d / (2 - max - min) : d / (max - min)\n let h = 0\n if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n else if (max === g) h = ((b - r) / d + 2) / 6\n else h = ((r - g) / d + 4) / 6\n return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n const sn = s / 100, ln = l / 100\n const a = sn * Math.min(ln, 1 - ln)\n const f = (n: number) => {\n const k = (n + h / 30) % 12\n const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n return Math.round(255 * c)\n }\n return rgbToHex(f(0), f(8), f(4))\n}\n\n// ── Named color presets (color-blind accessible) ──\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n { hex: '#EF4444', label: 'Red' },\n { hex: '#F59E0B', label: 'Amber' },\n { hex: '#10B981', label: 'Emerald' },\n { hex: '#3B82F6', label: 'Blue' },\n { hex: '#8B5CF6', label: 'Violet' },\n { hex: '#EC4899', label: 'Pink' },\n { hex: '#06B6D4', label: 'Cyan' },\n { hex: '#F97316', label: 'Orange' },\n { hex: '#84CC16', label: 'Lime' },\n { hex: '#6366F1', label: 'Indigo' },\n]\n\n// ── Contrast helper ──\n\nfunction isLightColor(hex: string): boolean {\n const rgb = hexToRgb(hex)\n if (!rgb) return false\n // Relative luminance (sRGB)\n const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n const s = c / 255\n return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)\n })\n return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4\n}\n\n// ── Format mode type ──\n\ntype ColorFormat = 'hex' | 'rgb' | 'hsl'\n\n// ── Props ──\n\nexport interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n /** Current color value (hex string, e.g. \"#d33163\") */\n value?: string\n /** Called when the color changes */\n onChange?: (value: string) => void\n /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */\n presets?: { hex: string; label: string }[] | string[] | false\n /** Whether the input is disabled */\n disabled?: boolean\n /** Show the interactive color picker. Default: true. */\n showPicker?: boolean\n /** Default format for the input fields. Default: 'hex'. */\n defaultFormat?: ColorFormat\n /** Popover alignment. Default: 'start'. */\n align?: 'start' | 'center' | 'end'\n /**\n * Trigger style variant.\n * - `default`: Swatch bleeds to left edge + hex text\n * - `inline`: Entire trigger is the selected color with hex text overlaid\n */\n variant?: 'default' | 'inline'\n}\n\n// ── Small format input ──\n\nfunction FormatInput({\n label,\n value,\n onChange,\n onBlur,\n disabled,\n maxLength = 3,\n prefix,\n className,\n id,\n}: {\n label: string\n value: string\n onChange: (v: string) => void\n onBlur?: () => void\n disabled?: boolean\n maxLength?: number\n prefix?: string\n className?: string\n id: string\n}) {\n return (\n <div className={cn('flex flex-col gap-ds-01', className)}>\n <label htmlFor={id} className=\"text-ds-xs font-medium uppercase tracking-wider text-surface-fg-muted\">\n {label}\n </label>\n <div className=\"flex items-center\">\n {prefix && (\n <span className=\"text-ds-sm text-surface-fg-muted\">{prefix}</span>\n )}\n <input\n id={id}\n type=\"text\"\n value={value}\n disabled={disabled}\n onChange={(e) => onChange(e.target.value)}\n onBlur={onBlur}\n maxLength={maxLength}\n className={cn(\n 'h-ds-xs-plus w-full rounded-ds-sm border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors',\n 'focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n disabled && 'cursor-not-allowed opacity-50',\n )}\n />\n </div>\n </div>\n )\n}\n\n// ── Main component ──\n\nconst ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n ({\n value = '#000000',\n onChange,\n presets,\n disabled = false,\n showPicker = true,\n defaultFormat = 'hex',\n align = 'start',\n variant = 'default',\n className,\n ...props\n }, ref) => {\n const [format, setFormat] = React.useState<ColorFormat>(defaultFormat)\n const [open, setOpen] = React.useState(false)\n const instanceId = React.useId()\n\n // Internal color state — syncs with prop, allows uncontrolled use\n const [internalColor, setInternalColor] = React.useState(value)\n React.useEffect(() => { setInternalColor(value) }, [value])\n\n // Track color when popover opened (for reset) + undo history\n const [openColor, setOpenColor] = React.useState(value)\n const [undoStack, setUndoStack] = React.useState<string[]>([])\n // Track whether current change is from continuous drag (skip undo push)\n const isDragging = React.useRef(false)\n\n const handleOpenChange = (isOpen: boolean) => {\n if (disabled) return\n if (isOpen) {\n setOpenColor(internalColor)\n setUndoStack([])\n }\n setOpen(isOpen)\n }\n\n // Discrete change (preset click, field commit) — pushes to undo\n const handleDiscreteChange = (newValue: string) => {\n if (disabled) return\n const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n const hex = normalized.toLowerCase()\n setUndoStack((prev) => {\n if (prev[prev.length - 1] === internalColor) return prev\n return [...prev.slice(-19), internalColor]\n })\n setInternalColor(hex)\n onChange?.(hex)\n }\n\n // Continuous change (picker drag) — updates color but only pushes undo on drag start\n const handleChange = (newValue: string) => {\n if (disabled) return\n const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n const hex = normalized.toLowerCase()\n if (!isDragging.current) {\n // First change in a drag sequence — push current color to undo\n isDragging.current = true\n setUndoStack((prev) => {\n if (prev[prev.length - 1] === internalColor) return prev\n return [...prev.slice(-19), internalColor]\n })\n }\n setInternalColor(hex)\n onChange?.(hex)\n }\n\n // Called when picker drag ends\n const handlePickerChangeComplete = () => {\n isDragging.current = false\n }\n\n const handleUndo = () => {\n if (undoStack.length === 0) return\n const prev = undoStack[undoStack.length - 1]\n setUndoStack((s) => s.slice(0, -1))\n setInternalColor(prev)\n onChange?.(prev)\n }\n\n const handleReset = () => {\n setInternalColor(openColor)\n onChange?.(openColor)\n setUndoStack([])\n }\n\n // Resolve presets\n const resolvedPresets = presets === false\n ? []\n : presets\n ? presets.map((p) =>\n typeof p === 'string' ? { hex: p, label: p } : p\n )\n : NAMED_PRESETS\n\n // Parsed color values — use internal state\n const rgb = hexToRgb(internalColor)\n const hsl = hexToHsl(internalColor)\n\n // RGB field handlers (clamped 0-255)\n const handleRgbChange = (channel: 'r' | 'g' | 'b', v: string) => {\n if (!rgb) return\n const num = parseInt(v, 10)\n if (isNaN(num)) return\n const clamped = Math.max(0, Math.min(255, num))\n handleDiscreteChange(rgbToHex(\n channel === 'r' ? clamped : rgb.r,\n channel === 'g' ? clamped : rgb.g,\n channel === 'b' ? clamped : rgb.b,\n ))\n }\n\n // HSL field handlers (H: 0-360, S/L: 0-100)\n const handleHslChange = (channel: 'h' | 's' | 'l', v: string) => {\n if (!hsl) return\n const num = parseInt(v, 10)\n if (isNaN(num)) return\n const max = channel === 'h' ? 360 : 100\n const clamped = Math.max(0, Math.min(max, num))\n handleDiscreteChange(hslToHex(\n channel === 'h' ? clamped : hsl.h,\n channel === 's' ? clamped : hsl.s,\n channel === 'l' ? clamped : hsl.l,\n ))\n }\n\n const formats: ColorFormat[] = ['hex', 'rgb', 'hsl']\n\n return (\n <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n <Popover open={open} onOpenChange={handleOpenChange}>\n <PopoverTrigger asChild>\n {variant === 'inline' ? (\n <motion.button\n type=\"button\"\n disabled={disabled}\n className={cn(\n 'group flex items-center justify-center rounded-ds-md px-ds-04 py-ds-02 font-mono text-ds-sm font-medium',\n 'focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base',\n disabled && 'cursor-not-allowed opacity-50',\n )}\n animate={{\n backgroundColor: internalColor,\n color: isLightColor(internalColor) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)',\n }}\n whileHover={{ y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}\n whileTap={{ scale: 0.97 }}\n transition={springs.smooth}\n aria-label={`Color picker: ${internalColor}`}\n >\n {internalColor.toUpperCase()}\n </motion.button>\n ) : (\n <motion.button\n type=\"button\"\n disabled={disabled}\n className={cn(\n 'group relative flex items-center overflow-hidden rounded-ds-md border border-surface-border-strong',\n 'hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n disabled && 'cursor-not-allowed opacity-50',\n )}\n whileHover={{ scale: 1.02 }}\n whileTap={{ scale: 0.98 }}\n transition={springs.snappy}\n aria-label={`Color picker: ${internalColor}`}\n >\n {/* Gradient background: color → surface */}\n <motion.span\n className=\"absolute inset-0\"\n animate={{\n background: `linear-gradient(to right, ${internalColor} 0%, ${internalColor} 35%, transparent 70%)`,\n }}\n /* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — gradient lerp feel */\n transition={{ duration: 0.3 }}\n />\n <span className=\"absolute inset-0 bg-surface-overlay/60\" style={{\n maskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n }} />\n {/* Hex value */}\n <span className=\"relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg\">\n {internalColor.toUpperCase()}\n </span>\n </motion.button>\n )}\n </PopoverTrigger>\n\n <PopoverContent\n role=\"dialog\"\n aria-label=\"Color picker\"\n align={align}\n sideOffset={8}\n className=\"w-[272px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating\"\n >\n <div className=\"flex flex-col\">\n {/* Interactive picker */}\n {showPicker && (\n <div className=\"p-ds-04 pb-ds-03\" onPointerUp={handlePickerChangeComplete} onPointerLeave={handlePickerChangeComplete}>\n <HexColorPicker\n color={internalColor}\n onChange={handleChange}\n className=\"w-full!\"\n style={{ height: 160 }}\n />\n </div>\n )}\n\n {/* Format inputs */}\n <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n {/* Format switcher */}\n <div className=\"mb-ds-03 flex items-center gap-ds-01\">\n {formats.map((f) => (\n <button\n key={f}\n type=\"button\"\n onClick={() => setFormat(f)}\n className={cn(\n 'relative min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors',\n format === f\n ? 'text-accent-11'\n : 'text-surface-fg-muted hover:text-surface-fg',\n )}\n >\n {format === f && (\n <motion.span\n layoutId={`color-input-format-pill-${instanceId}`}\n className=\"absolute inset-0 rounded-ds-sm bg-accent-3\"\n transition={springs.snappy}\n />\n )}\n <span className=\"relative z-10\">{f}</span>\n </button>\n ))}\n </div>\n\n {/* Format fields — animated swap */}\n <AnimatePresence mode=\"wait\">\n {format === 'hex' && (\n <motion.div\n key=\"hex\"\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -4 }}\n transition={{ duration: durations.moderate01 }}\n className=\"flex gap-ds-02\"\n >\n <FormatInput\n id={`${instanceId}-hex`}\n label=\"Hex\"\n value={internalColor.replace('#', '').toUpperCase()}\n onChange={(v) => {\n const clean = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)\n if (clean.length === 6) handleDiscreteChange(`#${clean}`)\n }}\n onBlur={() => {\n // Revert display to current color if input is incomplete\n const display = internalColor.replace('#', '').toUpperCase()\n if (display.length !== 6) setInternalColor(internalColor)\n }}\n disabled={disabled}\n maxLength={6}\n prefix=\"#\"\n className=\"flex-1\"\n />\n </motion.div>\n )}\n\n {format === 'rgb' && rgb && (\n <motion.div\n key=\"rgb\"\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -4 }}\n transition={{ duration: durations.moderate01 }}\n className=\"flex gap-ds-02\"\n >\n <FormatInput id={`${instanceId}-r`} label=\"R\" value={String(rgb.r)} onChange={(v) => handleRgbChange('r', v)} disabled={disabled} className=\"flex-1\" />\n <FormatInput id={`${instanceId}-g`} label=\"G\" value={String(rgb.g)} onChange={(v) => handleRgbChange('g', v)} disabled={disabled} className=\"flex-1\" />\n <FormatInput id={`${instanceId}-b`} label=\"B\" value={String(rgb.b)} onChange={(v) => handleRgbChange('b', v)} disabled={disabled} className=\"flex-1\" />\n </motion.div>\n )}\n\n {format === 'hsl' && hsl && (\n <motion.div\n key=\"hsl\"\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -4 }}\n transition={{ duration: durations.moderate01 }}\n className=\"flex gap-ds-02\"\n >\n <FormatInput id={`${instanceId}-h`} label=\"H\" value={String(hsl.h)} onChange={(v) => handleHslChange('h', v)} disabled={disabled} className=\"flex-1\" />\n <FormatInput id={`${instanceId}-s`} label=\"S\" value={String(hsl.s)} onChange={(v) => handleHslChange('s', v)} disabled={disabled} className=\"flex-1\" />\n <FormatInput id={`${instanceId}-l`} label=\"L\" value={String(hsl.l)} onChange={(v) => handleHslChange('l', v)} disabled={disabled} className=\"flex-1\" />\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n\n {/* Preset swatches */}\n {resolvedPresets.length > 0 && (\n <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n <div className=\"flex flex-wrap gap-ds-02\">\n {resolvedPresets.map((preset, i) => {\n const isSelected = internalColor.toLowerCase() === preset.hex.toLowerCase()\n return (\n <motion.button\n key={preset.hex}\n type=\"button\"\n disabled={disabled}\n onClick={() => handleDiscreteChange(preset.hex)}\n initial={{ opacity: 0, scale: 0.8 }}\n animate={{ opacity: 1, scale: isSelected ? 1.15 : 1 }}\n whileHover={{ scale: isSelected ? 1.15 : 1.1 }}\n whileTap={{ scale: 0.9 }}\n transition={{ ...springs.bouncy, delay: i * 0.02 }}\n className={cn(\n 'h-6 w-6 rounded-ds-sm border',\n isSelected\n ? 'border-accent-7 ring-2 ring-accent-9/30'\n : 'border-surface-border hover:border-surface-border-strong',\n disabled && 'cursor-not-allowed opacity-50',\n )}\n style={{ backgroundColor: preset.hex }}\n title={preset.label}\n aria-label={`${preset.label}: ${preset.hex}`}\n />\n )\n })}\n </div>\n </div>\n )}\n\n {/* Reset / Undo footer */}\n {(undoStack.length > 0 || internalColor !== openColor) && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: 'auto' }}\n exit={{ opacity: 0, height: 0 }}\n className=\"flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02\"\n >\n {/* Original color preview */}\n <span\n className=\"h-4 w-4 shrink-0 rounded-full border border-surface-border\"\n style={{ backgroundColor: openColor }}\n title={`Original: ${openColor}`}\n />\n <span className=\"text-ds-xs text-surface-fg-muted\">\n {openColor.toUpperCase()}\n </span>\n <span className=\"flex-1\" />\n {undoStack.length > 0 && (\n <button\n type=\"button\"\n onClick={handleUndo}\n className=\"min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg\"\n >\n Undo\n </button>\n )}\n {internalColor !== openColor && (\n <button\n type=\"button\"\n onClick={handleReset}\n className=\"min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11\"\n >\n Reset\n </button>\n )}\n </motion.div>\n )}\n </div>\n </PopoverContent>\n </Popover>\n </div>\n )\n },\n)\nColorInput.displayName = 'ColorInput'\n\nexport { ColorInput }\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"color-input.js","names":[],"sources":["../../src/ui/color-input.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { HexColorPicker } from 'react-colorful'\n\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from './popover'\n\n// ── Color conversion helpers ──\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n const m = /^#?([0-9a-f]{6})$/i.exec(hex)\n if (!m) return null\n const n = parseInt(m[1], 16)\n return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } | null {\n const rgb = hexToRgb(hex)\n if (!rgb) return null\n const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255\n const max = Math.max(r, g, b), min = Math.min(r, g, b)\n const l = (max + min) / 2\n if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }\n const d = max - min\n const s = l > 0.5 ? d / (2 - max - min) : d / (max - min)\n let h = 0\n if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n else if (max === g) h = ((b - r) / d + 2) / 6\n else h = ((r - g) / d + 4) / 6\n return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n const sn = s / 100, ln = l / 100\n const a = sn * Math.min(ln, 1 - ln)\n const f = (n: number) => {\n const k = (n + h / 30) % 12\n const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n return Math.round(255 * c)\n }\n return rgbToHex(f(0), f(8), f(4))\n}\n\n// ── Named color presets (color-blind accessible) ──\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n { hex: '#EF4444', label: 'Red' },\n { hex: '#F59E0B', label: 'Amber' },\n { hex: '#10B981', label: 'Emerald' },\n { hex: '#3B82F6', label: 'Blue' },\n { hex: '#8B5CF6', label: 'Violet' },\n { hex: '#EC4899', label: 'Pink' },\n { hex: '#06B6D4', label: 'Cyan' },\n { hex: '#F97316', label: 'Orange' },\n { hex: '#84CC16', label: 'Lime' },\n { hex: '#6366F1', label: 'Indigo' },\n]\n\n// ── Contrast helper ──\n\nfunction isLightColor(hex: string): boolean {\n const rgb = hexToRgb(hex)\n if (!rgb) return false\n // Relative luminance (sRGB)\n const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n const s = c / 255\n return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)\n })\n return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4\n}\n\n// ── Format mode type ──\n\ntype ColorFormat = 'hex' | 'rgb' | 'hsl'\n\n// ── Props ──\n\nexport interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n /** Current color value (hex string, e.g. \"#d33163\") */\n value?: string\n /** Called when the color changes */\n onChange?: (value: string) => void\n /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */\n presets?: { hex: string; label: string }[] | string[] | false\n /** Whether the input is disabled */\n disabled?: boolean\n /** Show the interactive color picker. Default: true. */\n showPicker?: boolean\n /** Default format for the input fields. Default: 'hex'. */\n defaultFormat?: ColorFormat\n /** Popover alignment. Default: 'start'. */\n align?: 'start' | 'center' | 'end'\n /**\n * Trigger style variant.\n * - `default`: Swatch bleeds to left edge + hex text\n * - `inline`: Entire trigger is the selected color with hex text overlaid\n */\n variant?: 'default' | 'inline'\n}\n\n// ── Small format input ──\n\nfunction FormatInput({\n label,\n value,\n onChange,\n onBlur,\n disabled,\n maxLength = 3,\n prefix,\n className,\n id,\n}: {\n label: string\n value: string\n onChange: (v: string) => void\n onBlur?: () => void\n disabled?: boolean\n maxLength?: number\n prefix?: string\n className?: string\n id: string\n}) {\n return (\n <div className={cn('flex flex-col gap-ds-01', className)}>\n <label htmlFor={id} className=\"text-ds-xs font-medium uppercase tracking-wider text-surface-fg-muted\">\n {label}\n </label>\n <div className=\"flex items-center\">\n {prefix && (\n <span className=\"text-ds-sm text-surface-fg-muted\">{prefix}</span>\n )}\n <input\n id={id}\n type=\"text\"\n value={value}\n disabled={disabled}\n onChange={(e) => onChange(e.target.value)}\n onBlur={onBlur}\n maxLength={maxLength}\n className={cn(\n 'h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors',\n 'focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n disabled && 'cursor-not-allowed opacity-50',\n )}\n />\n </div>\n </div>\n )\n}\n\n// ── Main component ──\n\nconst ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n ({\n value = '#000000',\n onChange,\n presets,\n disabled = false,\n showPicker = true,\n defaultFormat = 'hex',\n align = 'start',\n variant = 'default',\n className,\n ...props\n }, ref) => {\n const [format, setFormat] = React.useState<ColorFormat>(defaultFormat)\n const [open, setOpen] = React.useState(false)\n const instanceId = React.useId()\n\n // Internal color state — syncs with prop, allows uncontrolled use\n const [internalColor, setInternalColor] = React.useState(value)\n React.useEffect(() => { setInternalColor(value) }, [value])\n\n // Track color when popover opened (for reset) + undo history\n const [openColor, setOpenColor] = React.useState(value)\n const [undoStack, setUndoStack] = React.useState<string[]>([])\n // Track whether current change is from continuous drag (skip undo push)\n const isDragging = React.useRef(false)\n\n const handleOpenChange = (isOpen: boolean) => {\n if (disabled) return\n if (isOpen) {\n setOpenColor(internalColor)\n setUndoStack([])\n }\n setOpen(isOpen)\n }\n\n // Discrete change (preset click, field commit) — pushes to undo\n const handleDiscreteChange = (newValue: string) => {\n if (disabled) return\n const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n const hex = normalized.toLowerCase()\n setUndoStack((prev) => {\n if (prev[prev.length - 1] === internalColor) return prev\n return [...prev.slice(-19), internalColor]\n })\n setInternalColor(hex)\n onChange?.(hex)\n }\n\n // Continuous change (picker drag) — updates color but only pushes undo on drag start\n const handleChange = (newValue: string) => {\n if (disabled) return\n const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n const hex = normalized.toLowerCase()\n if (!isDragging.current) {\n // First change in a drag sequence — push current color to undo\n isDragging.current = true\n setUndoStack((prev) => {\n if (prev[prev.length - 1] === internalColor) return prev\n return [...prev.slice(-19), internalColor]\n })\n }\n setInternalColor(hex)\n onChange?.(hex)\n }\n\n // Called when picker drag ends\n const handlePickerChangeComplete = () => {\n isDragging.current = false\n }\n\n const handleUndo = () => {\n if (undoStack.length === 0) return\n const prev = undoStack[undoStack.length - 1]\n setUndoStack((s) => s.slice(0, -1))\n setInternalColor(prev)\n onChange?.(prev)\n }\n\n const handleReset = () => {\n setInternalColor(openColor)\n onChange?.(openColor)\n setUndoStack([])\n }\n\n // Resolve presets\n const resolvedPresets = presets === false\n ? []\n : presets\n ? presets.map((p) =>\n typeof p === 'string' ? { hex: p, label: p } : p\n )\n : NAMED_PRESETS\n\n // Parsed color values — use internal state\n const rgb = hexToRgb(internalColor)\n const hsl = hexToHsl(internalColor)\n\n // RGB field handlers (clamped 0-255)\n const handleRgbChange = (channel: 'r' | 'g' | 'b', v: string) => {\n if (!rgb) return\n const num = parseInt(v, 10)\n if (isNaN(num)) return\n const clamped = Math.max(0, Math.min(255, num))\n handleDiscreteChange(rgbToHex(\n channel === 'r' ? clamped : rgb.r,\n channel === 'g' ? clamped : rgb.g,\n channel === 'b' ? clamped : rgb.b,\n ))\n }\n\n // HSL field handlers (H: 0-360, S/L: 0-100)\n const handleHslChange = (channel: 'h' | 's' | 'l', v: string) => {\n if (!hsl) return\n const num = parseInt(v, 10)\n if (isNaN(num)) return\n const max = channel === 'h' ? 360 : 100\n const clamped = Math.max(0, Math.min(max, num))\n handleDiscreteChange(hslToHex(\n channel === 'h' ? clamped : hsl.h,\n channel === 's' ? clamped : hsl.s,\n channel === 'l' ? clamped : hsl.l,\n ))\n }\n\n const formats: ColorFormat[] = ['hex', 'rgb', 'hsl']\n\n return (\n <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n <Popover open={open} onOpenChange={handleOpenChange}>\n <PopoverTrigger asChild>\n {variant === 'inline' ? (\n <motion.button\n type=\"button\"\n disabled={disabled}\n className={cn(\n 'group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-ds-sm font-medium',\n 'focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base',\n disabled && 'cursor-not-allowed opacity-50',\n )}\n animate={{\n backgroundColor: internalColor,\n color: isLightColor(internalColor) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)',\n }}\n whileHover={{ y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}\n whileTap={{ scale: 0.97 }}\n transition={springs.smooth}\n aria-label={`Color picker: ${internalColor}`}\n >\n {internalColor.toUpperCase()}\n </motion.button>\n ) : (\n <motion.button\n type=\"button\"\n disabled={disabled}\n className={cn(\n 'group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong',\n 'hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n disabled && 'cursor-not-allowed opacity-50',\n )}\n whileHover={{ scale: 1.02 }}\n whileTap={{ scale: 0.98 }}\n transition={springs.snappy}\n aria-label={`Color picker: ${internalColor}`}\n >\n {/* Gradient background: color → surface */}\n <motion.span\n className=\"absolute inset-0\"\n animate={{\n background: `linear-gradient(to right, ${internalColor} 0%, ${internalColor} 35%, transparent 70%)`,\n }}\n /* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — gradient lerp feel */\n transition={{ duration: 0.3 }}\n />\n <span className=\"absolute inset-0 bg-surface-overlay/60\" style={{\n maskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n }} />\n {/* Hex value */}\n <span className=\"relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg\">\n {internalColor.toUpperCase()}\n </span>\n </motion.button>\n )}\n </PopoverTrigger>\n\n <PopoverContent\n role=\"dialog\"\n aria-label=\"Color picker\"\n align={align}\n sideOffset={8}\n className=\"w-[272px] rounded-overlay-lg border border-surface-border-strong bg-surface-overlay p-0 shadow-floating\"\n >\n <div className=\"flex flex-col\">\n {/* Interactive picker */}\n {showPicker && (\n <div className=\"p-ds-04 pb-ds-03\" onPointerUp={handlePickerChangeComplete} onPointerLeave={handlePickerChangeComplete}>\n <HexColorPicker\n color={internalColor}\n onChange={handleChange}\n className=\"w-full!\"\n style={{ height: 160 }}\n />\n </div>\n )}\n\n {/* Format inputs */}\n <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n {/* Format switcher */}\n <div className=\"mb-ds-03 flex items-center gap-ds-01\">\n {formats.map((f) => (\n <button\n key={f}\n type=\"button\"\n onClick={() => setFormat(f)}\n className={cn(\n 'relative min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors',\n format === f\n ? 'text-accent-11'\n : 'text-surface-fg-muted hover:text-surface-fg',\n )}\n >\n {format === f && (\n <motion.span\n layoutId={`color-input-format-pill-${instanceId}`}\n className=\"absolute inset-0 rounded-control-inner bg-accent-3\"\n transition={springs.snappy}\n />\n )}\n <span className=\"relative z-10\">{f}</span>\n </button>\n ))}\n </div>\n\n {/* Format fields — animated swap */}\n <AnimatePresence mode=\"wait\">\n {format === 'hex' && (\n <motion.div\n key=\"hex\"\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -4 }}\n transition={{ duration: durations.moderate01 }}\n className=\"flex gap-ds-02\"\n >\n <FormatInput\n id={`${instanceId}-hex`}\n label=\"Hex\"\n value={internalColor.replace('#', '').toUpperCase()}\n onChange={(v) => {\n const clean = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)\n if (clean.length === 6) handleDiscreteChange(`#${clean}`)\n }}\n onBlur={() => {\n // Revert display to current color if input is incomplete\n const display = internalColor.replace('#', '').toUpperCase()\n if (display.length !== 6) setInternalColor(internalColor)\n }}\n disabled={disabled}\n maxLength={6}\n prefix=\"#\"\n className=\"flex-1\"\n />\n </motion.div>\n )}\n\n {format === 'rgb' && rgb && (\n <motion.div\n key=\"rgb\"\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -4 }}\n transition={{ duration: durations.moderate01 }}\n className=\"flex gap-ds-02\"\n >\n <FormatInput id={`${instanceId}-r`} label=\"R\" value={String(rgb.r)} onChange={(v) => handleRgbChange('r', v)} disabled={disabled} className=\"flex-1\" />\n <FormatInput id={`${instanceId}-g`} label=\"G\" value={String(rgb.g)} onChange={(v) => handleRgbChange('g', v)} disabled={disabled} className=\"flex-1\" />\n <FormatInput id={`${instanceId}-b`} label=\"B\" value={String(rgb.b)} onChange={(v) => handleRgbChange('b', v)} disabled={disabled} className=\"flex-1\" />\n </motion.div>\n )}\n\n {format === 'hsl' && hsl && (\n <motion.div\n key=\"hsl\"\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -4 }}\n transition={{ duration: durations.moderate01 }}\n className=\"flex gap-ds-02\"\n >\n <FormatInput id={`${instanceId}-h`} label=\"H\" value={String(hsl.h)} onChange={(v) => handleHslChange('h', v)} disabled={disabled} className=\"flex-1\" />\n <FormatInput id={`${instanceId}-s`} label=\"S\" value={String(hsl.s)} onChange={(v) => handleHslChange('s', v)} disabled={disabled} className=\"flex-1\" />\n <FormatInput id={`${instanceId}-l`} label=\"L\" value={String(hsl.l)} onChange={(v) => handleHslChange('l', v)} disabled={disabled} className=\"flex-1\" />\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n\n {/* Preset swatches */}\n {resolvedPresets.length > 0 && (\n <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n <div className=\"flex flex-wrap gap-ds-02\">\n {resolvedPresets.map((preset, i) => {\n const isSelected = internalColor.toLowerCase() === preset.hex.toLowerCase()\n return (\n <motion.button\n key={preset.hex}\n type=\"button\"\n disabled={disabled}\n onClick={() => handleDiscreteChange(preset.hex)}\n initial={{ opacity: 0, scale: 0.8 }}\n animate={{ opacity: 1, scale: isSelected ? 1.15 : 1 }}\n whileHover={{ scale: isSelected ? 1.15 : 1.1 }}\n whileTap={{ scale: 0.9 }}\n transition={{ ...springs.bouncy, delay: i * 0.02 }}\n className={cn(\n 'h-6 w-6 rounded-control-inner border',\n isSelected\n ? 'border-accent-7 ring-2 ring-accent-9/30'\n : 'border-surface-border hover:border-surface-border-strong',\n disabled && 'cursor-not-allowed opacity-50',\n )}\n style={{ backgroundColor: preset.hex }}\n title={preset.label}\n aria-label={`${preset.label}: ${preset.hex}`}\n />\n )\n })}\n </div>\n </div>\n )}\n\n {/* Reset / Undo footer */}\n {(undoStack.length > 0 || internalColor !== openColor) && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: 'auto' }}\n exit={{ opacity: 0, height: 0 }}\n className=\"flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02\"\n >\n {/* Original color preview */}\n <span\n className=\"h-4 w-4 shrink-0 rounded-pill border border-surface-border\"\n style={{ backgroundColor: openColor }}\n title={`Original: ${openColor}`}\n />\n <span className=\"text-ds-xs text-surface-fg-muted\">\n {openColor.toUpperCase()}\n </span>\n <span className=\"flex-1\" />\n {undoStack.length > 0 && (\n <button\n type=\"button\"\n onClick={handleUndo}\n className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg\"\n >\n Undo\n </button>\n )}\n {internalColor !== openColor && (\n <button\n type=\"button\"\n onClick={handleReset}\n className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11\"\n >\n Reset\n </button>\n )}\n </motion.div>\n )}\n </div>\n </PopoverContent>\n </Popover>\n </div>\n )\n },\n)\nColorInput.displayName = 'ColorInput'\n\nexport { ColorInput }\n"],"mappings":"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"}
|
package/dist/ui/color-swatch.js
CHANGED
|
@@ -8,9 +8,9 @@ var a = {
|
|
|
8
8
|
md: "h-4 w-4",
|
|
9
9
|
lg: "h-6 w-6"
|
|
10
10
|
}, o = {
|
|
11
|
-
circle: "rounded-
|
|
11
|
+
circle: "rounded-pill",
|
|
12
12
|
square: "rounded-none",
|
|
13
|
-
rounded: "rounded-
|
|
13
|
+
rounded: "rounded-control-inner"
|
|
14
14
|
}, s = t.forwardRef(({ color: s, size: c = "md", shape: l = "circle", ring: u = !1, copyable: d = !1, checkerboard: f = !1, className: p, style: m, ...h }, g) => {
|
|
15
15
|
let [_, v] = t.useState(!1), y = t.useRef(void 0);
|
|
16
16
|
t.useEffect(() => () => clearTimeout(y.current), []);
|
|
@@ -44,7 +44,7 @@ var a = {
|
|
|
44
44
|
...h,
|
|
45
45
|
children: [w, _ && /* @__PURE__ */ r("span", {
|
|
46
46
|
role: "status",
|
|
47
|
-
className: "absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-
|
|
47
|
+
className: "absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-control-inner bg-surface-overlay px-1.5 py-0.5 text-[10px] font-sans text-surface-fg shadow-floating",
|
|
48
48
|
children: "Copied!"
|
|
49
49
|
})]
|
|
50
50
|
}) : /* @__PURE__ */ r("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-swatch.js","names":[],"sources":["../../src/ui/color-swatch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nconst sizeMap = {\n sm: 'h-3 w-3',\n md: 'h-4 w-4',\n lg: 'h-6 w-6',\n} as const\n\nconst shapeMap = {\n circle: 'rounded-
|
|
1
|
+
{"version":3,"file":"color-swatch.js","names":[],"sources":["../../src/ui/color-swatch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nconst sizeMap = {\n sm: 'h-3 w-3',\n md: 'h-4 w-4',\n lg: 'h-6 w-6',\n} as const\n\nconst shapeMap = {\n circle: 'rounded-pill',\n square: 'rounded-none',\n rounded: 'rounded-control-inner',\n} as const\n\n/**\n * A tiny color swatch for displaying dynamic runtime colors (e.g. brand colors from a database).\n *\n * @example\n * <ColorSwatch color=\"#FF5733\" />\n * <ColorSwatch color={org.brandColor} size=\"lg\" ring />\n * <ColorSwatch color=\"rgba(0,0,0,0.5)\" checkerboard copyable />\n */\nexport interface ColorSwatchProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Any valid CSS color string (hex, rgb, oklch, etc.) */\n color: string\n /** @default 'md' */\n size?: 'sm' | 'md' | 'lg'\n /** @default 'circle' */\n shape?: 'circle' | 'square' | 'rounded'\n /** Show subtle ring border — useful for light colors that blend into the background */\n ring?: boolean\n /** Render as a button that copies the color string to clipboard on click */\n copyable?: boolean\n /** Show a checkerboard pattern behind the color — useful for transparent colors */\n checkerboard?: boolean\n}\n\nconst ColorSwatch = React.forwardRef<HTMLSpanElement, ColorSwatchProps>(\n ({ color, size = 'md', shape = 'circle', ring = false, copyable = false, checkerboard = false, className, style, ...props }, ref) => {\n const [copied, setCopied] = React.useState(false)\n const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n React.useEffect(() => () => clearTimeout(timerRef.current), [])\n\n const sharedClasses = cn(\n 'inline-block shrink-0 relative',\n sizeMap[size],\n shapeMap[shape],\n ring && 'shadow-ring-sm',\n copyable && 'cursor-pointer',\n className,\n )\n\n const checkerboardStyle: React.CSSProperties = checkerboard\n ? {\n backgroundImage: `repeating-conic-gradient(var(--color-neutral-5) 0% 25%, transparent 0% 50%)`,\n backgroundSize: '8px 8px',\n }\n : {}\n\n const colorOverlayStyle: React.CSSProperties = {\n backgroundColor: color,\n ...style,\n }\n\n function handleCopy() {\n navigator.clipboard.writeText(color).then(() => {\n setCopied(true)\n timerRef.current = setTimeout(() => setCopied(false), 1500)\n })\n }\n\n const inner = checkerboard ? (\n <>\n <span\n className={cn('absolute inset-0', shapeMap[shape])}\n style={checkerboardStyle}\n aria-hidden=\"true\"\n />\n <span\n className={cn('absolute inset-0', shapeMap[shape])}\n style={colorOverlayStyle}\n />\n </>\n ) : null\n\n if (copyable) {\n return (\n <button\n type=\"button\"\n ref={ref as React.Ref<HTMLButtonElement>}\n className={sharedClasses}\n style={checkerboard ? {} : colorOverlayStyle}\n onClick={handleCopy}\n aria-label={`Copy color ${color}`}\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n >\n {inner}\n {copied && (\n <span\n role=\"status\"\n className=\"absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-control-inner bg-surface-overlay px-1.5 py-0.5 text-[10px] font-sans text-surface-fg shadow-floating\"\n >\n Copied!\n </span>\n )}\n </button>\n )\n }\n\n return (\n <span\n ref={ref}\n className={sharedClasses}\n style={checkerboard ? {} : colorOverlayStyle}\n role=\"presentation\"\n {...props}\n >\n {inner}\n </span>\n )\n },\n)\nColorSwatch.displayName = 'ColorSwatch'\n\nexport { ColorSwatch }\n"],"mappings":";;;;;AAMA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAW;CACf,QAAQ;CACR,QAAQ;CACR,SAAS;CACV,EAyBK,IAAc,EAAM,YACvB,EAAE,UAAO,UAAO,MAAM,WAAQ,UAAU,UAAO,IAAO,cAAW,IAAO,kBAAe,IAAO,cAAW,UAAO,GAAG,KAAS,MAAQ;CACnI,IAAM,CAAC,GAAQ,KAAa,EAAM,SAAS,GAAM,EAC3C,IAAW,EAAM,OAAkD,KAAA,EAAU;AACnF,GAAM,sBAAsB,aAAa,EAAS,QAAQ,EAAE,EAAE,CAAC;CAE/D,IAAM,IAAgB,EACpB,kCACA,EAAQ,IACR,EAAS,IACT,KAAQ,kBACR,KAAY,kBACZ,EACD,EAEK,IAAyC,IAC3C;EACE,iBAAiB;EACjB,gBAAgB;EACjB,GACD,EAAE,EAEA,IAAyC;EAC7C,iBAAiB;EACjB,GAAG;EACJ;CAED,SAAS,IAAa;AACpB,YAAU,UAAU,UAAU,EAAM,CAAC,WAAW;AAE9C,GADA,EAAU,GAAK,EACf,EAAS,UAAU,iBAAiB,EAAU,GAAM,EAAE,KAAK;IAC3D;;CAGJ,IAAM,IAAQ,IACZ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;EACE,WAAW,EAAG,oBAAoB,EAAS,GAAO;EAClD,OAAO;EACP,eAAY;EACZ,CAAA,EACF,kBAAC,QAAD;EACE,WAAW,EAAG,oBAAoB,EAAS,GAAO;EAClD,OAAO;EACP,CAAA,CACD,EAAA,CAAA,GACD;AA0BJ,QAxBI,IAEA,kBAAC,UAAD;EACE,MAAK;EACA;EACL,WAAW;EACX,OAAO,IAAe,EAAE,GAAG;EAC3B,SAAS;EACT,cAAY,cAAc;EAC1B,GAAK;YAPP,CASG,GACA,KACC,kBAAC,QAAD;GACE,MAAK;GACL,WAAU;aACX;GAEM,CAAA,CAEF;MAKX,kBAAC,QAAD;EACO;EACL,WAAW;EACX,OAAO,IAAe,EAAE,GAAG;EAC3B,MAAK;EACL,GAAI;YAEH;EACI,CAAA;EAGZ;AACD,EAAY,cAAc"}
|
package/dist/ui/combobox.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { IconInput } from './lib/icon-input';
|
|
3
4
|
import * as React from 'react';
|
|
4
5
|
export declare const comboboxTriggerVariants: (props?: ({
|
|
5
6
|
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
@@ -13,7 +14,7 @@ export interface ComboboxOption {
|
|
|
13
14
|
value: string;
|
|
14
15
|
label: string;
|
|
15
16
|
description?: string;
|
|
16
|
-
icon?:
|
|
17
|
+
icon?: IconInput;
|
|
17
18
|
disabled?: boolean;
|
|
18
19
|
}
|
|
19
20
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAKjD,eAAO,MAAM,uBAAuB;;8EAmBnC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AA0B5F;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,UAAU,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxF,+CAA+C;IAC/C,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,oGAAoG;IACpG,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E,4FAA4F;IAC5F,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iFAAiF;IACjF,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,UAAU,qBAAsB,SAAQ,iBAAiB;IACvD,QAAQ,EAAE,IAAI,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAA;AAQvE,QAAA,MAAM,QAAQ,yFAiZb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|