diff --git a/apps/v4/lib/registry.ts b/apps/v4/lib/registry.ts index 6c4d1b67b8..ec78b2e500 100644 --- a/apps/v4/lib/registry.ts +++ b/apps/v4/lib/registry.ts @@ -8,8 +8,16 @@ import { type z } from "zod" import { Index as StylesIndex } from "@/registry/__index__" import { Index as BasesIndex } from "@/registry/bases/__index__" +// Styles that have their own index in StylesIndex (built with style transforms). +const INDEXED_STYLES = ["new-york-v4", "radix-nova", "base-nova"] + // Map style names to their corresponding index and key. function getIndexForStyle(styleName: string) { + // Use StylesIndex for styles that are built with transforms. + if (INDEXED_STYLES.includes(styleName)) { + return { index: StylesIndex, key: styleName } + } + // Fall back to BasesIndex for other base-style combinations. if (styleName.startsWith("radix-")) { return { index: BasesIndex, key: "radix" } } diff --git a/apps/v4/public/r/styles/base-lyra/Elevenlabs.json b/apps/v4/public/r/styles/base-lyra/Elevenlabs.json index 590e85d42a..8f3dc53572 100644 --- a/apps/v4/public/r/styles/base-lyra/Elevenlabs.json +++ b/apps/v4/public/r/styles/base-lyra/Elevenlabs.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-lyra/blocks/elevenlabs.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/bases/base/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n return (\n \n \n \n \n )\n}\n\nfunction BarVisualizerDemo() {\n const [state, setState] = useState(\"speaking\")\n\n return (\n \n \n \n Audio Frequency Visualizer\n \n Real-time frequency band visualization with animated state\n transitions\n \n \n \n \n \n \n setState(\"connecting\")}\n >\n Connecting\n \n setState(\"listening\")}\n >\n Listening\n \n setState(\"speaking\")}\n >\n Speaking\n \n \n \n \n )\n}\n\nfunction WaveformDemo() {\n const [active, setActive] = useState(false)\n const [processing, setProcessing] = useState(true)\n const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n const handleToggleActive = () => {\n setActive(!active)\n if (!active) {\n setProcessing(false)\n }\n }\n const handleToggleProcessing = () => {\n setProcessing(!processing)\n if (!processing) {\n setActive(false)\n }\n }\n return (\n \n \n \n Live Audio Waveform\n \n Real-time microphone input visualization with audio reactivity\n \n \n \n \n \n \n \n {active ? \"Stop\" : \"Start\"} Listening\n \n \n {processing ? \"Stop\" : \"Start\"} Processing\n \n setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n >\n {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n \n \n \n \n )\n}\n\nexport interface AudioAnalyserOptions {\n fftSize?: number\n smoothingTimeConstant?: number\n minDecibels?: number\n maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n mediaStream: MediaStream,\n options: AudioAnalyserOptions = {}\n) {\n const audioContext = new (window.AudioContext ||\n (window as unknown as { webkitAudioContext: typeof AudioContext })\n .webkitAudioContext)()\n const source = audioContext.createMediaStreamSource(mediaStream)\n const analyser = audioContext.createAnalyser()\n\n if (options.fftSize) analyser.fftSize = options.fftSize\n if (options.smoothingTimeConstant !== undefined) {\n analyser.smoothingTimeConstant = options.smoothingTimeConstant\n }\n if (options.minDecibels !== undefined)\n analyser.minDecibels = options.minDecibels\n if (options.maxDecibels !== undefined)\n analyser.maxDecibels = options.maxDecibels\n\n source.connect(analyser)\n\n const cleanup = () => {\n source.disconnect()\n audioContext.close()\n }\n\n return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n mediaStream?: MediaStream | null,\n options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n const [volume, setVolume] = useState(0)\n const volumeRef = useRef(0)\n const frameId = useRef(undefined)\n\n // Memoize options to prevent unnecessary re-renders\n const memoizedOptions = useMemo(() => options, [options])\n\n useEffect(() => {\n if (!mediaStream) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setVolume(0)\n volumeRef.current = 0\n return\n }\n\n const { analyser, cleanup } = createAudioAnalyser(\n mediaStream,\n memoizedOptions\n )\n\n const bufferLength = analyser.frequencyBinCount\n const dataArray = new Uint8Array(bufferLength)\n let lastUpdate = 0\n const updateInterval = 1000 / 30 // 30 FPS\n\n const updateVolume = (timestamp: number) => {\n if (timestamp - lastUpdate >= updateInterval) {\n analyser.getByteFrequencyData(dataArray)\n let sum = 0\n for (let i = 0; i < dataArray.length; i++) {\n const a = dataArray[i]\n sum += a * a\n }\n const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n // Only update state if volume changed significantly\n if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n volumeRef.current = newVolume\n setVolume(newVolume)\n }\n lastUpdate = timestamp\n }\n frameId.current = requestAnimationFrame(updateVolume)\n }\n\n frameId.current = requestAnimationFrame(updateVolume)\n\n return () => {\n cleanup()\n if (frameId.current) {\n cancelAnimationFrame(frameId.current)\n }\n }\n }, [mediaStream, memoizedOptions])\n\n return volume\n}\n\nexport interface MultiBandVolumeOptions {\n bands?: number\n loPass?: number // Low frequency cutoff\n hiPass?: number // High frequency cutoff\n updateInterval?: number // Update interval in ms\n analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n bands: 5,\n loPass: 100,\n hiPass: 600,\n updateInterval: 32,\n analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n if (value === -Infinity) return 0\n const minDb = -100\n const maxDb = -10\n const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n mediaStream?: MediaStream | null,\n options: MultiBandVolumeOptions = {}\n) {\n const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n const [frequencyBands, setFrequencyBands] = useState(() =>\n new Array(opts.bands).fill(0)\n )\n const bandsRef = useRef(new Array(opts.bands).fill(0))\n const frameId = useRef(undefined)\n\n useEffect(() => {\n if (!mediaStream) {\n const emptyBands = new Array(opts.bands).fill(0)\n setTimeout(() => {\n setFrequencyBands(emptyBands)\n }, 0)\n bandsRef.current = emptyBands\n return\n }\n\n const { analyser, cleanup } = createAudioAnalyser(\n mediaStream,\n opts.analyserOptions\n )\n\n const bufferLength = analyser.frequencyBinCount\n const dataArray = new Float32Array(bufferLength)\n const sliceStart = opts.loPass!\n const sliceEnd = opts.hiPass!\n const sliceLength = sliceEnd - sliceStart\n const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n let lastUpdate = 0\n const updateInterval = opts.updateInterval!\n\n const updateVolume = (timestamp: number) => {\n if (timestamp - lastUpdate >= updateInterval) {\n analyser.getFloatFrequencyData(dataArray)\n\n // Process directly without creating intermediate arrays\n const chunks = new Array(opts.bands!)\n\n for (let i = 0; i < opts.bands!; i++) {\n let sum = 0\n let count = 0\n const startIdx = sliceStart + i * chunkSize\n const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n for (let j = startIdx; j < endIdx; j++) {\n sum += normalizeDb(dataArray[j])\n count++\n }\n\n chunks[i] = count > 0 ? sum / count : 0\n }\n\n // Only update state if bands changed significantly\n let hasChanged = false\n for (let i = 0; i < chunks.length; i++) {\n if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n hasChanged = true\n break\n }\n }\n\n if (hasChanged) {\n bandsRef.current = chunks\n setFrequencyBands(chunks)\n }\n\n lastUpdate = timestamp\n }\n\n frameId.current = requestAnimationFrame(updateVolume)\n }\n\n frameId.current = requestAnimationFrame(updateVolume)\n\n return () => {\n cleanup()\n if (frameId.current) {\n cancelAnimationFrame(frameId.current)\n }\n }\n }, [mediaStream, opts])\n\n return frequencyBands\n}\n\ntype AnimationState =\n | \"connecting\"\n | \"initializing\"\n | \"listening\"\n | \"speaking\"\n | \"thinking\"\n | undefined\n\nexport const useBarAnimator = (\n state: AnimationState,\n columns: number,\n interval: number\n): number[] => {\n const indexRef = useRef(0)\n const [currentFrame, setCurrentFrame] = useState([])\n const animationFrameId = useRef(null)\n\n // Memoize sequence generation\n const sequence = useMemo(() => {\n if (state === \"thinking\" || state === \"listening\") {\n return generateListeningSequenceBar(columns)\n } else if (state === \"connecting\" || state === \"initializing\") {\n return generateConnectingSequenceBar(columns)\n } else if (state === undefined || state === \"speaking\") {\n return [new Array(columns).fill(0).map((_, idx) => idx)]\n } else {\n return [[]]\n }\n }, [state, columns])\n\n useEffect(() => {\n indexRef.current = 0\n setTimeout(() => {\n setCurrentFrame(sequence[0] || [])\n }, 0)\n }, [sequence])\n\n useEffect(() => {\n let startTime = performance.now()\n\n const animate = (time: DOMHighResTimeStamp) => {\n const timeElapsed = time - startTime\n\n if (timeElapsed >= interval) {\n indexRef.current = (indexRef.current + 1) % sequence.length\n setCurrentFrame(sequence[indexRef.current] || [])\n startTime = time\n }\n\n animationFrameId.current = requestAnimationFrame(animate)\n }\n\n animationFrameId.current = requestAnimationFrame(animate)\n\n return () => {\n if (animationFrameId.current !== null) {\n cancelAnimationFrame(animationFrameId.current)\n }\n }\n }, [interval, sequence])\n\n return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n const seq = []\n for (let x = 0; x < columns; x++) {\n seq.push([x, columns - 1 - x])\n }\n return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n const center = Math.floor(columns / 2)\n const noIndex = -1\n return [[center], [noIndex]]\n}\n\nexport type AgentState =\n | \"connecting\"\n | \"initializing\"\n | \"listening\"\n | \"speaking\"\n | \"thinking\"\n\nexport interface BarVisualizerProps\n extends React.HTMLAttributes {\n /** Voice assistant state */\n state?: AgentState\n /** Number of bars to display */\n barCount?: number\n /** Audio source */\n mediaStream?: MediaStream | null\n /** Min/max height as percentage */\n minHeight?: number\n maxHeight?: number\n /** Enable demo mode with fake audio data */\n demo?: boolean\n /** Align bars from center instead of bottom */\n centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n HTMLDivElement,\n BarVisualizerProps\n>(\n (\n {\n state,\n barCount = 15,\n mediaStream,\n minHeight = 20,\n maxHeight = 100,\n demo = false,\n centerAlign = false,\n className,\n style,\n ...props\n },\n ref\n ) => {\n // Audio processing\n const realVolumeBands = useMultibandVolume(mediaStream, {\n bands: barCount,\n loPass: 100,\n hiPass: 200,\n })\n\n // Generate fake volume data for demo mode using refs to avoid state updates\n const fakeVolumeBandsRef = useRef(new Array(barCount).fill(0.2))\n const [fakeVolumeBands, setFakeVolumeBands] = useState(() =>\n new Array(barCount).fill(0.2)\n )\n const fakeAnimationRef = useRef(undefined)\n\n // Animate fake volume bands for speaking and listening states\n useEffect(() => {\n if (!demo) return\n\n if (state !== \"speaking\" && state !== \"listening\") {\n const bands = new Array(barCount).fill(0.2)\n fakeVolumeBandsRef.current = bands\n setTimeout(() => {\n setFakeVolumeBands(bands)\n }, 0)\n return\n }\n\n let lastUpdate = 0\n const updateInterval = 50\n const startTime = Date.now() / 1000\n\n const updateFakeVolume = (timestamp: number) => {\n if (timestamp - lastUpdate >= updateInterval) {\n const time = Date.now() / 1000 - startTime\n const newBands = new Array(barCount)\n\n for (let i = 0; i < barCount; i++) {\n const waveOffset = i * 0.5\n const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n const randomNoise = Math.random() * 0.2\n newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n }\n\n // Only update if values changed significantly\n let hasChanged = false\n for (let i = 0; i < barCount; i++) {\n if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n hasChanged = true\n break\n }\n }\n\n if (hasChanged) {\n fakeVolumeBandsRef.current = newBands\n setFakeVolumeBands(newBands)\n }\n\n lastUpdate = timestamp\n }\n\n fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n }\n\n fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n return () => {\n if (fakeAnimationRef.current) {\n cancelAnimationFrame(fakeAnimationRef.current)\n }\n }\n }, [demo, state, barCount])\n\n // Use fake or real volume data based on demo mode\n const volumeBands = useMemo(\n () => (demo ? fakeVolumeBands : realVolumeBands),\n [demo, fakeVolumeBands, realVolumeBands]\n )\n\n // Animation sequencing\n const highlightedIndices = useBarAnimator(\n state,\n barCount,\n state === \"connecting\"\n ? 2000 / barCount\n : state === \"thinking\"\n ? 150\n : state === \"listening\"\n ? 500\n : 1000\n )\n\n return (\n \n {volumeBands.map((volume, index) => {\n const heightPct = Math.min(\n maxHeight,\n Math.max(minHeight, volume * 100 + 5)\n )\n const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n return (\n \n )\n })}\n \n )\n }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n heightPct: number\n isHighlighted: boolean\n state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n \n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n BarVisualizerComponent,\n (prevProps, nextProps) => {\n return (\n prevProps.state === nextProps.state &&\n prevProps.barCount === nextProps.barCount &&\n prevProps.mediaStream === nextProps.mediaStream &&\n prevProps.minHeight === nextProps.minHeight &&\n prevProps.maxHeight === nextProps.maxHeight &&\n prevProps.demo === nextProps.demo &&\n prevProps.centerAlign === nextProps.centerAlign &&\n prevProps.className === nextProps.className &&\n JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n )\n }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes & {\n active?: boolean\n processing?: boolean\n deviceId?: string\n barWidth?: number\n barHeight?: number\n barGap?: number\n barRadius?: number\n barColor?: string\n fadeEdges?: boolean\n fadeWidth?: number\n height?: string | number\n sensitivity?: number\n smoothingTimeConstant?: number\n fftSize?: number\n historySize?: number\n updateRate?: number\n mode?: \"scrolling\" | \"static\"\n onError?: (error: Error) => void\n onStreamReady?: (stream: MediaStream) => void\n onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n active = false,\n processing = false,\n deviceId,\n barWidth = 3,\n barGap = 1,\n barRadius = 1.5,\n barColor,\n fadeEdges = true,\n fadeWidth = 24,\n barHeight: baseBarHeight = 4,\n height = 64,\n sensitivity = 1,\n smoothingTimeConstant = 0.8,\n fftSize = 256,\n historySize = 60,\n updateRate = 30,\n mode = \"static\",\n onError,\n onStreamReady,\n onStreamEnd,\n className,\n ...props\n}: LiveWaveformProps) => {\n const canvasRef = useRef(null)\n const containerRef = useRef(null)\n const historyRef = useRef([])\n const analyserRef = useRef(null)\n const audioContextRef = useRef(null)\n const streamRef = useRef(null)\n const animationRef = useRef(0)\n const lastUpdateRef = useRef(0)\n const processingAnimationRef = useRef(null)\n const lastActiveDataRef = useRef([])\n const transitionProgressRef = useRef(0)\n const staticBarsRef = useRef([])\n const needsRedrawRef = useRef(true)\n const gradientCacheRef = useRef(null)\n const lastWidthRef = useRef(0)\n const heightStyle = typeof height === \"number\" ? `${height}px` : height\n // Handle canvas resizing\n useEffect(() => {\n const canvas = canvasRef.current\n const container = containerRef.current\n if (!canvas || !container) return\n const resizeObserver = new ResizeObserver(() => {\n const rect = container.getBoundingClientRect()\n const dpr = window.devicePixelRatio || 1\n canvas.width = rect.width * dpr\n canvas.height = rect.height * dpr\n canvas.style.width = `${rect.width}px`\n canvas.style.height = `${rect.height}px`\n const ctx = canvas.getContext(\"2d\")\n if (ctx) {\n ctx.scale(dpr, dpr)\n }\n gradientCacheRef.current = null\n lastWidthRef.current = rect.width\n needsRedrawRef.current = true\n })\n resizeObserver.observe(container)\n return () => resizeObserver.disconnect()\n }, [])\n useEffect(() => {\n if (processing && !active) {\n let time = 0\n transitionProgressRef.current = 0\n const animateProcessing = () => {\n time += 0.03\n transitionProgressRef.current = Math.min(\n 1,\n transitionProgressRef.current + 0.02\n )\n const processingData = []\n const barCount = Math.floor(\n (containerRef.current?.getBoundingClientRect().width || 200) /\n (barWidth + barGap)\n )\n if (mode === \"static\") {\n const halfCount = Math.floor(barCount / 2)\n for (let i = 0; i < barCount; i++) {\n const normalizedPosition = (i - halfCount) / halfCount\n const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n const combinedWave = wave1 + wave2 + wave3\n const processingValue = (0.2 + combinedWave) * centerWeight\n let finalValue = processingValue\n if (\n lastActiveDataRef.current.length > 0 &&\n transitionProgressRef.current < 1\n ) {\n const lastDataIndex = Math.min(\n i,\n lastActiveDataRef.current.length - 1\n )\n const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n finalValue =\n lastValue * (1 - transitionProgressRef.current) +\n processingValue * transitionProgressRef.current\n }\n processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n }\n } else {\n for (let i = 0; i < barCount; i++) {\n const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n const combinedWave = wave1 + wave2 + wave3\n const processingValue = (0.2 + combinedWave) * centerWeight\n let finalValue = processingValue\n if (\n lastActiveDataRef.current.length > 0 &&\n transitionProgressRef.current < 1\n ) {\n const lastDataIndex = Math.floor(\n (i / barCount) * lastActiveDataRef.current.length\n )\n const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n finalValue =\n lastValue * (1 - transitionProgressRef.current) +\n processingValue * transitionProgressRef.current\n }\n processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n }\n }\n if (mode === \"static\") {\n staticBarsRef.current = processingData\n } else {\n historyRef.current = processingData\n }\n needsRedrawRef.current = true\n processingAnimationRef.current =\n requestAnimationFrame(animateProcessing)\n }\n animateProcessing()\n return () => {\n if (processingAnimationRef.current) {\n cancelAnimationFrame(processingAnimationRef.current)\n }\n }\n } else if (!active && !processing) {\n const hasData =\n mode === \"static\"\n ? staticBarsRef.current.length > 0\n : historyRef.current.length > 0\n if (hasData) {\n let fadeProgress = 0\n const fadeToIdle = () => {\n fadeProgress += 0.03\n if (fadeProgress < 1) {\n if (mode === \"static\") {\n staticBarsRef.current = staticBarsRef.current.map(\n (value) => value * (1 - fadeProgress)\n )\n } else {\n historyRef.current = historyRef.current.map(\n (value) => value * (1 - fadeProgress)\n )\n }\n needsRedrawRef.current = true\n requestAnimationFrame(fadeToIdle)\n } else {\n if (mode === \"static\") {\n staticBarsRef.current = []\n } else {\n historyRef.current = []\n }\n }\n }\n fadeToIdle()\n }\n }\n }, [processing, active, barWidth, barGap, mode])\n // Handle microphone setup and teardown\n useEffect(() => {\n if (!active) {\n if (streamRef.current) {\n streamRef.current.getTracks().forEach((track) => track.stop())\n streamRef.current = null\n onStreamEnd?.()\n }\n if (\n audioContextRef.current &&\n audioContextRef.current.state !== \"closed\"\n ) {\n audioContextRef.current.close()\n audioContextRef.current = null\n }\n if (animationRef.current) {\n cancelAnimationFrame(animationRef.current)\n animationRef.current = 0\n }\n return\n }\n const setupMicrophone = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n audio: deviceId\n ? {\n deviceId: { exact: deviceId },\n echoCancellation: true,\n noiseSuppression: true,\n autoGainControl: true,\n }\n : {\n echoCancellation: true,\n noiseSuppression: true,\n autoGainControl: true,\n },\n })\n streamRef.current = stream\n onStreamReady?.(stream)\n const AudioContextConstructor =\n window.AudioContext ||\n (window as unknown as { webkitAudioContext: typeof AudioContext })\n .webkitAudioContext\n const audioContext = new AudioContextConstructor()\n const analyser = audioContext.createAnalyser()\n analyser.fftSize = fftSize\n analyser.smoothingTimeConstant = smoothingTimeConstant\n const source = audioContext.createMediaStreamSource(stream)\n source.connect(analyser)\n audioContextRef.current = audioContext\n analyserRef.current = analyser\n // Clear history when starting\n historyRef.current = []\n } catch (error) {\n onError?.(error as Error)\n }\n }\n setupMicrophone()\n return () => {\n if (streamRef.current) {\n streamRef.current.getTracks().forEach((track) => track.stop())\n streamRef.current = null\n onStreamEnd?.()\n }\n if (\n audioContextRef.current &&\n audioContextRef.current.state !== \"closed\"\n ) {\n audioContextRef.current.close()\n audioContextRef.current = null\n }\n if (animationRef.current) {\n cancelAnimationFrame(animationRef.current)\n animationRef.current = 0\n }\n }\n }, [\n active,\n deviceId,\n fftSize,\n smoothingTimeConstant,\n onError,\n onStreamReady,\n onStreamEnd,\n ])\n // Animation loop\n useEffect(() => {\n const canvas = canvasRef.current\n if (!canvas) return\n const ctx = canvas.getContext(\"2d\")\n if (!ctx) return\n let rafId: number\n const animate = (currentTime: number) => {\n // Render waveform\n const rect = canvas.getBoundingClientRect()\n // Update audio data if active\n if (active && currentTime - lastUpdateRef.current > updateRate) {\n lastUpdateRef.current = currentTime\n if (analyserRef.current) {\n const dataArray = new Uint8Array(\n analyserRef.current.frequencyBinCount\n )\n analyserRef.current.getByteFrequencyData(dataArray)\n if (mode === \"static\") {\n // For static mode, update bars in place\n const startFreq = Math.floor(dataArray.length * 0.05)\n const endFreq = Math.floor(dataArray.length * 0.4)\n const relevantData = dataArray.slice(startFreq, endFreq)\n const barCount = Math.floor(rect.width / (barWidth + barGap))\n const halfCount = Math.floor(barCount / 2)\n const newBars: number[] = []\n // Mirror the data for symmetric display\n for (let i = halfCount - 1; i >= 0; i--) {\n const dataIndex = Math.floor(\n (i / halfCount) * relevantData.length\n )\n const value = Math.min(\n 1,\n (relevantData[dataIndex] / 255) * sensitivity\n )\n newBars.push(Math.max(0.05, value))\n }\n for (let i = 0; i < halfCount; i++) {\n const dataIndex = Math.floor(\n (i / halfCount) * relevantData.length\n )\n const value = Math.min(\n 1,\n (relevantData[dataIndex] / 255) * sensitivity\n )\n newBars.push(Math.max(0.05, value))\n }\n staticBarsRef.current = newBars\n lastActiveDataRef.current = newBars\n } else {\n // Scrolling mode - original behavior\n let sum = 0\n const startFreq = Math.floor(dataArray.length * 0.05)\n const endFreq = Math.floor(dataArray.length * 0.4)\n const relevantData = dataArray.slice(startFreq, endFreq)\n for (let i = 0; i < relevantData.length; i++) {\n sum += relevantData[i]\n }\n const average = (sum / relevantData.length / 255) * sensitivity\n // Add to history\n historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n lastActiveDataRef.current = [...historyRef.current]\n // Maintain history size\n if (historyRef.current.length > historySize) {\n historyRef.current.shift()\n }\n }\n needsRedrawRef.current = true\n }\n }\n // Only redraw if needed\n if (!needsRedrawRef.current && !active) {\n rafId = requestAnimationFrame(animate)\n return\n }\n needsRedrawRef.current = active\n ctx.clearRect(0, 0, rect.width, rect.height)\n const computedBarColor =\n barColor ||\n (() => {\n const style = getComputedStyle(canvas)\n // Try to get the computed color value directly\n const color = style.color\n return color || \"#000\"\n })()\n const step = barWidth + barGap\n const barCount = Math.floor(rect.width / step)\n const centerY = rect.height / 2\n // Draw bars based on mode\n if (mode === \"static\") {\n // Static mode - bars in fixed positions\n const dataToRender = processing\n ? staticBarsRef.current\n : active\n ? staticBarsRef.current\n : staticBarsRef.current.length > 0\n ? staticBarsRef.current\n : []\n for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n const value = dataToRender[i] || 0.1\n const x = i * step\n const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n const y = centerY - barHeight / 2\n ctx.fillStyle = computedBarColor\n ctx.globalAlpha = 0.4 + value * 0.6\n if (barRadius > 0) {\n ctx.beginPath()\n ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n ctx.fill()\n } else {\n ctx.fillRect(x, y, barWidth, barHeight)\n }\n }\n } else {\n // Scrolling mode - original behavior\n for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n const dataIndex = historyRef.current.length - 1 - i\n const value = historyRef.current[dataIndex] || 0.1\n const x = rect.width - (i + 1) * step\n const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n const y = centerY - barHeight / 2\n ctx.fillStyle = computedBarColor\n ctx.globalAlpha = 0.4 + value * 0.6\n if (barRadius > 0) {\n ctx.beginPath()\n ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n ctx.fill()\n } else {\n ctx.fillRect(x, y, barWidth, barHeight)\n }\n }\n }\n // Apply edge fading\n if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n // Cache gradient if width hasn't changed\n if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n // destination-out: removes destination where source alpha is high\n // We want: fade edges out, keep center solid\n // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n // Center stays transparent = keep everything\n gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n gradientCacheRef.current = gradient\n lastWidthRef.current = rect.width\n }\n ctx.globalCompositeOperation = \"destination-out\"\n ctx.fillStyle = gradientCacheRef.current\n ctx.fillRect(0, 0, rect.width, rect.height)\n ctx.globalCompositeOperation = \"source-over\"\n }\n ctx.globalAlpha = 1\n rafId = requestAnimationFrame(animate)\n }\n rafId = requestAnimationFrame(animate)\n return () => {\n if (rafId) {\n cancelAnimationFrame(rafId)\n }\n }\n }, [\n active,\n processing,\n sensitivity,\n updateRate,\n historySize,\n barWidth,\n baseBarHeight,\n barGap,\n barRadius,\n barColor,\n fadeEdges,\n fadeWidth,\n mode,\n ])\n return (\n \n {!active && !processing && (\n
\n )}\n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n return (\n \n \n \n \n )\n}\n\nfunction BarVisualizerDemo() {\n const [state, setState] = useState(\"speaking\")\n\n return (\n \n \n \n Audio Frequency Visualizer\n \n Real-time frequency band visualization with animated state\n transitions\n \n \n \n \n \n \n setState(\"connecting\")}\n >\n Connecting\n \n setState(\"listening\")}\n >\n Listening\n \n setState(\"speaking\")}\n >\n Speaking\n \n \n \n \n )\n}\n\nfunction WaveformDemo() {\n const [active, setActive] = useState(false)\n const [processing, setProcessing] = useState(true)\n const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n const handleToggleActive = () => {\n setActive(!active)\n if (!active) {\n setProcessing(false)\n }\n }\n const handleToggleProcessing = () => {\n setProcessing(!processing)\n if (!processing) {\n setActive(false)\n }\n }\n return (\n \n \n \n Live Audio Waveform\n \n Real-time microphone input visualization with audio reactivity\n \n \n \n \n \n \n \n {active ? \"Stop\" : \"Start\"} Listening\n \n \n {processing ? \"Stop\" : \"Start\"} Processing\n \n setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n >\n {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n \n \n \n \n )\n}\n\nexport interface AudioAnalyserOptions {\n fftSize?: number\n smoothingTimeConstant?: number\n minDecibels?: number\n maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n mediaStream: MediaStream,\n options: AudioAnalyserOptions = {}\n) {\n const audioContext = new (window.AudioContext ||\n (window as unknown as { webkitAudioContext: typeof AudioContext })\n .webkitAudioContext)()\n const source = audioContext.createMediaStreamSource(mediaStream)\n const analyser = audioContext.createAnalyser()\n\n if (options.fftSize) analyser.fftSize = options.fftSize\n if (options.smoothingTimeConstant !== undefined) {\n analyser.smoothingTimeConstant = options.smoothingTimeConstant\n }\n if (options.minDecibels !== undefined)\n analyser.minDecibels = options.minDecibels\n if (options.maxDecibels !== undefined)\n analyser.maxDecibels = options.maxDecibels\n\n source.connect(analyser)\n\n const cleanup = () => {\n source.disconnect()\n audioContext.close()\n }\n\n return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n mediaStream?: MediaStream | null,\n options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n const [volume, setVolume] = useState(0)\n const volumeRef = useRef(0)\n const frameId = useRef(undefined)\n\n // Memoize options to prevent unnecessary re-renders\n const memoizedOptions = useMemo(() => options, [options])\n\n useEffect(() => {\n if (!mediaStream) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setVolume(0)\n volumeRef.current = 0\n return\n }\n\n const { analyser, cleanup } = createAudioAnalyser(\n mediaStream,\n memoizedOptions\n )\n\n const bufferLength = analyser.frequencyBinCount\n const dataArray = new Uint8Array(bufferLength)\n let lastUpdate = 0\n const updateInterval = 1000 / 30 // 30 FPS\n\n const updateVolume = (timestamp: number) => {\n if (timestamp - lastUpdate >= updateInterval) {\n analyser.getByteFrequencyData(dataArray)\n let sum = 0\n for (let i = 0; i < dataArray.length; i++) {\n const a = dataArray[i]\n sum += a * a\n }\n const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n // Only update state if volume changed significantly\n if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n volumeRef.current = newVolume\n setVolume(newVolume)\n }\n lastUpdate = timestamp\n }\n frameId.current = requestAnimationFrame(updateVolume)\n }\n\n frameId.current = requestAnimationFrame(updateVolume)\n\n return () => {\n cleanup()\n if (frameId.current) {\n cancelAnimationFrame(frameId.current)\n }\n }\n }, [mediaStream, memoizedOptions])\n\n return volume\n}\n\nexport interface MultiBandVolumeOptions {\n bands?: number\n loPass?: number // Low frequency cutoff\n hiPass?: number // High frequency cutoff\n updateInterval?: number // Update interval in ms\n analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n bands: 5,\n loPass: 100,\n hiPass: 600,\n updateInterval: 32,\n analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n if (value === -Infinity) return 0\n const minDb = -100\n const maxDb = -10\n const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n mediaStream?: MediaStream | null,\n options: MultiBandVolumeOptions = {}\n) {\n const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n const [frequencyBands, setFrequencyBands] = useState(() =>\n new Array(opts.bands).fill(0)\n )\n const bandsRef = useRef(new Array(opts.bands).fill(0))\n const frameId = useRef(undefined)\n\n useEffect(() => {\n if (!mediaStream) {\n const emptyBands = new Array(opts.bands).fill(0)\n setTimeout(() => {\n setFrequencyBands(emptyBands)\n }, 0)\n bandsRef.current = emptyBands\n return\n }\n\n const { analyser, cleanup } = createAudioAnalyser(\n mediaStream,\n opts.analyserOptions\n )\n\n const bufferLength = analyser.frequencyBinCount\n const dataArray = new Float32Array(bufferLength)\n const sliceStart = opts.loPass!\n const sliceEnd = opts.hiPass!\n const sliceLength = sliceEnd - sliceStart\n const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n let lastUpdate = 0\n const updateInterval = opts.updateInterval!\n\n const updateVolume = (timestamp: number) => {\n if (timestamp - lastUpdate >= updateInterval) {\n analyser.getFloatFrequencyData(dataArray)\n\n // Process directly without creating intermediate arrays\n const chunks = new Array(opts.bands!)\n\n for (let i = 0; i < opts.bands!; i++) {\n let sum = 0\n let count = 0\n const startIdx = sliceStart + i * chunkSize\n const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n for (let j = startIdx; j < endIdx; j++) {\n sum += normalizeDb(dataArray[j])\n count++\n }\n\n chunks[i] = count > 0 ? sum / count : 0\n }\n\n // Only update state if bands changed significantly\n let hasChanged = false\n for (let i = 0; i < chunks.length; i++) {\n if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n hasChanged = true\n break\n }\n }\n\n if (hasChanged) {\n bandsRef.current = chunks\n setFrequencyBands(chunks)\n }\n\n lastUpdate = timestamp\n }\n\n frameId.current = requestAnimationFrame(updateVolume)\n }\n\n frameId.current = requestAnimationFrame(updateVolume)\n\n return () => {\n cleanup()\n if (frameId.current) {\n cancelAnimationFrame(frameId.current)\n }\n }\n }, [mediaStream, opts])\n\n return frequencyBands\n}\n\ntype AnimationState =\n | \"connecting\"\n | \"initializing\"\n | \"listening\"\n | \"speaking\"\n | \"thinking\"\n | undefined\n\nexport const useBarAnimator = (\n state: AnimationState,\n columns: number,\n interval: number\n): number[] => {\n const indexRef = useRef(0)\n const [currentFrame, setCurrentFrame] = useState([])\n const animationFrameId = useRef(null)\n\n // Memoize sequence generation\n const sequence = useMemo(() => {\n if (state === \"thinking\" || state === \"listening\") {\n return generateListeningSequenceBar(columns)\n } else if (state === \"connecting\" || state === \"initializing\") {\n return generateConnectingSequenceBar(columns)\n } else if (state === undefined || state === \"speaking\") {\n return [new Array(columns).fill(0).map((_, idx) => idx)]\n } else {\n return [[]]\n }\n }, [state, columns])\n\n useEffect(() => {\n indexRef.current = 0\n setTimeout(() => {\n setCurrentFrame(sequence[0] || [])\n }, 0)\n }, [sequence])\n\n useEffect(() => {\n let startTime = performance.now()\n\n const animate = (time: DOMHighResTimeStamp) => {\n const timeElapsed = time - startTime\n\n if (timeElapsed >= interval) {\n indexRef.current = (indexRef.current + 1) % sequence.length\n setCurrentFrame(sequence[indexRef.current] || [])\n startTime = time\n }\n\n animationFrameId.current = requestAnimationFrame(animate)\n }\n\n animationFrameId.current = requestAnimationFrame(animate)\n\n return () => {\n if (animationFrameId.current !== null) {\n cancelAnimationFrame(animationFrameId.current)\n }\n }\n }, [interval, sequence])\n\n return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n const seq = []\n for (let x = 0; x < columns; x++) {\n seq.push([x, columns - 1 - x])\n }\n return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n const center = Math.floor(columns / 2)\n const noIndex = -1\n return [[center], [noIndex]]\n}\n\nexport type AgentState =\n | \"connecting\"\n | \"initializing\"\n | \"listening\"\n | \"speaking\"\n | \"thinking\"\n\nexport interface BarVisualizerProps\n extends React.HTMLAttributes {\n /** Voice assistant state */\n state?: AgentState\n /** Number of bars to display */\n barCount?: number\n /** Audio source */\n mediaStream?: MediaStream | null\n /** Min/max height as percentage */\n minHeight?: number\n maxHeight?: number\n /** Enable demo mode with fake audio data */\n demo?: boolean\n /** Align bars from center instead of bottom */\n centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n HTMLDivElement,\n BarVisualizerProps\n>(\n (\n {\n state,\n barCount = 15,\n mediaStream,\n minHeight = 20,\n maxHeight = 100,\n demo = false,\n centerAlign = false,\n className,\n style,\n ...props\n },\n ref\n ) => {\n // Audio processing\n const realVolumeBands = useMultibandVolume(mediaStream, {\n bands: barCount,\n loPass: 100,\n hiPass: 200,\n })\n\n // Generate fake volume data for demo mode using refs to avoid state updates\n const fakeVolumeBandsRef = useRef(new Array(barCount).fill(0.2))\n const [fakeVolumeBands, setFakeVolumeBands] = useState(() =>\n new Array(barCount).fill(0.2)\n )\n const fakeAnimationRef = useRef(undefined)\n\n // Animate fake volume bands for speaking and listening states\n useEffect(() => {\n if (!demo) return\n\n if (state !== \"speaking\" && state !== \"listening\") {\n const bands = new Array(barCount).fill(0.2)\n fakeVolumeBandsRef.current = bands\n setTimeout(() => {\n setFakeVolumeBands(bands)\n }, 0)\n return\n }\n\n let lastUpdate = 0\n const updateInterval = 50\n const startTime = Date.now() / 1000\n\n const updateFakeVolume = (timestamp: number) => {\n if (timestamp - lastUpdate >= updateInterval) {\n const time = Date.now() / 1000 - startTime\n const newBands = new Array(barCount)\n\n for (let i = 0; i < barCount; i++) {\n const waveOffset = i * 0.5\n const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n const randomNoise = Math.random() * 0.2\n newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n }\n\n // Only update if values changed significantly\n let hasChanged = false\n for (let i = 0; i < barCount; i++) {\n if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n hasChanged = true\n break\n }\n }\n\n if (hasChanged) {\n fakeVolumeBandsRef.current = newBands\n setFakeVolumeBands(newBands)\n }\n\n lastUpdate = timestamp\n }\n\n fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n }\n\n fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n return () => {\n if (fakeAnimationRef.current) {\n cancelAnimationFrame(fakeAnimationRef.current)\n }\n }\n }, [demo, state, barCount])\n\n // Use fake or real volume data based on demo mode\n const volumeBands = useMemo(\n () => (demo ? fakeVolumeBands : realVolumeBands),\n [demo, fakeVolumeBands, realVolumeBands]\n )\n\n // Animation sequencing\n const highlightedIndices = useBarAnimator(\n state,\n barCount,\n state === \"connecting\"\n ? 2000 / barCount\n : state === \"thinking\"\n ? 150\n : state === \"listening\"\n ? 500\n : 1000\n )\n\n return (\n \n {volumeBands.map((volume, index) => {\n const heightPct = Math.min(\n maxHeight,\n Math.max(minHeight, volume * 100 + 5)\n )\n const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n return (\n \n )\n })}\n \n )\n }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n heightPct: number\n isHighlighted: boolean\n state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n \n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n BarVisualizerComponent,\n (prevProps, nextProps) => {\n return (\n prevProps.state === nextProps.state &&\n prevProps.barCount === nextProps.barCount &&\n prevProps.mediaStream === nextProps.mediaStream &&\n prevProps.minHeight === nextProps.minHeight &&\n prevProps.maxHeight === nextProps.maxHeight &&\n prevProps.demo === nextProps.demo &&\n prevProps.centerAlign === nextProps.centerAlign &&\n prevProps.className === nextProps.className &&\n JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n )\n }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes & {\n active?: boolean\n processing?: boolean\n deviceId?: string\n barWidth?: number\n barHeight?: number\n barGap?: number\n barRadius?: number\n barColor?: string\n fadeEdges?: boolean\n fadeWidth?: number\n height?: string | number\n sensitivity?: number\n smoothingTimeConstant?: number\n fftSize?: number\n historySize?: number\n updateRate?: number\n mode?: \"scrolling\" | \"static\"\n onError?: (error: Error) => void\n onStreamReady?: (stream: MediaStream) => void\n onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n active = false,\n processing = false,\n deviceId,\n barWidth = 3,\n barGap = 1,\n barRadius = 1.5,\n barColor,\n fadeEdges = true,\n fadeWidth = 24,\n barHeight: baseBarHeight = 4,\n height = 64,\n sensitivity = 1,\n smoothingTimeConstant = 0.8,\n fftSize = 256,\n historySize = 60,\n updateRate = 30,\n mode = \"static\",\n onError,\n onStreamReady,\n onStreamEnd,\n className,\n ...props\n}: LiveWaveformProps) => {\n const canvasRef = useRef(null)\n const containerRef = useRef(null)\n const historyRef = useRef([])\n const analyserRef = useRef(null)\n const audioContextRef = useRef(null)\n const streamRef = useRef(null)\n const animationRef = useRef(0)\n const lastUpdateRef = useRef(0)\n const processingAnimationRef = useRef(null)\n const lastActiveDataRef = useRef([])\n const transitionProgressRef = useRef(0)\n const staticBarsRef = useRef([])\n const needsRedrawRef = useRef(true)\n const gradientCacheRef = useRef(null)\n const lastWidthRef = useRef(0)\n const heightStyle = typeof height === \"number\" ? `${height}px` : height\n // Handle canvas resizing\n useEffect(() => {\n const canvas = canvasRef.current\n const container = containerRef.current\n if (!canvas || !container) return\n const resizeObserver = new ResizeObserver(() => {\n const rect = container.getBoundingClientRect()\n const dpr = window.devicePixelRatio || 1\n canvas.width = rect.width * dpr\n canvas.height = rect.height * dpr\n canvas.style.width = `${rect.width}px`\n canvas.style.height = `${rect.height}px`\n const ctx = canvas.getContext(\"2d\")\n if (ctx) {\n ctx.scale(dpr, dpr)\n }\n gradientCacheRef.current = null\n lastWidthRef.current = rect.width\n needsRedrawRef.current = true\n })\n resizeObserver.observe(container)\n return () => resizeObserver.disconnect()\n }, [])\n useEffect(() => {\n if (processing && !active) {\n let time = 0\n transitionProgressRef.current = 0\n const animateProcessing = () => {\n time += 0.03\n transitionProgressRef.current = Math.min(\n 1,\n transitionProgressRef.current + 0.02\n )\n const processingData = []\n const barCount = Math.floor(\n (containerRef.current?.getBoundingClientRect().width || 200) /\n (barWidth + barGap)\n )\n if (mode === \"static\") {\n const halfCount = Math.floor(barCount / 2)\n for (let i = 0; i < barCount; i++) {\n const normalizedPosition = (i - halfCount) / halfCount\n const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n const combinedWave = wave1 + wave2 + wave3\n const processingValue = (0.2 + combinedWave) * centerWeight\n let finalValue = processingValue\n if (\n lastActiveDataRef.current.length > 0 &&\n transitionProgressRef.current < 1\n ) {\n const lastDataIndex = Math.min(\n i,\n lastActiveDataRef.current.length - 1\n )\n const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n finalValue =\n lastValue * (1 - transitionProgressRef.current) +\n processingValue * transitionProgressRef.current\n }\n processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n }\n } else {\n for (let i = 0; i < barCount; i++) {\n const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n const combinedWave = wave1 + wave2 + wave3\n const processingValue = (0.2 + combinedWave) * centerWeight\n let finalValue = processingValue\n if (\n lastActiveDataRef.current.length > 0 &&\n transitionProgressRef.current < 1\n ) {\n const lastDataIndex = Math.floor(\n (i / barCount) * lastActiveDataRef.current.length\n )\n const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n finalValue =\n lastValue * (1 - transitionProgressRef.current) +\n processingValue * transitionProgressRef.current\n }\n processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n }\n }\n if (mode === \"static\") {\n staticBarsRef.current = processingData\n } else {\n historyRef.current = processingData\n }\n needsRedrawRef.current = true\n processingAnimationRef.current =\n requestAnimationFrame(animateProcessing)\n }\n animateProcessing()\n return () => {\n if (processingAnimationRef.current) {\n cancelAnimationFrame(processingAnimationRef.current)\n }\n }\n } else if (!active && !processing) {\n const hasData =\n mode === \"static\"\n ? staticBarsRef.current.length > 0\n : historyRef.current.length > 0\n if (hasData) {\n let fadeProgress = 0\n const fadeToIdle = () => {\n fadeProgress += 0.03\n if (fadeProgress < 1) {\n if (mode === \"static\") {\n staticBarsRef.current = staticBarsRef.current.map(\n (value) => value * (1 - fadeProgress)\n )\n } else {\n historyRef.current = historyRef.current.map(\n (value) => value * (1 - fadeProgress)\n )\n }\n needsRedrawRef.current = true\n requestAnimationFrame(fadeToIdle)\n } else {\n if (mode === \"static\") {\n staticBarsRef.current = []\n } else {\n historyRef.current = []\n }\n }\n }\n fadeToIdle()\n }\n }\n }, [processing, active, barWidth, barGap, mode])\n // Handle microphone setup and teardown\n useEffect(() => {\n if (!active) {\n if (streamRef.current) {\n streamRef.current.getTracks().forEach((track) => track.stop())\n streamRef.current = null\n onStreamEnd?.()\n }\n if (\n audioContextRef.current &&\n audioContextRef.current.state !== \"closed\"\n ) {\n audioContextRef.current.close()\n audioContextRef.current = null\n }\n if (animationRef.current) {\n cancelAnimationFrame(animationRef.current)\n animationRef.current = 0\n }\n return\n }\n const setupMicrophone = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n audio: deviceId\n ? {\n deviceId: { exact: deviceId },\n echoCancellation: true,\n noiseSuppression: true,\n autoGainControl: true,\n }\n : {\n echoCancellation: true,\n noiseSuppression: true,\n autoGainControl: true,\n },\n })\n streamRef.current = stream\n onStreamReady?.(stream)\n const AudioContextConstructor =\n window.AudioContext ||\n (window as unknown as { webkitAudioContext: typeof AudioContext })\n .webkitAudioContext\n const audioContext = new AudioContextConstructor()\n const analyser = audioContext.createAnalyser()\n analyser.fftSize = fftSize\n analyser.smoothingTimeConstant = smoothingTimeConstant\n const source = audioContext.createMediaStreamSource(stream)\n source.connect(analyser)\n audioContextRef.current = audioContext\n analyserRef.current = analyser\n // Clear history when starting\n historyRef.current = []\n } catch (error) {\n onError?.(error as Error)\n }\n }\n setupMicrophone()\n return () => {\n if (streamRef.current) {\n streamRef.current.getTracks().forEach((track) => track.stop())\n streamRef.current = null\n onStreamEnd?.()\n }\n if (\n audioContextRef.current &&\n audioContextRef.current.state !== \"closed\"\n ) {\n audioContextRef.current.close()\n audioContextRef.current = null\n }\n if (animationRef.current) {\n cancelAnimationFrame(animationRef.current)\n animationRef.current = 0\n }\n }\n }, [\n active,\n deviceId,\n fftSize,\n smoothingTimeConstant,\n onError,\n onStreamReady,\n onStreamEnd,\n ])\n // Animation loop\n useEffect(() => {\n const canvas = canvasRef.current\n if (!canvas) return\n const ctx = canvas.getContext(\"2d\")\n if (!ctx) return\n let rafId: number\n const animate = (currentTime: number) => {\n // Render waveform\n const rect = canvas.getBoundingClientRect()\n // Update audio data if active\n if (active && currentTime - lastUpdateRef.current > updateRate) {\n lastUpdateRef.current = currentTime\n if (analyserRef.current) {\n const dataArray = new Uint8Array(\n analyserRef.current.frequencyBinCount\n )\n analyserRef.current.getByteFrequencyData(dataArray)\n if (mode === \"static\") {\n // For static mode, update bars in place\n const startFreq = Math.floor(dataArray.length * 0.05)\n const endFreq = Math.floor(dataArray.length * 0.4)\n const relevantData = dataArray.slice(startFreq, endFreq)\n const barCount = Math.floor(rect.width / (barWidth + barGap))\n const halfCount = Math.floor(barCount / 2)\n const newBars: number[] = []\n // Mirror the data for symmetric display\n for (let i = halfCount - 1; i >= 0; i--) {\n const dataIndex = Math.floor(\n (i / halfCount) * relevantData.length\n )\n const value = Math.min(\n 1,\n (relevantData[dataIndex] / 255) * sensitivity\n )\n newBars.push(Math.max(0.05, value))\n }\n for (let i = 0; i < halfCount; i++) {\n const dataIndex = Math.floor(\n (i / halfCount) * relevantData.length\n )\n const value = Math.min(\n 1,\n (relevantData[dataIndex] / 255) * sensitivity\n )\n newBars.push(Math.max(0.05, value))\n }\n staticBarsRef.current = newBars\n lastActiveDataRef.current = newBars\n } else {\n // Scrolling mode - original behavior\n let sum = 0\n const startFreq = Math.floor(dataArray.length * 0.05)\n const endFreq = Math.floor(dataArray.length * 0.4)\n const relevantData = dataArray.slice(startFreq, endFreq)\n for (let i = 0; i < relevantData.length; i++) {\n sum += relevantData[i]\n }\n const average = (sum / relevantData.length / 255) * sensitivity\n // Add to history\n historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n lastActiveDataRef.current = [...historyRef.current]\n // Maintain history size\n if (historyRef.current.length > historySize) {\n historyRef.current.shift()\n }\n }\n needsRedrawRef.current = true\n }\n }\n // Only redraw if needed\n if (!needsRedrawRef.current && !active) {\n rafId = requestAnimationFrame(animate)\n return\n }\n needsRedrawRef.current = active\n ctx.clearRect(0, 0, rect.width, rect.height)\n const computedBarColor =\n barColor ||\n (() => {\n const style = getComputedStyle(canvas)\n // Try to get the computed color value directly\n const color = style.color\n return color || \"#000\"\n })()\n const step = barWidth + barGap\n const barCount = Math.floor(rect.width / step)\n const centerY = rect.height / 2\n // Draw bars based on mode\n if (mode === \"static\") {\n // Static mode - bars in fixed positions\n const dataToRender = processing\n ? staticBarsRef.current\n : active\n ? staticBarsRef.current\n : staticBarsRef.current.length > 0\n ? staticBarsRef.current\n : []\n for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n const value = dataToRender[i] || 0.1\n const x = i * step\n const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n const y = centerY - barHeight / 2\n ctx.fillStyle = computedBarColor\n ctx.globalAlpha = 0.4 + value * 0.6\n if (barRadius > 0) {\n ctx.beginPath()\n ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n ctx.fill()\n } else {\n ctx.fillRect(x, y, barWidth, barHeight)\n }\n }\n } else {\n // Scrolling mode - original behavior\n for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n const dataIndex = historyRef.current.length - 1 - i\n const value = historyRef.current[dataIndex] || 0.1\n const x = rect.width - (i + 1) * step\n const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n const y = centerY - barHeight / 2\n ctx.fillStyle = computedBarColor\n ctx.globalAlpha = 0.4 + value * 0.6\n if (barRadius > 0) {\n ctx.beginPath()\n ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n ctx.fill()\n } else {\n ctx.fillRect(x, y, barWidth, barHeight)\n }\n }\n }\n // Apply edge fading\n if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n // Cache gradient if width hasn't changed\n if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n // destination-out: removes destination where source alpha is high\n // We want: fade edges out, keep center solid\n // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n // Center stays transparent = keep everything\n gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n gradientCacheRef.current = gradient\n lastWidthRef.current = rect.width\n }\n ctx.globalCompositeOperation = \"destination-out\"\n ctx.fillStyle = gradientCacheRef.current\n ctx.fillRect(0, 0, rect.width, rect.height)\n ctx.globalCompositeOperation = \"source-over\"\n }\n ctx.globalAlpha = 1\n rafId = requestAnimationFrame(animate)\n }\n rafId = requestAnimationFrame(animate)\n return () => {\n if (rafId) {\n cancelAnimationFrame(rafId)\n }\n }\n }, [\n active,\n processing,\n sensitivity,\n updateRate,\n historySize,\n barWidth,\n baseBarHeight,\n barGap,\n barRadius,\n barColor,\n fadeEdges,\n fadeWidth,\n mode,\n ])\n return (\n \n {!active && !processing && (\n
\n )}\n \n
\n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/base-lyra/accordion-demo.json b/apps/v4/public/r/styles/base-lyra/accordion-demo.json index 83f5834afd..3641deba65 100644 --- a/apps/v4/public/r/styles/base-lyra/accordion-demo.json +++ b/apps/v4/public/r/styles/base-lyra/accordion-demo.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/base-lyra/demo/accordion-demo.tsx", - "content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-nova/ui/accordion\"\n\nexport default function AccordionDemo() {\n return (\n \n \n Is Base it accessible?\n \n Yes. It adheres to the WAI-ARIA design pattern.\n \n \n \n Is it styled?\n \n Yes. It comes with default styles that matches the other\n components' aesthetic.\n \n \n \n Is it animated?\n \n Yes. It's animated by default, but you can disable it if you\n prefer.\n \n \n \n )\n}\n", + "content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-lyra/ui/accordion\"\n\nexport default function AccordionDemo() {\n return (\n \n \n Is Base it accessible?\n \n Yes. It adheres to the WAI-ARIA design pattern.\n \n \n \n Is it styled?\n \n Yes. It comes with default styles that matches the other\n components' aesthetic.\n \n \n \n Is it animated?\n \n Yes. It's animated by default, but you can disable it if you\n prefer.\n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/accordion-disabled.json b/apps/v4/public/r/styles/base-lyra/accordion-disabled.json index f461b17b04..3fe8231afa 100644 --- a/apps/v4/public/r/styles/base-lyra/accordion-disabled.json +++ b/apps/v4/public/r/styles/base-lyra/accordion-disabled.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/base-lyra/demo/accordion-disabled.tsx", - "content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-nova/ui/accordion\"\n\nexport default function AccordionDisabled() {\n return (\n \n \n Can I access my account history?\n \n Yes, you can view your complete account history including all\n transactions, plan changes, and support tickets in the Account History\n section of your dashboard.\n \n \n \n Premium feature information\n \n This section contains information about premium features. Upgrade your\n plan to access this content.\n \n \n \n How do I update my email address?\n \n You can update your email address in your account settings.\n You'll receive a verification email at your new address to\n confirm the change.\n \n \n \n )\n}\n", + "content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-lyra/ui/accordion\"\n\nexport default function AccordionDisabled() {\n return (\n \n \n Can I access my account history?\n \n Yes, you can view your complete account history including all\n transactions, plan changes, and support tickets in the Account History\n section of your dashboard.\n \n \n \n Premium feature information\n \n This section contains information about premium features. Upgrade your\n plan to access this content.\n \n \n \n How do I update my email address?\n \n You can update your email address in your account settings.\n You'll receive a verification email at your new address to\n confirm the change.\n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/accordion-example.json b/apps/v4/public/r/styles/base-lyra/accordion-example.json index b10b004647..6642c0d713 100644 --- a/apps/v4/public/r/styles/base-lyra/accordion-example.json +++ b/apps/v4/public/r/styles/base-lyra/accordion-example.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/base-lyra/examples/accordion-example.tsx", - "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction AccordionBasic() {\n const items = [\n {\n value: \"item-1\",\n trigger: \"Is it accessible?\",\n content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n },\n {\n value: \"item-2\",\n trigger: \"Is it styled?\",\n content:\n \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n },\n {\n value: \"item-3\",\n trigger: \"Is it animated?\",\n content:\n \"Yes. It's animated by default, but you can disable it if you prefer.\",\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n {item.trigger}\n {item.content}\n \n ))}\n \n \n )\n}\n\nfunction AccordionMultiple() {\n const items = [\n {\n value: \"item-1\",\n trigger:\n \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n content:\n \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n },\n {\n value: \"item-2\",\n trigger:\n \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n content:\n \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n {item.trigger}\n {item.content}\n \n ))}\n \n \n )\n}\n\nfunction AccordionWithBorders() {\n const items = [\n {\n value: \"billing\",\n trigger: \"How does billing work?\",\n content:\n \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n },\n {\n value: \"security\",\n trigger: \"Is my data secure?\",\n content:\n \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n },\n {\n value: \"integration\",\n trigger: \"What integrations do you support?\",\n content: (\n <>\n

\n We integrate with 500+ popular tools including Slack, Zapier,\n Salesforce, HubSpot, and more. You can also build custom\n integrations using our REST API and webhooks.{\" \"}\n

\n

\n Our API documentation includes code examples in 10+ programming\n languages.\n

\n \n ),\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n \n {item.trigger}\n \n \n {item.content}\n \n \n ))}\n \n \n )\n}\n\nfunction AccordionInCard() {\n const items = [\n {\n value: \"plans\",\n trigger: \"What subscription plans do you offer?\",\n content: (\n <>\n

\n We offer three subscription tiers: Starter ($9/month), Professional\n ($29/month), and Enterprise ($99/month). Each plan includes\n increasing storage limits, API access, priority support, and team\n collaboration features.\n

\n

\n Annual billing is available with a 20% discount. All\n plans include a 14-day free trial with no credit card required.\n

\n \n \n ),\n },\n {\n value: \"billing\",\n trigger: \"How does billing work?\",\n content: (\n <>\n

\n Billing occurs automatically at the start of each billing cycle. We\n accept all major credit cards, PayPal, and ACH transfers for\n enterprise customers.\n

\n

\n You'll receive an invoice via email after each payment. You can\n update your payment method or billing information anytime in your\n account settings. Failed payments will trigger automated retry\n attempts and email notifications.\n

\n \n ),\n },\n {\n value: \"upgrade\",\n trigger: \"Can I upgrade or downgrade my plan?\",\n content: (\n <>\n

\n Yes, you can change your plan at any time. When upgrading,\n you'll be charged a prorated amount for the remainder of your\n billing cycle and immediately gain access to new features.\n

\n

\n When downgrading, the change takes effect at the end of your current\n billing period, and you'll retain access to premium features\n until then. No refunds are provided for downgrades.\n

\n \n ),\n },\n {\n value: \"cancel\",\n trigger: \"How do I cancel my subscription?\",\n content: (\n <>\n

\n You can cancel your subscription anytime from your account settings.\n There are no cancellation fees or penalties. Your access will\n continue until the end of your current billing period.\n

\n

\n After cancellation, your data is retained for 30 days in case you\n want to reactivate. You can export all your data before or after\n canceling. We'd love to hear your feedback about why\n you're leaving.\n

\n \n ),\n },\n {\n value: \"refund\",\n trigger: \"What is your refund policy?\",\n content: (\n <>\n

\n We offer a 30-day money-back guarantee for new subscriptions. If\n you're not satisfied within the first 30 days, contact our\n support team for a full refund.\n

\n

\n After 30 days, we don't provide refunds for partial billing\n periods, but you can cancel anytime to avoid future charges.\n Enterprise customers have custom refund terms outlined in their\n contracts.\n

\n \n ),\n },\n ]\n\n return (\n \n \n \n Subscription & Billing\n \n Common questions about your account, plans, and payments\n \n \n \n \n {items.map((item) => (\n \n {item.trigger}\n {item.content}\n \n ))}\n \n \n \n \n )\n}\n\nfunction AccordionWithDisabled() {\n const items = [\n {\n value: \"item-1\",\n trigger: \"Can I access my account history?\",\n content:\n \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n disabled: false,\n },\n {\n value: \"item-2\",\n trigger: \"Premium feature information\",\n content:\n \"This section contains information about premium features. Upgrade your plan to access this content.\",\n disabled: true,\n },\n {\n value: \"item-3\",\n trigger: \"How do I update my email address?\",\n content:\n \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n disabled: false,\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n \n {item.trigger}\n \n \n {item.content}\n \n \n ))}\n \n \n )\n}\n", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-lyra/ui/accordion\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction AccordionBasic() {\n const items = [\n {\n value: \"item-1\",\n trigger: \"Is it accessible?\",\n content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n },\n {\n value: \"item-2\",\n trigger: \"Is it styled?\",\n content:\n \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n },\n {\n value: \"item-3\",\n trigger: \"Is it animated?\",\n content:\n \"Yes. It's animated by default, but you can disable it if you prefer.\",\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n {item.trigger}\n {item.content}\n \n ))}\n \n \n )\n}\n\nfunction AccordionMultiple() {\n const items = [\n {\n value: \"item-1\",\n trigger:\n \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n content:\n \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n },\n {\n value: \"item-2\",\n trigger:\n \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n content:\n \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n {item.trigger}\n {item.content}\n \n ))}\n \n \n )\n}\n\nfunction AccordionWithBorders() {\n const items = [\n {\n value: \"billing\",\n trigger: \"How does billing work?\",\n content:\n \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n },\n {\n value: \"security\",\n trigger: \"Is my data secure?\",\n content:\n \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n },\n {\n value: \"integration\",\n trigger: \"What integrations do you support?\",\n content: (\n <>\n

\n We integrate with 500+ popular tools including Slack, Zapier,\n Salesforce, HubSpot, and more. You can also build custom\n integrations using our REST API and webhooks.{\" \"}\n

\n

\n Our API documentation includes code examples in 10+ programming\n languages.\n

\n \n ),\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n \n {item.trigger}\n \n \n {item.content}\n \n \n ))}\n \n \n )\n}\n\nfunction AccordionInCard() {\n const items = [\n {\n value: \"plans\",\n trigger: \"What subscription plans do you offer?\",\n content: (\n <>\n

\n We offer three subscription tiers: Starter ($9/month), Professional\n ($29/month), and Enterprise ($99/month). Each plan includes\n increasing storage limits, API access, priority support, and team\n collaboration features.\n

\n

\n Annual billing is available with a 20% discount. All\n plans include a 14-day free trial with no credit card required.\n

\n \n \n ),\n },\n {\n value: \"billing\",\n trigger: \"How does billing work?\",\n content: (\n <>\n

\n Billing occurs automatically at the start of each billing cycle. We\n accept all major credit cards, PayPal, and ACH transfers for\n enterprise customers.\n

\n

\n You'll receive an invoice via email after each payment. You can\n update your payment method or billing information anytime in your\n account settings. Failed payments will trigger automated retry\n attempts and email notifications.\n

\n \n ),\n },\n {\n value: \"upgrade\",\n trigger: \"Can I upgrade or downgrade my plan?\",\n content: (\n <>\n

\n Yes, you can change your plan at any time. When upgrading,\n you'll be charged a prorated amount for the remainder of your\n billing cycle and immediately gain access to new features.\n

\n

\n When downgrading, the change takes effect at the end of your current\n billing period, and you'll retain access to premium features\n until then. No refunds are provided for downgrades.\n

\n \n ),\n },\n {\n value: \"cancel\",\n trigger: \"How do I cancel my subscription?\",\n content: (\n <>\n

\n You can cancel your subscription anytime from your account settings.\n There are no cancellation fees or penalties. Your access will\n continue until the end of your current billing period.\n

\n

\n After cancellation, your data is retained for 30 days in case you\n want to reactivate. You can export all your data before or after\n canceling. We'd love to hear your feedback about why\n you're leaving.\n

\n \n ),\n },\n {\n value: \"refund\",\n trigger: \"What is your refund policy?\",\n content: (\n <>\n

\n We offer a 30-day money-back guarantee for new subscriptions. If\n you're not satisfied within the first 30 days, contact our\n support team for a full refund.\n

\n

\n After 30 days, we don't provide refunds for partial billing\n periods, but you can cancel anytime to avoid future charges.\n Enterprise customers have custom refund terms outlined in their\n contracts.\n

\n \n ),\n },\n ]\n\n return (\n \n \n \n Subscription & Billing\n \n Common questions about your account, plans, and payments\n \n \n \n \n {items.map((item) => (\n \n {item.trigger}\n {item.content}\n \n ))}\n \n \n \n \n )\n}\n\nfunction AccordionWithDisabled() {\n const items = [\n {\n value: \"item-1\",\n trigger: \"Can I access my account history?\",\n content:\n \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n disabled: false,\n },\n {\n value: \"item-2\",\n trigger: \"Premium feature information\",\n content:\n \"This section contains information about premium features. Upgrade your plan to access this content.\",\n disabled: true,\n },\n {\n value: \"item-3\",\n trigger: \"How do I update my email address?\",\n content:\n \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n disabled: false,\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n \n {item.trigger}\n \n \n {item.content}\n \n \n ))}\n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/accordion-multiple.json b/apps/v4/public/r/styles/base-lyra/accordion-multiple.json index c41df3a915..27214b59f1 100644 --- a/apps/v4/public/r/styles/base-lyra/accordion-multiple.json +++ b/apps/v4/public/r/styles/base-lyra/accordion-multiple.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/base-lyra/demo/accordion-multiple.tsx", - "content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-nova/ui/accordion\"\n\nexport default function AccordionMultiple() {\n return (\n \n \n \n What are the key considerations when implementing a comprehensive\n enterprise-level authentication system?\n \n \n Implementing a robust enterprise authentication system requires\n careful consideration of multiple factors. This includes secure\n password hashing and storage, multi-factor authentication (MFA)\n implementation, session management, OAuth2 and SSO integration,\n regular security audits, rate limiting to prevent brute force attacks,\n and maintaining detailed audit logs. Additionally, you'll need to\n consider scalability, performance impact, and compliance with relevant\n data protection regulations such as GDPR or HIPAA.\n \n \n \n \n How does modern distributed system architecture handle eventual\n consistency and data synchronization across multiple regions?\n \n \n Modern distributed systems employ various strategies to maintain data\n consistency across regions. This often involves using techniques like\n CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip\n protocols. Systems might implement event sourcing patterns, utilize\n message queues for asynchronous updates, and employ sophisticated\n conflict resolution strategies. Popular solutions like Amazon's\n DynamoDB and Google's Spanner demonstrate different approaches to\n solving these challenges, balancing between consistency, availability,\n and partition tolerance as described in the CAP theorem.\n \n \n \n )\n}\n", + "content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-lyra/ui/accordion\"\n\nexport default function AccordionMultiple() {\n return (\n \n \n \n What are the key considerations when implementing a comprehensive\n enterprise-level authentication system?\n \n \n Implementing a robust enterprise authentication system requires\n careful consideration of multiple factors. This includes secure\n password hashing and storage, multi-factor authentication (MFA)\n implementation, session management, OAuth2 and SSO integration,\n regular security audits, rate limiting to prevent brute force attacks,\n and maintaining detailed audit logs. Additionally, you'll need to\n consider scalability, performance impact, and compliance with relevant\n data protection regulations such as GDPR or HIPAA.\n \n \n \n \n How does modern distributed system architecture handle eventual\n consistency and data synchronization across multiple regions?\n \n \n Modern distributed systems employ various strategies to maintain data\n consistency across regions. This often involves using techniques like\n CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip\n protocols. Systems might implement event sourcing patterns, utilize\n message queues for asynchronous updates, and employ sophisticated\n conflict resolution strategies. Popular solutions like Amazon's\n DynamoDB and Google's Spanner demonstrate different approaches to\n solving these challenges, balancing between consistency, availability,\n and partition tolerance as described in the CAP theorem.\n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/accordion.json b/apps/v4/public/r/styles/base-lyra/accordion.json index beef25c92e..e00a7dbe53 100644 --- a/apps/v4/public/r/styles/base-lyra/accordion.json +++ b/apps/v4/public/r/styles/base-lyra/accordion.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/accordion.tsx", - "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n return (\n \n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n return (\n \n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: AccordionPrimitive.Trigger.Props) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: AccordionPrimitive.Panel.Props) {\n return (\n \n \n {children}\n \n \n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n", + "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n return (\n \n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n return (\n \n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: AccordionPrimitive.Trigger.Props) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: AccordionPrimitive.Panel.Props) {\n return (\n \n \n {children}\n \n \n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/alert-demo.json b/apps/v4/public/r/styles/base-lyra/alert-demo.json new file mode 100644 index 0000000000..fdf1b2e28e --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/alert-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "alert-demo", + "title": "Alert Demo", + "registryDependencies": [ + "alert" + ], + "files": [ + { + "path": "registry/base-lyra/demo/alert-demo.tsx", + "content": "import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/base-lyra/ui/alert\"\n\nexport default function AlertDemo() {\n return (\n
\n \n \n Success! Your changes have been saved\n \n This is an alert with icon, title and description.\n \n \n \n \n \n This Alert has a title and an icon. No description.\n \n \n \n \n Unable to process your payment.\n \n

Please verify your billing information and try again.

\n
    \n
  • Check your card details
    • \n
  • Ensure sufficient funds
    • \n
  • Verify billing address
    • \n
\n \n \n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/alert-destructive.json b/apps/v4/public/r/styles/base-lyra/alert-destructive.json new file mode 100644 index 0000000000..31b821d658 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/alert-destructive.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "alert-destructive", + "title": "Alert Destructive", + "registryDependencies": [ + "alert" + ], + "files": [ + { + "path": "registry/base-lyra/demo/alert-destructive.tsx", + "content": "import { AlertCircleIcon } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/base-lyra/ui/alert\"\n\nexport default function AlertDestructive() {\n return (\n \n \n Error\n \n Your session has expired. Please log in again.\n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/alert-dialog-demo.json b/apps/v4/public/r/styles/base-lyra/alert-dialog-demo.json new file mode 100644 index 0000000000..2a2d37ac8a --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/alert-dialog-demo.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "alert-dialog-demo", + "title": "Alert Dialog Demo", + "registryDependencies": [ + "alert-dialog", + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/alert-dialog-demo.tsx", + "content": "import {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function AlertDialogDemo() {\n return (\n \n }>\n Show Dialog\n \n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/alert-dialog-example.json b/apps/v4/public/r/styles/base-lyra/alert-dialog-example.json index 9c1043e479..44c8f321c9 100644 --- a/apps/v4/public/r/styles/base-lyra/alert-dialog-example.json +++ b/apps/v4/public/r/styles/base-lyra/alert-dialog-example.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/base-lyra/examples/alert-dialog-example.tsx", - "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\nfunction AlertDialogBasic() {\n return (\n \n \n Default}\n />\n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n \n )\n}\n\nfunction AlertDialogSmall() {\n return (\n \n \n Small} />\n \n \n Allow accessory to connect?\n \n Do you want to allow the USB accessory to connect to this device?\n \n \n \n Don't allow\n Allow\n \n \n \n \n )\n}\n\nfunction AlertDialogWithMedia() {\n return (\n \n \n Default (Media)}\n />\n \n \n \n \n \n Are you absolutely sure?\n \n This will permanently delete your account and remove your data\n from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n \n )\n}\n\nfunction AlertDialogSmallWithMedia() {\n return (\n \n \n Small (Media)}\n />\n\n \n \n \n \n \n Allow accessory to connect?\n \n Do you want to allow the USB accessory to connect to this device?\n \n \n \n Don't allow\n Allow\n \n \n \n \n )\n}\n\nfunction AlertDialogDestructive() {\n return (\n \n \n Delete Chat}\n />\n \n \n \n \n \n Delete chat?\n \n This will permanently delete this chat conversation. View{\" \"}\n Settings delete any memories saved during this\n chat.\n \n \n \n Cancel\n Delete\n \n \n \n \n )\n}\n\nfunction AlertDialogInDialog() {\n return (\n \n \n }>\n Open Dialog\n \n \n \n Alert Dialog Example\n \n Click the button below to open an alert dialog.\n \n \n \n \n }>\n Open Alert Dialog\n \n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete\n your account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n \n \n \n \n )\n}\n", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\nfunction AlertDialogBasic() {\n return (\n \n \n Default}\n />\n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n \n )\n}\n\nfunction AlertDialogSmall() {\n return (\n \n \n Small} />\n \n \n Allow accessory to connect?\n \n Do you want to allow the USB accessory to connect to this device?\n \n \n \n Don't allow\n Allow\n \n \n \n \n )\n}\n\nfunction AlertDialogWithMedia() {\n return (\n \n \n Default (Media)}\n />\n \n \n \n \n \n Are you absolutely sure?\n \n This will permanently delete your account and remove your data\n from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n \n )\n}\n\nfunction AlertDialogSmallWithMedia() {\n return (\n \n \n Small (Media)}\n />\n\n \n \n \n \n \n Allow accessory to connect?\n \n Do you want to allow the USB accessory to connect to this device?\n \n \n \n Don't allow\n Allow\n \n \n \n \n )\n}\n\nfunction AlertDialogDestructive() {\n return (\n \n \n Delete Chat}\n />\n \n \n \n \n \n Delete chat?\n \n This will permanently delete this chat conversation. View{\" \"}\n Settings delete any memories saved during this\n chat.\n \n \n \n Cancel\n Delete\n \n \n \n \n )\n}\n\nfunction AlertDialogInDialog() {\n return (\n \n \n }>\n Open Dialog\n \n \n \n Alert Dialog Example\n \n Click the button below to open an alert dialog.\n \n \n \n \n }>\n Open Alert Dialog\n \n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete\n your account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/alert-dialog.json b/apps/v4/public/r/styles/base-lyra/alert-dialog.json index 038d13ce46..3a5f5706ac 100644 --- a/apps/v4/public/r/styles/base-lyra/alert-dialog.json +++ b/apps/v4/public/r/styles/base-lyra/alert-dialog.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/base-lyra/ui/alert-dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n return \n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Popup.Props & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Close.Props &\n Pick, \"variant\" | \"size\">) {\n return (\n }\n {...props}\n />\n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n return \n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Popup.Props & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Close.Props &\n Pick, \"variant\" | \"size\">) {\n return (\n }\n {...props}\n />\n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/alert-example.json b/apps/v4/public/r/styles/base-lyra/alert-example.json index a373268410..93978a4026 100644 --- a/apps/v4/public/r/styles/base-lyra/alert-example.json +++ b/apps/v4/public/r/styles/base-lyra/alert-example.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-lyra/examples/alert-example.tsx", - "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n Alert,\n AlertAction,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction AlertExample1() {\n return (\n \n
\n \n Success! Your changes have been saved.\n \n \n Success! Your changes have been saved.\n \n This is an alert with title and description.\n \n \n \n \n This one has a description only. No title. No icon.\n \n \n
\n \n )\n}\n\nfunction AlertExample2() {\n return (\n \n
\n \n \n \n Let's try one with icon, title and a link.\n \n \n \n \n \n This one has an icon and a description only. No title.{\" \"}\n But it has a link and a second link.\n \n \n\n \n \n Success! Your changes have been saved\n \n This is an alert with icon, title and description.\n \n \n \n \n \n This is a very long alert title that demonstrates how the component\n handles extended text content and potentially wraps across multiple\n lines\n \n \n \n \n \n This is a very long alert description that demonstrates how the\n component handles extended text content and potentially wraps across\n multiple lines\n \n \n \n \n \n This is an extremely long alert title that spans multiple lines to\n demonstrate how the component handles very lengthy headings while\n maintaining readability and proper text wrapping behavior\n \n \n This is an equally long description that contains detailed\n information about the alert. It shows how the component can\n accommodate extensive content while preserving proper spacing,\n alignment, and readability across different screen sizes and\n viewport widths. This helps ensure the user experience remains\n consistent regardless of the content length.\n \n \n
\n \n )\n}\n\nfunction AlertExample3() {\n return (\n \n
\n \n \n Something went wrong!\n \n Your session has expired. Please log in again.\n \n \n \n \n Unable to process your payment.\n \n

\n Please verify your billing information and try\n again.\n

\n
    \n
  • Check your card details
    • \n
  • Ensure sufficient funds
    • \n
  • Verify billing address
    • \n
\n \n \n
\n \n )\n}\n\nfunction AlertExample4() {\n return (\n \n
\n \n \n The selected emails have been marked as spam.\n \n \n \n \n \n \n The selected emails have been marked as spam.\n \n This is a very long alert title that demonstrates how the component\n handles extended text content.\n \n \n Badge\n \n \n
\n \n )\n}\n", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n Alert,\n AlertAction,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/base-lyra/ui/alert\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction AlertExample1() {\n return (\n \n
\n \n Success! Your changes have been saved.\n \n \n Success! Your changes have been saved.\n \n This is an alert with title and description.\n \n \n \n \n This one has a description only. No title. No icon.\n \n \n
\n \n )\n}\n\nfunction AlertExample2() {\n return (\n \n
\n \n \n \n Let's try one with icon, title and a link.\n \n \n \n \n \n This one has an icon and a description only. No title.{\" \"}\n But it has a link and a second link.\n \n \n\n \n \n Success! Your changes have been saved\n \n This is an alert with icon, title and description.\n \n \n \n \n \n This is a very long alert title that demonstrates how the component\n handles extended text content and potentially wraps across multiple\n lines\n \n \n \n \n \n This is a very long alert description that demonstrates how the\n component handles extended text content and potentially wraps across\n multiple lines\n \n \n \n \n \n This is an extremely long alert title that spans multiple lines to\n demonstrate how the component handles very lengthy headings while\n maintaining readability and proper text wrapping behavior\n \n \n This is an equally long description that contains detailed\n information about the alert. It shows how the component can\n accommodate extensive content while preserving proper spacing,\n alignment, and readability across different screen sizes and\n viewport widths. This helps ensure the user experience remains\n consistent regardless of the content length.\n \n \n
\n \n )\n}\n\nfunction AlertExample3() {\n return (\n \n
\n \n \n Something went wrong!\n \n Your session has expired. Please log in again.\n \n \n \n \n Unable to process your payment.\n \n

\n Please verify your billing information and try\n again.\n

\n
    \n
  • Check your card details
    • \n
  • Ensure sufficient funds
    • \n
  • Verify billing address
    • \n
\n \n \n
\n \n )\n}\n\nfunction AlertExample4() {\n return (\n \n
\n \n \n The selected emails have been marked as spam.\n \n \n \n \n \n \n The selected emails have been marked as spam.\n \n This is a very long alert title that demonstrates how the component\n handles extended text content.\n \n \n Badge\n \n \n
\n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/alert.json b/apps/v4/public/r/styles/base-lyra/alert.json index b26b5b7aa7..756c2bd501 100644 --- a/apps/v4/public/r/styles/base-lyra/alert.json +++ b/apps/v4/public/r/styles/base-lyra/alert.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/alert.tsx", - "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nconst alertVariants = cva(\"grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\", {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive: \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n})\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n", + "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst alertVariants = cva(\"grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\", {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive: \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n})\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/aspect-ratio-demo.json b/apps/v4/public/r/styles/base-lyra/aspect-ratio-demo.json new file mode 100644 index 0000000000..188068f069 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/aspect-ratio-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "aspect-ratio-demo", + "title": "Aspect Ratio Demo", + "registryDependencies": [ + "aspect-ratio" + ], + "files": [ + { + "path": "registry/base-lyra/demo/aspect-ratio-demo.tsx", + "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/base-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n return (\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/aspect-ratio-example.json b/apps/v4/public/r/styles/base-lyra/aspect-ratio-example.json index b258d205b0..444c8c3573 100644 --- a/apps/v4/public/r/styles/base-lyra/aspect-ratio-example.json +++ b/apps/v4/public/r/styles/base-lyra/aspect-ratio-example.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/base-lyra/examples/aspect-ratio-example.tsx", - "content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { AspectRatio } from \"@/registry/bases/base/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction AspectRatio16x9() {\n return (\n \n \n \n \n \n )\n}\n\nfunction AspectRatio1x1() {\n return (\n \n \n \n \n \n )\n}\n\nfunction AspectRatio9x16() {\n return (\n \n \n \n \n \n )\n}\n\nfunction AspectRatio21x9() {\n return (\n \n \n \n \n \n )\n}\n", + "content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { AspectRatio } from \"@/registry/base-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction AspectRatio16x9() {\n return (\n \n \n \n \n \n )\n}\n\nfunction AspectRatio1x1() {\n return (\n \n \n \n \n \n )\n}\n\nfunction AspectRatio9x16() {\n return (\n \n \n \n \n \n )\n}\n\nfunction AspectRatio21x9() {\n return (\n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/aspect-ratio.json b/apps/v4/public/r/styles/base-lyra/aspect-ratio.json index 2a470d4034..af630760ea 100644 --- a/apps/v4/public/r/styles/base-lyra/aspect-ratio.json +++ b/apps/v4/public/r/styles/base-lyra/aspect-ratio.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/aspect-ratio.tsx", - "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\n\nfunction AspectRatio({\n ratio,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { ratio: number }) {\n return (\n \n )\n}\n\nexport { AspectRatio }\n", + "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction AspectRatio({\n ratio,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { ratio: number }) {\n return (\n \n )\n}\n\nexport { AspectRatio }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/avatar-demo.json b/apps/v4/public/r/styles/base-lyra/avatar-demo.json new file mode 100644 index 0000000000..f22bf2da00 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/avatar-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "avatar-demo", + "title": "Avatar Demo", + "registryDependencies": [ + "avatar" + ], + "files": [ + { + "path": "registry/base-lyra/demo/avatar-demo.tsx", + "content": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\n\nexport default function AvatarDemo() {\n return (\n
\n \n \n CN\n \n \n \n ER\n \n
\n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n
\n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/avatar-example.json b/apps/v4/public/r/styles/base-lyra/avatar-example.json index 0ee1fdc80d..5652ddbbc7 100644 --- a/apps/v4/public/r/styles/base-lyra/avatar-example.json +++ b/apps/v4/public/r/styles/base-lyra/avatar-example.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/base-lyra/examples/avatar-example.tsx", - "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n Avatar,\n AvatarBadge,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction AvatarSizes() {\n return (\n \n
\n \n \n CN\n \n \n \n CN\n \n \n \n CN\n \n
\n
\n \n CN\n \n \n CN\n \n \n CN\n \n
\n \n )\n}\n\nfunction AvatarWithBadge() {\n return (\n \n
\n \n \n JZ\n \n \n \n \n JZ\n \n \n \n \n JZ\n \n \n
\n
\n \n JZ\n \n \n \n JZ\n \n \n \n JZ\n \n \n
\n \n )\n}\n\nfunction AvatarWithBadgeIcon() {\n return (\n \n
\n \n \n PP\n \n \n \n \n \n \n PP\n \n \n \n \n \n \n PP\n \n \n \n \n
\n
\n \n PP\n \n \n \n \n \n PP\n \n \n \n \n \n PP\n \n \n \n \n
\n \n )\n}\n\nfunction AvatarGroupExample() {\n return (\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n )\n}\n\nfunction AvatarGroupWithCount() {\n return (\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +3\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +3\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +3\n \n \n )\n}\n\nfunction AvatarGroupWithIconCount() {\n return (\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n )\n}\n\nfunction AvatarInEmpty() {\n return (\n \n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n No Team Members\n \n Invite your team to collaborate on this project.\n \n \n \n \n \n \n \n )\n}\n", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n Avatar,\n AvatarBadge,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/registry/base-lyra/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction AvatarSizes() {\n return (\n \n
\n \n \n CN\n \n \n \n CN\n \n \n \n CN\n \n
\n
\n \n CN\n \n \n CN\n \n \n CN\n \n
\n \n )\n}\n\nfunction AvatarWithBadge() {\n return (\n \n
\n \n \n JZ\n \n \n \n \n JZ\n \n \n \n \n JZ\n \n \n
\n
\n \n JZ\n \n \n \n JZ\n \n \n \n JZ\n \n \n
\n \n )\n}\n\nfunction AvatarWithBadgeIcon() {\n return (\n \n
\n \n \n PP\n \n \n \n \n \n \n PP\n \n \n \n \n \n \n PP\n \n \n \n \n
\n
\n \n PP\n \n \n \n \n \n PP\n \n \n \n \n \n PP\n \n \n \n \n
\n \n )\n}\n\nfunction AvatarGroupExample() {\n return (\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n )\n}\n\nfunction AvatarGroupWithCount() {\n return (\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +3\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +3\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +3\n \n \n )\n}\n\nfunction AvatarGroupWithIconCount() {\n return (\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n )\n}\n\nfunction AvatarInEmpty() {\n return (\n \n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n No Team Members\n \n Invite your team to collaborate on this project.\n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/avatar.json b/apps/v4/public/r/styles/base-lyra/avatar.json index cf8e6378c2..871f9ea6ba 100644 --- a/apps/v4/public/r/styles/base-lyra/avatar.json +++ b/apps/v4/public/r/styles/base-lyra/avatar.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/avatar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nfunction Avatar({\n className,\n size = \"default\",\n ...props\n}: AvatarPrimitive.Root.Props & {\n size?: \"default\" | \"sm\" | \"lg\"\n}) {\n return (\n \n )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n return (\n \n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: AvatarPrimitive.Fallback.Props) {\n return (\n \n )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarBadge,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Avatar({\n className,\n size = \"default\",\n ...props\n}: AvatarPrimitive.Root.Props & {\n size?: \"default\" | \"sm\" | \"lg\"\n}) {\n return (\n \n )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n return (\n \n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: AvatarPrimitive.Fallback.Props) {\n return (\n \n )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarBadge,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/badge-demo.json b/apps/v4/public/r/styles/base-lyra/badge-demo.json new file mode 100644 index 0000000000..53844ccf13 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/badge-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "badge-demo", + "title": "Badge Demo", + "registryDependencies": [ + "badge" + ], + "files": [ + { + "path": "registry/base-lyra/demo/badge-demo.tsx", + "content": "import { BadgeCheckIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\n\nexport default function BadgeDemo() {\n return (\n
\n
\n Badge\n Secondary\n Destructive\n Outline\n
\n
\n \n \n Verified\n \n \n 8\n \n \n 99\n \n \n 20+\n \n
\n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/badge-destructive.json b/apps/v4/public/r/styles/base-lyra/badge-destructive.json new file mode 100644 index 0000000000..281bd844f1 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/badge-destructive.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "badge-destructive", + "title": "Badge Destructive", + "registryDependencies": [ + "badge" + ], + "files": [ + { + "path": "registry/base-lyra/demo/badge-destructive.tsx", + "content": "import { Badge } from \"@/registry/base-lyra/ui/badge\"\n\nexport default function BadgeDestructive() {\n return Destructive\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/badge-example.json b/apps/v4/public/r/styles/base-lyra/badge-example.json index 9667dc1755..d0ab241264 100644 --- a/apps/v4/public/r/styles/base-lyra/badge-example.json +++ b/apps/v4/public/r/styles/base-lyra/badge-example.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-lyra/examples/badge-example.tsx", - "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction BadgeVariants() {\n return (\n \n
\n Default\n Secondary\n Destructive\n Outline\n Ghost\n Link\n
\n \n )\n}\n\nfunction BadgeWithIconLeft() {\n return (\n \n
\n \n \n Default\n \n \n \n Secondary\n \n \n \n Destructive\n \n \n \n Outline\n \n \n \n Ghost\n \n \n \n Link\n \n
\n \n )\n}\n\nfunction BadgeWithIconRight() {\n return (\n \n
\n \n Default\n \n \n \n Secondary\n \n \n \n Destructive\n \n \n \n Outline\n \n \n \n Ghost\n \n \n \n Link\n \n \n
\n \n )\n}\n\nfunction BadgeWithSpinner() {\n return (\n \n
\n \n \n Default\n \n \n \n Secondary\n \n \n \n Destructive\n \n \n \n Outline\n \n \n \n Ghost\n \n \n \n Link\n \n
\n \n )\n}\n\nfunction BadgeAsLink() {\n return (\n \n
\n \n Link{\" \"}\n \n \n }\n />\n \n Link{\" \"}\n \n \n }\n />\n \n Link{\" \"}\n \n \n }\n />\n \n Link{\" \"}\n \n \n }\n />\n
\n \n )\n}\n\nfunction BadgeLongText() {\n return (\n \n
\n \n A badge with a lot of text to see how it wraps\n \n
\n \n )\n}\n\nfunction BadgeCustomColors() {\n return (\n \n
\n \n Blue\n \n \n Green\n \n \n Sky\n \n \n Purple\n \n \n Blue\n \n \n Green\n \n \n Sky\n \n \n Purple\n \n \n Red\n \n
\n \n )\n}\n", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Spinner } from \"@/registry/base-lyra/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction BadgeVariants() {\n return (\n \n
\n Default\n Secondary\n Destructive\n Outline\n Ghost\n Link\n
\n \n )\n}\n\nfunction BadgeWithIconLeft() {\n return (\n \n
\n \n \n Default\n \n \n \n Secondary\n \n \n \n Destructive\n \n \n \n Outline\n \n \n \n Ghost\n \n \n \n Link\n \n
\n \n )\n}\n\nfunction BadgeWithIconRight() {\n return (\n \n
\n \n Default\n \n \n \n Secondary\n \n \n \n Destructive\n \n \n \n Outline\n \n \n \n Ghost\n \n \n \n Link\n \n \n
\n \n )\n}\n\nfunction BadgeWithSpinner() {\n return (\n \n
\n \n \n Default\n \n \n \n Secondary\n \n \n \n Destructive\n \n \n \n Outline\n \n \n \n Ghost\n \n \n \n Link\n \n
\n \n )\n}\n\nfunction BadgeAsLink() {\n return (\n \n
\n \n Link{\" \"}\n \n \n }\n />\n \n Link{\" \"}\n \n \n }\n />\n \n Link{\" \"}\n \n \n }\n />\n \n Link{\" \"}\n \n \n }\n />\n
\n \n )\n}\n\nfunction BadgeLongText() {\n return (\n \n
\n \n A badge with a lot of text to see how it wraps\n \n
\n \n )\n}\n\nfunction BadgeCustomColors() {\n return (\n \n
\n \n Blue\n \n \n Green\n \n \n Sky\n \n \n Purple\n \n \n Blue\n \n \n Green\n \n \n Sky\n \n \n Purple\n \n \n Red\n \n
\n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/badge-outline.json b/apps/v4/public/r/styles/base-lyra/badge-outline.json new file mode 100644 index 0000000000..f6ef43734e --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/badge-outline.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "badge-outline", + "title": "Badge Outline", + "registryDependencies": [ + "badge" + ], + "files": [ + { + "path": "registry/base-lyra/demo/badge-outline.tsx", + "content": "import { Badge } from \"@/registry/base-lyra/ui/badge\"\n\nexport default function BadgeOutline() {\n return Outline\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/badge-secondary.json b/apps/v4/public/r/styles/base-lyra/badge-secondary.json new file mode 100644 index 0000000000..9be71d6f43 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/badge-secondary.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "badge-secondary", + "title": "Badge Secondary", + "registryDependencies": [ + "badge" + ], + "files": [ + { + "path": "registry/base-lyra/demo/badge-secondary.tsx", + "content": "import { Badge } from \"@/registry/base-lyra/ui/badge\"\n\nexport default function BadgeSecondary() {\n return Secondary\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/badge.json b/apps/v4/public/r/styles/base-lyra/badge.json index 13c12502b8..b1af5c6a47 100644 --- a/apps/v4/public/r/styles/base-lyra/badge.json +++ b/apps/v4/public/r/styles/base-lyra/badge.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/badge.tsx", - "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nconst badgeVariants = cva(\n \"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n", + "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst badgeVariants = cva(\n \"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb-demo.json b/apps/v4/public/r/styles/base-lyra/breadcrumb-demo.json new file mode 100644 index 0000000000..ce2c93d24f --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/breadcrumb-demo.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "breadcrumb-demo", + "title": "Breadcrumb Demo", + "registryDependencies": [ + "breadcrumb", + "dropdown-menu" + ], + "files": [ + { + "path": "registry/base-lyra/demo/breadcrumb-demo.tsx", + "content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n return (\n \n \n \n }>Home\n \n \n \n \n \n \n Toggle menu\n \n \n Documentation\n Themes\n GitHub\n \n \n \n \n \n }>\n Components\n \n \n \n \n Breadcrumb\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb-dropdown.json b/apps/v4/public/r/styles/base-lyra/breadcrumb-dropdown.json new file mode 100644 index 0000000000..997064b456 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/breadcrumb-dropdown.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "breadcrumb-dropdown", + "title": "Breadcrumb Dropdown", + "registryDependencies": [ + "breadcrumb", + "dropdown-menu" + ], + "files": [ + { + "path": "registry/base-lyra/demo/breadcrumb-dropdown.tsx", + "content": "import Link from \"next/link\"\nimport { ChevronDownIcon, SlashIcon } from \"lucide-react\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport function BreadcrumbDropdown() {\n return (\n \n \n \n }>Home\n \n \n \n \n \n \n \n Components\n \n \n \n Documentation\n Themes\n GitHub\n \n \n \n \n \n \n \n Breadcrumb\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb-ellipsis.json b/apps/v4/public/r/styles/base-lyra/breadcrumb-ellipsis.json new file mode 100644 index 0000000000..5886894467 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/breadcrumb-ellipsis.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "breadcrumb-ellipsis", + "title": "Breadcrumb Ellipsis", + "registryDependencies": [ + "breadcrumb" + ], + "files": [ + { + "path": "registry/base-lyra/demo/breadcrumb-ellipsis.tsx", + "content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\n\nexport function BreadcrumbEllipsisDemo() {\n return (\n \n \n \n }>Home\n \n \n \n \n \n \n \n }>\n Components\n \n \n \n \n Breadcrumb\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb-example.json b/apps/v4/public/r/styles/base-lyra/breadcrumb-example.json index a35d5e5395..00b7c8c490 100644 --- a/apps/v4/public/r/styles/base-lyra/breadcrumb-example.json +++ b/apps/v4/public/r/styles/base-lyra/breadcrumb-example.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-lyra/examples/breadcrumb-example.tsx", - "content": "import Link from \"next/link\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/bases/base/ui/breadcrumb\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\n\nexport default function BreadcrumbExample() {\n return (\n \n \n \n \n \n )\n}\n\nfunction BreadcrumbBasic() {\n return (\n \n \n \n \n Home\n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n \n )\n}\n\nfunction BreadcrumbWithDropdown() {\n return (\n \n \n \n \n Home\n \n \n \n \n }\n >\n \n Toggle menu\n \n \n Documentation\n Themes\n GitHub\n \n \n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n \n )\n}\n\nfunction BreadcrumbWithLink() {\n return (\n \n \n \n \n Home} />\n \n \n \n \n \n \n \n Components} />\n \n \n \n Breadcrumb\n \n \n \n \n )\n}\n", + "content": "import Link from \"next/link\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function BreadcrumbExample() {\n return (\n \n \n \n \n \n )\n}\n\nfunction BreadcrumbBasic() {\n return (\n \n \n \n \n Home\n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n \n )\n}\n\nfunction BreadcrumbWithDropdown() {\n return (\n \n \n \n \n Home\n \n \n \n \n }\n >\n \n Toggle menu\n \n \n Documentation\n Themes\n GitHub\n \n \n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n \n )\n}\n\nfunction BreadcrumbWithLink() {\n return (\n \n \n \n \n Home} />\n \n \n \n \n \n \n \n Components} />\n \n \n \n Breadcrumb\n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb-link.json b/apps/v4/public/r/styles/base-lyra/breadcrumb-link.json new file mode 100644 index 0000000000..312f0f878b --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/breadcrumb-link.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "breadcrumb-link", + "title": "Breadcrumb Link", + "registryDependencies": [ + "breadcrumb" + ], + "files": [ + { + "path": "registry/base-lyra/demo/breadcrumb-link.tsx", + "content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\n\nexport function BreadcrumbLinkDemo() {\n return (\n \n \n \n }>Home\n \n \n \n }>\n Components\n \n \n \n \n Breadcrumb\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb-responsive.json b/apps/v4/public/r/styles/base-lyra/breadcrumb-responsive.json new file mode 100644 index 0000000000..b421002499 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/breadcrumb-responsive.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "breadcrumb-responsive", + "title": "Breadcrumb Responsive", + "registryDependencies": [ + "breadcrumb", + "button", + "drawer", + "dropdown-menu" + ], + "files": [ + { + "path": "registry/base-lyra/demo/breadcrumb-responsive.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nconst items = [\n { href: \"#\", label: \"Home\" },\n { href: \"#\", label: \"Documentation\" },\n { href: \"#\", label: \"Building Your Application\" },\n { href: \"#\", label: \"Data Fetching\" },\n { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport function BreadcrumbResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n return (\n \n \n \n }>\n {items[0].label}\n \n \n \n {items.length > ITEMS_TO_DISPLAY ? (\n <>\n \n {isDesktop ? (\n \n \n \n \n \n {items.slice(1, -2).map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n ) : (\n \n \n \n \n \n \n Navigate to\n \n Select a page to navigate to.\n \n \n
\n {items.slice(1, -2).map((item, index) => (\n \n {item.label}\n \n ))}\n
\n \n \n \n \n \n \n \n )}\n \n \n \n ) : null}\n {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n \n {item.href ? (\n <>\n }\n className=\"max-w-20 truncate md:max-w-none\"\n >\n {item.label}\n \n \n \n ) : (\n \n {item.label}\n \n )}\n \n ))}\n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb-separator.json b/apps/v4/public/r/styles/base-lyra/breadcrumb-separator.json new file mode 100644 index 0000000000..0037f2bb82 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/breadcrumb-separator.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "breadcrumb-separator", + "title": "Breadcrumb Separator", + "registryDependencies": [ + "breadcrumb" + ], + "files": [ + { + "path": "registry/base-lyra/demo/breadcrumb-separator.tsx", + "content": "import Link from \"next/link\"\nimport { SlashIcon } from \"lucide-react\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\n\nexport function BreadcrumbSeparatorDemo() {\n return (\n \n \n \n }>Home\n \n \n \n \n \n }>\n Components\n \n \n \n \n \n \n Breadcrumb\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb.json b/apps/v4/public/r/styles/base-lyra/breadcrumb.json index d903abfeba..859dafa182 100644 --- a/apps/v4/public/r/styles/base-lyra/breadcrumb.json +++ b/apps/v4/public/r/styles/base-lyra/breadcrumb.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/breadcrumb.tsx", - "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbLink({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"a\">) {\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(\n {\n className: cn(\"hover:text-foreground transition-colors\", className),\n },\n props\n ),\n render,\n state: {\n slot: \"breadcrumb-link\",\n },\n })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? (\n \n )}\n \n )\n}\n\nfunction BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n svg]:size-4 flex items-center justify-center\",\n className\n )}\n {...props}\n >\n \n More\n \n )\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n}\n", + "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbLink({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"a\">) {\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(\n {\n className: cn(\"hover:text-foreground transition-colors\", className),\n },\n props\n ),\n render,\n state: {\n slot: \"breadcrumb-link\",\n },\n })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? (\n \n )}\n \n )\n}\n\nfunction BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n svg]:size-4 flex items-center justify-center\",\n className\n )}\n {...props}\n >\n \n More\n \n )\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/button-as-child.json b/apps/v4/public/r/styles/base-lyra/button-as-child.json new file mode 100644 index 0000000000..b4d8746f5b --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-as-child.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-as-child", + "title": "Button As Child", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-as-child.tsx", + "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonAsChild() {\n return (\n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-default.json b/apps/v4/public/r/styles/base-lyra/button-default.json new file mode 100644 index 0000000000..9f1643174b --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-default.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-default", + "title": "Button Default", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-default.tsx", + "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonDefault() {\n return \n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-demo.json b/apps/v4/public/r/styles/base-lyra/button-demo.json new file mode 100644 index 0000000000..918a1d6e4e --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-demo", + "title": "Button Demo", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-demo.tsx", + "content": "import { ArrowUpIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonDemo() {\n return (\n
\n \n \n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-destructive.json b/apps/v4/public/r/styles/base-lyra/button-destructive.json new file mode 100644 index 0000000000..2f1e067fb3 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-destructive.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-destructive", + "title": "Button Destructive", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-destructive.tsx", + "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonDestructive() {\n return \n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-example.json b/apps/v4/public/r/styles/base-lyra/button-example.json index 50e7773318..e77e1ce69a 100644 --- a/apps/v4/public/r/styles/base-lyra/button-example.json +++ b/apps/v4/public/r/styles/base-lyra/button-example.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/base-lyra/examples/button-example.tsx", - "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonVariantsAndSizes() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonIconRight() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonIconLeft() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonIconOnly() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonExamples() {\n return (\n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n \n )\n}\n\nfunction ButtonInvalidStates() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonVariantsAndSizes() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonIconRight() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonIconLeft() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonIconOnly() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonExamples() {\n return (\n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n \n )\n}\n\nfunction ButtonInvalidStates() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/button-ghost.json b/apps/v4/public/r/styles/base-lyra/button-ghost.json new file mode 100644 index 0000000000..1ba0d66fbf --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-ghost.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-ghost", + "title": "Button Ghost", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-ghost.tsx", + "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonGhost() {\n return \n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-demo.json b/apps/v4/public/r/styles/base-lyra/button-group-demo.json new file mode 100644 index 0000000000..23f0d016db --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-demo.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-demo", + "title": "Button Group Demo", + "registryDependencies": [ + "button", + "button-group", + "dropdown-menu" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Mark as Read\n \n \n \n Archive\n \n \n \n \n \n \n Snooze\n \n \n \n Add to Calendar\n \n \n \n Add to List\n \n \n \n \n Label As...\n \n \n \n \n Personal\n \n \n Work\n \n \n Other\n \n \n \n \n \n \n \n \n \n Trash\n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-dropdown.json b/apps/v4/public/r/styles/base-lyra/button-group-dropdown.json new file mode 100644 index 0000000000..70d8799e0d --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-dropdown.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-dropdown", + "title": "Button Group Dropdown", + "registryDependencies": [ + "button", + "button-group", + "dropdown-menu" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-dropdown.tsx", + "content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n \n \n \n \n \n \n \n \n \n \n Mute Conversation\n \n \n \n Mark as Read\n \n \n \n Report Conversation\n \n \n \n Block User\n \n \n \n Share Conversation\n \n \n \n Copy Conversation\n \n \n \n \n \n \n Delete Conversation\n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-example.json b/apps/v4/public/r/styles/base-lyra/button-group-example.json index 2e4ad5e00a..9257f35dd8 100644 --- a/apps/v4/public/r/styles/base-lyra/button-group-example.json +++ b/apps/v4/public/r/styles/base-lyra/button-group-example.json @@ -18,7 +18,7 @@ "files": [ { "path": "registry/base-lyra/examples/button-group-example.tsx", - "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupBasic() {\n return (\n \n
\n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithInput() {\n return (\n \n
\n \n \n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithText() {\n return (\n \n
\n \n Text\n \n \n \n }>\n GPU Size\n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithDropdown() {\n return (\n \n
\n \n \n \n }\n >\n \n \n \n Disable\n \n Uninstall\n \n \n \n \n \n \n \n }\n >\n \n \n \n \n \n \n Mute Conversation\n \n \n \n Mark as Read\n \n \n \n Report Conversation\n \n \n \n Block User\n \n \n \n Share Conversation\n \n \n \n Copy Conversation\n \n \n \n \n \n \n Delete Conversation\n \n \n \n \n \n
\n \n )\n}\n\nconst currencyItems = [\n { label: \"$\", value: \"$\" },\n { label: \"€\", value: \"€\" },\n { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n return (\n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupWithIcons() {\n return (\n \n
\n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithInputGroup() {\n return (\n \n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithFields() {\n return (\n \n \n \n \n \n \n \n \n W\n \n \n px\n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupWithLike() {\n return (\n \n \n \n }\n nativeButton={false}\n >\n 1.2K\n \n \n \n )\n}\n\nconst durationItems = [\n { label: \"Hours\", value: \"hours\" },\n { label: \"Days\", value: \"days\" },\n { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupNested() {\n return (\n \n \n \n \n \n \n \n \n \n }>\n \n \n Voice Mode\n \n \n \n \n \n )\n}\n\nfunction ButtonGroupPagination() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupPaginationSplit() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupNavigation() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupTextAlignment() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupVertical() {\n return (\n \n
\n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupVerticalNested() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupText,\n} from \"@/registry/base-lyra/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupBasic() {\n return (\n \n
\n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithInput() {\n return (\n \n
\n \n \n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithText() {\n return (\n \n
\n \n Text\n \n \n \n }>\n GPU Size\n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithDropdown() {\n return (\n \n
\n \n \n \n }\n >\n \n \n \n Disable\n \n Uninstall\n \n \n \n \n \n \n \n }\n >\n \n \n \n \n \n \n Mute Conversation\n \n \n \n Mark as Read\n \n \n \n Report Conversation\n \n \n \n Block User\n \n \n \n Share Conversation\n \n \n \n Copy Conversation\n \n \n \n \n \n \n Delete Conversation\n \n \n \n \n \n
\n \n )\n}\n\nconst currencyItems = [\n { label: \"$\", value: \"$\" },\n { label: \"€\", value: \"€\" },\n { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n return (\n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupWithIcons() {\n return (\n \n
\n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithInputGroup() {\n return (\n \n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithFields() {\n return (\n \n \n \n \n \n \n \n \n W\n \n \n px\n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupWithLike() {\n return (\n \n \n \n }\n nativeButton={false}\n >\n 1.2K\n \n \n \n )\n}\n\nconst durationItems = [\n { label: \"Hours\", value: \"hours\" },\n { label: \"Days\", value: \"days\" },\n { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupNested() {\n return (\n \n \n \n \n \n \n \n \n \n }>\n \n \n Voice Mode\n \n \n \n \n \n )\n}\n\nfunction ButtonGroupPagination() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupPaginationSplit() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupNavigation() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupTextAlignment() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupVertical() {\n return (\n \n
\n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupVerticalNested() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/button-group-input-group.json b/apps/v4/public/r/styles/base-lyra/button-group-input-group.json new file mode 100644 index 0000000000..c195c45e8d --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-input-group.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-input-group", + "title": "Button Group Input Group", + "registryDependencies": [ + "button", + "button-group", + "input-group", + "tooltip" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-input-group.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AudioLinesIcon, PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function ButtonGroupInputGroup() {\n const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n return (\n \n \n \n \n \n \n \n \n \n \n setVoiceEnabled(!voiceEnabled)}\n size=\"icon-xs\"\n data-active={voiceEnabled}\n className=\"data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100\"\n aria-pressed={voiceEnabled}\n >\n \n \n \n Voice Mode\n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-input.json b/apps/v4/public/r/styles/base-lyra/button-group-input.json new file mode 100644 index 0000000000..d6371de5cf --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-input.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-input", + "title": "Button Group Input", + "registryDependencies": [ + "button", + "button-group", + "input" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-input.tsx", + "content": "import { SearchIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport default function ButtonGroupInput() {\n return (\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-nested.json b/apps/v4/public/r/styles/base-lyra/button-group-nested.json new file mode 100644 index 0000000000..0aad399280 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-nested.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-nested", + "title": "Button Group Nested", + "registryDependencies": [ + "button", + "button-group" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-nested.tsx", + "content": "\"use client\"\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupNested() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-orientation.json b/apps/v4/public/r/styles/base-lyra/button-group-orientation.json new file mode 100644 index 0000000000..e3611c33d6 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-orientation.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-orientation", + "title": "Button Group Orientation", + "registryDependencies": [ + "button", + "button-group" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-orientation.tsx", + "content": "import { MinusIcon, PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupOrientation() {\n return (\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-popover.json b/apps/v4/public/r/styles/base-lyra/button-group-popover.json new file mode 100644 index 0000000000..70d88824e1 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-popover.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-popover", + "title": "Button Group Popover", + "registryDependencies": [ + "button", + "button-group", + "popover", + "separator", + "textarea" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-popover.tsx", + "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n \n \n \n \n \n \n \n
\n
Agent Tasks
\n
\n \n
\n \n

Start a new task with Copilot

\n

\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n

\n
\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-select.json b/apps/v4/public/r/styles/base-lyra/button-group-select.json new file mode 100644 index 0000000000..d8b91c54fc --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-select.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-select", + "title": "Button Group Select", + "registryDependencies": [ + "button", + "button-group", + "input", + "select" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-select.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/base-lyra/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-separator.json b/apps/v4/public/r/styles/base-lyra/button-group-separator.json new file mode 100644 index 0000000000..5f3141eea3 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-separator.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-separator", + "title": "Button Group Separator", + "registryDependencies": [ + "button", + "button-group" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-separator.tsx", + "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupSeparator,\n} from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupSeparatorDemo() {\n return (\n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-size.json b/apps/v4/public/r/styles/base-lyra/button-group-size.json new file mode 100644 index 0000000000..936a2ed36e --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-size.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-size", + "title": "Button Group Size", + "registryDependencies": [ + "button", + "button-group" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-size.tsx", + "content": "import { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupSize() {\n return (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group-split.json b/apps/v4/public/r/styles/base-lyra/button-group-split.json new file mode 100644 index 0000000000..0c950a31bc --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-group-split.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-split", + "title": "Button Group Split", + "registryDependencies": [ + "button", + "button-group" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-group-split.tsx", + "content": "import { IconPlus } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupSeparator,\n} from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupSplit() {\n return (\n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-group.json b/apps/v4/public/r/styles/base-lyra/button-group.json index a7f0751143..d27b4b0c5b 100644 --- a/apps/v4/public/r/styles/base-lyra/button-group.json +++ b/apps/v4/public/r/styles/base-lyra/button-group.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/base-lyra/ui/button-group.tsx", - "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\n\nconst buttonGroupVariants = cva(\n \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none\",\n vertical:\n \"flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n }\n)\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction ButtonGroupText({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(\n \"bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"button-group-text\",\n },\n })\n}\n\nfunction ButtonGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n ButtonGroup,\n ButtonGroupSeparator,\n ButtonGroupText,\n buttonGroupVariants,\n}\n", + "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none\",\n vertical:\n \"flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n }\n)\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction ButtonGroupText({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(\n \"bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"button-group-text\",\n },\n })\n}\n\nfunction ButtonGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n ButtonGroup,\n ButtonGroupSeparator,\n ButtonGroupText,\n buttonGroupVariants,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/button-icon.json b/apps/v4/public/r/styles/base-lyra/button-icon.json new file mode 100644 index 0000000000..a0c74e45de --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-icon.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-icon", + "title": "Button Icon", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-icon.tsx", + "content": "import { CircleFadingArrowUpIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonIcon() {\n return (\n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-link.json b/apps/v4/public/r/styles/base-lyra/button-link.json new file mode 100644 index 0000000000..03ba6f3093 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-link.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-link", + "title": "Button Link", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-link.tsx", + "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonLink() {\n return \n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-loading.json b/apps/v4/public/r/styles/base-lyra/button-loading.json new file mode 100644 index 0000000000..a681891779 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-loading.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-loading", + "title": "Button Loading", + "registryDependencies": [ + "button", + "spinner" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-loading.tsx", + "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Spinner } from \"@/registry/base-lyra/ui/spinner\"\n\nexport default function ButtonLoading() {\n return (\n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-outline.json b/apps/v4/public/r/styles/base-lyra/button-outline.json new file mode 100644 index 0000000000..60eee12783 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-outline.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-outline", + "title": "Button Outline", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-outline.tsx", + "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonOutline() {\n return \n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-rounded.json b/apps/v4/public/r/styles/base-lyra/button-rounded.json new file mode 100644 index 0000000000..4aafcfe6a6 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-rounded.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-rounded", + "title": "Button Rounded", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-rounded.tsx", + "content": "import { ArrowUpIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonRounded() {\n return (\n
\n \n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-secondary.json b/apps/v4/public/r/styles/base-lyra/button-secondary.json new file mode 100644 index 0000000000..be23dc747d --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-secondary.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-secondary", + "title": "Button Secondary", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-secondary.tsx", + "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonSecondary() {\n return \n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-size.json b/apps/v4/public/r/styles/base-lyra/button-size.json new file mode 100644 index 0000000000..e8a6bdf51d --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-size.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-size", + "title": "Button Size", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-size.tsx", + "content": "import { ArrowUpRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonSize() {\n return (\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button-with-icon.json b/apps/v4/public/r/styles/base-lyra/button-with-icon.json new file mode 100644 index 0000000000..4a6e388e19 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/button-with-icon.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-with-icon", + "title": "Button With Icon", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/button-with-icon.tsx", + "content": "import { IconGitBranch } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonWithIcon() {\n return (\n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/button.json b/apps/v4/public/r/styles/base-lyra/button.json index 960ea0aaf0..400acc6784 100644 --- a/apps/v4/public/r/styles/base-lyra/button.json +++ b/apps/v4/public/r/styles/base-lyra/button.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/button.tsx", - "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-7 rounded-none\",\n \"icon-lg\": \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps) {\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n", + "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-7 rounded-none\",\n \"icon-lg\": \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps) {\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/calendar-demo.json b/apps/v4/public/r/styles/base-lyra/calendar-demo.json new file mode 100644 index 0000000000..8f89099cc4 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/calendar-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "calendar-demo", + "title": "Calendar Demo", + "registryDependencies": [ + "calendar" + ], + "files": [ + { + "path": "registry/base-lyra/demo/calendar-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/base-lyra/ui/calendar\"\n\nexport default function CalendarDemo() {\n const [date, setDate] = React.useState(new Date())\n\n return (\n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/calendar-example.json b/apps/v4/public/r/styles/base-lyra/calendar-example.json index ccab7c5e65..ae9c9ee23d 100644 --- a/apps/v4/public/r/styles/base-lyra/calendar-example.json +++ b/apps/v4/public/r/styles/base-lyra/calendar-example.json @@ -15,7 +15,7 @@ "files": [ { "path": "registry/base-lyra/examples/calendar-example.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarSingle() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n )\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarMultiple() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarRange() {\n const [dateRange, setDateRange] = React.useState({\n from: new Date(new Date().getFullYear(), 0, 12),\n to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n })\n\n return (\n \n \n \n \n date > new Date() || date < new Date(\"1900-01-01\")\n }\n />\n \n \n \n )\n}\n\nfunction CalendarRangeMultipleMonths() {\n const [range, setRange] = React.useState({\n from: new Date(new Date().getFullYear(), 3, 12),\n to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n })\n\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarBookedDates() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), 1, 3)\n )\n const bookedDates = Array.from(\n { length: 15 },\n (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n )\n\n return (\n \n \n \n button]:line-through opacity-100\",\n }}\n />\n \n \n \n )\n}\n\nfunction CalendarWithTime() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n )\n\n return (\n \n \n \n \n \n \n \n \n Start Time\n \n \n \n \n \n \n \n \n End Time\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarCustomDays() {\n const [range, setRange] = React.useState({\n from: new Date(new Date().getFullYear(), 11, 8),\n to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n })\n\n return (\n \n \n \n {\n return date.toLocaleString(\"default\", { month: \"long\" })\n },\n }}\n components={{\n DayButton: ({ children, modifiers, day, ...props }) => {\n const isWeekend =\n day.date.getDay() === 0 || day.date.getDay() === 6\n\n return (\n \n {children}\n {!modifiers.outside && (\n {isWeekend ? \"$120\" : \"$100\"}\n )}\n \n )\n },\n }}\n />\n \n \n \n )\n}\n\nfunction CalendarWithPresets() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), 1, 12)\n )\n const [currentMonth, setCurrentMonth] = React.useState(\n new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n )\n\n return (\n \n \n \n \n \n \n {[\n { label: \"Today\", value: 0 },\n { label: \"Tomorrow\", value: 1 },\n { label: \"In 3 days\", value: 3 },\n { label: \"In a week\", value: 7 },\n { label: \"In 2 weeks\", value: 14 },\n ].map((preset) => (\n {\n const newDate = addDays(new Date(), preset.value)\n setDate(newDate)\n setCurrentMonth(\n new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n )\n }}\n >\n {preset.label}\n \n ))}\n \n \n \n )\n}\n\nfunction DatePickerSimple() {\n const [date, setDate] = React.useState()\n\n return (\n \n \n Date\n \n \n }\n >\n \n {date ? format(date, \"PPP\") : Pick a date}\n \n \n \n \n \n \n \n )\n}\n\nfunction DatePickerWithRange() {\n const [date, setDate] = React.useState({\n from: new Date(new Date().getFullYear(), 0, 20),\n to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n })\n\n return (\n \n \n Date Picker Range\n \n \n }\n >\n \n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} -{\" \"}\n {format(date.to, \"LLL dd, y\")}\n \n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n Pick a date\n )}\n \n \n \n \n \n \n \n )\n}\n\nfunction DataPickerWithDropdowns() {\n const [date, setDate] = React.useState()\n const [open, setOpen] = React.useState(false)\n\n return (\n \n \n \n \n Date\n \n \n }\n >\n \n {date ? format(date, \"PPP\") : Pick a date}\n \n \n \n
\n setOpen(false)}\n >\n Done\n \n
\n \n \n \n \n )\n}\n\nfunction CalendarWeekNumbers() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), 1, 3)\n )\n\n return (\n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-lyra/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarSingle() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n )\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarMultiple() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarRange() {\n const [dateRange, setDateRange] = React.useState({\n from: new Date(new Date().getFullYear(), 0, 12),\n to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n })\n\n return (\n \n \n \n \n date > new Date() || date < new Date(\"1900-01-01\")\n }\n />\n \n \n \n )\n}\n\nfunction CalendarRangeMultipleMonths() {\n const [range, setRange] = React.useState({\n from: new Date(new Date().getFullYear(), 3, 12),\n to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n })\n\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarBookedDates() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), 1, 3)\n )\n const bookedDates = Array.from(\n { length: 15 },\n (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n )\n\n return (\n \n \n \n button]:line-through opacity-100\",\n }}\n />\n \n \n \n )\n}\n\nfunction CalendarWithTime() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n )\n\n return (\n \n \n \n \n \n \n \n \n Start Time\n \n \n \n \n \n \n \n \n End Time\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarCustomDays() {\n const [range, setRange] = React.useState({\n from: new Date(new Date().getFullYear(), 11, 8),\n to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n })\n\n return (\n \n \n \n {\n return date.toLocaleString(\"default\", { month: \"long\" })\n },\n }}\n components={{\n DayButton: ({ children, modifiers, day, ...props }) => {\n const isWeekend =\n day.date.getDay() === 0 || day.date.getDay() === 6\n\n return (\n \n {children}\n {!modifiers.outside && (\n {isWeekend ? \"$120\" : \"$100\"}\n )}\n \n )\n },\n }}\n />\n \n \n \n )\n}\n\nfunction CalendarWithPresets() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), 1, 12)\n )\n const [currentMonth, setCurrentMonth] = React.useState(\n new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n )\n\n return (\n \n \n \n \n \n \n {[\n { label: \"Today\", value: 0 },\n { label: \"Tomorrow\", value: 1 },\n { label: \"In 3 days\", value: 3 },\n { label: \"In a week\", value: 7 },\n { label: \"In 2 weeks\", value: 14 },\n ].map((preset) => (\n {\n const newDate = addDays(new Date(), preset.value)\n setDate(newDate)\n setCurrentMonth(\n new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n )\n }}\n >\n {preset.label}\n \n ))}\n \n \n \n )\n}\n\nfunction DatePickerSimple() {\n const [date, setDate] = React.useState()\n\n return (\n \n \n Date\n \n \n }\n >\n \n {date ? format(date, \"PPP\") : Pick a date}\n \n \n \n \n \n \n \n )\n}\n\nfunction DatePickerWithRange() {\n const [date, setDate] = React.useState({\n from: new Date(new Date().getFullYear(), 0, 20),\n to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n })\n\n return (\n \n \n Date Picker Range\n \n \n }\n >\n \n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} -{\" \"}\n {format(date.to, \"LLL dd, y\")}\n \n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n Pick a date\n )}\n \n \n \n \n \n \n \n )\n}\n\nfunction DataPickerWithDropdowns() {\n const [date, setDate] = React.useState()\n const [open, setOpen] = React.useState(false)\n\n return (\n \n \n \n \n Date\n \n \n }\n >\n \n {date ? format(date, \"PPP\") : Pick a date}\n \n \n \n
\n setOpen(false)}\n >\n Done\n \n
\n \n \n \n \n )\n}\n\nfunction CalendarWeekNumbers() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), 1, 3)\n )\n\n return (\n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/calendar-hijri.json b/apps/v4/public/r/styles/base-lyra/calendar-hijri.json new file mode 100644 index 0000000000..01b0f80818 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/calendar-hijri.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "calendar-hijri", + "title": "Calendar Hijri", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-lyra/demo/calendar-hijri.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from \"lucide-react\"\nimport { getDefaultClassNames, type DayButton } from \"react-day-picker\"\nimport { DayPicker } from \"react-day-picker/persian\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-lyra/ui/button\"\n\nexport default function CalendarHijri() {\n const [date, setDate] = React.useState(\n new Date(2025, 5, 12)\n )\n\n return (\n \n )\n}\n\n// ----------------------------------------------------------------------------\n// The code below is for this example only.\n// For your own calendar, you would edit the calendar.tsx component directly.\n// ----------------------------------------------------------------------------\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = \"label\",\n buttonVariant = \"ghost\",\n formatters,\n components,\n ...props\n}: React.ComponentProps & {\n buttonVariant?: React.ComponentProps[\"variant\"]\n}) {\n const defaultClassNames = getDefaultClassNames()\n\n return (\n svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className\n )}\n captionLayout={captionLayout}\n formatters={{\n formatMonthDropdown: (date) =>\n date.toLocaleString(\"default\", { month: \"short\" }),\n ...formatters,\n }}\n classNames={{\n root: cn(\"w-fit\", defaultClassNames.root),\n months: cn(\n \"flex gap-4 flex-col md:flex-row relative\",\n defaultClassNames.months\n ),\n month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n nav: cn(\n \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n defaultClassNames.nav\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n defaultClassNames.button_previous\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n defaultClassNames.button_next\n ),\n month_caption: cn(\n \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n caption_label: cn(\n \"select-none font-medium\",\n captionLayout === \"label\"\n ? \"text-sm\"\n : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n defaultClassNames.caption_label\n ),\n table: \"w-full border-collapse\",\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\n weekday: cn(\n \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n defaultClassNames.weekday\n ),\n week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n week_number_header: cn(\n \"select-none w-(--cell-size)\",\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n \"text-[0.8rem] select-none text-muted-foreground\",\n defaultClassNames.week_number\n ),\n day: cn(\n \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n defaultClassNames.day\n ),\n range_start: cn(\n \"rounded-l-md bg-accent\",\n defaultClassNames.range_start\n ),\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n today: cn(\n \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n defaultClassNames.today\n ),\n outside: cn(\n \"text-muted-foreground aria-selected:text-muted-foreground\",\n defaultClassNames.outside\n ),\n disabled: cn(\n \"text-muted-foreground opacity-50\",\n defaultClassNames.disabled\n ),\n hidden: cn(\"invisible\", defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n Root: ({ className, rootRef, ...props }) => {\n return (\n \n )\n },\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === \"left\") {\n return (\n \n )\n }\n\n if (orientation === \"right\") {\n return (\n \n )\n }\n\n return (\n \n )\n },\n DayButton: CalendarDayButton,\n WeekNumber: ({ children, ...props }) => {\n return (\n \n
\n {children}\n
\n \n )\n },\n ...components,\n }}\n {...props}\n />\n )\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n ...props\n}: React.ComponentProps) {\n const defaultClassNames = getDefaultClassNames()\n\n const ref = React.useRef(null)\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus()\n }, [modifiers.focused])\n\n return (\n span]:text-xs [&>span]:opacity-70\",\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/calendar.json b/apps/v4/public/r/styles/base-lyra/calendar.json index 5de2511806..82352cc293 100644 --- a/apps/v4/public/r/styles/base-lyra/calendar.json +++ b/apps/v4/public/r/styles/base-lyra/calendar.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/base-lyra/ui/calendar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n DayPicker,\n getDefaultClassNames,\n type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = \"label\",\n buttonVariant = \"ghost\",\n formatters,\n components,\n ...props\n}: React.ComponentProps & {\n buttonVariant?: React.ComponentProps[\"variant\"]\n}) {\n const defaultClassNames = getDefaultClassNames()\n\n return (\n svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className\n )}\n captionLayout={captionLayout}\n formatters={{\n formatMonthDropdown: (date) =>\n date.toLocaleString(\"default\", { month: \"short\" }),\n ...formatters,\n }}\n classNames={{\n root: cn(\"w-fit\", defaultClassNames.root),\n months: cn(\n \"flex gap-4 flex-col md:flex-row relative\",\n defaultClassNames.months\n ),\n month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n nav: cn(\n \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n defaultClassNames.nav\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n defaultClassNames.button_previous\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n defaultClassNames.button_next\n ),\n month_caption: cn(\n \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\n \"absolute bg-popover inset-0 opacity-0\",\n defaultClassNames.dropdown\n ),\n caption_label: cn(\n \"select-none font-medium\",\n captionLayout === \"label\"\n ? \"text-sm\"\n : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n defaultClassNames.caption_label\n ),\n table: \"w-full border-collapse\",\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\n weekday: cn(\n \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n defaultClassNames.weekday\n ),\n week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n week_number_header: cn(\n \"select-none w-(--cell-size)\",\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n \"text-[0.8rem] select-none text-muted-foreground\",\n defaultClassNames.week_number\n ),\n day: cn(\n \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n props.showWeekNumber\n ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n defaultClassNames.day\n ),\n range_start: cn(\n \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n defaultClassNames.range_start\n ),\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n range_end: cn(\n \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n defaultClassNames.range_end\n ),\n today: cn(\n \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n defaultClassNames.today\n ),\n outside: cn(\n \"text-muted-foreground aria-selected:text-muted-foreground\",\n defaultClassNames.outside\n ),\n disabled: cn(\n \"text-muted-foreground opacity-50\",\n defaultClassNames.disabled\n ),\n hidden: cn(\"invisible\", defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n Root: ({ className, rootRef, ...props }) => {\n return (\n \n )\n },\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === \"left\") {\n return (\n \n )\n }\n\n if (orientation === \"right\") {\n return (\n \n )\n }\n\n return (\n \n )\n },\n DayButton: CalendarDayButton,\n WeekNumber: ({ children, ...props }) => {\n return (\n \n
\n {children}\n
\n \n )\n },\n ...components,\n }}\n {...props}\n />\n )\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n ...props\n}: React.ComponentProps) {\n const defaultClassNames = getDefaultClassNames()\n\n const ref = React.useRef(null)\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus()\n }, [modifiers.focused])\n\n return (\n span]:text-xs [&>span]:opacity-70\",\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Calendar, CalendarDayButton }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n DayPicker,\n getDefaultClassNames,\n type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = \"label\",\n buttonVariant = \"ghost\",\n formatters,\n components,\n ...props\n}: React.ComponentProps & {\n buttonVariant?: React.ComponentProps[\"variant\"]\n}) {\n const defaultClassNames = getDefaultClassNames()\n\n return (\n svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className\n )}\n captionLayout={captionLayout}\n formatters={{\n formatMonthDropdown: (date) =>\n date.toLocaleString(\"default\", { month: \"short\" }),\n ...formatters,\n }}\n classNames={{\n root: cn(\"w-fit\", defaultClassNames.root),\n months: cn(\n \"flex gap-4 flex-col md:flex-row relative\",\n defaultClassNames.months\n ),\n month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n nav: cn(\n \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n defaultClassNames.nav\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n defaultClassNames.button_previous\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n defaultClassNames.button_next\n ),\n month_caption: cn(\n \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\n \"absolute bg-popover inset-0 opacity-0\",\n defaultClassNames.dropdown\n ),\n caption_label: cn(\n \"select-none font-medium\",\n captionLayout === \"label\"\n ? \"text-sm\"\n : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n defaultClassNames.caption_label\n ),\n table: \"w-full border-collapse\",\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\n weekday: cn(\n \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n defaultClassNames.weekday\n ),\n week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n week_number_header: cn(\n \"select-none w-(--cell-size)\",\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n \"text-[0.8rem] select-none text-muted-foreground\",\n defaultClassNames.week_number\n ),\n day: cn(\n \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n props.showWeekNumber\n ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n defaultClassNames.day\n ),\n range_start: cn(\n \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n defaultClassNames.range_start\n ),\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n range_end: cn(\n \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n defaultClassNames.range_end\n ),\n today: cn(\n \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n defaultClassNames.today\n ),\n outside: cn(\n \"text-muted-foreground aria-selected:text-muted-foreground\",\n defaultClassNames.outside\n ),\n disabled: cn(\n \"text-muted-foreground opacity-50\",\n defaultClassNames.disabled\n ),\n hidden: cn(\"invisible\", defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n Root: ({ className, rootRef, ...props }) => {\n return (\n \n )\n },\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === \"left\") {\n return (\n \n )\n }\n\n if (orientation === \"right\") {\n return (\n \n )\n }\n\n return (\n \n )\n },\n DayButton: CalendarDayButton,\n WeekNumber: ({ children, ...props }) => {\n return (\n \n
\n {children}\n
\n \n )\n },\n ...components,\n }}\n {...props}\n />\n )\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n ...props\n}: React.ComponentProps) {\n const defaultClassNames = getDefaultClassNames()\n\n const ref = React.useRef(null)\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus()\n }, [modifiers.focused])\n\n return (\n span]:text-xs [&>span]:opacity-70\",\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Calendar, CalendarDayButton }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/card-demo.json b/apps/v4/public/r/styles/base-lyra/card-demo.json new file mode 100644 index 0000000000..160f836f5a --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/card-demo.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "card-demo", + "title": "Card Demo", + "registryDependencies": [ + "button", + "card", + "input", + "label" + ], + "files": [ + { + "path": "registry/base-lyra/demo/card-demo.tsx", + "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport default function CardDemo() {\n return (\n \n \n Login to your account\n \n Enter your email below to login to your account\n \n \n \n \n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n Forgot your password?\n \n
\n \n
\n
\n
\n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/card-example.json b/apps/v4/public/r/styles/base-lyra/card-example.json index c2251de459..865f804679 100644 --- a/apps/v4/public/r/styles/base-lyra/card-example.json +++ b/apps/v4/public/r/styles/base-lyra/card-example.json @@ -13,7 +13,7 @@ "files": [ { "path": "registry/base-lyra/examples/card-example.tsx", - "content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CardLogin() {\n return (\n \n \n \n Login to your account\n \n Enter your email below to login to your account\n \n \n \n
\n \n \n Email\n \n \n \n
\n Password\n \n Forgot your password?\n \n
\n \n \n \n
\n \n \n \n \n
\n Don't have an account?{\" \"}\n \n Sign up\n \n
\n \n \n \n )\n}\n\nfunction CardMeetingNotes() {\n return (\n \n \n \n Meeting Notes\n \n Transcript from the meeting with the client.\n \n \n \n \n \n \n

\n Client requested dashboard redesign with focus on mobile\n responsiveness.\n

\n
    \n
  1. New analytics widgets for daily/weekly metrics
    2. \n
  2. Simplified navigation menu
    3. \n
  3. Dark mode support
    4. \n
  4. Timeline: 6 weeks
    5. \n
  5. Follow-up meeting scheduled for next Tuesday
    6. \n
\n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +8\n \n \n \n \n )\n}\n\nfunction CardWithImage() {\n return (\n \n \n
\n \n \n Beautiful Landscape\n \n A stunning view that captures the essence of natural beauty.\n \n \n \n \n \n \n \n )\n}\n\nfunction CardWithImageSmall() {\n return (\n \n \n
\n \n \n Beautiful Landscape\n \n A stunning view that captures the essence of natural beauty.\n \n \n \n \n \n \n \n )\n}\n\nfunction CardHeaderWithBorder() {\n return (\n \n \n \n Header with Border\n \n This is a card with a header that has a bottom border.\n \n \n \n

\n The header has a border-b class applied, creating a visual\n separation between the header and content sections.\n

\n \n \n \n )\n}\n\nfunction CardFooterWithBorder() {\n return (\n \n \n \n

\n The footer has a border-t class applied, creating a visual\n separation between the content and footer sections.\n

\n \n \n \n \n \n \n )\n}\n\nfunction CardDefault() {\n return (\n \n \n \n Default Card\n \n This card uses the default size variant.\n \n \n \n

\n The card component supports a size prop that defaults to\n "default" for standard spacing and sizing.\n

\n \n \n \n \n \n \n )\n}\n\nfunction CardSmall() {\n return (\n \n \n \n Small Card\n \n This card uses the small size variant.\n \n \n \n

\n The card component supports a size prop that can be set to\n "sm" for a more compact appearance.\n

\n \n \n \n \n \n \n )\n}\n\nfunction CardHeaderWithBorderSmall() {\n return (\n \n \n \n Header with Border\n \n This is a small card with a header that has a bottom border.\n \n \n \n

\n The header has a border-b class applied, creating a visual\n separation between the header and content sections.\n

\n \n \n \n )\n}\n\nfunction CardFooterWithBorderSmall() {\n return (\n \n \n \n

\n The footer has a border-t class applied, creating a visual\n separation between the content and footer sections.\n

\n \n \n \n \n \n \n )\n}\n", + "content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CardLogin() {\n return (\n \n \n \n Login to your account\n \n Enter your email below to login to your account\n \n \n \n
\n \n \n Email\n \n \n \n
\n Password\n \n Forgot your password?\n \n
\n \n \n \n
\n \n \n \n \n
\n Don't have an account?{\" \"}\n \n Sign up\n \n
\n \n \n \n )\n}\n\nfunction CardMeetingNotes() {\n return (\n \n \n \n Meeting Notes\n \n Transcript from the meeting with the client.\n \n \n \n \n \n \n

\n Client requested dashboard redesign with focus on mobile\n responsiveness.\n

\n
    \n
  1. New analytics widgets for daily/weekly metrics
    2. \n
  2. Simplified navigation menu
    3. \n
  3. Dark mode support
    4. \n
  4. Timeline: 6 weeks
    5. \n
  5. Follow-up meeting scheduled for next Tuesday
    6. \n
\n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +8\n \n \n \n \n )\n}\n\nfunction CardWithImage() {\n return (\n \n \n
\n \n \n Beautiful Landscape\n \n A stunning view that captures the essence of natural beauty.\n \n \n \n \n \n \n \n )\n}\n\nfunction CardWithImageSmall() {\n return (\n \n \n
\n \n \n Beautiful Landscape\n \n A stunning view that captures the essence of natural beauty.\n \n \n \n \n \n \n \n )\n}\n\nfunction CardHeaderWithBorder() {\n return (\n \n \n \n Header with Border\n \n This is a card with a header that has a bottom border.\n \n \n \n

\n The header has a border-b class applied, creating a visual\n separation between the header and content sections.\n

\n \n \n \n )\n}\n\nfunction CardFooterWithBorder() {\n return (\n \n \n \n

\n The footer has a border-t class applied, creating a visual\n separation between the content and footer sections.\n

\n \n \n \n \n \n \n )\n}\n\nfunction CardDefault() {\n return (\n \n \n \n Default Card\n \n This card uses the default size variant.\n \n \n \n

\n The card component supports a size prop that defaults to\n "default" for standard spacing and sizing.\n

\n \n \n \n \n \n \n )\n}\n\nfunction CardSmall() {\n return (\n \n \n \n Small Card\n \n This card uses the small size variant.\n \n \n \n

\n The card component supports a size prop that can be set to\n "sm" for a more compact appearance.\n

\n \n \n \n \n \n \n )\n}\n\nfunction CardHeaderWithBorderSmall() {\n return (\n \n \n \n Header with Border\n \n This is a small card with a header that has a bottom border.\n \n \n \n

\n The header has a border-b class applied, creating a visual\n separation between the header and content sections.\n

\n \n \n \n )\n}\n\nfunction CardFooterWithBorderSmall() {\n return (\n \n \n \n

\n The footer has a border-t class applied, creating a visual\n separation between the content and footer sections.\n

\n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/card.json b/apps/v4/public/r/styles/base-lyra/card.json index eceacd82b3..75bc7325c5 100644 --- a/apps/v4/public/r/styles/base-lyra/card.json +++ b/apps/v4/public/r/styles/base-lyra/card.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/card.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n", + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/carousel-api.json b/apps/v4/public/r/styles/base-lyra/carousel-api.json new file mode 100644 index 0000000000..60e41e5d15 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/carousel-api.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "carousel-api", + "title": "Carousel Api", + "registryDependencies": [ + "card", + "carousel" + ], + "files": [ + { + "path": "registry/base-lyra/demo/carousel-api.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n type CarouselApi,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n const [api, setApi] = React.useState()\n const [current, setCurrent] = React.useState(0)\n const [count, setCount] = React.useState(0)\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n setCount(api.scrollSnapList().length)\n setCurrent(api.selectedScrollSnap() + 1)\n\n api.on(\"select\", () => {\n setCurrent(api.selectedScrollSnap() + 1)\n })\n }, [api])\n\n return (\n
\n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n \n \n {index + 1}\n \n \n \n ))}\n \n \n \n \n
\n Slide {current} of {count}\n
\n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/carousel-demo.json b/apps/v4/public/r/styles/base-lyra/carousel-demo.json new file mode 100644 index 0000000000..ab8fc7bb98 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/carousel-demo.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "carousel-demo", + "title": "Carousel Demo", + "registryDependencies": [ + "card", + "carousel" + ], + "files": [ + { + "path": "registry/base-lyra/demo/carousel-demo.tsx", + "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselDemo() {\n return (\n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/carousel-example.json b/apps/v4/public/r/styles/base-lyra/carousel-example.json index 42fcaecb9c..d8baf97dfa 100644 --- a/apps/v4/public/r/styles/base-lyra/carousel-example.json +++ b/apps/v4/public/r/styles/base-lyra/carousel-example.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-lyra/examples/carousel-example.tsx", - "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Card, CardContent } from \"@/registry/bases/base/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/bases/base/ui/carousel\"\n\nexport default function CarouselExample() {\n return (\n \n \n \n \n \n )\n}\n\nfunction CarouselBasic() {\n return (\n \n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n \n )\n}\n\nfunction CarouselMultiple() {\n return (\n \n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n \n )\n}\n\nfunction CarouselWithGap() {\n return (\n \n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n \n )\n}\n", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselExample() {\n return (\n \n \n \n \n \n )\n}\n\nfunction CarouselBasic() {\n return (\n \n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n \n )\n}\n\nfunction CarouselMultiple() {\n return (\n \n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n \n )\n}\n\nfunction CarouselWithGap() {\n return (\n \n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/carousel-orientation.json b/apps/v4/public/r/styles/base-lyra/carousel-orientation.json new file mode 100644 index 0000000000..0e941d3cc3 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/carousel-orientation.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "carousel-orientation", + "title": "Carousel Orientation", + "registryDependencies": [ + "card", + "carousel" + ], + "files": [ + { + "path": "registry/base-lyra/demo/carousel-orientation.tsx", + "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselOrientation() {\n return (\n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/carousel-plugin.json b/apps/v4/public/r/styles/base-lyra/carousel-plugin.json new file mode 100644 index 0000000000..40efb1ac21 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/carousel-plugin.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "carousel-plugin", + "title": "Carousel Plugin", + "registryDependencies": [ + "card", + "carousel" + ], + "files": [ + { + "path": "registry/base-lyra/demo/carousel-plugin.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselPlugin() {\n const plugin = React.useRef(\n Autoplay({ delay: 2000, stopOnInteraction: true })\n )\n\n return (\n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/carousel-size.json b/apps/v4/public/r/styles/base-lyra/carousel-size.json new file mode 100644 index 0000000000..db826d436f --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/carousel-size.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "carousel-size", + "title": "Carousel Size", + "registryDependencies": [ + "card", + "carousel" + ], + "files": [ + { + "path": "registry/base-lyra/demo/carousel-size.tsx", + "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselSize() {\n return (\n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/carousel-spacing.json b/apps/v4/public/r/styles/base-lyra/carousel-spacing.json new file mode 100644 index 0000000000..56da2b1ced --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/carousel-spacing.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "carousel-spacing", + "title": "Carousel Spacing", + "registryDependencies": [ + "card", + "carousel" + ], + "files": [ + { + "path": "registry/base-lyra/demo/carousel-spacing.tsx", + "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselSpacing() {\n return (\n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/carousel.json b/apps/v4/public/r/styles/base-lyra/carousel.json index 4de2f3f7aa..782e6d231b 100644 --- a/apps/v4/public/r/styles/base-lyra/carousel.json +++ b/apps/v4/public/r/styles/base-lyra/carousel.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-lyra/ui/carousel.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: \"horizontal\" | \"vertical\"\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType[0]\n api: ReturnType[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a \")\n }\n\n return context\n}\n\nfunction Carousel({\n orientation = \"horizontal\",\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) return\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) return\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) return\n onSelect(api)\n api.on(\"reInit\", onSelect)\n api.on(\"select\", onSelect)\n\n return () => {\n api?.off(\"select\", onSelect)\n }\n }, [api, onSelect])\n\n return (\n \n \n {children}\n
\n \n )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n \n \n
\n )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n const { orientation } = useCarousel()\n\n return (\n \n )\n}\n\nfunction CarouselPrevious({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n \n \n Previous slide\n \n )\n}\n\nfunction CarouselNext({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n \n \n Next slide\n \n )\n}\n\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n useCarousel,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: \"horizontal\" | \"vertical\"\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType[0]\n api: ReturnType[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a \")\n }\n\n return context\n}\n\nfunction Carousel({\n orientation = \"horizontal\",\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) return\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) return\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) return\n onSelect(api)\n api.on(\"reInit\", onSelect)\n api.on(\"select\", onSelect)\n\n return () => {\n api?.off(\"select\", onSelect)\n }\n }, [api, onSelect])\n\n return (\n \n \n {children}\n
\n \n )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n \n \n
\n )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n const { orientation } = useCarousel()\n\n return (\n \n )\n}\n\nfunction CarouselPrevious({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n \n \n Previous slide\n \n )\n}\n\nfunction CarouselNext({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n \n \n Next slide\n \n )\n}\n\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n useCarousel,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/chart-bar-demo-axis.json b/apps/v4/public/r/styles/base-lyra/chart-bar-demo-axis.json new file mode 100644 index 0000000000..0c16c510a6 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/chart-bar-demo-axis.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "chart-bar-demo-axis", + "title": "Chart Bar Demo Axis", + "registryDependencies": [ + "chart" + ], + "files": [ + { + "path": "registry/base-lyra/demo/chart-bar-demo-axis.tsx", + "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemoAxis() {\n return (\n \n \n \n value.slice(0, 3)}\n />\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/chart-bar-demo-grid.json b/apps/v4/public/r/styles/base-lyra/chart-bar-demo-grid.json new file mode 100644 index 0000000000..1091b58c5c --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/chart-bar-demo-grid.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "chart-bar-demo-grid", + "title": "Chart Bar Demo Grid", + "registryDependencies": [ + "chart" + ], + "files": [ + { + "path": "registry/base-lyra/demo/chart-bar-demo-grid.tsx", + "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemoGrid() {\n return (\n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/chart-bar-demo-legend.json b/apps/v4/public/r/styles/base-lyra/chart-bar-demo-legend.json new file mode 100644 index 0000000000..067b000e6b --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/chart-bar-demo-legend.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "chart-bar-demo-legend", + "title": "Chart Bar Demo Legend", + "registryDependencies": [ + "chart" + ], + "files": [ + { + "path": "registry/base-lyra/demo/chart-bar-demo-legend.tsx", + "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemoLegend() {\n return (\n \n \n \n value.slice(0, 3)}\n />\n } />\n } />\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/chart-bar-demo-tooltip.json b/apps/v4/public/r/styles/base-lyra/chart-bar-demo-tooltip.json new file mode 100644 index 0000000000..64e160f338 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/chart-bar-demo-tooltip.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "chart-bar-demo-tooltip", + "title": "Chart Bar Demo Tooltip", + "registryDependencies": [ + "chart" + ], + "files": [ + { + "path": "registry/base-lyra/demo/chart-bar-demo-tooltip.tsx", + "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemoTooltip() {\n return (\n \n \n \n value.slice(0, 3)}\n />\n } />\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/chart-bar-demo.json b/apps/v4/public/r/styles/base-lyra/chart-bar-demo.json new file mode 100644 index 0000000000..3422006d01 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/chart-bar-demo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "chart-bar-demo", + "title": "Chart Bar Demo", + "registryDependencies": [ + "chart" + ], + "files": [ + { + "path": "registry/base-lyra/demo/chart-bar-demo.tsx", + "content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemo() {\n return (\n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/chart-example.json b/apps/v4/public/r/styles/base-lyra/chart-example.json index de9c9f80c2..904b639810 100644 --- a/apps/v4/public/r/styles/base-lyra/chart-example.json +++ b/apps/v4/public/r/styles/base-lyra/chart-example.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-lyra/examples/chart-example.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Area,\n AreaChart,\n Bar,\n BarChart,\n CartesianGrid,\n Label,\n Line,\n LineChart,\n Pie,\n PieChart,\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n Radar,\n RadarChart,\n RadialBar,\n RadialBarChart,\n XAxis,\n} from \"recharts\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction ChartAreaExample() {\n return (\n \n \n \n Area Chart\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n January - June 2024\n
\n
\n
\n \n \n \n )\n}\n\nconst barChartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n return (\n \n \n \n Bar Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n \n )\n}\n\nconst lineChartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n return (\n \n \n \n Line Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n } />\n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n
\n
\n \n \n \n )\n}\n\nconst pieChartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n const totalVisitors = React.useMemo(() => {\n return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n }, [])\n\n return (\n \n \n \n Pie Chart - Donut with Text\n January - June 2024\n \n \n \n \n }\n />\n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {totalVisitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n \n )\n}\n\nconst radarChartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n return (\n \n \n \n Radar Chart - Multiple\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n January - June 2024\n
\n \n \n \n )\n}\n\nconst radialChartData = [\n { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n return (\n \n \n \n Radial Chart - Shape\n January - June 2024\n \n \n \n \n \n \n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {radialChartData[0].visitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Area,\n AreaChart,\n Bar,\n BarChart,\n CartesianGrid,\n Label,\n Line,\n LineChart,\n Pie,\n PieChart,\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n Radar,\n RadarChart,\n RadialBar,\n RadialBarChart,\n XAxis,\n} from \"recharts\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction ChartAreaExample() {\n return (\n \n \n \n Area Chart\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n January - June 2024\n
\n
\n
\n \n \n \n )\n}\n\nconst barChartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n return (\n \n \n \n Bar Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n \n )\n}\n\nconst lineChartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n return (\n \n \n \n Line Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n } />\n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n
\n
\n \n \n \n )\n}\n\nconst pieChartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n const totalVisitors = React.useMemo(() => {\n return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n }, [])\n\n return (\n \n \n \n Pie Chart - Donut with Text\n January - June 2024\n \n \n \n \n }\n />\n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {totalVisitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n \n )\n}\n\nconst radarChartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n return (\n \n \n \n Radar Chart - Multiple\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n January - June 2024\n
\n \n \n \n )\n}\n\nconst radialChartData = [\n { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n return (\n \n \n \n Radial Chart - Shape\n January - June 2024\n \n \n \n \n \n \n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {radialChartData[0].visitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/chart.json b/apps/v4/public/r/styles/base-lyra/chart.json index 4d9c4ea31a..a624970661 100644 --- a/apps/v4/public/r/styles/base-lyra/chart.json +++ b/apps/v4/public/r/styles/base-lyra/chart.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-lyra/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n
\n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> &\n Pick & {\n hideIcon?: boolean\n nameKey?: string\n }) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/chatgpt.json b/apps/v4/public/r/styles/base-lyra/chatgpt.json index cd24da9e2d..41b3a32278 100644 --- a/apps/v4/public/r/styles/base-lyra/chatgpt.json +++ b/apps/v4/public/r/styles/base-lyra/chatgpt.json @@ -20,7 +20,7 @@ "files": [ { "path": "registry/base-lyra/blocks/chatgpt.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction PromptForm() {\n const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n return (\n \n \n \n Prompt\n \n \n \n \n \n \n setDictateEnabled(!dictateEnabled)}\n className=\"rounded-4xl\"\n />\n }\n />\n }\n >\n \n \n \n Add files and more /\n \n \n \n \n \n \n Add photos & files\n \n \n \n Deep research\n \n \n \n Shopping research\n \n \n \n Create image\n \n \n \n \n Agent mode\n \n }\n />\n \n
35 left
\n
\n More available for purchase\n
\n \n \n \n \n \n \n More\n \n \n \n \n \n \n Add sources\n \n \n \n Study and learn\n \n \n \n Web search\n \n \n \n Canvas\n \n \n \n \n \n \n \n \n setDictateEnabled(!dictateEnabled)}\n className=\"ml-auto rounded-4xl\"\n />\n }\n >\n \n \n Dictate\n \n \n \n \n \n \n \n \n )\n}\n\nfunction ModelSelector() {\n const [mode, setMode] = React.useState(\"auto\")\n const [model, setModel] = React.useState(\"gpt-5.1\")\n\n return (\n \n \n }\n >\n ChatGPT 5.1\n \n \n \n \n \n GPT-5.1\n \n \n \n \n \n Auto\n \n Decides how long to think\n \n \n \n \n \n \n \n Instant\n \n Answers right away\n \n \n \n \n \n \n \n Thinking\n \n Thinks longer for better answers\n \n \n \n \n \n \n \n \n \n Legacy models\n \n \n \n \n \n \n GPT-4\n \n \n GPT-4 Turbo\n \n \n GPT-3.5\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction GroupChatDialog() {\n return (\n \n \n }>\n Start Group Chat\n \n \n \n Use ChatGPT together\n \n Add people to your chats to plan, share ideas, and get creative.\n \n \n \n \n Learn more\n \n
\n Cancel\n Start group chat\n
\n \n \n \n \n )\n}\n\nconst categories = [\n {\n id: \"homework\",\n label: \"Homework\",\n },\n {\n id: \"writing\",\n label: \"Writing\",\n },\n {\n id: \"health\",\n label: \"Health\",\n },\n {\n id: \"travel\",\n label: \"Travel\",\n },\n]\n\nfunction CreateProjectForm() {\n const [projectName, setProjectName] = React.useState(\"\")\n const [selectedCategory, setSelectedCategory] = React.useState(\n categories[0].id\n )\n const [memorySetting, setMemorySetting] = React.useState<\n \"default\" | \"project-only\"\n >(\"default\")\n const [selectedColor, setSelectedColor] = React.useState(\n \"var(--foreground)\"\n )\n\n return (\n \n \n \n Create Project\n \n Start a new project to keep chats, files, and custom instructions in\n one place.\n \n \n \n }\n >\n \n Memory\n \n \n \n {\n setMemorySetting(value as \"default\" | \"project-only\")\n }}\n >\n \n \n \n Default\n \n Project can access memories from outside chats, and\n vice versa.\n \n \n \n \n \n \n \n Project Only\n \n Project can only access its own memories. Its\n memories are hidden from outside chats.\n \n \n \n \n \n \n \n \n \n Note that this setting can't be changed later.\n \n \n \n \n \n \n \n \n \n \n Project Name\n \n \n {\n setProjectName(e.target.value)\n }}\n />\n \n \n \n }\n >\n \n \n \n
\n {[\n \"var(--foreground)\",\n \"#fa423e\",\n \"#f59e0b\",\n \"#8b5cf6\",\n \"#ec4899\",\n \"#10b981\",\n \"#6366f1\",\n \"#14b8a6\",\n \"#f97316\",\n \"#fbbc04\",\n ].map((color) => (\n {\n setSelectedColor(color)\n }}\n >\n \n {color}\n \n ))}\n
\n \n \n \n \n \n {categories.map((category) => (\n {\n setSelectedCategory(\n selectedCategory === category.id\n ? null\n : category.id\n )\n }}\n />\n }\n >\n \n {category.label}\n \n ))}\n \n \n \n \n \n \n Projects keep chats, files, and custom instructions in one\n place. Use them for ongoing work, or just to keep things tidy.\n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-lyra/ui/alert\"\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction PromptForm() {\n const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n return (\n \n \n \n Prompt\n \n \n \n \n \n \n setDictateEnabled(!dictateEnabled)}\n className=\"rounded-4xl\"\n />\n }\n />\n }\n >\n \n \n \n Add files and more /\n \n \n \n \n \n \n Add photos & files\n \n \n \n Deep research\n \n \n \n Shopping research\n \n \n \n Create image\n \n \n \n \n Agent mode\n \n }\n />\n \n
35 left
\n
\n More available for purchase\n
\n \n \n \n \n \n \n More\n \n \n \n \n \n \n Add sources\n \n \n \n Study and learn\n \n \n \n Web search\n \n \n \n Canvas\n \n \n \n \n \n \n \n \n setDictateEnabled(!dictateEnabled)}\n className=\"ml-auto rounded-4xl\"\n />\n }\n >\n \n \n Dictate\n \n \n \n \n \n \n \n \n )\n}\n\nfunction ModelSelector() {\n const [mode, setMode] = React.useState(\"auto\")\n const [model, setModel] = React.useState(\"gpt-5.1\")\n\n return (\n \n \n }\n >\n ChatGPT 5.1\n \n \n \n \n \n GPT-5.1\n \n \n \n \n \n Auto\n \n Decides how long to think\n \n \n \n \n \n \n \n Instant\n \n Answers right away\n \n \n \n \n \n \n \n Thinking\n \n Thinks longer for better answers\n \n \n \n \n \n \n \n \n \n Legacy models\n \n \n \n \n \n \n GPT-4\n \n \n GPT-4 Turbo\n \n \n GPT-3.5\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction GroupChatDialog() {\n return (\n \n \n }>\n Start Group Chat\n \n \n \n Use ChatGPT together\n \n Add people to your chats to plan, share ideas, and get creative.\n \n \n \n \n Learn more\n \n
\n Cancel\n Start group chat\n
\n \n \n \n \n )\n}\n\nconst categories = [\n {\n id: \"homework\",\n label: \"Homework\",\n },\n {\n id: \"writing\",\n label: \"Writing\",\n },\n {\n id: \"health\",\n label: \"Health\",\n },\n {\n id: \"travel\",\n label: \"Travel\",\n },\n]\n\nfunction CreateProjectForm() {\n const [projectName, setProjectName] = React.useState(\"\")\n const [selectedCategory, setSelectedCategory] = React.useState(\n categories[0].id\n )\n const [memorySetting, setMemorySetting] = React.useState<\n \"default\" | \"project-only\"\n >(\"default\")\n const [selectedColor, setSelectedColor] = React.useState(\n \"var(--foreground)\"\n )\n\n return (\n \n \n \n Create Project\n \n Start a new project to keep chats, files, and custom instructions in\n one place.\n \n \n \n }\n >\n \n Memory\n \n \n \n {\n setMemorySetting(value as \"default\" | \"project-only\")\n }}\n >\n \n \n \n Default\n \n Project can access memories from outside chats, and\n vice versa.\n \n \n \n \n \n \n \n Project Only\n \n Project can only access its own memories. Its\n memories are hidden from outside chats.\n \n \n \n \n \n \n \n \n \n Note that this setting can't be changed later.\n \n \n \n \n \n \n \n \n \n \n Project Name\n \n \n {\n setProjectName(e.target.value)\n }}\n />\n \n \n \n }\n >\n \n \n \n
\n {[\n \"var(--foreground)\",\n \"#fa423e\",\n \"#f59e0b\",\n \"#8b5cf6\",\n \"#ec4899\",\n \"#10b981\",\n \"#6366f1\",\n \"#14b8a6\",\n \"#f97316\",\n \"#fbbc04\",\n ].map((color) => (\n {\n setSelectedColor(color)\n }}\n >\n \n {color}\n \n ))}\n
\n \n \n \n \n \n {categories.map((category) => (\n {\n setSelectedCategory(\n selectedCategory === category.id\n ? null\n : category.id\n )\n }}\n />\n }\n >\n \n {category.label}\n \n ))}\n \n \n \n \n \n \n Projects keep chats, files, and custom instructions in one\n place. Use them for ongoing work, or just to keep things tidy.\n \n \n \n \n \n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/base-lyra/checkbox-demo.json b/apps/v4/public/r/styles/base-lyra/checkbox-demo.json new file mode 100644 index 0000000000..685017cc7b --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/checkbox-demo.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "checkbox-demo", + "title": "Checkbox Demo", + "registryDependencies": [ + "checkbox", + "label" + ], + "files": [ + { + "path": "registry/base-lyra/demo/checkbox-demo.tsx", + "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport default function CheckboxDemo() {\n return (\n
\n
\n \n \n
\n
\n \n
\n \n

\n By clicking this checkbox, you agree to the terms and conditions.\n

\n
\n
\n
\n \n \n
\n \n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/checkbox-disabled.json b/apps/v4/public/r/styles/base-lyra/checkbox-disabled.json new file mode 100644 index 0000000000..ee3187d6b3 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/checkbox-disabled.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "checkbox-disabled", + "title": "Checkbox Disabled", + "registryDependencies": [ + "checkbox" + ], + "files": [ + { + "path": "registry/base-lyra/demo/checkbox-disabled.tsx", + "content": "import { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n return (\n
\n \n \n Accept terms and conditions\n \n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/checkbox-example.json b/apps/v4/public/r/styles/base-lyra/checkbox-example.json index c0819b9971..e1ef5772fb 100644 --- a/apps/v4/public/r/styles/base-lyra/checkbox-example.json +++ b/apps/v4/public/r/styles/base-lyra/checkbox-example.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/base-lyra/examples/checkbox-example.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n Field,\n FieldContent,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/bases/base/ui/table\"\n\nexport default function CheckboxExample() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CheckboxBasic() {\n return (\n \n \n \n Accept terms and conditions\n \n \n )\n}\n\nfunction CheckboxWithDescription() {\n return (\n \n \n \n \n Accept terms and conditions\n \n By clicking this checkbox, you agree to the terms and conditions.\n \n \n \n \n )\n}\n\nfunction CheckboxInvalid() {\n return (\n \n \n \n Accept terms and conditions\n \n \n )\n}\n\nfunction CheckboxDisabled() {\n return (\n \n \n \n Enable notifications\n \n \n )\n}\n\nfunction CheckboxWithTitle() {\n return (\n \n \n \n \n \n \n Enable notifications\n \n You can enable or disable notifications at any time.\n \n \n \n \n \n \n \n \n Enable notifications\n \n You can enable or disable notifications at any time.\n \n \n \n \n \n \n )\n}\n\nconst tableData = [\n {\n id: \"1\",\n name: \"Sarah Chen\",\n email: \"sarah.chen@example.com\",\n role: \"Admin\",\n },\n {\n id: \"2\",\n name: \"Marcus Rodriguez\",\n email: \"marcus.rodriguez@example.com\",\n role: \"User\",\n },\n {\n id: \"3\",\n name: \"Priya Patel\",\n email: \"priya.patel@example.com\",\n role: \"User\",\n },\n {\n id: \"4\",\n name: \"David Kim\",\n email: \"david.kim@example.com\",\n role: \"Editor\",\n },\n]\n\nfunction CheckboxInTable() {\n const [selectedRows, setSelectedRows] = React.useState>(\n new Set([\"1\"])\n )\n\n const selectAll = selectedRows.size === tableData.length\n\n const handleSelectAll = (checked: boolean) => {\n if (checked) {\n setSelectedRows(new Set(tableData.map((row) => row.id)))\n } else {\n setSelectedRows(new Set())\n }\n }\n\n const handleSelectRow = (id: string, checked: boolean) => {\n const newSelected = new Set(selectedRows)\n if (checked) {\n newSelected.add(id)\n } else {\n newSelected.delete(id)\n }\n setSelectedRows(newSelected)\n }\n\n return (\n \n \n \n \n \n \n \n Name\n Email\n Role\n \n \n \n {tableData.map((row) => (\n \n \n \n handleSelectRow(row.id, checked === true)\n }\n />\n \n {row.name}\n {row.email}\n {row.role}\n \n ))}\n \n
\n \n )\n}\n\nfunction CheckboxGroup() {\n return (\n \n \n Show these items on the desktop:\n \n \n \n Hard disks\n \n \n \n \n \n External disks\n \n \n \n \n \n CDs, DVDs, and iPods\n \n \n \n \n \n Connected servers\n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n Field,\n FieldContent,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldTitle,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-lyra/ui/table\"\n\nexport default function CheckboxExample() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CheckboxBasic() {\n return (\n \n \n \n Accept terms and conditions\n \n \n )\n}\n\nfunction CheckboxWithDescription() {\n return (\n \n \n \n \n Accept terms and conditions\n \n By clicking this checkbox, you agree to the terms and conditions.\n \n \n \n \n )\n}\n\nfunction CheckboxInvalid() {\n return (\n \n \n \n Accept terms and conditions\n \n \n )\n}\n\nfunction CheckboxDisabled() {\n return (\n \n \n \n Enable notifications\n \n \n )\n}\n\nfunction CheckboxWithTitle() {\n return (\n \n \n \n \n \n \n Enable notifications\n \n You can enable or disable notifications at any time.\n \n \n \n \n \n \n \n \n Enable notifications\n \n You can enable or disable notifications at any time.\n \n \n \n \n \n \n )\n}\n\nconst tableData = [\n {\n id: \"1\",\n name: \"Sarah Chen\",\n email: \"sarah.chen@example.com\",\n role: \"Admin\",\n },\n {\n id: \"2\",\n name: \"Marcus Rodriguez\",\n email: \"marcus.rodriguez@example.com\",\n role: \"User\",\n },\n {\n id: \"3\",\n name: \"Priya Patel\",\n email: \"priya.patel@example.com\",\n role: \"User\",\n },\n {\n id: \"4\",\n name: \"David Kim\",\n email: \"david.kim@example.com\",\n role: \"Editor\",\n },\n]\n\nfunction CheckboxInTable() {\n const [selectedRows, setSelectedRows] = React.useState>(\n new Set([\"1\"])\n )\n\n const selectAll = selectedRows.size === tableData.length\n\n const handleSelectAll = (checked: boolean) => {\n if (checked) {\n setSelectedRows(new Set(tableData.map((row) => row.id)))\n } else {\n setSelectedRows(new Set())\n }\n }\n\n const handleSelectRow = (id: string, checked: boolean) => {\n const newSelected = new Set(selectedRows)\n if (checked) {\n newSelected.add(id)\n } else {\n newSelected.delete(id)\n }\n setSelectedRows(newSelected)\n }\n\n return (\n \n \n \n \n \n \n \n Name\n Email\n Role\n \n \n \n {tableData.map((row) => (\n \n \n \n handleSelectRow(row.id, checked === true)\n }\n />\n \n {row.name}\n {row.email}\n {row.role}\n \n ))}\n \n
\n \n )\n}\n\nfunction CheckboxGroup() {\n return (\n \n \n Show these items on the desktop:\n \n \n \n Hard disks\n \n \n \n \n \n External disks\n \n \n \n \n \n CDs, DVDs, and iPods\n \n \n \n \n \n Connected servers\n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/checkbox-with-text.json b/apps/v4/public/r/styles/base-lyra/checkbox-with-text.json new file mode 100644 index 0000000000..9b7409ebfb --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/checkbox-with-text.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "checkbox-with-text", + "title": "Checkbox With Text", + "registryDependencies": [ + "checkbox" + ], + "files": [ + { + "path": "registry/base-lyra/demo/checkbox-with-text.tsx", + "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n return (\n
\n \n
\n \n Accept terms and conditions\n \n

\n You agree to our Terms of Service and Privacy Policy.\n

\n
\n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/checkbox.json b/apps/v4/public/r/styles/base-lyra/checkbox.json index 6c89458e9f..359e63c2a7 100644 --- a/apps/v4/public/r/styles/base-lyra/checkbox.json +++ b/apps/v4/public/r/styles/base-lyra/checkbox.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/checkbox.tsx", - "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n return (\n \n svg]:size-3.5 grid place-content-center text-current transition-none\"\n >\n \n \n \n )\n}\n\nexport { Checkbox }\n", + "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n return (\n \n svg]:size-3.5 grid place-content-center text-current transition-none\"\n >\n \n \n \n )\n}\n\nexport { Checkbox }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/collapsible-demo.json b/apps/v4/public/r/styles/base-lyra/collapsible-demo.json new file mode 100644 index 0000000000..ff3d684ce7 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/collapsible-demo.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "collapsible-demo", + "title": "Collapsible Demo", + "registryDependencies": [ + "button", + "collapsible" + ], + "files": [ + { + "path": "registry/base-lyra/demo/collapsible-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n \n
\n

\n @peduarte starred 3 repositories\n

\n \n \n \n
\n
\n @radix-ui/primitives\n
\n \n
\n @radix-ui/colors\n
\n
\n @stitches/react\n
\n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/collapsible-example.json b/apps/v4/public/r/styles/base-lyra/collapsible-example.json index 209ae3808b..aa2f0d33b3 100644 --- a/apps/v4/public/r/styles/base-lyra/collapsible-example.json +++ b/apps/v4/public/r/styles/base-lyra/collapsible-example.json @@ -14,7 +14,7 @@ "files": [ { "path": "registry/base-lyra/examples/collapsible-example.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n return (\n \n \n \n \n )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n const fileTree: FileTreeItem[] = [\n {\n name: \"components\",\n items: [\n {\n name: \"ui\",\n items: [\n { name: \"button.tsx\" },\n { name: \"card.tsx\" },\n { name: \"dialog.tsx\" },\n { name: \"input.tsx\" },\n { name: \"select.tsx\" },\n { name: \"table.tsx\" },\n ],\n },\n { name: \"login-form.tsx\" },\n { name: \"register-form.tsx\" },\n ],\n },\n {\n name: \"lib\",\n items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n },\n {\n name: \"hooks\",\n items: [\n { name: \"use-media-query.ts\" },\n { name: \"use-debounce.ts\" },\n { name: \"use-local-storage.ts\" },\n ],\n },\n {\n name: \"types\",\n items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n },\n {\n name: \"public\",\n items: [\n { name: \"favicon.ico\" },\n { name: \"logo.svg\" },\n { name: \"images\" },\n ],\n },\n { name: \"app.tsx\" },\n { name: \"layout.tsx\" },\n { name: \"globals.css\" },\n { name: \"package.json\" },\n { name: \"tsconfig.json\" },\n { name: \"README.md\" },\n { name: \".gitignore\" },\n ]\n\n const renderItem = (fileItem: FileTreeItem) => {\n if (\"items\" in fileItem) {\n return (\n \n \n }\n >\n \n \n {fileItem.name}\n \n \n
\n {fileItem.items.map((child) => renderItem(child))}\n
\n \n \n )\n }\n return (\n \n \n {fileItem.name}\n \n )\n }\n\n return (\n \n \n \n \n \n Explorer\n Outline\n \n \n \n \n
\n {fileTree.map((item) => renderItem(item))}\n
\n \n \n \n )\n}\n\nfunction CollapsibleSettings() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n \n \n \n Radius\n \n Set the corner radius of the element.\n \n \n \n \n \n \n \n Radius X\n \n \n \n \n \n Radius Y\n \n \n \n \n \n \n Radius X\n \n \n \n \n \n Radius Y\n \n \n \n \n \n }\n >\n {isOpen ? (\n \n ) : (\n \n )}\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n return (\n \n \n \n \n )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n const fileTree: FileTreeItem[] = [\n {\n name: \"components\",\n items: [\n {\n name: \"ui\",\n items: [\n { name: \"button.tsx\" },\n { name: \"card.tsx\" },\n { name: \"dialog.tsx\" },\n { name: \"input.tsx\" },\n { name: \"select.tsx\" },\n { name: \"table.tsx\" },\n ],\n },\n { name: \"login-form.tsx\" },\n { name: \"register-form.tsx\" },\n ],\n },\n {\n name: \"lib\",\n items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n },\n {\n name: \"hooks\",\n items: [\n { name: \"use-media-query.ts\" },\n { name: \"use-debounce.ts\" },\n { name: \"use-local-storage.ts\" },\n ],\n },\n {\n name: \"types\",\n items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n },\n {\n name: \"public\",\n items: [\n { name: \"favicon.ico\" },\n { name: \"logo.svg\" },\n { name: \"images\" },\n ],\n },\n { name: \"app.tsx\" },\n { name: \"layout.tsx\" },\n { name: \"globals.css\" },\n { name: \"package.json\" },\n { name: \"tsconfig.json\" },\n { name: \"README.md\" },\n { name: \".gitignore\" },\n ]\n\n const renderItem = (fileItem: FileTreeItem) => {\n if (\"items\" in fileItem) {\n return (\n \n \n }\n >\n \n \n {fileItem.name}\n \n \n
\n {fileItem.items.map((child) => renderItem(child))}\n
\n \n \n )\n }\n return (\n \n \n {fileItem.name}\n \n )\n }\n\n return (\n \n \n \n \n \n Explorer\n Outline\n \n \n \n \n
\n {fileTree.map((item) => renderItem(item))}\n
\n \n \n \n )\n}\n\nfunction CollapsibleSettings() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n \n \n \n Radius\n \n Set the corner radius of the element.\n \n \n \n \n \n \n \n Radius X\n \n \n \n \n \n Radius Y\n \n \n \n \n \n \n Radius X\n \n \n \n \n \n Radius Y\n \n \n \n \n \n }\n >\n {isOpen ? (\n \n ) : (\n \n )}\n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/combobox-demo.json b/apps/v4/public/r/styles/base-lyra/combobox-demo.json new file mode 100644 index 0000000000..072420f7a8 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/combobox-demo.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "combobox-demo", + "title": "Combobox Demo", + "registryDependencies": [ + "button", + "command", + "popover" + ], + "files": [ + { + "path": "registry/base-lyra/demo/combobox-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\nconst frameworks = [\n {\n value: \"next.js\",\n label: \"Next.js\",\n },\n {\n value: \"sveltekit\",\n label: \"SvelteKit\",\n },\n {\n value: \"nuxt.js\",\n label: \"Nuxt.js\",\n },\n {\n value: \"remix\",\n label: \"Remix\",\n },\n {\n value: \"astro\",\n label: \"Astro\",\n },\n]\n\nexport default function ComboboxDemo() {\n const [open, setOpen] = React.useState(false)\n const [value, setValue] = React.useState(\"\")\n\n return (\n \n \n \n {value\n ? frameworks.find((framework) => framework.value === value)?.label\n : \"Select framework...\"}\n \n \n \n \n \n \n \n No framework found.\n \n {frameworks.map((framework) => (\n {\n setValue(currentValue === value ? \"\" : currentValue)\n setOpen(false)\n }}\n >\n {framework.label}\n \n \n ))}\n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/combobox-dropdown-menu.json b/apps/v4/public/r/styles/base-lyra/combobox-dropdown-menu.json new file mode 100644 index 0000000000..84e5634ae6 --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/combobox-dropdown-menu.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "combobox-dropdown-menu", + "title": "Combobox Dropdown Menu", + "registryDependencies": [ + "button", + "command", + "dropdown-menu" + ], + "files": [ + { + "path": "registry/base-lyra/demo/combobox-dropdown-menu.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nconst labels = [\n \"feature\",\n \"bug\",\n \"enhancement\",\n \"documentation\",\n \"design\",\n \"question\",\n \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n const [label, setLabel] = React.useState(\"feature\")\n const [open, setOpen] = React.useState(false)\n\n return (\n
\n

\n \n {label}\n \n Create a new project\n

\n \n \n \n \n \n Actions\n \n Assign to...\n Set due date...\n \n \n Apply label\n \n \n \n \n No label found.\n \n {labels.map((label) => (\n {\n setLabel(value)\n setOpen(false)\n }}\n >\n {label}\n \n ))}\n \n \n \n \n \n \n \n Delete\n ⌘⌫\n \n \n \n \n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/combobox-example.json b/apps/v4/public/r/styles/base-lyra/combobox-example.json index 0e4f09d128..5440f0211b 100644 --- a/apps/v4/public/r/styles/base-lyra/combobox-example.json +++ b/apps/v4/public/r/styles/base-lyra/combobox-example.json @@ -17,7 +17,7 @@ "files": [ { "path": "registry/base-lyra/examples/combobox-example.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n Field,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nconst frameworks = [\n \"Next.js\",\n \"SvelteKit\",\n \"Nuxt.js\",\n \"Remix\",\n \"Astro\",\n] as const\n\nconst countries = [\n { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n {\n code: \"ar\",\n value: \"argentina\",\n label: \"Argentina\",\n continent: \"South America\",\n },\n { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n {\n code: \"bs\",\n value: \"bahamas\",\n label: \"Bahamas\",\n continent: \"North America\",\n },\n { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n {\n code: \"bb\",\n value: \"barbados\",\n label: \"Barbados\",\n continent: \"North America\",\n },\n { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n {\n code: \"bo\",\n value: \"bolivia\",\n label: \"Bolivia\",\n continent: \"South America\",\n },\n {\n code: \"ba\",\n value: \"bosnia-and-herzegovina\",\n label: \"Bosnia and Herzegovina\",\n continent: \"Europe\",\n },\n { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n {\n code: \"bf\",\n value: \"burkina-faso\",\n label: \"Burkina Faso\",\n continent: \"Africa\",\n },\n { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n {\n code: \"cf\",\n value: \"central-african-republic\",\n label: \"Central African Republic\",\n continent: \"Africa\",\n },\n { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n {\n code: \"co\",\n value: \"colombia\",\n label: \"Colombia\",\n continent: \"South America\",\n },\n { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n {\n code: \"cr\",\n value: \"costa-rica\",\n label: \"Costa Rica\",\n continent: \"North America\",\n },\n { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n {\n code: \"cz\",\n value: \"czech-republic\",\n label: \"Czech Republic\",\n continent: \"Europe\",\n },\n { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n {\n code: \"dm\",\n value: \"dominica\",\n label: \"Dominica\",\n continent: \"North America\",\n },\n {\n code: \"do\",\n value: \"dominican-republic\",\n label: \"Dominican Republic\",\n continent: \"North America\",\n },\n {\n code: \"ec\",\n value: \"ecuador\",\n label: \"Ecuador\",\n continent: \"South America\",\n },\n { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n {\n code: \"sv\",\n value: \"el-salvador\",\n label: \"El Salvador\",\n continent: \"North America\",\n },\n {\n code: \"gq\",\n value: \"equatorial-guinea\",\n label: \"Equatorial Guinea\",\n continent: \"Africa\",\n },\n { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n {\n code: \"gd\",\n value: \"grenada\",\n label: \"Grenada\",\n continent: \"North America\",\n },\n {\n code: \"gt\",\n value: \"guatemala\",\n label: \"Guatemala\",\n continent: \"North America\",\n },\n { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n {\n code: \"gw\",\n value: \"guinea-bissau\",\n label: \"Guinea-Bissau\",\n continent: \"Africa\",\n },\n { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n {\n code: \"hn\",\n value: \"honduras\",\n label: \"Honduras\",\n continent: \"North America\",\n },\n { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n {\n code: \"jm\",\n value: \"jamaica\",\n label: \"Jamaica\",\n continent: \"North America\",\n },\n { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n {\n code: \"li\",\n value: \"liechtenstein\",\n label: \"Liechtenstein\",\n continent: \"Europe\",\n },\n { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n {\n code: \"mh\",\n value: \"marshall-islands\",\n label: \"Marshall Islands\",\n continent: \"Oceania\",\n },\n { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n {\n code: \"fm\",\n value: \"micronesia\",\n label: \"Micronesia\",\n continent: \"Oceania\",\n },\n { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n {\n code: \"nl\",\n value: \"netherlands\",\n label: \"Netherlands\",\n continent: \"Europe\",\n },\n {\n code: \"nz\",\n value: \"new-zealand\",\n label: \"New Zealand\",\n continent: \"Oceania\",\n },\n {\n code: \"ni\",\n value: \"nicaragua\",\n label: \"Nicaragua\",\n continent: \"North America\",\n },\n { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n {\n code: \"mk\",\n value: \"north-macedonia\",\n label: \"North Macedonia\",\n continent: \"Europe\",\n },\n { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n {\n code: \"pg\",\n value: \"papua-new-guinea\",\n label: \"Papua New Guinea\",\n continent: \"Oceania\",\n },\n {\n code: \"py\",\n value: \"paraguay\",\n label: \"Paraguay\",\n continent: \"South America\",\n },\n { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n {\n code: \"sa\",\n value: \"saudi-arabia\",\n label: \"Saudi Arabia\",\n continent: \"Asia\",\n },\n { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n {\n code: \"sl\",\n value: \"sierra-leone\",\n label: \"Sierra Leone\",\n continent: \"Africa\",\n },\n { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n {\n code: \"sb\",\n value: \"solomon-islands\",\n label: \"Solomon Islands\",\n continent: \"Oceania\",\n },\n { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n {\n code: \"za\",\n value: \"south-africa\",\n label: \"South Africa\",\n continent: \"Africa\",\n },\n { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n {\n code: \"ss\",\n value: \"south-sudan\",\n label: \"South Sudan\",\n continent: \"Africa\",\n },\n { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n {\n code: \"sr\",\n value: \"suriname\",\n label: \"Suriname\",\n continent: \"South America\",\n },\n { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n {\n code: \"ch\",\n value: \"switzerland\",\n label: \"Switzerland\",\n continent: \"Europe\",\n },\n { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n {\n code: \"tt\",\n value: \"trinidad-and-tobago\",\n label: \"Trinidad and Tobago\",\n continent: \"North America\",\n },\n { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n {\n code: \"tm\",\n value: \"turkmenistan\",\n label: \"Turkmenistan\",\n continent: \"Asia\",\n },\n { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n {\n code: \"ae\",\n value: \"united-arab-emirates\",\n label: \"United Arab Emirates\",\n continent: \"Asia\",\n },\n {\n code: \"gb\",\n value: \"united-kingdom\",\n label: \"United Kingdom\",\n continent: \"Europe\",\n },\n {\n code: \"us\",\n value: \"united-states\",\n label: \"United States\",\n continent: \"North America\",\n },\n {\n code: \"uy\",\n value: \"uruguay\",\n label: \"Uruguay\",\n continent: \"South America\",\n },\n { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n {\n code: \"va\",\n value: \"vatican-city\",\n label: \"Vatican City\",\n continent: \"Europe\",\n },\n {\n code: \"ve\",\n value: \"venezuela\",\n label: \"Venezuela\",\n continent: \"South America\",\n },\n { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n {\n value: \"Americas\",\n items: [\n \"(GMT-5) New York\",\n \"(GMT-8) Los Angeles\",\n \"(GMT-6) Chicago\",\n \"(GMT-5) Toronto\",\n \"(GMT-8) Vancouver\",\n \"(GMT-3) São Paulo\",\n ],\n },\n {\n value: \"Europe\",\n items: [\n \"(GMT+0) London\",\n \"(GMT+1) Paris\",\n \"(GMT+1) Berlin\",\n \"(GMT+1) Rome\",\n \"(GMT+1) Madrid\",\n \"(GMT+1) Amsterdam\",\n ],\n },\n {\n value: \"Asia/Pacific\",\n items: [\n \"(GMT+9) Tokyo\",\n \"(GMT+8) Shanghai\",\n \"(GMT+8) Singapore\",\n \"(GMT+4) Dubai\",\n \"(GMT+11) Sydney\",\n \"(GMT+9) Seoul\",\n ],\n },\n] as const\n\nfunction ComboboxBasic() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxDisabled() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxInvalid() {\n return (\n \n
\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Framework\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n Please select a valid framework.\n \n \n
\n \n )\n}\n\nfunction ComboboxWithClear() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithGroups() {\n return (\n \n \n \n \n No timezones found.\n \n {(group) => (\n \n {group.value}\n \n {(item) => (\n \n {item}\n \n )}\n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n return (\n \n \n \n \n No timezones found.\n \n {(group) => (\n \n {group.value}\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithForm() {\n const handleSubmit = (event: React.FormEvent) => {\n event.preventDefault()\n const formData = new FormData(event.target as HTMLFormElement)\n const framework = formData.get(\"framework\") as string\n toast(`You selected ${framework} as your framework.`)\n }\n\n return (\n \n \n \n \n \n \n Framework\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxAutoHighlight() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboxboxInputAddon() {\n return (\n \n \n \n \n \n \n \n \n No timezones found.\n \n {(group) => (\n \n {group.value}\n \n {(item) => (\n \n {item}\n \n )}\n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxInPopup() {\n return (\n \n \n \n }\n >\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item.label}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxMultiple() {\n const anchor = useComboboxAnchor()\n\n return (\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxMultipleDisabled() {\n const anchor = useComboboxAnchor()\n\n return (\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxMultipleInvalid() {\n const anchor1 = useComboboxAnchor()\n const anchor2 = useComboboxAnchor()\n\n return (\n \n
\n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Frameworks\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n Please select at least one framework.\n \n \n \n
\n \n )\n}\n\nfunction ComboboxMultipleNoRemove() {\n const anchor = useComboboxAnchor()\n\n return (\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n \n {value}\n \n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithCustomItems() {\n return (\n \n country.code !== \"\")}\n itemToStringValue={(country: (typeof countries)[number]) =>\n country.label\n }\n >\n \n \n No countries found.\n \n {(country) => (\n \n \n \n \n {country.label}\n \n \n {country.continent} ({country.code})\n \n \n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxInDialog() {\n const [open, setOpen] = React.useState(false)\n\n return (\n \n \n }>\n Open Dialog\n \n \n \n Select Framework\n \n Choose your preferred framework from the list below.\n \n \n \n \n Framework\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n setOpen(false)}\n >\n Cancel\n \n {\n toast(\"Framework selected.\")\n setOpen(false)\n }}\n >\n Confirm\n \n \n \n \n \n )\n}\n\nconst items = [\n {\n label: \"Select a framework\",\n value: null,\n },\n {\n label: \"React\",\n value: \"react\",\n },\n {\n label: \"Vue\",\n value: \"vue\",\n },\n {\n label: \"Angular\",\n value: \"angular\",\n },\n {\n label: \"Svelte\",\n value: \"svelte\",\n },\n {\n label: \"Solid\",\n value: \"solid\",\n },\n {\n label: \"Preact\",\n value: \"preact\",\n },\n {\n label: \"Next.js\",\n value: \"next.js\",\n },\n]\n\nfunction ComboboxWithOtherInputs() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Select a framework\n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-lyra/ui/card\"\nimport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n} from \"@/registry/base-lyra/ui/combobox\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n Field,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nconst frameworks = [\n \"Next.js\",\n \"SvelteKit\",\n \"Nuxt.js\",\n \"Remix\",\n \"Astro\",\n] as const\n\nconst countries = [\n { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n {\n code: \"ar\",\n value: \"argentina\",\n label: \"Argentina\",\n continent: \"South America\",\n },\n { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n {\n code: \"bs\",\n value: \"bahamas\",\n label: \"Bahamas\",\n continent: \"North America\",\n },\n { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n {\n code: \"bb\",\n value: \"barbados\",\n label: \"Barbados\",\n continent: \"North America\",\n },\n { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n {\n code: \"bo\",\n value: \"bolivia\",\n label: \"Bolivia\",\n continent: \"South America\",\n },\n {\n code: \"ba\",\n value: \"bosnia-and-herzegovina\",\n label: \"Bosnia and Herzegovina\",\n continent: \"Europe\",\n },\n { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n {\n code: \"bf\",\n value: \"burkina-faso\",\n label: \"Burkina Faso\",\n continent: \"Africa\",\n },\n { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n {\n code: \"cf\",\n value: \"central-african-republic\",\n label: \"Central African Republic\",\n continent: \"Africa\",\n },\n { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n {\n code: \"co\",\n value: \"colombia\",\n label: \"Colombia\",\n continent: \"South America\",\n },\n { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n {\n code: \"cr\",\n value: \"costa-rica\",\n label: \"Costa Rica\",\n continent: \"North America\",\n },\n { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n {\n code: \"cz\",\n value: \"czech-republic\",\n label: \"Czech Republic\",\n continent: \"Europe\",\n },\n { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n {\n code: \"dm\",\n value: \"dominica\",\n label: \"Dominica\",\n continent: \"North America\",\n },\n {\n code: \"do\",\n value: \"dominican-republic\",\n label: \"Dominican Republic\",\n continent: \"North America\",\n },\n {\n code: \"ec\",\n value: \"ecuador\",\n label: \"Ecuador\",\n continent: \"South America\",\n },\n { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n {\n code: \"sv\",\n value: \"el-salvador\",\n label: \"El Salvador\",\n continent: \"North America\",\n },\n {\n code: \"gq\",\n value: \"equatorial-guinea\",\n label: \"Equatorial Guinea\",\n continent: \"Africa\",\n },\n { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n {\n code: \"gd\",\n value: \"grenada\",\n label: \"Grenada\",\n continent: \"North America\",\n },\n {\n code: \"gt\",\n value: \"guatemala\",\n label: \"Guatemala\",\n continent: \"North America\",\n },\n { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n {\n code: \"gw\",\n value: \"guinea-bissau\",\n label: \"Guinea-Bissau\",\n continent: \"Africa\",\n },\n { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n {\n code: \"hn\",\n value: \"honduras\",\n label: \"Honduras\",\n continent: \"North America\",\n },\n { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n {\n code: \"jm\",\n value: \"jamaica\",\n label: \"Jamaica\",\n continent: \"North America\",\n },\n { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n {\n code: \"li\",\n value: \"liechtenstein\",\n label: \"Liechtenstein\",\n continent: \"Europe\",\n },\n { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n {\n code: \"mh\",\n value: \"marshall-islands\",\n label: \"Marshall Islands\",\n continent: \"Oceania\",\n },\n { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n {\n code: \"fm\",\n value: \"micronesia\",\n label: \"Micronesia\",\n continent: \"Oceania\",\n },\n { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n {\n code: \"nl\",\n value: \"netherlands\",\n label: \"Netherlands\",\n continent: \"Europe\",\n },\n {\n code: \"nz\",\n value: \"new-zealand\",\n label: \"New Zealand\",\n continent: \"Oceania\",\n },\n {\n code: \"ni\",\n value: \"nicaragua\",\n label: \"Nicaragua\",\n continent: \"North America\",\n },\n { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n {\n code: \"mk\",\n value: \"north-macedonia\",\n label: \"North Macedonia\",\n continent: \"Europe\",\n },\n { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n {\n code: \"pg\",\n value: \"papua-new-guinea\",\n label: \"Papua New Guinea\",\n continent: \"Oceania\",\n },\n {\n code: \"py\",\n value: \"paraguay\",\n label: \"Paraguay\",\n continent: \"South America\",\n },\n { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n {\n code: \"sa\",\n value: \"saudi-arabia\",\n label: \"Saudi Arabia\",\n continent: \"Asia\",\n },\n { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n {\n code: \"sl\",\n value: \"sierra-leone\",\n label: \"Sierra Leone\",\n continent: \"Africa\",\n },\n { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n {\n code: \"sb\",\n value: \"solomon-islands\",\n label: \"Solomon Islands\",\n continent: \"Oceania\",\n },\n { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n {\n code: \"za\",\n value: \"south-africa\",\n label: \"South Africa\",\n continent: \"Africa\",\n },\n { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n {\n code: \"ss\",\n value: \"south-sudan\",\n label: \"South Sudan\",\n continent: \"Africa\",\n },\n { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n {\n code: \"sr\",\n value: \"suriname\",\n label: \"Suriname\",\n continent: \"South America\",\n },\n { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n {\n code: \"ch\",\n value: \"switzerland\",\n label: \"Switzerland\",\n continent: \"Europe\",\n },\n { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n {\n code: \"tt\",\n value: \"trinidad-and-tobago\",\n label: \"Trinidad and Tobago\",\n continent: \"North America\",\n },\n { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n {\n code: \"tm\",\n value: \"turkmenistan\",\n label: \"Turkmenistan\",\n continent: \"Asia\",\n },\n { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n {\n code: \"ae\",\n value: \"united-arab-emirates\",\n label: \"United Arab Emirates\",\n continent: \"Asia\",\n },\n {\n code: \"gb\",\n value: \"united-kingdom\",\n label: \"United Kingdom\",\n continent: \"Europe\",\n },\n {\n code: \"us\",\n value: \"united-states\",\n label: \"United States\",\n continent: \"North America\",\n },\n {\n code: \"uy\",\n value: \"uruguay\",\n label: \"Uruguay\",\n continent: \"South America\",\n },\n { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n {\n code: \"va\",\n value: \"vatican-city\",\n label: \"Vatican City\",\n continent: \"Europe\",\n },\n {\n code: \"ve\",\n value: \"venezuela\",\n label: \"Venezuela\",\n continent: \"South America\",\n },\n { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n {\n value: \"Americas\",\n items: [\n \"(GMT-5) New York\",\n \"(GMT-8) Los Angeles\",\n \"(GMT-6) Chicago\",\n \"(GMT-5) Toronto\",\n \"(GMT-8) Vancouver\",\n \"(GMT-3) São Paulo\",\n ],\n },\n {\n value: \"Europe\",\n items: [\n \"(GMT+0) London\",\n \"(GMT+1) Paris\",\n \"(GMT+1) Berlin\",\n \"(GMT+1) Rome\",\n \"(GMT+1) Madrid\",\n \"(GMT+1) Amsterdam\",\n ],\n },\n {\n value: \"Asia/Pacific\",\n items: [\n \"(GMT+9) Tokyo\",\n \"(GMT+8) Shanghai\",\n \"(GMT+8) Singapore\",\n \"(GMT+4) Dubai\",\n \"(GMT+11) Sydney\",\n \"(GMT+9) Seoul\",\n ],\n },\n] as const\n\nfunction ComboboxBasic() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxDisabled() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxInvalid() {\n return (\n \n
\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Framework\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n Please select a valid framework.\n \n \n
\n \n )\n}\n\nfunction ComboboxWithClear() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithGroups() {\n return (\n \n \n \n \n No timezones found.\n \n {(group) => (\n \n {group.value}\n \n {(item) => (\n \n {item}\n \n )}\n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n return (\n \n \n \n \n No timezones found.\n \n {(group) => (\n \n {group.value}\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithForm() {\n const handleSubmit = (event: React.FormEvent) => {\n event.preventDefault()\n const formData = new FormData(event.target as HTMLFormElement)\n const framework = formData.get(\"framework\") as string\n toast(`You selected ${framework} as your framework.`)\n }\n\n return (\n \n \n \n \n \n \n Framework\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxAutoHighlight() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboxboxInputAddon() {\n return (\n \n \n \n \n \n \n \n \n No timezones found.\n \n {(group) => (\n \n {group.value}\n \n {(item) => (\n \n {item}\n \n )}\n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxInPopup() {\n return (\n \n \n \n }\n >\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item.label}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxMultiple() {\n const anchor = useComboboxAnchor()\n\n return (\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxMultipleDisabled() {\n const anchor = useComboboxAnchor()\n\n return (\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxMultipleInvalid() {\n const anchor1 = useComboboxAnchor()\n const anchor2 = useComboboxAnchor()\n\n return (\n \n
\n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Frameworks\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n Please select at least one framework.\n \n \n \n
\n \n )\n}\n\nfunction ComboboxMultipleNoRemove() {\n const anchor = useComboboxAnchor()\n\n return (\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n \n {value}\n \n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithCustomItems() {\n return (\n \n country.code !== \"\")}\n itemToStringValue={(country: (typeof countries)[number]) =>\n country.label\n }\n >\n \n \n No countries found.\n \n {(country) => (\n \n \n \n \n {country.label}\n \n \n {country.continent} ({country.code})\n \n \n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxInDialog() {\n const [open, setOpen] = React.useState(false)\n\n return (\n \n \n }>\n Open Dialog\n \n \n \n Select Framework\n \n Choose your preferred framework from the list below.\n \n \n \n \n Framework\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n setOpen(false)}\n >\n Cancel\n \n {\n toast(\"Framework selected.\")\n setOpen(false)\n }}\n >\n Confirm\n \n \n \n \n \n )\n}\n\nconst items = [\n {\n label: \"Select a framework\",\n value: null,\n },\n {\n label: \"React\",\n value: \"react\",\n },\n {\n label: \"Vue\",\n value: \"vue\",\n },\n {\n label: \"Angular\",\n value: \"angular\",\n },\n {\n label: \"Svelte\",\n value: \"svelte\",\n },\n {\n label: \"Solid\",\n value: \"solid\",\n },\n {\n label: \"Preact\",\n value: \"preact\",\n },\n {\n label: \"Next.js\",\n value: \"next.js\",\n },\n]\n\nfunction ComboboxWithOtherInputs() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Select a framework\n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/combobox-popover.json b/apps/v4/public/r/styles/base-lyra/combobox-popover.json new file mode 100644 index 0000000000..39b6b1c01d --- /dev/null +++ b/apps/v4/public/r/styles/base-lyra/combobox-popover.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "combobox-popover", + "title": "Combobox Popover", + "registryDependencies": [ + "button", + "command", + "popover" + ], + "files": [ + { + "path": "registry/base-lyra/demo/combobox-popover.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState(\n null\n )\n\n return (\n
\n

Status

\n \n \n \n \n \n \n \n \n No results found.\n \n {statuses.map((status) => (\n {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n \n ))}\n \n \n \n \n \n
\n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-lyra/combobox-responsive.json b/apps/v4/public/r/styles/base-lyra/combobox-responsive.json index e8a0054e2d..2ffc6ae4a5 100644 --- a/apps/v4/public/r/styles/base-lyra/combobox-responsive.json +++ b/apps/v4/public/r/styles/base-lyra/combobox-responsive.json @@ -3,15 +3,15 @@ "name": "combobox-responsive", "title": "Combobox Responsive", "registryDependencies": [ + "button", "command", - "popover", "drawer", - "button" + "popover" ], "files": [ { "path": "registry/base-lyra/demo/combobox-responsive.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-nova/ui/command\"\nimport {\n Drawer,\n DrawerContent,\n DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboBoxResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n const [selectedStatus, setSelectedStatus] = React.useState(\n null\n )\n\n if (isDesktop) {\n return (\n \n \n \n \n \n \n \n \n )\n }\n\n return (\n \n \n \n \n \n
\n \n
\n \n \n )\n}\n\nfunction StatusList({\n setOpen,\n setSelectedStatus,\n}: {\n setOpen: (open: boolean) => void\n setSelectedStatus: (status: Status | null) => void\n}) {\n return (\n \n \n \n No results found.\n \n {statuses.map((status) => (\n {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) || null\n )\n setOpen(false)\n }}\n >\n {status.label}\n \n ))}\n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n Drawer,\n DrawerContent,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboBoxResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n const [selectedStatus, setSelectedStatus] = React.useState(\n null\n )\n\n if (isDesktop) {\n return (\n \n \n \n \n \n \n \n \n )\n }\n\n return (\n \n \n \n \n \n
\n \n
\n \n \n )\n}\n\nfunction StatusList({\n setOpen,\n setSelectedStatus,\n}: {\n setOpen: (open: boolean) => void\n setSelectedStatus: (status: Status | null) => void\n}) {\n return (\n \n \n \n No results found.\n \n {statuses.map((status) => (\n {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) || null\n )\n setOpen(false)\n }}\n >\n {status.label}\n \n ))}\n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/base-lyra/combobox.json b/apps/v4/public/r/styles/base-lyra/combobox.json index 63851fa9b3..aa39b4eef5 100644 --- a/apps/v4/public/r/styles/base-lyra/combobox.json +++ b/apps/v4/public/r/styles/base-lyra/combobox.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/base-lyra/ui/combobox.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return \n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n }\n className={cn(className)}\n {...props}\n >\n \n \n )\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean\n showClear?: boolean\n}) {\n return (\n \n }\n {...props}\n />\n \n {showTrigger && (\n }\n data-slot=\"input-group-button\"\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n {showClear && }\n \n {children}\n \n )\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >) {\n return (\n \n \n \n \n \n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n )\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n \n {children}\n }\n >\n \n \n \n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n \n )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n