4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T137d,import { cn } from '@/lib/utils' import { generatePattern, PatternType } from './patterns' export type ShapeType = | 'circle' | 'square' | 'triangle' | 'diamond' | 'hexagon' | 'semicircle' | 'arc' | 'pill' | 'star' export type ResponsiveSize = { base?: number | { width: number; height: number } sm?: number | { width: number; height: number } md?: number | { width: number; height: number } lg?: number | { width: number; height: number } } export interface ShapeProps { type: ShapeType /** * Size of the shape. Can be: * - A number (same width/height) * - An object { width, height } * - A responsive object { base, sm, md, lg } */ size?: number | { width: number; height: number } | ResponsiveSize color?: string pattern?: PatternType patternColors?: string[] patternScale?: number patternAngle?: number rotation?: number opacity?: number className?: string style?: React.CSSProperties /** Disable animations when user prefers reduced motion (handled via CSS) */ 'aria-hidden'?: boolean } function getShapePath(type: ShapeType): string { switch (type) { case 'circle': return '' case 'square': return '' case 'triangle': return 'M12 2L22 20H2L12 2Z' case 'diamond': return 'M12 1L23 12L12 23L1 12L12 1Z' case 'hexagon': return 'M12 2L21.5 7V17L12 22L2.5 17V7L12 2Z' case 'semicircle': return 'M2 12A10 10 0 0 1 22 12Z' case 'arc': return 'M4 20A12 12 0 0 1 20 20' case 'pill': return '' case 'star': return 'M12 2L14.5 8.5L21.5 9L16.5 13.5L18 21L12 17L6 21L7.5 13.5L2.5 9L9.5 8.5L12 2Z' default: return '' } } // Check if size is a responsive object function isResponsiveSize(size: ShapeProps['size']): size is ResponsiveSize { return ( typeof size === 'object' && size !== null && ('base' in size || 'sm' in size || 'md' in size || 'lg' in size) ) } export function Shape({ type, size = 48, color = 'currentColor', pattern = 'solid', patternColors, patternScale = 1, patternAngle = 45, rotation = 0, opacity = 1, className, style, 'aria-hidden': ariaHidden = true, }: ShapeProps) { // Handle responsive sizes by computing base size // CSS custom properties will handle the responsive scaling let computedSize: number | { width: number; height: number } if (isResponsiveSize(size)) { // Use base size or fallback to first defined breakpoint computedSize = size.base ?? size.sm ?? size.md ?? size.lg ?? 48 } else { computedSize = size } const width = typeof computedSize === 'number' ? computedSize : computedSize.width const height = typeof computedSize === 'number' ? computedSize : computedSize.height // Generate responsive CSS custom properties const responsiveStyles: Record = {} if (isResponsiveSize(size)) { const getSize = (s: number | { width: number; height: number } | undefined) => { if (!s) return undefined return typeof s === 'number' ? s : s.width } if (size.base) responsiveStyles['--shape-size-base'] = `${getSize(size.base)}px` if (size.sm) responsiveStyles['--shape-size-sm'] = `${getSize(size.sm)}px` if (size.md) responsiveStyles['--shape-size-md'] = `${getSize(size.md)}px` if (size.lg) responsiveStyles['--shape-size-lg'] = `${getSize(size.lg)}px` } const patternResult = pattern !== 'solid' && patternColors ? generatePattern({ type: pattern, colors: patternColors, scale: patternScale, angle: patternAngle, }) : null const fill = patternResult?.fill ?? color const renderShape = () => { switch (type) { case 'circle': return case 'square': return case 'pill': return case 'arc': return ( ) default: { const path = getShapePath(type) return path ? : null } } } // Determine if we need responsive class const responsiveClass = isResponsiveSize(size) ? 'shape-responsive' : '' return ( ) } 4e:Tb24,/** * SVG pattern generators for shapes * Returns pattern definition and pattern ID for use in fills */ export type PatternType = 'solid' | 'checkered' | 'striped' | 'dotted' export interface PatternConfig { type: PatternType colors: string[] scale?: number angle?: number } let patternCounter = 0 export function generatePatternId(): string { return `pattern-${++patternCounter}-${Date.now()}` } export function generateCheckeredPattern( id: string, colors: [string, string], scale: number = 1 ): string { const size = 10 * scale const half = size / 2 return ` ` } export function generateStripedPattern( id: string, colors: string[], scale: number = 1, angle: number = 45 ): string { const stripeWidth = 4 * scale const totalWidth = stripeWidth * colors.length const stripes = colors .map( (color, i) => `` ) .join('') return ` ${stripes} ` } export function generateDottedPattern( id: string, bgColor: string, dotColor: string, scale: number = 1 ): string { const size = 8 * scale const radius = 1.5 * scale return ` ` } export function generatePattern(config: PatternConfig): { defs: string; fill: string } | null { if (config.type === 'solid' || config.colors.length === 0) { return null } const id = generatePatternId() const scale = config.scale ?? 1 switch (config.type) { case 'checkered': return { defs: generateCheckeredPattern(id, [config.colors[0], config.colors[1] || config.colors[0]], scale), fill: `url(#${id})`, } case 'striped': return { defs: generateStripedPattern(id, config.colors, scale, config.angle ?? 45), fill: `url(#${id})`, } case 'dotted': return { defs: generateDottedPattern(id, config.colors[0], config.colors[1] || '#fff', scale), fill: `url(#${id})`, } default: return null } } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4b",null,{"namespace":"@n3wth","registryDependencies":["cn"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/new-york/shape/shape.tsx","content":"$4d","type":"registry:ui"},{"path":"registry/new-york/shape/patterns.ts","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]