@refraction-ui/react 0.21.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-ZF3OHCGV.js → chunk-2Q6HHFAN.js} +1 -1
- package/dist/chunk-2Q6HHFAN.js.map +7 -0
- package/dist/{chunk-533MCMSU.js → chunk-3I3DYDHR.js} +2 -2
- package/dist/{chunk-H54FLNAF.js → chunk-63N4PZUJ.js} +2 -2
- package/dist/chunk-7P7EJ56S.js +7 -0
- package/dist/{chunk-Y2FNNAIL.js → chunk-EGVPAMQU.js} +2 -2
- package/dist/chunk-EGVPAMQU.js.map +1 -0
- package/dist/{chunk-WK2IIUFO.js → chunk-QDMLIDYN.js} +2 -2
- package/dist/{chunk-BOLFYVI6.js → chunk-QPCKJ2YR.js} +2 -2
- package/dist/{chunk-TOZBR4GL.js → chunk-RSWOLRIC.js} +4 -4
- package/dist/{chunk-TOZBR4GL.js.map → chunk-RSWOLRIC.js.map} +1 -1
- package/dist/{chunk-UNEM2TRI.js → chunk-SDAJVXD4.js} +2 -2
- package/dist/{chunk-VK3EQ34F.js → chunk-V24GDHUX.js} +2 -2
- package/dist/{chunk-XWP763SH.js → chunk-V727VZOE.js} +4 -2
- package/dist/{chunk-XWP763SH.js.map → chunk-V727VZOE.js.map} +2 -2
- package/dist/{chunk-AMK4VCBG.js → chunk-WYKPPK3W.js} +2 -2
- package/dist/{chunk-ONACRMG4.js → chunk-XMFNBOPO.js} +2 -2
- package/dist/{chunk-NKCWOPNX.js → chunk-Z5IHYNQD.js} +12 -8
- package/dist/chunk-Z5IHYNQD.js.map +7 -0
- package/dist/faro-engine-VIUXJAPH-FSARIABU.js +3 -0
- package/dist/{faro-engine-47HGRAQH-JKINJPMH.js.map → faro-engine-VIUXJAPH-FSARIABU.js.map} +1 -1
- package/dist/form.cjs.map +1 -1
- package/dist/form.js +1 -1
- package/dist/index.cjs +1305 -302
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +7 -0
- package/dist/internal/action-list/index.d.ts +39 -0
- package/dist/internal/avatar/index.d.cts +4 -1
- package/dist/internal/avatar/index.d.ts +4 -1
- package/dist/internal/button/index.d.cts +2 -2
- package/dist/internal/button/index.d.ts +2 -2
- package/dist/internal/card/index.d.cts +5 -1
- package/dist/internal/card/index.d.ts +5 -1
- package/dist/internal/data-table/index.d.cts +48 -3
- package/dist/internal/data-table/index.d.ts +48 -3
- package/dist/internal/funnel-chart/index.d.ts +60 -0
- package/dist/internal/line-chart/index.d.ts +124 -0
- package/dist/internal/native-select/index.d.ts +21 -0
- package/dist/internal/page-header/index.d.ts +35 -0
- package/dist/internal/react-action-list/index.d.ts +28 -0
- package/dist/internal/react-avatar/index.d.cts +4 -2
- package/dist/internal/react-avatar/index.d.ts +4 -2
- package/dist/internal/react-card/index.d.cts +10 -4
- package/dist/internal/react-card/index.d.ts +10 -4
- package/dist/internal/react-command/index.d.cts +13 -2
- package/dist/internal/react-command/index.d.ts +13 -2
- package/dist/internal/react-data-table/index.d.cts +27 -9
- package/dist/internal/react-data-table/index.d.ts +27 -9
- package/dist/internal/react-dialog/index.d.cts +5 -0
- package/dist/internal/react-dialog/index.d.ts +5 -0
- package/dist/internal/react-dropdown-menu/index.d.cts +19 -1
- package/dist/internal/react-dropdown-menu/index.d.ts +19 -1
- package/dist/internal/react-funnel-chart/index.d.ts +28 -0
- package/dist/internal/react-line-chart/index.d.ts +38 -0
- package/dist/internal/react-native-select/index.d.ts +19 -0
- package/dist/internal/react-page-header/index.d.ts +23 -0
- package/dist/internal/react-select/index.d.cts +21 -3
- package/dist/internal/react-select/index.d.ts +21 -3
- package/dist/internal/react-stat-grid/index.d.ts +22 -11
- package/dist/internal/react-table/index.d.ts +39 -0
- package/dist/internal/select/index.d.cts +14 -1
- package/dist/internal/select/index.d.ts +14 -1
- package/dist/internal/shared/index.d.cts +6 -3
- package/dist/internal/shared/index.d.ts +6 -3
- package/dist/internal/stat-grid/index.d.ts +49 -7
- package/dist/internal/table/index.d.ts +46 -0
- package/dist/internal/tabs/index.d.cts +8 -1
- package/dist/internal/tabs/index.d.ts +8 -1
- package/dist/react-accordion.js +1 -1
- package/dist/react-action-list.js +74 -0
- package/dist/react-action-list.js.map +7 -0
- package/dist/react-ai.js +1 -1
- package/dist/react-analytics.js +16 -4
- package/dist/react-analytics.js.map +2 -2
- package/dist/react-animated-text.js +1 -1
- package/dist/react-app-shell.js +1 -1
- package/dist/react-audience-feature-card.js +1 -1
- package/dist/react-audio-room.js +1 -1
- package/dist/react-auth.js +1 -1
- package/dist/react-avatar-group.js +1 -1
- package/dist/react-avatar.js +13 -9
- package/dist/react-avatar.js.map +2 -2
- package/dist/react-badge.js +2 -2
- package/dist/react-badge.js.map +1 -1
- package/dist/react-bottom-nav.js +1 -1
- package/dist/react-brand-network-cell.js +1 -1
- package/dist/react-breadcrumbs.js +1 -1
- package/dist/react-browser-chrome-mock.js +1 -1
- package/dist/react-button.js +3 -3
- package/dist/react-calendar.js +1 -1
- package/dist/react-call-controls.js +1 -1
- package/dist/react-callout.js +8 -3
- package/dist/react-callout.js.map +2 -2
- package/dist/react-card-grid.js +1 -1
- package/dist/react-card.js +5 -5
- package/dist/react-card.js.map +2 -2
- package/dist/react-carousel.js +1 -1
- package/dist/react-charts.js +1 -1
- package/dist/react-checkbox.js +1 -1
- package/dist/react-checklist.js +1 -1
- package/dist/react-code-block.js +1 -1
- package/dist/react-code-editor.js +1 -1
- package/dist/react-collapsible.js +1 -1
- package/dist/react-combobox.js +1 -1
- package/dist/react-command-input.js +1 -1
- package/dist/react-command.js +115 -70
- package/dist/react-command.js.map +3 -3
- package/dist/react-composer.js +3 -3
- package/dist/react-content-protection.js +1 -1
- package/dist/react-conversation.js +5 -5
- package/dist/react-cookie-consent.js +1 -1
- package/dist/react-data-table.js +125 -114
- package/dist/react-data-table.js.map +2 -2
- package/dist/react-date-picker.js +1 -1
- package/dist/react-device-frame.js +1 -1
- package/dist/react-dialog.js +33 -9
- package/dist/react-dialog.js.map +2 -2
- package/dist/react-diff-viewer.js +1 -1
- package/dist/react-dropdown-menu.js +61 -8
- package/dist/react-dropdown-menu.js.map +3 -3
- package/dist/react-editor-status-bar.js +1 -1
- package/dist/react-editor-tabs.js +1 -1
- package/dist/react-emoji-picker.js +2 -2
- package/dist/react-empty-state.js +1 -1
- package/dist/react-feedback-dialog.js +2 -2
- package/dist/react-file-tree.js +1 -1
- package/dist/react-file-upload.js +1 -1
- package/dist/react-floating-reactions.js +1 -1
- package/dist/react-flow-editor.js +2 -2
- package/dist/react-footer.js +1 -1
- package/dist/react-funnel-chart.js +105 -0
- package/dist/react-funnel-chart.js.map +7 -0
- package/dist/react-graph-view.js +2 -2
- package/dist/react-infinite-canvas.js +2 -2
- package/dist/react-inline-editor.js +1 -1
- package/dist/react-input-group.js +1 -1
- package/dist/react-input.js +2 -2
- package/dist/react-install-prompt.js +1 -1
- package/dist/react-kanban-board.js +1 -1
- package/dist/react-keyboard-shortcut.js +2 -2
- package/dist/react-language-selector.js +1 -1
- package/dist/react-line-chart.js +280 -0
- package/dist/react-line-chart.js.map +7 -0
- package/dist/react-link-card.js +1 -1
- package/dist/react-live-captions.js +1 -1
- package/dist/react-live-cursors.js +1 -1
- package/dist/react-live-transcript.js +1 -1
- package/dist/react-location-selector.js +1 -1
- package/dist/react-logger.js +3 -3
- package/dist/react-markdown-renderer.js +2 -2
- package/dist/react-marquee-strip.js +1 -1
- package/dist/react-mascot.js +1 -1
- package/dist/react-mastery-bar.js +1 -1
- package/dist/react-mini-map.js +1 -1
- package/dist/react-mobile-nav.js +1 -1
- package/dist/react-native-select.js +52 -0
- package/dist/react-native-select.js.map +7 -0
- package/dist/react-navbar.js +1 -1
- package/dist/react-numbered-steps.js +1 -1
- package/dist/react-otp-input.js +1 -1
- package/dist/react-page-header.js +40 -0
- package/dist/react-page-header.js.map +7 -0
- package/dist/react-pagination.js +1 -1
- package/dist/react-password-input.js +2 -2
- package/dist/react-payment.js +1 -1
- package/dist/react-popover.js +1 -1
- package/dist/react-pre-call-lobby.js +1 -1
- package/dist/react-presence-indicator.js +1 -1
- package/dist/react-pricing-card.js +1 -1
- package/dist/react-progress-display.js +2 -2
- package/dist/react-progress-display.js.map +1 -1
- package/dist/react-radial-gauge.js +1 -1
- package/dist/react-radio.js +1 -1
- package/dist/react-rating-scale.js +1 -1
- package/dist/react-reaction-bar.js +1 -1
- package/dist/react-resizable-layout.js +1 -1
- package/dist/react-search-bar.js +1 -1
- package/dist/react-section-head.js +1 -1
- package/dist/react-segmented-control.js +1 -1
- package/dist/react-select.js +94 -20
- package/dist/react-select.js.map +3 -3
- package/dist/react-separator.js +1 -1
- package/dist/react-sheet.js +1 -1
- package/dist/react-sidebar.js +1 -1
- package/dist/react-skeleton.js +1 -1
- package/dist/react-skip-to-content.js +1 -1
- package/dist/react-slide-viewer.js +1 -1
- package/dist/react-slider.js +1 -1
- package/dist/react-slot-picker.js +1 -1
- package/dist/react-social-auth-button.js +3 -3
- package/dist/react-sortable-list.js +1 -1
- package/dist/react-stat-grid.js +91 -22
- package/dist/react-stat-grid.js.map +2 -2
- package/dist/react-status-indicator.js +1 -1
- package/dist/react-steps.js +1 -1
- package/dist/react-sticky-note.js +1 -1
- package/dist/react-switch.js +1 -1
- package/dist/react-table-of-contents.js +1 -1
- package/dist/react-table.js +148 -0
- package/dist/react-table.js.map +7 -0
- package/dist/react-tabs.js +84 -7
- package/dist/react-tabs.js.map +2 -2
- package/dist/react-terminal.js +1 -1
- package/dist/react-test-results.js +1 -1
- package/dist/react-textarea.js +3 -3
- package/dist/react-textarea.js.map +1 -1
- package/dist/react-thread-view.js +2 -2
- package/dist/react-timeline.js +1 -1
- package/dist/react-toast.js +1 -1
- package/dist/react-tooltip.js +1 -1
- package/dist/react-version-selector.js +1 -1
- package/dist/react-video-grid.js +2 -2
- package/dist/react-video-player.js +1 -1
- package/dist/react-video-tile.js +2 -2
- package/dist/react-voice-pill.js +1 -1
- package/dist/react-waveform.js +1 -1
- package/dist/react-wizard.js +1 -1
- package/dist/theme.js +1 -1
- package/package.json +7 -1
- package/dist/chunk-NKCWOPNX.js.map +0 -7
- package/dist/chunk-SDZ3LROZ.js +0 -7
- package/dist/chunk-Y2FNNAIL.js.map +0 -1
- package/dist/chunk-ZF3OHCGV.js.map +0 -7
- package/dist/faro-engine-47HGRAQH-JKINJPMH.js +0 -3
- /package/dist/{chunk-533MCMSU.js.map → chunk-3I3DYDHR.js.map} +0 -0
- /package/dist/{chunk-H54FLNAF.js.map → chunk-63N4PZUJ.js.map} +0 -0
- /package/dist/{chunk-SDZ3LROZ.js.map → chunk-7P7EJ56S.js.map} +0 -0
- /package/dist/{chunk-WK2IIUFO.js.map → chunk-QDMLIDYN.js.map} +0 -0
- /package/dist/{chunk-BOLFYVI6.js.map → chunk-QPCKJ2YR.js.map} +0 -0
- /package/dist/{chunk-UNEM2TRI.js.map → chunk-SDAJVXD4.js.map} +0 -0
- /package/dist/{chunk-VK3EQ34F.js.map → chunk-V24GDHUX.js.map} +0 -0
- /package/dist/{chunk-AMK4VCBG.js.map → chunk-WYKPPK3W.js.map} +0 -0
- /package/dist/{chunk-ONACRMG4.js.map → chunk-XMFNBOPO.js.map} +0 -0
package/dist/react-payment.js
CHANGED
package/dist/react-popover.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
cn,
|
|
3
3
|
cva
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-2Q6HHFAN.js";
|
|
5
5
|
|
|
6
6
|
// ../react-progress-display/dist/index.js
|
|
7
7
|
import * as React from "react";
|
|
@@ -80,7 +80,7 @@ var badgeItemVariants = cva({
|
|
|
80
80
|
}
|
|
81
81
|
});
|
|
82
82
|
var progressBarVariants = cva({
|
|
83
|
-
base: "
|
|
83
|
+
base: "w-full overflow-hidden rounded-full bg-secondary",
|
|
84
84
|
variants: {
|
|
85
85
|
size: {
|
|
86
86
|
sm: "h-1",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../progress-display/src/progress-display.ts", "../../progress-display/src/progress-display.styles.ts", "../../react-progress-display/src/progress-display.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface StatCardData {\n label: string\n value: number\n icon?: string\n color?: string\n}\n\nexport interface BadgeData {\n name: string\n description: string\n icon: string\n unlockedAt?: string\n isUnlocked: boolean\n}\n\nexport interface ProgressDisplayProps {\n stats: StatCardData[]\n badges: BadgeData[]\n level?: number\n accuracy?: number\n}\n\nexport interface ProgressDisplayAPI {\n /** The computed stats array */\n stats: StatCardData[]\n /** The badges array */\n badges: BadgeData[]\n /** ARIA props for the stats region */\n ariaProps: Partial<AccessibilityProps>\n /** Get ARIA props for a specific badge */\n getBadgeAriaProps: (badge: BadgeData) => Partial<AccessibilityProps>\n}\n\nexport function createProgressDisplay(props: ProgressDisplayProps): ProgressDisplayAPI {\n const { stats, badges } = props\n\n const ariaProps: Partial<AccessibilityProps> = {\n role: 'region',\n 'aria-label': 'Progress statistics',\n }\n\n function getBadgeAriaProps(badge: BadgeData): Partial<AccessibilityProps> {\n const label = badge.isUnlocked\n ? `${badge.name}: ${badge.description}`\n : `${badge.name}: ${badge.description} (locked)`\n\n return {\n 'aria-label': label,\n }\n }\n\n return {\n stats,\n badges,\n ariaProps,\n getBadgeAriaProps,\n }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const statsGridVariants = cva({\n base: 'grid gap-4',\n variants: {\n columns: {\n '2': 'grid-cols-2',\n '3': 'grid-cols-3',\n '4': 'grid-cols-4',\n },\n },\n defaultVariants: {\n columns: '3',\n },\n})\n\nexport const statCardVariants = cva({\n base: 'rounded-lg border p-4 text-center shadow-sm',\n variants: {\n color: {\n default: 'bg-card text-card-foreground',\n primary: 'bg-primary/10 text-primary border-primary/20',\n success: 'bg-success/10 text-success border-success/20',\n warning: 'bg-warning/10 text-warning border-warning/20',\n destructive: 'bg-destructive/10 text-destructive border-destructive/20',\n },\n },\n defaultVariants: {\n color: 'default',\n },\n})\n\nexport const badgeGridVariants = cva({\n base: 'grid gap-4',\n variants: {\n columns: {\n '3': 'grid-cols-3',\n '4': 'grid-cols-4',\n '5': 'grid-cols-5',\n },\n },\n defaultVariants: {\n columns: '4',\n },\n})\n\nexport const badgeItemVariants = cva({\n base: 'flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-opacity',\n variants: {\n state: {\n unlocked: 'opacity-100 bg-card',\n locked: 'opacity-50 bg-muted grayscale',\n },\n },\n defaultVariants: {\n state: 'locked',\n },\n})\n\nexport const progressBarVariants = cva({\n base: '
|
|
4
|
+
"sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface StatCardData {\n label: string\n value: number\n icon?: string\n color?: string\n}\n\nexport interface BadgeData {\n name: string\n description: string\n icon: string\n unlockedAt?: string\n isUnlocked: boolean\n}\n\nexport interface ProgressDisplayProps {\n stats: StatCardData[]\n badges: BadgeData[]\n level?: number\n accuracy?: number\n}\n\nexport interface ProgressDisplayAPI {\n /** The computed stats array */\n stats: StatCardData[]\n /** The badges array */\n badges: BadgeData[]\n /** ARIA props for the stats region */\n ariaProps: Partial<AccessibilityProps>\n /** Get ARIA props for a specific badge */\n getBadgeAriaProps: (badge: BadgeData) => Partial<AccessibilityProps>\n}\n\nexport function createProgressDisplay(props: ProgressDisplayProps): ProgressDisplayAPI {\n const { stats, badges } = props\n\n const ariaProps: Partial<AccessibilityProps> = {\n role: 'region',\n 'aria-label': 'Progress statistics',\n }\n\n function getBadgeAriaProps(badge: BadgeData): Partial<AccessibilityProps> {\n const label = badge.isUnlocked\n ? `${badge.name}: ${badge.description}`\n : `${badge.name}: ${badge.description} (locked)`\n\n return {\n 'aria-label': label,\n }\n }\n\n return {\n stats,\n badges,\n ariaProps,\n getBadgeAriaProps,\n }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const statsGridVariants = cva({\n base: 'grid gap-4',\n variants: {\n columns: {\n '2': 'grid-cols-2',\n '3': 'grid-cols-3',\n '4': 'grid-cols-4',\n },\n },\n defaultVariants: {\n columns: '3',\n },\n})\n\nexport const statCardVariants = cva({\n base: 'rounded-lg border p-4 text-center shadow-sm',\n variants: {\n color: {\n default: 'bg-card text-card-foreground',\n primary: 'bg-primary/10 text-primary border-primary/20',\n success: 'bg-success/10 text-success border-success/20',\n warning: 'bg-warning/10 text-warning border-warning/20',\n destructive: 'bg-destructive/10 text-destructive border-destructive/20',\n },\n },\n defaultVariants: {\n color: 'default',\n },\n})\n\nexport const badgeGridVariants = cva({\n base: 'grid gap-4',\n variants: {\n columns: {\n '3': 'grid-cols-3',\n '4': 'grid-cols-4',\n '5': 'grid-cols-5',\n },\n },\n defaultVariants: {\n columns: '4',\n },\n})\n\nexport const badgeItemVariants = cva({\n base: 'flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-opacity',\n variants: {\n state: {\n unlocked: 'opacity-100 bg-card',\n locked: 'opacity-50 bg-muted grayscale',\n },\n },\n defaultVariants: {\n state: 'locked',\n },\n})\n\nexport const progressBarVariants = cva({\n base: 'w-full overflow-hidden rounded-full bg-secondary',\n variants: {\n size: {\n sm: 'h-1',\n md: 'h-2',\n lg: 'h-3',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n})\n", "import * as React from 'react'\nimport {\n createProgressDisplay,\n statsGridVariants,\n statCardVariants,\n badgeGridVariants,\n badgeItemVariants,\n progressBarVariants,\n type StatCardData,\n type BadgeData,\n} from '@refraction-ui/progress-display'\nimport { cn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/* StatsGrid */\n/* ------------------------------------------------------------------ */\n\nexport interface StatsGridProps extends React.HTMLAttributes<HTMLDivElement> {\n stats: StatCardData[]\n badges?: BadgeData[]\n}\n\nexport const StatsGrid = React.forwardRef<HTMLDivElement, StatsGridProps>(\n function StatsGrid({ stats, badges = [], className, ...props }, ref) {\n const api = createProgressDisplay({ stats, badges })\n\n return (\n <div\n ref={ref}\n className={cn(statsGridVariants(), className)}\n {...api.ariaProps}\n {...props}\n >\n {api.stats.map((stat) => (\n <div\n key={stat.label}\n className={statCardVariants({\n color: (stat.color as 'default' | 'primary' | 'success' | 'warning' | 'destructive') ?? 'default',\n })}\n >\n {stat.icon && <span className=\"text-2xl\">{stat.icon}</span>}\n <div className=\"text-2xl font-bold\">{stat.value}</div>\n <div className=\"text-sm text-muted-foreground\">{stat.label}</div>\n </div>\n ))}\n </div>\n )\n },\n)\n\n/* ------------------------------------------------------------------ */\n/* ProgressBar */\n/* ------------------------------------------------------------------ */\n\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n value: number\n max?: number\n size?: 'sm' | 'md' | 'lg'\n}\n\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n function ProgressBar({ value, max = 100, size, className, ...props }, ref) {\n const percent = Math.min(100, Math.max(0, (value / max) * 100))\n\n return (\n <div\n ref={ref}\n className={cn(progressBarVariants({ size }), className)}\n role=\"progressbar\"\n aria-valuenow={value}\n aria-valuemin={0}\n aria-valuemax={max}\n {...props}\n >\n <div\n className=\"h-full rounded-full bg-primary transition-all\"\n style={{ width: `${percent}%` }}\n />\n </div>\n )\n },\n)\n\n/* ------------------------------------------------------------------ */\n/* BadgeDisplay */\n/* ------------------------------------------------------------------ */\n\nexport interface BadgeDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n badges: BadgeData[]\n}\n\nexport const BadgeDisplay = React.forwardRef<HTMLDivElement, BadgeDisplayProps>(\n function BadgeDisplay({ badges, className, ...props }, ref) {\n const api = createProgressDisplay({ stats: [], badges })\n\n return (\n <div\n ref={ref}\n className={cn(badgeGridVariants(), className)}\n {...props}\n >\n {api.badges.map((badge) => (\n <div\n key={badge.name}\n className={badgeItemVariants({\n state: badge.isUnlocked ? 'unlocked' : 'locked',\n })}\n {...api.getBadgeAriaProps(badge)}\n >\n <span className=\"text-3xl\">{badge.icon}</span>\n <span className=\"font-medium\">{badge.name}</span>\n {!badge.isUnlocked && (\n <span className=\"text-xs text-muted-foreground\">Locked</span>\n )}\n </div>\n ))}\n </div>\n )\n },\n)\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["StatsGrid", "ProgressBar", "BadgeDisplay"]
|
|
7
7
|
}
|
package/dist/react-radio.js
CHANGED
package/dist/react-search-bar.js
CHANGED
package/dist/react-select.js
CHANGED
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
cva,
|
|
5
5
|
devWarn,
|
|
6
6
|
generateId
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-2Q6HHFAN.js";
|
|
8
8
|
|
|
9
9
|
// ../react-select/dist/index.js
|
|
10
10
|
import * as React from "react";
|
|
@@ -20,13 +20,12 @@ function createSelect(props = {}) {
|
|
|
20
20
|
} = props;
|
|
21
21
|
const isInteractive = !disabled;
|
|
22
22
|
const selectedOption = options.find((o) => o.value === value);
|
|
23
|
-
const triggerId = generateId("select-trigger");
|
|
24
|
-
const contentId = generateId("select-content");
|
|
23
|
+
const triggerId = props.ids?.trigger ?? generateId("select-trigger");
|
|
24
|
+
const contentId = props.ids?.content ?? generateId("select-content");
|
|
25
25
|
const triggerAriaProps = {
|
|
26
26
|
role: "combobox",
|
|
27
27
|
"aria-expanded": open,
|
|
28
|
-
"aria-controls": contentId
|
|
29
|
-
"aria-labelledby": triggerId
|
|
28
|
+
"aria-controls": contentId
|
|
30
29
|
};
|
|
31
30
|
if (disabled) {
|
|
32
31
|
triggerAriaProps["aria-disabled"] = true;
|
|
@@ -108,7 +107,7 @@ var selectTokens = {
|
|
|
108
107
|
}
|
|
109
108
|
};
|
|
110
109
|
var selectTriggerVariants = cva({
|
|
111
|
-
base: "flex
|
|
110
|
+
base: "flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
112
111
|
variants: {
|
|
113
112
|
size: {
|
|
114
113
|
sm: "h-8 text-xs",
|
|
@@ -121,10 +120,10 @@ var selectTriggerVariants = cva({
|
|
|
121
120
|
}
|
|
122
121
|
});
|
|
123
122
|
var selectContentVariants = cva({
|
|
124
|
-
base: "
|
|
123
|
+
base: "absolute left-0 top-full z-50 mt-1 max-h-96 w-full min-w-[8rem] overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
|
|
125
124
|
variants: {
|
|
126
125
|
position: {
|
|
127
|
-
popper: "
|
|
126
|
+
popper: "",
|
|
128
127
|
"item-aligned": ""
|
|
129
128
|
}
|
|
130
129
|
},
|
|
@@ -144,6 +143,8 @@ var selectItemVariants = cva({
|
|
|
144
143
|
selected: "false"
|
|
145
144
|
}
|
|
146
145
|
});
|
|
146
|
+
var selectRootClass = "relative";
|
|
147
|
+
var selectValueClass = "truncate text-left data-[placeholder]:text-muted-foreground";
|
|
147
148
|
|
|
148
149
|
// ../react-select/dist/index.js
|
|
149
150
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
@@ -159,7 +160,10 @@ var SelectContext = React.createContext({
|
|
|
159
160
|
disabled: false,
|
|
160
161
|
placeholder: "Select an option",
|
|
161
162
|
triggerId: "",
|
|
162
|
-
contentId: ""
|
|
163
|
+
contentId: "",
|
|
164
|
+
labels: /* @__PURE__ */ new Map(),
|
|
165
|
+
registerLabel: () => {
|
|
166
|
+
}
|
|
163
167
|
});
|
|
164
168
|
function useSelectContext(part) {
|
|
165
169
|
const ctx = React.useContext(SelectContext);
|
|
@@ -171,22 +175,70 @@ function useSelectContext(part) {
|
|
|
171
175
|
}
|
|
172
176
|
return ctx;
|
|
173
177
|
}
|
|
178
|
+
function collectItemLabels(node, into) {
|
|
179
|
+
React.Children.forEach(node, (child) => {
|
|
180
|
+
if (!React.isValidElement(child)) return;
|
|
181
|
+
if (child.type === SelectItem && typeof child.props.value === "string") {
|
|
182
|
+
into.set(child.props.value, child.props.children);
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
collectItemLabels(child.props.children, into);
|
|
186
|
+
});
|
|
187
|
+
return into;
|
|
188
|
+
}
|
|
174
189
|
function Select({
|
|
175
|
-
value,
|
|
190
|
+
value: controlledValue,
|
|
191
|
+
defaultValue,
|
|
176
192
|
onValueChange,
|
|
177
193
|
disabled = false,
|
|
178
194
|
children,
|
|
179
|
-
placeholder = "Select an option"
|
|
195
|
+
placeholder = "Select an option",
|
|
196
|
+
className
|
|
180
197
|
}) {
|
|
181
198
|
const [open, setOpen] = React.useState(false);
|
|
182
|
-
const
|
|
199
|
+
const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
|
|
200
|
+
const isControlled = controlledValue !== void 0;
|
|
201
|
+
const value = isControlled ? controlledValue : uncontrolledValue;
|
|
202
|
+
const rootRef = React.useRef(null);
|
|
203
|
+
const baseId = React.useId();
|
|
204
|
+
const triggerId = `${baseId}-trigger`;
|
|
205
|
+
const contentId = `${baseId}-content`;
|
|
206
|
+
const [registered, setRegistered] = React.useState(
|
|
207
|
+
() => /* @__PURE__ */ new Map()
|
|
208
|
+
);
|
|
209
|
+
const registerLabel = React.useCallback((itemValue, label) => {
|
|
210
|
+
setRegistered((prev) => {
|
|
211
|
+
if (prev.get(itemValue) === label) return prev;
|
|
212
|
+
const next = new Map(prev);
|
|
213
|
+
next.set(itemValue, label);
|
|
214
|
+
return next;
|
|
215
|
+
});
|
|
216
|
+
}, []);
|
|
217
|
+
const labels = React.useMemo(
|
|
218
|
+
() => collectItemLabels(children, new Map(registered)),
|
|
219
|
+
[children, registered]
|
|
220
|
+
);
|
|
221
|
+
React.useEffect(() => {
|
|
222
|
+
if (!open) return;
|
|
223
|
+
const onPointerDown = (event) => {
|
|
224
|
+
if (rootRef.current && !rootRef.current.contains(event.target)) setOpen(false);
|
|
225
|
+
};
|
|
226
|
+
document.addEventListener("pointerdown", onPointerDown);
|
|
227
|
+
return () => document.removeEventListener("pointerdown", onPointerDown);
|
|
228
|
+
}, [open]);
|
|
229
|
+
const handleValueChange = React.useCallback(
|
|
230
|
+
(next) => {
|
|
231
|
+
if (!isControlled) setUncontrolledValue(next);
|
|
232
|
+
onValueChange?.(next);
|
|
233
|
+
},
|
|
234
|
+
[isControlled, onValueChange]
|
|
235
|
+
);
|
|
183
236
|
return /* @__PURE__ */ jsx(
|
|
184
237
|
SelectContext.Provider,
|
|
185
238
|
{
|
|
186
239
|
value: {
|
|
187
240
|
value,
|
|
188
|
-
onValueChange:
|
|
189
|
-
}),
|
|
241
|
+
onValueChange: handleValueChange,
|
|
190
242
|
open,
|
|
191
243
|
setOpen: (v) => {
|
|
192
244
|
if (!disabled) setOpen(v);
|
|
@@ -194,17 +246,19 @@ function Select({
|
|
|
194
246
|
options: [],
|
|
195
247
|
disabled,
|
|
196
248
|
placeholder,
|
|
197
|
-
triggerId
|
|
198
|
-
contentId
|
|
249
|
+
triggerId,
|
|
250
|
+
contentId,
|
|
251
|
+
labels,
|
|
252
|
+
registerLabel
|
|
199
253
|
},
|
|
200
|
-
children
|
|
254
|
+
children: /* @__PURE__ */ jsx("div", { ref: rootRef, className: cn(selectRootClass, className), "data-slot": "select", children })
|
|
201
255
|
}
|
|
202
256
|
);
|
|
203
257
|
}
|
|
204
258
|
var SelectTrigger = React.forwardRef(
|
|
205
259
|
function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
|
|
206
260
|
const { open, setOpen, disabled, triggerId, contentId } = useSelectContext("SelectTrigger");
|
|
207
|
-
const api = createSelect({ disabled, open });
|
|
261
|
+
const api = createSelect({ disabled, open, ids: { trigger: triggerId, content: contentId } });
|
|
208
262
|
const handleClick = () => {
|
|
209
263
|
if (!disabled) {
|
|
210
264
|
setOpen(!open);
|
|
@@ -235,7 +289,6 @@ var SelectTrigger = React.forwardRef(
|
|
|
235
289
|
disabled,
|
|
236
290
|
...api.triggerProps.ariaProps,
|
|
237
291
|
...api.triggerProps.dataAttributes,
|
|
238
|
-
"aria-controls": contentId,
|
|
239
292
|
...props,
|
|
240
293
|
children: [
|
|
241
294
|
children,
|
|
@@ -321,8 +374,11 @@ var SelectContent = React.forwardRef(
|
|
|
321
374
|
);
|
|
322
375
|
var SelectItem = React.forwardRef(
|
|
323
376
|
function SelectItem2({ className, children, value: itemValue, disabled: itemDisabled = false, ...props }, ref) {
|
|
324
|
-
const { value, onValueChange, setOpen, triggerId } = useSelectContext("SelectItem");
|
|
377
|
+
const { value, onValueChange, setOpen, triggerId, registerLabel } = useSelectContext("SelectItem");
|
|
325
378
|
const isSelected = value === itemValue;
|
|
379
|
+
React.useEffect(() => {
|
|
380
|
+
registerLabel(itemValue, children);
|
|
381
|
+
}, [registerLabel, itemValue, children]);
|
|
326
382
|
const handleClick = () => {
|
|
327
383
|
if (!itemDisabled) {
|
|
328
384
|
onValueChange(itemValue);
|
|
@@ -376,11 +432,29 @@ var SelectItem = React.forwardRef(
|
|
|
376
432
|
);
|
|
377
433
|
}
|
|
378
434
|
);
|
|
435
|
+
var SelectValue = React.forwardRef(
|
|
436
|
+
function SelectValue2({ placeholder, className, children, ...props }, ref) {
|
|
437
|
+
const ctx = useSelectContext("SelectValue");
|
|
438
|
+
const label = ctx.value !== void 0 ? ctx.labels.get(ctx.value) : void 0;
|
|
439
|
+
const showPlaceholder = children == null && label === void 0;
|
|
440
|
+
return /* @__PURE__ */ jsx(
|
|
441
|
+
"span",
|
|
442
|
+
{
|
|
443
|
+
ref,
|
|
444
|
+
className: cn(selectValueClass, className),
|
|
445
|
+
"data-placeholder": showPlaceholder ? "" : void 0,
|
|
446
|
+
...props,
|
|
447
|
+
children: children ?? (showPlaceholder ? placeholder ?? ctx.placeholder : label)
|
|
448
|
+
}
|
|
449
|
+
);
|
|
450
|
+
}
|
|
451
|
+
);
|
|
379
452
|
export {
|
|
380
453
|
Select,
|
|
381
454
|
SelectContent,
|
|
382
455
|
SelectItem,
|
|
383
456
|
SelectTrigger,
|
|
457
|
+
SelectValue,
|
|
384
458
|
selectContentVariants,
|
|
385
459
|
selectItemVariants,
|
|
386
460
|
selectTokens,
|
package/dist/react-select.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../select/src/select.ts", "../../select/src/select.styles.ts", "../../react-select/src/select.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { Keys, generateId } from '@refraction-ui/shared'\n\nexport interface SelectOption {\n value: string\n label: string\n disabled?: boolean\n}\n\nexport interface SelectProps {\n value?: string\n options?: SelectOption[]\n placeholder?: string\n disabled?: boolean\n open?: boolean\n name?: string\n}\n\nexport interface SelectAPI {\n /** Trigger element ARIA + keyboard props */\n triggerProps: {\n ariaProps: Partial<AccessibilityProps>\n keyboardHandlers: KeyboardHandlerMap\n dataAttributes: Record<string, string>\n }\n /** Content (dropdown) props */\n contentProps: {\n ariaProps: Partial<AccessibilityProps>\n dataAttributes: Record<string, string>\n }\n /** Get props for a single option */\n getOptionProps: (option: SelectOption) => {\n ariaProps: Partial<AccessibilityProps>\n dataAttributes: Record<string, string>\n isSelected: boolean\n }\n /** Whether interaction should be blocked */\n isInteractive: boolean\n /** Current state */\n state: {\n open: boolean\n selectedValue: string | undefined\n selectedLabel: string | undefined\n disabled: boolean\n placeholder: string\n }\n /** Generated IDs for trigger/content association */\n ids: {\n trigger: string\n content: string\n }\n}\n\nexport function createSelect(props: SelectProps = {}): SelectAPI {\n const {\n value,\n options = [],\n placeholder = 'Select an option',\n disabled = false,\n open = false,\n } = props\n\n const isInteractive = !disabled\n const selectedOption = options.find((o) => o.value === value)\n\n const triggerId = generateId('select-trigger')\n const contentId = generateId('select-content')\n\n const triggerAriaProps: Partial<AccessibilityProps> = {\n role: 'combobox',\n 'aria-expanded': open,\n 'aria-controls': contentId,\n 'aria-labelledby': triggerId,\n }\n if (disabled) {\n triggerAriaProps['aria-disabled'] = true\n }\n\n const triggerKeyboardHandlers: KeyboardHandlerMap = {}\n if (!isInteractive) {\n triggerKeyboardHandlers[Keys.Enter] = (e) => e.preventDefault()\n triggerKeyboardHandlers[Keys.Space] = (e) => e.preventDefault()\n triggerKeyboardHandlers[Keys.ArrowDown] = (e) => e.preventDefault()\n triggerKeyboardHandlers[Keys.ArrowUp] = (e) => e.preventDefault()\n }\n\n const triggerDataAttributes: Record<string, string> = {\n 'data-state': open ? 'open' : 'closed',\n }\n if (disabled) {\n triggerDataAttributes['data-disabled'] = ''\n }\n\n const contentAriaProps: Partial<AccessibilityProps> = {\n role: 'listbox',\n 'aria-labelledby': triggerId,\n }\n\n const contentDataAttributes: Record<string, string> = {\n 'data-state': open ? 'open' : 'closed',\n }\n\n function getOptionProps(option: SelectOption) {\n const isSelected = option.value === value\n const optionAriaProps: Partial<AccessibilityProps> = {\n role: 'option',\n 'aria-selected': isSelected,\n }\n if (option.disabled) {\n optionAriaProps['aria-disabled'] = true\n }\n\n const optionDataAttributes: Record<string, string> = {}\n if (isSelected) {\n optionDataAttributes['data-state'] = 'checked'\n }\n if (option.disabled) {\n optionDataAttributes['data-disabled'] = ''\n }\n\n return {\n ariaProps: optionAriaProps,\n dataAttributes: optionDataAttributes,\n isSelected,\n }\n }\n\n return {\n triggerProps: {\n ariaProps: triggerAriaProps,\n keyboardHandlers: triggerKeyboardHandlers,\n dataAttributes: triggerDataAttributes,\n },\n contentProps: {\n ariaProps: contentAriaProps,\n dataAttributes: contentDataAttributes,\n },\n getOptionProps,\n isInteractive,\n state: {\n open,\n selectedValue: selectedOption?.value,\n selectedLabel: selectedOption?.label,\n disabled,\n placeholder,\n },\n ids: {\n trigger: triggerId,\n content: contentId,\n },\n }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const selectTokens: TokenContract = {\n name: 'select',\n tokens: {\n bg: { variable: '--rfr-select-bg', fallback: 'hsl(var(--background))' },\n fg: { variable: '--rfr-select-fg', fallback: 'hsl(var(--foreground))' },\n border: { variable: '--rfr-select-border', fallback: 'hsl(var(--border))' },\n ring: { variable: '--rfr-select-ring', fallback: 'hsl(var(--ring))' },\n },\n}\n\nexport const selectTriggerVariants = cva({\n base: 'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n variants: {\n size: {\n sm: 'h-8 text-xs',\n default: 'h-9 text-sm',\n lg: 'h-10 text-base',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n})\n\nexport const selectContentVariants = cva({\n base: 'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95',\n variants: {\n position: {\n popper: 'translate-y-1',\n 'item-aligned': '',\n },\n },\n defaultVariants: {\n position: 'popper',\n },\n})\n\nexport const selectItemVariants = cva({\n base: 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n variants: {\n selected: {\n true: 'bg-accent/50',\n false: '',\n },\n },\n defaultVariants: {\n selected: 'false',\n },\n})\n", "import * as React from 'react'\nimport {\n createSelect,\n selectTriggerVariants,\n selectContentVariants,\n selectItemVariants,\n type SelectOption,\n} from '@refraction-ui/select'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n/* ─── Context ──────────────────────────────────────────────────── */\ninterface SelectContextValue {\n value: string | undefined\n onValueChange: (value: string) => void\n open: boolean\n setOpen: (open: boolean) => void\n options: SelectOption[]\n disabled: boolean\n placeholder: string\n triggerId: string\n contentId: string\n /**\n * Internal marker: `true` only on the context *default* (i.e. no `<Select>`\n * provider above this part). `<Select>` always supplies a value without\n * this flag. Used purely to detect the silent-default footgun — never read\n * for rendering.\n *\n * @internal\n */\n __isDefault?: boolean\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n __isDefault: true,\n value: undefined,\n onValueChange: () => {},\n open: false,\n setOpen: () => {},\n options: [],\n disabled: false,\n placeholder: 'Select an option',\n triggerId: '',\n contentId: '',\n})\n\n/**\n * Read the select context for a compound part (`SelectTrigger`,\n * `SelectContent`, `SelectItem`).\n *\n * Footgun seam (epic #254 / #256, policy: `silent-default-context`): when a\n * part is rendered without a `<Select>` ancestor it silently reads inert\n * context defaults (no-op handlers, empty ids, never-open) and renders a dead\n * control with no error. There is no throw today and adding one would be a\n * breaking change, so per `docs/instrumentation/policy.md` a dev-only\n * `devWarn` is the *only* signal. Stripped in production, warn-once.\n *\n * Behaviour is unchanged: the default context value is still returned.\n */\nfunction useSelectContext(part: string): SelectContextValue {\n const ctx = React.useContext(SelectContext)\n if (ctx.__isDefault) {\n devWarn(\n 'react-select/no-select-provider',\n `<${part}> was rendered without a <Select> ancestor. It is silently ` +\n 'reading inert context defaults (clicks/keyboard do nothing, it never ' +\n 'opens). Wrap it in <Select>…</Select>.',\n )\n }\n return ctx\n}\n\n/* ─── Select (root) ────────────────────────────────────────────── */\nexport interface SelectProps {\n value?: string\n onValueChange?: (value: string) => void\n disabled?: boolean\n children?: React.ReactNode\n placeholder?: string\n}\n\n/**\n * Select -- dropdown select with accessible keyboard and ARIA support.\n * Compound component: Select > SelectTrigger + SelectContent > SelectItem.\n */\nexport function Select({\n value,\n onValueChange,\n disabled = false,\n children,\n placeholder = 'Select an option',\n}: SelectProps) {\n const [open, setOpen] = React.useState(false)\n\n const api = createSelect({ value, disabled, open, placeholder })\n\n return (\n <SelectContext.Provider\n value={{\n value,\n onValueChange: onValueChange ?? (() => {}),\n open,\n setOpen: (v) => {\n if (!disabled) setOpen(v)\n },\n options: [],\n disabled,\n placeholder,\n triggerId: api.ids.trigger,\n contentId: api.ids.content,\n }}\n >\n {children}\n </SelectContext.Provider>\n )\n}\n\n/* ─── SelectTrigger ────────────────────────────────────────────── */\nexport interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n size?: 'sm' | 'default' | 'lg'\n}\n\nexport const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n function SelectTrigger({ className, children, size = 'default', ...props }, ref) {\n const { open, setOpen, disabled, triggerId, contentId } = useSelectContext('SelectTrigger')\n\n const api = createSelect({ disabled, open })\n\n const handleClick = () => {\n if (!disabled) {\n setOpen(!open)\n }\n }\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n if (!disabled) setOpen(!open)\n }\n if (e.key === 'Escape') {\n setOpen(false)\n }\n if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !open) {\n e.preventDefault()\n if (!disabled) setOpen(true)\n }\n }\n\n return (\n <button\n ref={ref}\n type=\"button\"\n id={triggerId}\n className={cn(selectTriggerVariants({ size }), className)}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n {...api.triggerProps.ariaProps}\n {...api.triggerProps.dataAttributes}\n aria-controls={contentId}\n {...props}\n >\n {children}\n <svg\n className=\"h-4 w-4 opacity-50 shrink-0\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n </button>\n )\n },\n)\n\n/* ─── SelectContent ────────────────────────────────────────────── */\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n function SelectContent({ className, children, ...props }, forwardedRef) {\n const { open, contentId, triggerId, setOpen } = useSelectContext('SelectContent')\n const containerRef = React.useRef<HTMLDivElement>(null)\n\n // Merge refs\n const ref = React.useCallback(\n (node: HTMLDivElement) => {\n containerRef.current = node\n if (typeof forwardedRef === 'function') forwardedRef(node)\n else if (forwardedRef) forwardedRef.current = node\n },\n [forwardedRef]\n )\n\n React.useEffect(() => {\n if (open && containerRef.current) {\n const firstOption = containerRef.current.querySelector('[role=\"option\"]:not([aria-disabled=\"true\"])') as HTMLElement\n if (firstOption) {\n // Delay focus slightly to ensure DOM is ready\n setTimeout(() => firstOption.focus(), 0)\n }\n }\n }, [open])\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!containerRef.current) return\n\n const options = Array.from(\n containerRef.current.querySelectorAll('[role=\"option\"]:not([aria-disabled=\"true\"])')\n ) as HTMLElement[]\n\n if (!options.length) return\n\n const currentIndex = options.indexOf(document.activeElement as HTMLElement)\n\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n options[nextIndex]?.focus()\n } else if (e.key === 'ArrowUp') {\n e.preventDefault()\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n options[prevIndex]?.focus()\n } else if (e.key === 'Escape') {\n e.preventDefault()\n setOpen(false)\n // Focus back to trigger\n const trigger = document.getElementById(triggerId)\n if (trigger) trigger.focus()\n }\n }\n\n if (!open) return null\n\n return (\n <div\n ref={ref}\n id={contentId}\n className={cn(selectContentVariants(), className)}\n role=\"listbox\"\n aria-labelledby={triggerId}\n data-state={open ? 'open' : 'closed'}\n onKeyDown={handleKeyDown}\n tabIndex={-1}\n {...props}\n >\n {children}\n </div>\n )\n },\n)\n\n/* ─── SelectItem ───────────────────────────────────────────────── */\nexport interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {\n value: string\n disabled?: boolean\n}\n\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n function SelectItem({ className, children, value: itemValue, disabled: itemDisabled = false, ...props }, ref) {\n const { value, onValueChange, setOpen, triggerId } = useSelectContext('SelectItem')\n const isSelected = value === itemValue\n\n const handleClick = () => {\n if (!itemDisabled) {\n onValueChange(itemValue)\n setOpen(false)\n const trigger = document.getElementById(triggerId)\n if (trigger) setTimeout(() => trigger.focus(), 0)\n }\n }\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if ((e.key === 'Enter' || e.key === ' ') && !itemDisabled) {\n e.preventDefault()\n onValueChange(itemValue)\n setOpen(false)\n const trigger = document.getElementById(triggerId)\n if (trigger) setTimeout(() => trigger.focus(), 0)\n }\n }\n\n return (\n <div\n ref={ref}\n className={cn(selectItemVariants({ selected: isSelected ? 'true' : 'false' }), className)}\n role=\"option\"\n aria-selected={isSelected}\n aria-disabled={itemDisabled || undefined}\n data-state={isSelected ? 'checked' : undefined}\n data-disabled={itemDisabled ? '' : undefined}\n tabIndex={itemDisabled ? undefined : 0}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n {...props}\n >\n {isSelected && (\n <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n <svg\n className=\"h-4 w-4\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M20 6L9 17l-5-5\" />\n </svg>\n </span>\n )}\n {children}\n </div>\n )\n },\n)\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;
|
|
6
|
-
"names": ["SelectTrigger", "SelectContent", "SelectItem"]
|
|
4
|
+
"sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { Keys, generateId } from '@refraction-ui/shared'\n\nexport interface SelectOption {\n value: string\n label: string\n disabled?: boolean\n}\n\nexport interface SelectProps {\n value?: string\n options?: SelectOption[]\n placeholder?: string\n disabled?: boolean\n open?: boolean\n name?: string\n /**\n * Element ids to link trigger and listbox. Adapters should pass ids that\n * are stable across renders (e.g. React `useId`); when omitted, fresh ids\n * are generated on every call.\n */\n ids?: { trigger: string; content: string }\n}\n\nexport interface SelectAPI {\n /** Trigger element ARIA + keyboard props */\n triggerProps: {\n ariaProps: Partial<AccessibilityProps>\n keyboardHandlers: KeyboardHandlerMap\n dataAttributes: Record<string, string>\n }\n /** Content (dropdown) props */\n contentProps: {\n ariaProps: Partial<AccessibilityProps>\n dataAttributes: Record<string, string>\n }\n /** Get props for a single option */\n getOptionProps: (option: SelectOption) => {\n ariaProps: Partial<AccessibilityProps>\n dataAttributes: Record<string, string>\n isSelected: boolean\n }\n /** Whether interaction should be blocked */\n isInteractive: boolean\n /** Current state */\n state: {\n open: boolean\n selectedValue: string | undefined\n selectedLabel: string | undefined\n disabled: boolean\n placeholder: string\n }\n /** Generated IDs for trigger/content association */\n ids: {\n trigger: string\n content: string\n }\n}\n\nexport function createSelect(props: SelectProps = {}): SelectAPI {\n const {\n value,\n options = [],\n placeholder = 'Select an option',\n disabled = false,\n open = false,\n } = props\n\n const isInteractive = !disabled\n const selectedOption = options.find((o) => o.value === value)\n\n const triggerId = props.ids?.trigger ?? generateId('select-trigger')\n const contentId = props.ids?.content ?? generateId('select-content')\n\n // No aria-labelledby on the trigger: pointing a combobox at itself would\n // override a caller's aria-label / <label for> and leave the accessible\n // name as the displayed value.\n const triggerAriaProps: Partial<AccessibilityProps> = {\n role: 'combobox',\n 'aria-expanded': open,\n 'aria-controls': contentId,\n }\n if (disabled) {\n triggerAriaProps['aria-disabled'] = true\n }\n\n const triggerKeyboardHandlers: KeyboardHandlerMap = {}\n if (!isInteractive) {\n triggerKeyboardHandlers[Keys.Enter] = (e) => e.preventDefault()\n triggerKeyboardHandlers[Keys.Space] = (e) => e.preventDefault()\n triggerKeyboardHandlers[Keys.ArrowDown] = (e) => e.preventDefault()\n triggerKeyboardHandlers[Keys.ArrowUp] = (e) => e.preventDefault()\n }\n\n const triggerDataAttributes: Record<string, string> = {\n 'data-state': open ? 'open' : 'closed',\n }\n if (disabled) {\n triggerDataAttributes['data-disabled'] = ''\n }\n\n const contentAriaProps: Partial<AccessibilityProps> = {\n role: 'listbox',\n 'aria-labelledby': triggerId,\n }\n\n const contentDataAttributes: Record<string, string> = {\n 'data-state': open ? 'open' : 'closed',\n }\n\n function getOptionProps(option: SelectOption) {\n const isSelected = option.value === value\n const optionAriaProps: Partial<AccessibilityProps> = {\n role: 'option',\n 'aria-selected': isSelected,\n }\n if (option.disabled) {\n optionAriaProps['aria-disabled'] = true\n }\n\n const optionDataAttributes: Record<string, string> = {}\n if (isSelected) {\n optionDataAttributes['data-state'] = 'checked'\n }\n if (option.disabled) {\n optionDataAttributes['data-disabled'] = ''\n }\n\n return {\n ariaProps: optionAriaProps,\n dataAttributes: optionDataAttributes,\n isSelected,\n }\n }\n\n return {\n triggerProps: {\n ariaProps: triggerAriaProps,\n keyboardHandlers: triggerKeyboardHandlers,\n dataAttributes: triggerDataAttributes,\n },\n contentProps: {\n ariaProps: contentAriaProps,\n dataAttributes: contentDataAttributes,\n },\n getOptionProps,\n isInteractive,\n state: {\n open,\n selectedValue: selectedOption?.value,\n selectedLabel: selectedOption?.label,\n disabled,\n placeholder,\n },\n ids: {\n trigger: triggerId,\n content: contentId,\n },\n }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const selectTokens: TokenContract = {\n name: 'select',\n tokens: {\n bg: { variable: '--rfr-select-bg', fallback: 'hsl(var(--background))' },\n fg: { variable: '--rfr-select-fg', fallback: 'hsl(var(--foreground))' },\n border: { variable: '--rfr-select-border', fallback: 'hsl(var(--border))' },\n ring: { variable: '--rfr-select-ring', fallback: 'hsl(var(--ring))' },\n },\n}\n\nexport const selectTriggerVariants = cva({\n base: 'flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n variants: {\n size: {\n sm: 'h-8 text-xs',\n default: 'h-9 text-sm',\n lg: 'h-10 text-base',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n})\n\nexport const selectContentVariants = cva({\n base: 'absolute left-0 top-full z-50 mt-1 max-h-96 w-full min-w-[8rem] overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95',\n variants: {\n position: {\n popper: '',\n 'item-aligned': '',\n },\n },\n defaultVariants: {\n position: 'popper',\n },\n})\n\nexport const selectItemVariants = cva({\n base: 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n variants: {\n selected: {\n true: 'bg-accent/50',\n false: '',\n },\n },\n defaultVariants: {\n selected: 'false',\n },\n})\n\n/** Positioning context: the listbox floats under the trigger. */\nexport const selectRootClass = 'relative'\n\n/** The selected label inside the trigger; truncates, dims the placeholder. */\nexport const selectValueClass = 'truncate text-left data-[placeholder]:text-muted-foreground'\n", "import * as React from 'react'\nimport {\n createSelect,\n selectTriggerVariants,\n selectContentVariants,\n selectItemVariants,\n selectRootClass,\n selectValueClass,\n type SelectOption,\n} from '@refraction-ui/select'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n/* ─── Context ──────────────────────────────────────────────────── */\ninterface SelectContextValue {\n value: string | undefined\n onValueChange: (value: string) => void\n open: boolean\n setOpen: (open: boolean) => void\n options: SelectOption[]\n disabled: boolean\n placeholder: string\n triggerId: string\n contentId: string\n /** Label of each item by value, for `SelectValue`. */\n labels: ReadonlyMap<string, React.ReactNode>\n /** Mounted items report their label so `SelectValue` can show it. */\n registerLabel: (value: string, label: React.ReactNode) => void\n /**\n * Internal marker: `true` only on the context *default* (i.e. no `<Select>`\n * provider above this part). `<Select>` always supplies a value without\n * this flag. Used purely to detect the silent-default footgun — never read\n * for rendering.\n *\n * @internal\n */\n __isDefault?: boolean\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n __isDefault: true,\n value: undefined,\n onValueChange: () => {},\n open: false,\n setOpen: () => {},\n options: [],\n disabled: false,\n placeholder: 'Select an option',\n triggerId: '',\n contentId: '',\n labels: new Map(),\n registerLabel: () => {},\n})\n\n/**\n * Read the select context for a compound part (`SelectTrigger`,\n * `SelectContent`, `SelectItem`).\n *\n * Footgun seam (epic #254 / #256, policy: `silent-default-context`): when a\n * part is rendered without a `<Select>` ancestor it silently reads inert\n * context defaults (no-op handlers, empty ids, never-open) and renders a dead\n * control with no error. There is no throw today and adding one would be a\n * breaking change, so per `docs/instrumentation/policy.md` a dev-only\n * `devWarn` is the *only* signal. Stripped in production, warn-once.\n *\n * Behaviour is unchanged: the default context value is still returned.\n */\nfunction useSelectContext(part: string): SelectContextValue {\n const ctx = React.useContext(SelectContext)\n if (ctx.__isDefault) {\n devWarn(\n 'react-select/no-select-provider',\n `<${part}> was rendered without a <Select> ancestor. It is silently ` +\n 'reading inert context defaults (clicks/keyboard do nothing, it never ' +\n 'opens). Wrap it in <Select>…</Select>.',\n )\n }\n return ctx\n}\n\n/* ─── Select (root) ────────────────────────────────────────────── */\nexport interface SelectProps {\n /** Selected value (controlled). */\n value?: string\n /** Initially selected value (uncontrolled). */\n defaultValue?: string\n onValueChange?: (value: string) => void\n disabled?: boolean\n children?: React.ReactNode\n /** Shown by `SelectValue` while nothing is selected. */\n placeholder?: string\n /** Class for the positioning wrapper the select renders around its parts. */\n className?: string\n}\n\n/**\n * Collect `value → label` for every `SelectItem` in the element tree, so the\n * trigger can show the selected label while the list is closed (items only\n * mount while open). Items nested inside custom components are not visible\n * here; those register their label when they first mount.\n */\nfunction collectItemLabels(\n node: React.ReactNode,\n into: Map<string, React.ReactNode>,\n): Map<string, React.ReactNode> {\n React.Children.forEach(node, (child) => {\n if (!React.isValidElement<{ value?: unknown; children?: React.ReactNode }>(child)) return\n if (child.type === SelectItem && typeof child.props.value === 'string') {\n into.set(child.props.value, child.props.children)\n return\n }\n collectItemLabels(child.props.children, into)\n })\n return into\n}\n\n/**\n * Select -- dropdown select with accessible keyboard and ARIA support.\n * Compound component: Select > SelectTrigger (> SelectValue) + SelectContent > SelectItem.\n * Renders a `relative` wrapper so the listbox floats under the trigger, and\n * closes on a pointer press outside it.\n */\nexport function Select({\n value: controlledValue,\n defaultValue,\n onValueChange,\n disabled = false,\n children,\n placeholder = 'Select an option',\n className,\n}: SelectProps) {\n const [open, setOpen] = React.useState(false)\n const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n const isControlled = controlledValue !== undefined\n const value = isControlled ? controlledValue : uncontrolledValue\n const rootRef = React.useRef<HTMLDivElement>(null)\n\n // Stable across renders and SSR-safe (the core's generateId is per-call).\n const baseId = React.useId()\n const triggerId = `${baseId}-trigger`\n const contentId = `${baseId}-content`\n\n const [registered, setRegistered] = React.useState<ReadonlyMap<string, React.ReactNode>>(\n () => new Map(),\n )\n const registerLabel = React.useCallback((itemValue: string, label: React.ReactNode) => {\n setRegistered((prev) => {\n if (prev.get(itemValue) === label) return prev\n const next = new Map(prev)\n next.set(itemValue, label)\n return next\n })\n }, [])\n const labels = React.useMemo(\n () => collectItemLabels(children, new Map(registered)),\n [children, registered],\n )\n\n React.useEffect(() => {\n if (!open) return\n const onPointerDown = (event: PointerEvent) => {\n if (rootRef.current && !rootRef.current.contains(event.target as Node)) setOpen(false)\n }\n document.addEventListener('pointerdown', onPointerDown)\n return () => document.removeEventListener('pointerdown', onPointerDown)\n }, [open])\n\n const handleValueChange = React.useCallback(\n (next: string) => {\n if (!isControlled) setUncontrolledValue(next)\n onValueChange?.(next)\n },\n [isControlled, onValueChange],\n )\n\n return (\n <SelectContext.Provider\n value={{\n value,\n onValueChange: handleValueChange,\n open,\n setOpen: (v) => {\n if (!disabled) setOpen(v)\n },\n options: [],\n disabled,\n placeholder,\n triggerId,\n contentId,\n labels,\n registerLabel,\n }}\n >\n <div ref={rootRef} className={cn(selectRootClass, className)} data-slot=\"select\">\n {children}\n </div>\n </SelectContext.Provider>\n )\n}\n\n/* ─── SelectTrigger ────────────────────────────────────────────── */\nexport interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n size?: 'sm' | 'default' | 'lg'\n}\n\nexport const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n function SelectTrigger({ className, children, size = 'default', ...props }, ref) {\n const { open, setOpen, disabled, triggerId, contentId } = useSelectContext('SelectTrigger')\n\n const api = createSelect({ disabled, open, ids: { trigger: triggerId, content: contentId } })\n\n const handleClick = () => {\n if (!disabled) {\n setOpen(!open)\n }\n }\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n if (!disabled) setOpen(!open)\n }\n if (e.key === 'Escape') {\n setOpen(false)\n }\n if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !open) {\n e.preventDefault()\n if (!disabled) setOpen(true)\n }\n }\n\n return (\n <button\n ref={ref}\n type=\"button\"\n id={triggerId}\n className={cn(selectTriggerVariants({ size }), className)}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n {...api.triggerProps.ariaProps}\n {...api.triggerProps.dataAttributes}\n {...props}\n >\n {children}\n <svg\n className=\"h-4 w-4 opacity-50 shrink-0\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n </button>\n )\n },\n)\n\n/* ─── SelectContent ────────────────────────────────────────────── */\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n function SelectContent({ className, children, ...props }, forwardedRef) {\n const { open, contentId, triggerId, setOpen } = useSelectContext('SelectContent')\n const containerRef = React.useRef<HTMLDivElement>(null)\n\n // Merge refs\n const ref = React.useCallback(\n (node: HTMLDivElement) => {\n containerRef.current = node\n if (typeof forwardedRef === 'function') forwardedRef(node)\n else if (forwardedRef) forwardedRef.current = node\n },\n [forwardedRef]\n )\n\n React.useEffect(() => {\n if (open && containerRef.current) {\n const firstOption = containerRef.current.querySelector('[role=\"option\"]:not([aria-disabled=\"true\"])') as HTMLElement\n if (firstOption) {\n // Delay focus slightly to ensure DOM is ready\n setTimeout(() => firstOption.focus(), 0)\n }\n }\n }, [open])\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!containerRef.current) return\n\n const options = Array.from(\n containerRef.current.querySelectorAll('[role=\"option\"]:not([aria-disabled=\"true\"])')\n ) as HTMLElement[]\n\n if (!options.length) return\n\n const currentIndex = options.indexOf(document.activeElement as HTMLElement)\n\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n options[nextIndex]?.focus()\n } else if (e.key === 'ArrowUp') {\n e.preventDefault()\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n options[prevIndex]?.focus()\n } else if (e.key === 'Escape') {\n e.preventDefault()\n setOpen(false)\n // Focus back to trigger\n const trigger = document.getElementById(triggerId)\n if (trigger) trigger.focus()\n }\n }\n\n if (!open) return null\n\n return (\n <div\n ref={ref}\n id={contentId}\n className={cn(selectContentVariants(), className)}\n role=\"listbox\"\n aria-labelledby={triggerId}\n data-state={open ? 'open' : 'closed'}\n onKeyDown={handleKeyDown}\n tabIndex={-1}\n {...props}\n >\n {children}\n </div>\n )\n },\n)\n\n/* ─── SelectItem ───────────────────────────────────────────────── */\nexport interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {\n value: string\n disabled?: boolean\n}\n\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n function SelectItem({ className, children, value: itemValue, disabled: itemDisabled = false, ...props }, ref) {\n const { value, onValueChange, setOpen, triggerId, registerLabel } = useSelectContext('SelectItem')\n const isSelected = value === itemValue\n\n React.useEffect(() => {\n registerLabel(itemValue, children)\n }, [registerLabel, itemValue, children])\n\n const handleClick = () => {\n if (!itemDisabled) {\n onValueChange(itemValue)\n setOpen(false)\n const trigger = document.getElementById(triggerId)\n if (trigger) setTimeout(() => trigger.focus(), 0)\n }\n }\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if ((e.key === 'Enter' || e.key === ' ') && !itemDisabled) {\n e.preventDefault()\n onValueChange(itemValue)\n setOpen(false)\n const trigger = document.getElementById(triggerId)\n if (trigger) setTimeout(() => trigger.focus(), 0)\n }\n }\n\n return (\n <div\n ref={ref}\n className={cn(selectItemVariants({ selected: isSelected ? 'true' : 'false' }), className)}\n role=\"option\"\n aria-selected={isSelected}\n aria-disabled={itemDisabled || undefined}\n data-state={isSelected ? 'checked' : undefined}\n data-disabled={itemDisabled ? '' : undefined}\n tabIndex={itemDisabled ? undefined : 0}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n {...props}\n >\n {isSelected && (\n <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n <svg\n className=\"h-4 w-4\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M20 6L9 17l-5-5\" />\n </svg>\n </span>\n )}\n {children}\n </div>\n )\n },\n)\n\n/* ─── SelectValue ──────────────────────────────────────────────── */\nexport interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Shown while nothing is selected. Defaults to the `Select` placeholder. */\n placeholder?: React.ReactNode\n}\n\n/**\n * SelectValue -- place inside `SelectTrigger` to show the selected item's\n * label (its `SelectItem` children), or the placeholder when nothing is\n * selected. Pass `children` to render the value yourself.\n */\nexport const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(\n function SelectValue({ placeholder, className, children, ...props }, ref) {\n const ctx = useSelectContext('SelectValue')\n const label = ctx.value !== undefined ? ctx.labels.get(ctx.value) : undefined\n const showPlaceholder = children == null && label === undefined\n return (\n <span\n ref={ref}\n className={cn(selectValueClass, className)}\n data-placeholder={showPlaceholder ? '' : undefined}\n {...props}\n >\n {children ?? (showPlaceholder ? (placeholder ?? ctx.placeholder) : label)}\n </span>\n )\n },\n)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["SelectTrigger", "SelectContent", "SelectItem", "SelectValue"]
|
|
7
7
|
}
|
package/dist/react-separator.js
CHANGED
package/dist/react-sheet.js
CHANGED
package/dist/react-sidebar.js
CHANGED
package/dist/react-skeleton.js
CHANGED