Box Shadow Editor

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { Button } from "@/components/ui/button"
5import {
6  Popover,
7  PopoverContent,
8  PopoverTrigger,
9} from "@/components/ui/popover"
10import { cn } from "@/lib/utils"
11import {
12  boxShadowLayerCount,
13  defaultLayer,
14  formatBoxShadow,
15  parseBoxShadow,
16} from "./box-shadow-editor.helpers"
17import type { BoxShadowString, ShadowLayer } from "./box-shadow-editor.types"
18import { BoxShadowPreview } from "./box-shadow-preview"
19import { ShadowLayerRow } from "./shadow-layer-row"
20 
21// Re-export the extracted sub-components + their prop types so the public
22// entry surface (and existing deep imports) is unchanged by the file split.
23export type { BoxShadowPreviewProps } from "./box-shadow-preview"
24export { BoxShadowPreview } from "./box-shadow-preview"
25export type { ShadowLayerRowProps } from "./shadow-layer-row"
26export { ShadowLayerRow } from "./shadow-layer-row"
27export type { ShadowLengthEditorProps } from "./shadow-length-editor"
28export { ShadowLengthEditor } from "./shadow-length-editor"
29 
30// ---------------------------------------------------------------------------
31// Shared props
32// ---------------------------------------------------------------------------
33 
34export interface BoxShadowEditorPanelProps {
35  value: BoxShadowString | (string & {})
36  onChange: (value: BoxShadowString) => void
37  className?: string
38  "aria-label"?: string
39}
40 
41export type BoxShadowEditorProps = BoxShadowEditorPanelProps
42 
43// ---------------------------------------------------------------------------
44// BoxShadowEditor — popover-wrapped
45// ---------------------------------------------------------------------------
46 
47export function BoxShadowEditor(props: BoxShadowEditorProps) {
48  const {
49    value,
50    className,
51    "aria-label": ariaLabel = "Edit a CSS box-shadow",
52  } = props
53  const count = boxShadowLayerCount(String(value))
54  const applied = String(value) === "none" ? undefined : String(value)
55 
56  return (
57    <Popover>
58      <PopoverTrigger asChild>
59        <Button
60          variant="outline"
61          className={cn("h-9 gap-2 px-3 font-mono", className)}
62          aria-label={ariaLabel}
63        >
64          <span
65            aria-hidden="true"
66            className="inline-block h-4 w-4 rounded-sm bg-background"
67            style={{ boxShadow: applied }}
68          />
69          <span className="text-[10px] text-muted-foreground">
70            {count} {count === 1 ? "layer" : "layers"}
71          </span>
72// … truncated