@linyao.tw/ui 1.1.0 → 1.2.0

package/dist/components/forms/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../../src/components/forms/file-upload.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { FileIcon } from \"@phosphor-icons/react/dist/csr/File\";\nimport { PlusIcon } from \"@phosphor-icons/react/dist/csr/Plus\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\ntype NativeFileInputProps = Omit<\n\tReact.InputHTMLAttributes<HTMLInputElement>,\n\t\"children\" | \"className\" | \"defaultValue\" | \"disabled\" | \"name\" | \"onChange\" | \"readOnly\" | \"required\" | \"size\" | \"style\" | \"type\" | \"value\"\n>;\n\nfunction FileImagePreview({ file }: { file: File }) {\n\tconst [preview, setPreview] = React.useState<{ file: File; url: string } | null>(null);\n\n\tReact.useEffect(() => {\n\t\tif (typeof URL.createObjectURL !== \"function\" || typeof URL.revokeObjectURL !== \"function\") return;\n\n\t\tconst previewUrl = URL.createObjectURL(file);\n\t\tlet disposed = false;\n\t\tqueueMicrotask(() => {\n\t\t\tif (!disposed) {\n\t\t\t\tsetPreview({ file, url: previewUrl });\n\t\t\t}\n\t\t});\n\n\t\treturn () => {\n\t\t\tdisposed = true;\n\t\t\tURL.revokeObjectURL(previewUrl);\n\t\t};\n\t}, [file]);\n\n\tif (preview?.file !== file) return <FileIcon aria-hidden=\"true\" weight=\"regular\" />;\n\treturn <img className=\"lyds-file-selection__thumbnail\" src={preview.url} alt=\"\" width={48} height={48} loading=\"lazy\" decoding=\"async\" />;\n}\n\nfunction isFileAccepted(file: File, accept: string | undefined): boolean {\n\tif (!accept?.trim()) return true;\n\n\tconst fileName = file.name.toLocaleLowerCase();\n\tconst mimeType = file.type.toLocaleLowerCase();\n\treturn accept.split(\",\").some(rawRule => {\n\t\tconst rule = rawRule.trim().toLocaleLowerCase();\n\t\tif (!rule) return false;\n\t\tif (rule.startsWith(\".\")) return fileName.endsWith(rule);\n\t\tif (rule.endsWith(\"/*\")) return mimeType.startsWith(rule.slice(0, -1));\n\t\treturn mimeType === rule;\n\t});\n}\n\ninterface FileSelectionPreviewProps {\n\taccept: string | undefined;\n\tfiles: readonly File[];\n\tinvalidFileLabel: React.ReactNode;\n\tsummaryId: string;\n}\n\nfunction FileSelectionPreview({ accept, files, invalidFileLabel, summaryId }: FileSelectionPreviewProps) {\n\tconst messages = useMessages();\n\n\treturn (\n\t\t<div className={cx(\"lyds-file-selection\", files.length === 0 && \"lyds-sr-only\")}>\n\t\t\t<p id={summaryId} className=\"lyds-file-selection__summary\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t{files.length > 0 ? messages.fileSelectionSummary(files.length) : null}\n\t\t\t</p>\n\t\t\t{files.length > 0 ? (\n\t\t\t\t<ul className=\"lyds-file-selection__list\" aria-label={messages.fileSelectionLabel}>\n\t\t\t\t\t{files.map((file, index) => {\n\t\t\t\t\t\tconst accepted = isFileAccepted(file, accept);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li className=\"lyds-file-selection__item\" data-invalid={accepted ? undefined : \"\"} key={`${file.name}-${file.size}-${file.lastModified}-${index}`}>\n\t\t\t\t\t\t\t\t<span className=\"lyds-file-selection__visual\">{file.type.startsWith(\"image/\") ? <FileImagePreview file={file} /> : <FileIcon aria-hidden=\"true\" weight=\"regular\" />}</span>\n\t\t\t\t\t\t\t\t<span className=\"lyds-file-selection__details\">\n\t\t\t\t\t\t\t\t\t<span className=\"lyds-file-selection__name\" title={file.name}>\n\t\t\t\t\t\t\t\t\t\t{file.name}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{accepted ? null : <span className=\"lyds-file-selection__status\">{invalidFileLabel}</span>}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nfunction useClearFileSelectionOnFormReset(inputRef: React.RefObject<HTMLInputElement | null>, formId: string | undefined, setSelectedFiles: React.Dispatch<React.SetStateAction<readonly File[]>>) {\n\tReact.useEffect(() => {\n\t\tconst form = inputRef.current?.form;\n\t\tif (form == null) return;\n\n\t\tconst handleReset = () => setSelectedFiles([]);\n\t\tform.addEventListener(\"reset\", handleReset);\n\t\treturn () => form.removeEventListener(\"reset\", handleReset);\n\t}, [formId, inputRef, setSelectedFiles]);\n}\n\n/**\n * HTML has no read-only file input. Disabling one would drop whatever the user already picked from\n * the submission, so a read-only field stays enabled and simply refuses to open the picker.\n */\nfunction useBlockedPicker(readOnly: boolean | undefined, onClick: React.MouseEventHandler<HTMLInputElement> | undefined) {\n\treturn (event: React.MouseEvent<HTMLInputElement>) => {\n\t\tonClick?.(event);\n\t\tif (readOnly) event.preventDefault();\n\t};\n}\n\ninterface FileTriggerProps {\n\tchildren: React.ReactNode;\n\tclassName: string;\n\tdisabled: boolean;\n\thtmlFor: string;\n\tid: string;\n\treadOnly: boolean;\n\tsize: FieldAnatomyProps[\"size\"];\n\tstartIcon?: React.ReactNode;\n}\n\n/**\n * The visible affordance is a label bound to the real file input, so the input keeps the single\n * tab stop, the accessible name and native picker activation. Rendering a button beside the input\n * instead would leave the description, error and validity on an element the keyboard cannot reach.\n */\nfunction FileTrigger({ children, className, disabled, htmlFor, id, readOnly, size, startIcon }: FileTriggerProps) {\n\treturn (\n\t\t<label className={cx(\"lyds-button\", className)} data-disabled={disabled || undefined} data-readonly={readOnly || undefined} data-size={size} data-variant=\"secondary\" htmlFor={htmlFor}>\n\t\t\t{startIcon != null ? (\n\t\t\t\t<span className=\"lyds-button__icon\" aria-hidden=\"true\">\n\t\t\t\t\t{startIcon}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span className=\"lyds-button__label\" id={id}>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t</label>\n\t);\n}\n\nexport interface FileUploadProps extends NativeFileInputProps, FieldAnatomyProps {\n\tinputClassName?: string;\n\tinputStyle?: React.CSSProperties;\n\ttriggerLabel?: React.ReactNode;\n\tinvalidFileLabel?: React.ReactNode;\n\tonChange?: React.ChangeEventHandler<HTMLInputElement>;\n\tonFilesChange?: (files: readonly File[], event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(function FileUpload(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tinputStyle,\n\t\ttriggerLabel,\n\t\tinvalidFileLabel,\n\t\tonChange,\n\t\tonFilesChange,\n\t\tid: idProp,\n\t\t...inputProps\n\t},\n\tforwardedRef\n) {\n\tconst messages = useMessages();\n\tconst blockPickerWhenReadOnly = useBlockedPicker(readOnly, inputProps.onClick);\n\tconst generatedId = React.useId();\n\tconst id = idProp ?? generatedId;\n\tconst labelId = `${id}-label`;\n\tconst descriptionId = `${id}-description`;\n\tconst errorId = `${id}-error`;\n\tconst triggerId = `${id}-trigger-label`;\n\tconst selectionSummaryId = `${id}-selection-summary`;\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\tconst [selectedFiles, setSelectedFiles] = React.useState<readonly File[]>([]);\n\tuseClearFileSelectionOnFormReset(inputRef, inputProps.form, setSelectedFiles);\n\tReact.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);\n\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (disabled || readOnly) return;\n\t\tonChange?.(event);\n\t\tif (!event.defaultPrevented) {\n\t\t\tconst files = Array.from(event.currentTarget.files ?? []);\n\t\t\tsetSelectedFiles(files);\n\t\t\tonFilesChange?.(files, event);\n\t\t}\n\t};\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<div className=\"lyds-file-upload\" data-size={size}>\n\t\t\t\t<BaseInput\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={id}\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclassName={cx(\"lyds-file-upload__input\", inputClassName)}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\taria-disabled={readOnly || undefined}\n\t\t\t\t\tonClick={blockPickerWhenReadOnly}\n\t\t\t\t\trequired={required}\n\t\t\t\t\taria-invalid={invalid || undefined}\n\t\t\t\t\taria-labelledby={label != null ? `${labelId} ${triggerId}` : triggerId}\n\t\t\t\t\taria-describedby={cx(description != null && descriptionId, selectedFiles.length > 0 && selectionSummaryId, error != null && errorId) || undefined}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t/>\n\t\t\t\t<FileTrigger className=\"lyds-file-upload__trigger\" disabled={Boolean(disabled)} htmlFor={id} id={triggerId} readOnly={Boolean(readOnly)} size={size}>\n\t\t\t\t\t{triggerLabel ?? messages.fileUploadTrigger}\n\t\t\t\t</FileTrigger>\n\t\t\t\t<FileSelectionPreview accept={inputProps.accept} files={selectedFiles} invalidFileLabel={invalidFileLabel ?? messages.fileUploadInvalidFile} summaryId={selectionSummaryId} />\n\t\t\t</div>\n\t\t</FieldFrame>\n\t);\n});\n\nexport type DropZoneChangeDetails = { source: \"input\"; event: React.ChangeEvent<HTMLInputElement> } | { source: \"drop\"; event: React.DragEvent<HTMLDivElement> };\n\nexport interface DropZoneProps extends NativeFileInputProps, FieldAnatomyProps {\n\tinputClassName?: string;\n\tprimaryLabel?: React.ReactNode;\n\tsecondaryLabel?: React.ReactNode;\n\tbrowseLabel?: React.ReactNode;\n\tinvalidFileLabel?: React.ReactNode;\n\tonChange?: React.ChangeEventHandler<HTMLInputElement>;\n\tonFilesChange?: (files: readonly File[], details: DropZoneChangeDetails) => void;\n\tonDragEnter?: React.DragEventHandler<HTMLDivElement>;\n\tonDragOver?: React.DragEventHandler<HTMLDivElement>;\n\tonDragLeave?: React.DragEventHandler<HTMLDivElement>;\n\tonDrop?: React.DragEventHandler<HTMLDivElement>;\n}\n\nexport const DropZone = React.forwardRef<HTMLInputElement, DropZoneProps>(function DropZone(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tprimaryLabel,\n\t\tsecondaryLabel,\n\t\tbrowseLabel,\n\t\tinvalidFileLabel,\n\t\tonChange,\n\t\tonFilesChange,\n\t\tonDragEnter,\n\t\tonDragOver,\n\t\tonDragLeave,\n\t\tonDrop,\n\t\tid: idProp,\n\t\t...inputProps\n\t},\n\tforwardedRef\n) {\n\tconst messages = useMessages();\n\tconst blockPickerWhenReadOnly = useBlockedPicker(readOnly, inputProps.onClick);\n\tconst generatedId = React.useId();\n\tconst id = idProp ?? generatedId;\n\tconst labelId = `${id}-label`;\n\tconst descriptionId = `${id}-description`;\n\tconst errorId = `${id}-error`;\n\tconst triggerId = `${id}-trigger-label`;\n\tconst selectionSummaryId = `${id}-selection-summary`;\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\tconst [dragging, setDragging] = React.useState(false);\n\tconst [selectedFiles, setSelectedFiles] = React.useState<readonly File[]>([]);\n\tconst dragDepth = React.useRef(0);\n\tconst pendingDrop = React.useRef<{ event: React.DragEvent<HTMLDivElement>; files: readonly File[]; handled: boolean } | null>(null);\n\tuseClearFileSelectionOnFormReset(inputRef, inputProps.form, setSelectedFiles);\n\n\tReact.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);\n\n\tconst handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (disabled || readOnly) return;\n\t\tonChange?.(event);\n\t\tif (event.defaultPrevented) return;\n\n\t\tconst drop = pendingDrop.current;\n\t\tif (drop != null) {\n\t\t\tdrop.handled = true;\n\t\t\tsetSelectedFiles(drop.files);\n\t\t\tonFilesChange?.(drop.files, { source: \"drop\", event: drop.event });\n\t\t\treturn;\n\t\t}\n\n\t\tconst files = Array.from(event.currentTarget.files ?? []);\n\t\tsetSelectedFiles(files);\n\t\tonFilesChange?.(files, { source: \"input\", event });\n\t};\n\n\tconst handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled || readOnly) {\n\t\t\tonDragEnter?.(event);\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tonDragEnter?.(event);\n\t\tdragDepth.current += 1;\n\t\tsetDragging(true);\n\t};\n\n\tconst handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled || readOnly) {\n\t\t\tonDragOver?.(event);\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tevent.dataTransfer.dropEffect = \"copy\";\n\t\tonDragOver?.(event);\n\t};\n\n\tconst handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tonDragLeave?.(event);\n\t\tif (disabled || readOnly) return;\n\t\tdragDepth.current = Math.max(0, dragDepth.current - 1);\n\t\tif (dragDepth.current === 0) setDragging(false);\n\t};\n\n\tconst handleDrop = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled || readOnly) {\n\t\t\tonDrop?.(event);\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tonDrop?.(event);\n\t\tdragDepth.current = 0;\n\t\tsetDragging(false);\n\t\tconst files = Array.from(event.dataTransfer.files ?? []);\n\t\tif (inputRef.current != null) {\n\t\t\ttry {\n\t\t\t\tinputRef.current.files = event.dataTransfer.files;\n\t\t\t} catch {\n\t\t\t\t// 部分瀏覽器會提供唯讀的 FileList。回呼仍是檔案狀態的主要來源，\n\t\t\t\t// 觸發 change 事件則可同步更新原生驗證狀態。\n\t\t\t}\n\n\t\t\tconst drop = { event, files, handled: false };\n\t\t\tpendingDrop.current = drop;\n\t\t\tinputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n\t\t\tpendingDrop.current = null;\n\t\t\tif (!drop.handled) {\n\t\t\t\tsetSelectedFiles(files);\n\t\t\t\tonFilesChange?.(files, { source: \"drop\", event });\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\tsetSelectedFiles(files);\n\t\tonFilesChange?.(files, { source: \"drop\", event });\n\t};\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseInput\n\t\t\t\t{...inputProps}\n\t\t\t\tref={inputRef}\n\t\t\t\tid={id}\n\t\t\t\ttype=\"file\"\n\t\t\t\tclassName={cx(\"lyds-drop-zone__input\", inputClassName)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\taria-disabled={readOnly || undefined}\n\t\t\t\tonClick={blockPickerWhenReadOnly}\n\t\t\t\trequired={required}\n\t\t\t\taria-invalid={invalid || undefined}\n\t\t\t\taria-labelledby={label != null ? `${labelId} ${triggerId}` : triggerId}\n\t\t\t\taria-describedby={cx(description != null && descriptionId, selectedFiles.length > 0 && selectionSummaryId, error != null && errorId) || undefined}\n\t\t\t\tonChange={handleInputChange}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tclassName=\"lyds-drop-zone\"\n\t\t\t\tdata-size={size}\n\t\t\t\tdata-dragging={dragging || undefined}\n\t\t\t\tdata-disabled={disabled || undefined}\n\t\t\t\tdata-readonly={readOnly || undefined}\n\t\t\t\tonDragEnter={handleDragEnter}\n\t\t\t\tonDragOver={handleDragOver}\n\t\t\t\tonDragLeave={handleDragLeave}\n\t\t\t\tonDrop={handleDrop}\n\t\t\t>\n\t\t\t\t<span className=\"lyds-drop-zone__copy\">\n\t\t\t\t\t<span className=\"lyds-drop-zone__primary\">{primaryLabel ?? messages.dropZonePrimary}</span>\n\t\t\t\t\t<span className=\"lyds-drop-zone__secondary\">{secondaryLabel ?? messages.dropZoneSecondary}</span>\n\t\t\t\t</span>\n\t\t\t\t<FileTrigger\n\t\t\t\t\tclassName=\"lyds-drop-zone__button\"\n\t\t\t\t\tdisabled={Boolean(disabled)}\n\t\t\t\t\thtmlFor={id}\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\treadOnly={Boolean(readOnly)}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tstartIcon={<PlusIcon aria-hidden=\"true\" weight=\"bold\" />}\n\t\t\t\t>\n\t\t\t\t\t{browseLabel ?? messages.dropZoneBrowse}\n\t\t\t\t</FileTrigger>\n\t\t\t\t<FileSelectionPreview accept={inputProps.accept} files={selectedFiles} invalidFileLabel={invalidFileLabel ?? messages.fileUploadInvalidFile} summaryId={selectionSummaryId} />\n\t\t\t</div>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":"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"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../src/components/forms/file-upload.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { FileIcon } from \"@phosphor-icons/react/dist/csr/File\";\nimport { PlusIcon } from \"@phosphor-icons/react/dist/csr/Plus\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\ntype NativeFileInputProps = Omit<\n\tReact.InputHTMLAttributes<HTMLInputElement>,\n\t\"children\" | \"className\" | \"defaultValue\" | \"disabled\" | \"name\" | \"onChange\" | \"readOnly\" | \"required\" | \"size\" | \"style\" | \"type\" | \"value\"\n>;\n\nfunction FileImagePreview({ file }: { file: File }) {\n\tconst [preview, setPreview] = React.useState<{ file: File; url: string } | null>(null);\n\n\tReact.useEffect(() => {\n\t\tif (typeof URL.createObjectURL !== \"function\" || typeof URL.revokeObjectURL !== \"function\") return;\n\n\t\tconst previewUrl = URL.createObjectURL(file);\n\t\tlet disposed = false;\n\t\tqueueMicrotask(() => {\n\t\t\tif (!disposed) {\n\t\t\t\tsetPreview({ file, url: previewUrl });\n\t\t\t}\n\t\t});\n\n\t\treturn () => {\n\t\t\tdisposed = true;\n\t\t\tURL.revokeObjectURL(previewUrl);\n\t\t};\n\t}, [file]);\n\n\tif (preview?.file !== file) return <FileIcon aria-hidden=\"true\" weight=\"regular\" />;\n\treturn <img className=\"lyds-file-selection__thumbnail\" src={preview.url} alt=\"\" width={48} height={48} loading=\"lazy\" decoding=\"async\" />;\n}\n\nfunction isFileAccepted(file: File, accept: string | undefined): boolean {\n\tif (!accept?.trim()) return true;\n\n\tconst fileName = file.name.toLocaleLowerCase();\n\tconst mimeType = file.type.toLocaleLowerCase();\n\treturn accept.split(\",\").some(rawRule => {\n\t\tconst rule = rawRule.trim().toLocaleLowerCase();\n\t\tif (!rule) return false;\n\t\tif (rule.startsWith(\".\")) return fileName.endsWith(rule);\n\t\tif (rule.endsWith(\"/*\")) return mimeType.startsWith(rule.slice(0, -1));\n\t\treturn mimeType === rule;\n\t});\n}\n\ninterface FileSelectionPreviewProps {\n\taccept: string | undefined;\n\tfiles: readonly File[];\n\tinvalidFileLabel: React.ReactNode;\n\tsummaryId: string;\n}\n\nfunction FileSelectionPreview({ accept, files, invalidFileLabel, summaryId }: FileSelectionPreviewProps) {\n\tconst messages = useMessages();\n\n\treturn (\n\t\t<div className={cx(\"lyds-file-selection\", files.length === 0 && \"lyds-sr-only\")}>\n\t\t\t<p id={summaryId} className=\"lyds-file-selection__summary\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t{files.length > 0 ? messages.fileSelectionSummary(files.length) : null}\n\t\t\t</p>\n\t\t\t{files.length > 0 ? (\n\t\t\t\t<ul className=\"lyds-file-selection__list\" aria-label={messages.fileSelectionLabel}>\n\t\t\t\t\t{files.map((file, index) => {\n\t\t\t\t\t\tconst accepted = isFileAccepted(file, accept);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li className=\"lyds-file-selection__item\" data-invalid={accepted ? undefined : \"\"} key={`${file.name}-${file.size}-${file.lastModified}-${index}`}>\n\t\t\t\t\t\t\t\t<span className=\"lyds-file-selection__visual\">{file.type.startsWith(\"image/\") ? <FileImagePreview file={file} /> : <FileIcon aria-hidden=\"true\" weight=\"regular\" />}</span>\n\t\t\t\t\t\t\t\t<span className=\"lyds-file-selection__details\">\n\t\t\t\t\t\t\t\t\t<span className=\"lyds-file-selection__name\" title={file.name}>\n\t\t\t\t\t\t\t\t\t\t{file.name}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{accepted ? null : <span className=\"lyds-file-selection__status\">{invalidFileLabel}</span>}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nfunction useClearFileSelectionOnFormReset(inputRef: React.RefObject<HTMLInputElement | null>, formId: string | undefined, setSelectedFiles: React.Dispatch<React.SetStateAction<readonly File[]>>) {\n\tReact.useEffect(() => {\n\t\tconst form = inputRef.current?.form;\n\t\tif (form == null) return;\n\n\t\tconst handleReset = () => setSelectedFiles([]);\n\t\tform.addEventListener(\"reset\", handleReset);\n\t\treturn () => form.removeEventListener(\"reset\", handleReset);\n\t}, [formId, inputRef, setSelectedFiles]);\n}\n\n/**\n * HTML has no read-only file input. Disabling one would drop whatever the user already picked from\n * the submission, so a read-only field stays enabled and simply refuses to open the picker.\n */\nfunction useBlockedPicker(readOnly: boolean | undefined, onClick: React.MouseEventHandler<HTMLInputElement> | undefined) {\n\treturn (event: React.MouseEvent<HTMLInputElement>) => {\n\t\tonClick?.(event);\n\t\tif (readOnly) event.preventDefault();\n\t};\n}\n\ninterface FileTriggerProps {\n\tchildren: React.ReactNode;\n\tclassName: string;\n\tdisabled: boolean;\n\thtmlFor: string;\n\tid: string;\n\treadOnly: boolean;\n\tsize: FieldAnatomyProps[\"size\"];\n\tstartIcon?: React.ReactNode;\n}\n\n/**\n * The visible affordance is a label bound to the real file input, so the input keeps the single\n * tab stop, the accessible name and native picker activation. Rendering a button beside the input\n * instead would leave the description, error and validity on an element the keyboard cannot reach.\n */\nfunction FileTrigger({ children, className, disabled, htmlFor, id, readOnly, size, startIcon }: FileTriggerProps) {\n\treturn (\n\t\t<label className={cx(\"lyds-button\", className)} data-disabled={disabled || undefined} data-readonly={readOnly || undefined} data-size={size} data-variant=\"secondary\" htmlFor={htmlFor}>\n\t\t\t{startIcon != null ? (\n\t\t\t\t<span className=\"lyds-button__icon\" aria-hidden=\"true\">\n\t\t\t\t\t{startIcon}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span className=\"lyds-button__label\" id={id}>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t</label>\n\t);\n}\n\nexport interface FileUploadProps extends NativeFileInputProps, FieldAnatomyProps {\n\tinputClassName?: string;\n\tinputStyle?: React.CSSProperties;\n\ttriggerLabel?: React.ReactNode;\n\tinvalidFileLabel?: React.ReactNode;\n\tonChange?: React.ChangeEventHandler<HTMLInputElement>;\n\tonFilesChange?: (files: readonly File[], event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(function FileUpload(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tinputStyle,\n\t\ttriggerLabel,\n\t\tinvalidFileLabel,\n\t\tonChange,\n\t\tonFilesChange,\n\t\tid: idProp,\n\t\t...inputProps\n\t},\n\tforwardedRef\n) {\n\tconst messages = useMessages();\n\tconst blockPickerWhenReadOnly = useBlockedPicker(readOnly, inputProps.onClick);\n\tconst generatedId = React.useId();\n\tconst id = idProp ?? generatedId;\n\tconst labelId = `${id}-label`;\n\tconst descriptionId = `${id}-description`;\n\tconst errorId = `${id}-error`;\n\tconst triggerId = `${id}-trigger-label`;\n\tconst selectionSummaryId = `${id}-selection-summary`;\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\tconst [selectedFiles, setSelectedFiles] = React.useState<readonly File[]>([]);\n\tuseClearFileSelectionOnFormReset(inputRef, inputProps.form, setSelectedFiles);\n\tReact.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);\n\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (disabled || readOnly) return;\n\t\tonChange?.(event);\n\t\tif (!event.defaultPrevented) {\n\t\t\tconst files = Array.from(event.currentTarget.files ?? []);\n\t\t\tsetSelectedFiles(files);\n\t\t\tonFilesChange?.(files, event);\n\t\t}\n\t};\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<div className=\"lyds-file-upload\" data-size={size}>\n\t\t\t\t<BaseInput\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={id}\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclassName={cx(\"lyds-file-upload__input\", inputClassName)}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\taria-disabled={readOnly || undefined}\n\t\t\t\t\tonClick={blockPickerWhenReadOnly}\n\t\t\t\t\trequired={required}\n\t\t\t\t\taria-invalid={invalid || undefined}\n\t\t\t\t\taria-labelledby={label != null ? `${labelId} ${triggerId}` : triggerId}\n\t\t\t\t\taria-describedby={cx(description != null && descriptionId, selectedFiles.length > 0 && selectionSummaryId, error != null && errorId) || undefined}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t/>\n\t\t\t\t<FileTrigger className=\"lyds-file-upload__trigger\" disabled={Boolean(disabled)} htmlFor={id} id={triggerId} readOnly={Boolean(readOnly)} size={size}>\n\t\t\t\t\t{triggerLabel ?? messages.fileUploadTrigger}\n\t\t\t\t</FileTrigger>\n\t\t\t\t<FileSelectionPreview accept={inputProps.accept} files={selectedFiles} invalidFileLabel={invalidFileLabel ?? messages.fileUploadInvalidFile} summaryId={selectionSummaryId} />\n\t\t\t</div>\n\t\t</FieldFrame>\n\t);\n});\n\nexport type DropZoneChangeDetails = { source: \"input\"; event: React.ChangeEvent<HTMLInputElement> } | { source: \"drop\"; event: React.DragEvent<HTMLDivElement> };\n\nexport interface DropZoneProps extends NativeFileInputProps, FieldAnatomyProps {\n\tinputClassName?: string;\n\tprimaryLabel?: React.ReactNode;\n\tsecondaryLabel?: React.ReactNode;\n\tbrowseLabel?: React.ReactNode;\n\tinvalidFileLabel?: React.ReactNode;\n\tonChange?: React.ChangeEventHandler<HTMLInputElement>;\n\tonFilesChange?: (files: readonly File[], details: DropZoneChangeDetails) => void;\n\tonDragEnter?: React.DragEventHandler<HTMLDivElement>;\n\tonDragOver?: React.DragEventHandler<HTMLDivElement>;\n\tonDragLeave?: React.DragEventHandler<HTMLDivElement>;\n\tonDrop?: React.DragEventHandler<HTMLDivElement>;\n}\n\nexport const DropZone = React.forwardRef<HTMLInputElement, DropZoneProps>(function DropZone(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tprimaryLabel,\n\t\tsecondaryLabel,\n\t\tbrowseLabel,\n\t\tinvalidFileLabel,\n\t\tonChange,\n\t\tonFilesChange,\n\t\tonDragEnter,\n\t\tonDragOver,\n\t\tonDragLeave,\n\t\tonDrop,\n\t\tid: idProp,\n\t\t...inputProps\n\t},\n\tforwardedRef\n) {\n\tconst messages = useMessages();\n\tconst blockPickerWhenReadOnly = useBlockedPicker(readOnly, inputProps.onClick);\n\tconst generatedId = React.useId();\n\tconst id = idProp ?? generatedId;\n\tconst labelId = `${id}-label`;\n\tconst descriptionId = `${id}-description`;\n\tconst errorId = `${id}-error`;\n\tconst triggerId = `${id}-trigger-label`;\n\tconst selectionSummaryId = `${id}-selection-summary`;\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\tconst [dragging, setDragging] = React.useState(false);\n\tconst [selectedFiles, setSelectedFiles] = React.useState<readonly File[]>([]);\n\tconst dragDepth = React.useRef(0);\n\tconst pendingDrop = React.useRef<{ event: React.DragEvent<HTMLDivElement>; files: readonly File[]; handled: boolean } | null>(null);\n\tuseClearFileSelectionOnFormReset(inputRef, inputProps.form, setSelectedFiles);\n\n\tReact.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);\n\n\tconst handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (disabled || readOnly) return;\n\t\tonChange?.(event);\n\t\tif (event.defaultPrevented) return;\n\n\t\tconst drop = pendingDrop.current;\n\t\tif (drop != null) {\n\t\t\tdrop.handled = true;\n\t\t\tsetSelectedFiles(drop.files);\n\t\t\tonFilesChange?.(drop.files, { source: \"drop\", event: drop.event });\n\t\t\treturn;\n\t\t}\n\n\t\tconst files = Array.from(event.currentTarget.files ?? []);\n\t\tsetSelectedFiles(files);\n\t\tonFilesChange?.(files, { source: \"input\", event });\n\t};\n\n\tconst handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled || readOnly) {\n\t\t\tonDragEnter?.(event);\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tonDragEnter?.(event);\n\t\tdragDepth.current += 1;\n\t\tsetDragging(true);\n\t};\n\n\tconst handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled || readOnly) {\n\t\t\tonDragOver?.(event);\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tevent.dataTransfer.dropEffect = \"copy\";\n\t\tonDragOver?.(event);\n\t};\n\n\tconst handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tonDragLeave?.(event);\n\t\tif (disabled || readOnly) return;\n\t\tdragDepth.current = Math.max(0, dragDepth.current - 1);\n\t\tif (dragDepth.current === 0) setDragging(false);\n\t};\n\n\tconst handleDrop = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tif (disabled || readOnly) {\n\t\t\tonDrop?.(event);\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tonDrop?.(event);\n\t\tdragDepth.current = 0;\n\t\tsetDragging(false);\n\t\tconst files = Array.from(event.dataTransfer.files ?? []);\n\t\tif (inputRef.current != null) {\n\t\t\ttry {\n\t\t\t\tinputRef.current.files = event.dataTransfer.files;\n\t\t\t} catch {\n\t\t\t\t// 部分瀏覽器會提供唯讀的 FileList。回呼仍是檔案狀態的主要來源，\n\t\t\t\t// 觸發 change 事件則可同步更新原生驗證狀態。\n\t\t\t}\n\n\t\t\tconst drop = { event, files, handled: false };\n\t\t\tpendingDrop.current = drop;\n\t\t\tinputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n\t\t\tpendingDrop.current = null;\n\t\t\tif (!drop.handled) {\n\t\t\t\tsetSelectedFiles(files);\n\t\t\t\tonFilesChange?.(files, { source: \"drop\", event });\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\t\tsetSelectedFiles(files);\n\t\tonFilesChange?.(files, { source: \"drop\", event });\n\t};\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseInput\n\t\t\t\t{...inputProps}\n\t\t\t\tref={inputRef}\n\t\t\t\tid={id}\n\t\t\t\ttype=\"file\"\n\t\t\t\tclassName={cx(\"lyds-drop-zone__input\", inputClassName)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\taria-disabled={readOnly || undefined}\n\t\t\t\tonClick={blockPickerWhenReadOnly}\n\t\t\t\trequired={required}\n\t\t\t\taria-invalid={invalid || undefined}\n\t\t\t\taria-labelledby={label != null ? `${labelId} ${triggerId}` : triggerId}\n\t\t\t\taria-describedby={cx(description != null && descriptionId, selectedFiles.length > 0 && selectionSummaryId, error != null && errorId) || undefined}\n\t\t\t\tonChange={handleInputChange}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tclassName=\"lyds-drop-zone\"\n\t\t\t\tdata-size={size}\n\t\t\t\tdata-dragging={dragging || undefined}\n\t\t\t\tdata-disabled={disabled || undefined}\n\t\t\t\tdata-readonly={readOnly || undefined}\n\t\t\t\tonDragEnter={handleDragEnter}\n\t\t\t\tonDragOver={handleDragOver}\n\t\t\t\tonDragLeave={handleDragLeave}\n\t\t\t\tonDrop={handleDrop}\n\t\t\t>\n\t\t\t\t<span className=\"lyds-drop-zone__copy\">\n\t\t\t\t\t<span className=\"lyds-drop-zone__primary\">{primaryLabel ?? messages.dropZonePrimary}</span>\n\t\t\t\t\t<span className=\"lyds-drop-zone__secondary\">{secondaryLabel ?? messages.dropZoneSecondary}</span>\n\t\t\t\t</span>\n\t\t\t\t<FileTrigger\n\t\t\t\t\tclassName=\"lyds-drop-zone__button\"\n\t\t\t\t\tdisabled={Boolean(disabled)}\n\t\t\t\t\thtmlFor={id}\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\treadOnly={Boolean(readOnly)}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tstartIcon={<PlusIcon aria-hidden=\"true\" weight=\"bold\" />}\n\t\t\t\t>\n\t\t\t\t\t{browseLabel ?? messages.dropZoneBrowse}\n\t\t\t\t</FileTrigger>\n\t\t\t\t<FileSelectionPreview accept={inputProps.accept} files={selectedFiles} invalidFileLabel={invalidFileLabel ?? messages.fileUploadInvalidFile} summaryId={selectionSummaryId} />\n\t\t\t</div>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":"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"}

package/dist/components/forms/input.js

@@ -1,3 +1,4 @@
+"use client";
 /* empty css      */
 import { withStateClassName as e } from "../../internal/class-names.js";
 import * as t from "react";

package/dist/components/forms/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/forms/input.tsx"],"sourcesContent":["import { withStateClassName } from \"@/internal\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { type FieldSize } from \"./internal\";\nexport interface InputProps extends Omit<BaseInput.Props, \"size\"> {\n\t/** Linyao Design System 的控制項尺寸。原生 HTML `size` 屬性請使用 `inputSize`。 */\n\tsize?: FieldSize;\n\tinputSize?: number;\n\tinvalid?: boolean;\n}\n\n/**\n * 使用 Linyao Design System 樣式與 Base UI 值變更資訊的基礎文字輸入元件。\n * 需要可見標籤、說明或錯誤訊息時，請使用 TextField。\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n\t{ size = \"md\", inputSize, invalid, className, disabled, readOnly, required, name, \"aria-invalid\": ariaInvalid, ...props },\n\tref\n) {\n\treturn (\n\t\t<BaseField.Root className=\"lyds-input-root\" name={name} disabled={disabled} invalid={invalid} data-size={size} data-readonly={readOnly || undefined} data-required={required || undefined}>\n\t\t\t<BaseInput\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={withStateClassName<BaseInput.State>(\"lyds-input\", className)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tsize={inputSize}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\tdata-size={size}\n\t\t\t/>\n\t\t</BaseField.Root>\n\t);\n});\n"],"mappings":";;;;;;;AAiBA,IAAa,IAAQ,EAAM,WAAyC,SACnE,EAAE,UAAO,MAAM,cAAW,YAAS,cAAW,aAAU,aAAU,aAAU,SAAM,gBAAgB,GAAa,GAAG,KAClH,GACC;CACD,OACC,kBAAC,EAAU,MAAX;EAAgB,WAAU;EAAwB;EAAgB;EAAmB;EAAS,aAAW;EAAM,iBAAe,KAAY,KAAA;EAAW,iBAAe,KAAY,KAAA;EAC/K,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAoC,cAAc,CAAS;GAC5D;GACA;GACA;GACV,MAAM;GACN,gBAAc,IAAU,KAAO;GAC/B,aAAW;EACX,CAAA;CACc,CAAA;AAElB,CAAC"}
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/forms/input.tsx"],"sourcesContent":["import { withStateClassName } from \"@/internal\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { type FieldSize } from \"./internal\";\nexport interface InputProps extends Omit<BaseInput.Props, \"size\"> {\n\t/** Linyao Design System 的控制項尺寸。原生 HTML `size` 屬性請使用 `inputSize`。 */\n\tsize?: FieldSize;\n\tinputSize?: number;\n\tinvalid?: boolean;\n}\n\n/**\n * 使用 Linyao Design System 樣式與 Base UI 值變更資訊的基礎文字輸入元件。\n * 需要可見標籤、說明或錯誤訊息時，請使用 TextField。\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n\t{ size = \"md\", inputSize, invalid, className, disabled, readOnly, required, name, \"aria-invalid\": ariaInvalid, ...props },\n\tref\n) {\n\treturn (\n\t\t<BaseField.Root className=\"lyds-input-root\" name={name} disabled={disabled} invalid={invalid} data-size={size} data-readonly={readOnly || undefined} data-required={required || undefined}>\n\t\t\t<BaseInput\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={withStateClassName<BaseInput.State>(\"lyds-input\", className)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tsize={inputSize}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\tdata-size={size}\n\t\t\t/>\n\t\t</BaseField.Root>\n\t);\n});\n"],"mappings":";;;;;;;;AAiBA,IAAa,IAAQ,EAAM,WAAyC,SACnE,EAAE,UAAO,MAAM,cAAW,YAAS,cAAW,aAAU,aAAU,aAAU,SAAM,gBAAgB,GAAa,GAAG,KAClH,GACC;CACD,OACC,kBAAC,EAAU,MAAX;EAAgB,WAAU;EAAwB;EAAgB;EAAmB;EAAS,aAAW;EAAM,iBAAe,KAAY,KAAA;EAAW,iBAAe,KAAY,KAAA;EAC/K,UAAA,kBAAC,GAAD;GACC,GAAI;GACC;GACL,WAAW,EAAoC,cAAc,CAAS;GAC5D;GACA;GACA;GACV,MAAM;GACN,gBAAc,IAAU,KAAO;GAC/B,aAAW;EACX,CAAA;CACc,CAAA;AAElB,CAAC"}

package/dist/components/forms/internal.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx as e } from "../../internal/class-names.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { Field as r } from "@base-ui/react/field";
@@ -34,18 +35,19 @@ function i({ children: i, label: a, description: o, error: s, invalid: c, disabl
 				className: "lyds-field__description",
 				children: o
 			}),
-			s == null ? /* @__PURE__ */ t(r.Error, {
-				id: y,
-				className: "lyds-field__error",
-				"aria-live": "polite",
-				"aria-atomic": "true"
-			}) : /* @__PURE__ */ t(r.Error, {
-				id: y,
-				className: "lyds-field__error",
-				match: c ? !0 : void 0,
+			/* @__PURE__ */ t("div", {
+				className: "lyds-field__error-region",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				children: s
+				children: s == null ? /* @__PURE__ */ t(r.Error, {
+					id: y,
+					className: "lyds-field__error"
+				}) : /* @__PURE__ */ t(r.Error, {
+					id: y,
+					className: "lyds-field__error",
+					match: c ? !0 : void 0,
+					children: s
+				})
 			})
 		]
 	});

package/dist/components/forms/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","names":[],"sources":["../../../src/components/forms/internal.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport type * as React from \"react\";\n\nimport { cx } from \"@/internal\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport type FieldValidationProps = Pick<BaseField.Root.Props, \"actionsRef\" | \"dirty\" | \"touched\" | \"validate\" | \"validationDebounceTime\" | \"validationMode\">;\n\nexport interface FieldAnatomyProps extends FieldValidationProps {\n\t/** 欄位的可見標籤。省略時，請在控制項提供 `aria-label`。 */\n\tlabel?: React.ReactNode;\n\t/** 透過 Base UI Field 與控制項關聯的補充說明。 */\n\tdescription?: React.ReactNode;\n\t/** 透過 Base UI Field 與控制項關聯的驗證訊息。 */\n\terror?: React.ReactNode;\n\t/** 將經外部驗證的欄位標記為無效。 */\n\tinvalid?: boolean | undefined;\n\tdisabled?: boolean | undefined;\n\treadOnly?: boolean | undefined;\n\trequired?: boolean | undefined;\n\tname?: string | undefined;\n\tsize?: FieldSize | undefined;\n\tclassName?: string | undefined;\n\tstyle?: React.CSSProperties | undefined;\n\t/** 顯示於標籤後方的選用在地化註記。 */\n\trequiredIndicator?: React.ReactNode;\n}\n\ninterface FieldFrameProps extends FieldAnatomyProps {\n\tchildren: React.ReactNode;\n\tlabelId?: string | undefined;\n\tdescriptionId?: string | undefined;\n\terrorId?: string | undefined;\n}\n\nexport function FieldFrame({\n\tchildren,\n\tlabel,\n\tdescription,\n\terror,\n\tinvalid,\n\tdisabled,\n\treadOnly,\n\trequired,\n\tname,\n\tsize = \"md\",\n\tclassName,\n\tstyle,\n\trequiredIndicator,\n\tlabelId,\n\tdescriptionId,\n\terrorId,\n\tvalidate,\n\tvalidationMode,\n\tvalidationDebounceTime,\n\tdirty,\n\ttouched,\n\tactionsRef\n}: FieldFrameProps) {\n\treturn (\n\t\t<BaseField.Root\n\t\t\tclassName={cx(\"lyds-field\", className)}\n\t\t\tstyle={style}\n\t\t\tname={name}\n\t\t\tdisabled={disabled}\n\t\t\tinvalid={invalid}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t\tdata-size={size}\n\t\t\tdata-readonly={readOnly || undefined}\n\t\t\tdata-required={required || undefined}\n\t\t>\n\t\t\t{label != null ? (\n\t\t\t\t<BaseField.Label id={labelId} className=\"lyds-field__label\">\n\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t{required && requiredIndicator != null ? (\n\t\t\t\t\t\t<span className=\"lyds-field__required\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{requiredIndicator}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</BaseField.Label>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t\t{description != null ? (\n\t\t\t\t<BaseField.Description id={descriptionId} className=\"lyds-field__description\">\n\t\t\t\t\t{description}\n\t\t\t\t</BaseField.Description>\n\t\t\t) : null}\n\t\t\t{error != null ? (\n\t\t\t\t<BaseField.Error id={errorId} className=\"lyds-field__error\" match={invalid ? true : undefined} aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t\t{error}\n\t\t\t\t</BaseField.Error>\n\t\t\t) : (\n\t\t\t\t<BaseField.Error id={errorId} className=\"lyds-field__error\" aria-live=\"polite\" aria-atomic=\"true\" />\n\t\t\t)}\n\t\t</BaseField.Root>\n\t);\n}\n"],"mappings":";;;;AAoCA,SAAgB,EAAW,EAC1B,aACA,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,YACA,kBACA,YACA,aACA,mBACA,2BACA,UACA,YACA,iBACmB;CACnB,OACC,kBAAC,EAAU,MAAX;EACC,WAAW,EAAG,cAAc,CAAS;EAC9B;EACD;EACI;EACD;EACC;EACM;EACQ;EACjB;EACE;EACG;EACZ,aAAW;EACX,iBAAe,KAAY,KAAA;EAC3B,iBAAe,KAAY,KAAA;EAd5B,UAAA;GAgBE,KAAS,OASN,OARH,kBAAC,EAAU,OAAX;IAAiB,IAAI;IAAS,WAAU;IAAxC,UAAA,CACC,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,GAClB,KAAY,KAAqB,OACjC,kBAAC,QAAD;KAAM,WAAU;KAAuB,eAAY;KACjD,UAAA;IACI,CAAA,IACH,IACY;GACd,CAAA;GACH;GACA,KAAe,OAIZ,OAHH,kBAAC,EAAU,aAAX;IAAuB,IAAI;IAAe,WAAU;IAClD,UAAA;GACqB,CAAA;GAEvB,KAAS,OAKT,kBAAC,EAAU,OAAX;IAAiB,IAAI;IAAS,WAAU;IAAoB,aAAU;IAAS,eAAY;GAAQ,CAAA,IAJnG,kBAAC,EAAU,OAAX;IAAiB,IAAI;IAAS,WAAU;IAAoB,OAAO,IAAU,KAAO,KAAA;IAAW,aAAU;IAAS,eAAY;IAC5H,UAAA;GACe,CAAA;EAIH;;AAElB"}
+{"version":3,"file":"internal.js","names":[],"sources":["../../../src/components/forms/internal.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport type * as React from \"react\";\n\nimport { cx } from \"@/internal\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport type FieldValidationProps = Pick<BaseField.Root.Props, \"actionsRef\" | \"dirty\" | \"touched\" | \"validate\" | \"validationDebounceTime\" | \"validationMode\">;\n\nexport interface FieldAnatomyProps extends FieldValidationProps {\n\t/** 欄位的可見標籤。省略時，請在控制項提供 `aria-label`。 */\n\tlabel?: React.ReactNode;\n\t/** 透過 Base UI Field 與控制項關聯的補充說明。 */\n\tdescription?: React.ReactNode;\n\t/** 透過 Base UI Field 與控制項關聯的驗證訊息。 */\n\terror?: React.ReactNode;\n\t/** 將經外部驗證的欄位標記為無效。 */\n\tinvalid?: boolean | undefined;\n\tdisabled?: boolean | undefined;\n\treadOnly?: boolean | undefined;\n\trequired?: boolean | undefined;\n\tname?: string | undefined;\n\tsize?: FieldSize | undefined;\n\tclassName?: string | undefined;\n\tstyle?: React.CSSProperties | undefined;\n\t/** 顯示於標籤後方的選用在地化註記。 */\n\trequiredIndicator?: React.ReactNode;\n}\n\ninterface FieldFrameProps extends FieldAnatomyProps {\n\tchildren: React.ReactNode;\n\tlabelId?: string | undefined;\n\tdescriptionId?: string | undefined;\n\terrorId?: string | undefined;\n}\n\nexport function FieldFrame({\n\tchildren,\n\tlabel,\n\tdescription,\n\terror,\n\tinvalid,\n\tdisabled,\n\treadOnly,\n\trequired,\n\tname,\n\tsize = \"md\",\n\tclassName,\n\tstyle,\n\trequiredIndicator,\n\tlabelId,\n\tdescriptionId,\n\terrorId,\n\tvalidate,\n\tvalidationMode,\n\tvalidationDebounceTime,\n\tdirty,\n\ttouched,\n\tactionsRef\n}: FieldFrameProps) {\n\treturn (\n\t\t<BaseField.Root\n\t\t\tclassName={cx(\"lyds-field\", className)}\n\t\t\tstyle={style}\n\t\t\tname={name}\n\t\t\tdisabled={disabled}\n\t\t\tinvalid={invalid}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t\tdata-size={size}\n\t\t\tdata-readonly={readOnly || undefined}\n\t\t\tdata-required={required || undefined}\n\t\t>\n\t\t\t{label != null ? (\n\t\t\t\t<BaseField.Label id={labelId} className=\"lyds-field__label\">\n\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t{required && requiredIndicator != null ? (\n\t\t\t\t\t\t<span className=\"lyds-field__required\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{requiredIndicator}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</BaseField.Label>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t\t{description != null ? (\n\t\t\t\t<BaseField.Description id={descriptionId} className=\"lyds-field__description\">\n\t\t\t\t\t{description}\n\t\t\t\t</BaseField.Description>\n\t\t\t) : null}\n\t\t\t{/*\n\t\t\t * Base UI renders nothing until the field is invalid, so putting `aria-live` on the\n\t\t\t * error itself created the live region at the same moment it filled — and a screen\n\t\t\t * reader that was not already watching the node has nothing to compare against, so\n\t\t\t * the first message is the one most likely to be dropped. The region is a separate\n\t\t\t * element that is always mounted; only its contents change.\n\t\t\t */}\n\t\t\t<div className=\"lyds-field__error-region\" aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t{error != null ? (\n\t\t\t\t\t<BaseField.Error id={errorId} className=\"lyds-field__error\" match={invalid ? true : undefined}>\n\t\t\t\t\t\t{error}\n\t\t\t\t\t</BaseField.Error>\n\t\t\t\t) : (\n\t\t\t\t\t<BaseField.Error id={errorId} className=\"lyds-field__error\" />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</BaseField.Root>\n\t);\n}\n"],"mappings":";;;;;AAoCA,SAAgB,EAAW,EAC1B,aACA,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,YACA,kBACA,YACA,aACA,mBACA,2BACA,UACA,YACA,iBACmB;CACnB,OACC,kBAAC,EAAU,MAAX;EACC,WAAW,EAAG,cAAc,CAAS;EAC9B;EACD;EACI;EACD;EACC;EACM;EACQ;EACjB;EACE;EACG;EACZ,aAAW;EACX,iBAAe,KAAY,KAAA;EAC3B,iBAAe,KAAY,KAAA;EAd5B,UAAA;GAgBE,KAAS,OASN,OARH,kBAAC,EAAU,OAAX;IAAiB,IAAI;IAAS,WAAU;IAAxC,UAAA,CACC,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,GAClB,KAAY,KAAqB,OACjC,kBAAC,QAAD;KAAM,WAAU;KAAuB,eAAY;KACjD,UAAA;IACI,CAAA,IACH,IACY;GACd,CAAA;GACH;GACA,KAAe,OAIZ,OAHH,kBAAC,EAAU,aAAX;IAAuB,IAAI;IAAe,WAAU;IAClD,UAAA;GACqB,CAAA;GASxB,kBAAC,OAAD;IAAK,WAAU;IAA2B,aAAU;IAAS,eAAY;IACvE,UAAA,KAAS,OAKT,kBAAC,EAAU,OAAX;KAAiB,IAAI;KAAS,WAAU;IAAqB,CAAA,IAJ7D,kBAAC,EAAU,OAAX;KAAiB,IAAI;KAAS,WAAU;KAAoB,OAAO,IAAU,KAAO,KAAA;KAClF,UAAA;IACe,CAAA;GAId,CAAA;EACU;;AAElB"}

package/dist/components/forms/number-field.js

@@ -1,3 +1,4 @@
+"use client";
 /* empty css      */
 import { cx as e, withStateClassName as t } from "../../internal/class-names.js";
 import { useMessages as n } from "../../intl/provider.js";

package/dist/components/forms/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","names":[],"sources":["../../../src/components/forms/number-field.tsx"],"sourcesContent":["import { cx, withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { MinusIcon } from \"@phosphor-icons/react/dist/csr/Minus\";\nimport { PlusIcon } from \"@phosphor-icons/react/dist/csr/Plus\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\ntype NumberRootProps = Omit<BaseNumberField.Root.Props, \"className\" | \"disabled\" | \"name\" | \"readOnly\" | \"required\" | \"style\">;\n\nexport interface NumberFieldProps extends NumberRootProps, FieldAnatomyProps {\n\tinputClassName?: BaseNumberField.Input.Props[\"className\"];\n\tinputStyle?: React.CSSProperties;\n\tgroupClassName?: BaseNumberField.Group.Props[\"className\"];\n\tshowSteppers?: boolean;\n\tincrementLabel?: string;\n\tdecrementLabel?: string;\n}\n\n/** 以 Base UI Number Field 實作、支援地區格式的數字輸入元件。 */\nexport const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(function NumberField(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tinputStyle,\n\t\tgroupClassName,\n\t\tshowSteppers = true,\n\t\tincrementLabel,\n\t\tdecrementLabel,\n\t\t...numberProps\n\t},\n\tref\n) {\n\tconst messages = useMessages();\n\tconst ariaLabel = numberProps[\"aria-label\"];\n\tconst ariaLabelledBy = numberProps[\"aria-labelledby\"];\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseNumberField.Root {...numberProps} ref={ref} className=\"lyds-number-field\" name={name} disabled={disabled} readOnly={readOnly} required={required} data-size={size}>\n\t\t\t\t<BaseNumberField.Group className={withStateClassName<BaseNumberField.Group.State>(\"lyds-number-field__group\", groupClassName)}>\n\t\t\t\t\t<BaseNumberField.Input\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\t\tclassName={withStateClassName<BaseNumberField.Input.State>(\"lyds-number-field__input\", inputClassName)}\n\t\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\t/>\n\t\t\t\t\t{showSteppers ? (\n\t\t\t\t\t\t<span className=\"lyds-number-field__steppers\">\n\t\t\t\t\t\t\t<BaseNumberField.Decrement className={cx(\"lyds-number-field__stepper\", \"lyds-number-field__stepper--decrement\")} aria-label={decrementLabel ?? messages.numberFieldDecrement}>\n\t\t\t\t\t\t\t\t<MinusIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t\t\t\t</BaseNumberField.Decrement>\n\t\t\t\t\t\t\t<BaseNumberField.Increment className={cx(\"lyds-number-field__stepper\", \"lyds-number-field__stepper--increment\")} aria-label={incrementLabel ?? messages.numberFieldIncrement}>\n\t\t\t\t\t\t\t\t<PlusIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t\t\t\t</BaseNumberField.Increment>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</BaseNumberField.Group>\n\t\t\t</BaseNumberField.Root>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":";;;;;;;;;;AAoBA,IAAa,IAAc,EAAM,WAA6C,SAC7E,EACC,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,aACA,mBACA,2BACA,UACA,YACA,eACA,mBACA,eACA,mBACA,kBAAe,IACf,mBACA,mBACA,GAAG,KAEJ,GACC;CACD,IAAM,IAAW,EAAY,GACvB,IAAY,EAAY,eACxB,IAAiB,EAAY;CAEnC,OACC,kBAAC,GAAD;EACQ;EACM;EACN;EACE;EACC;EACA;EACA;EACJ;EACA;EACK;EACJ;EACY;EACT;EACM;EACQ;EACjB;EACE;EACG;EAEZ,UAAA,kBAAC,EAAgB,MAAjB;GAAsB,GAAI;GAAkB;GAAK,WAAU;GAA0B;GAAgB;GAAoB;GAAoB;GAAU,aAAW;GACjK,UAAA,kBAAC,EAAgB,OAAjB;IAAuB,WAAW,EAAgD,4BAA4B,CAAc;IAA5H,UAAA,CACC,kBAAC,EAAgB,OAAjB;KACC,cAAY;KACZ,mBAAiB;KACjB,WAAW,EAAgD,4BAA4B,CAAc;KACrG,OAAO;IACP,CAAA,GACA,IACA,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACC,kBAAC,EAAgB,WAAjB;MAA2B,WAAW,EAAG,8BAA8B,uCAAuC;MAAG,cAAY,KAAkB,EAAS;MACvJ,UAAA,kBAAC,GAAD;OAAW,eAAY;OAAO,QAAO;MAAQ,CAAA;KACnB,CAAA,GAC3B,kBAAC,EAAgB,WAAjB;MAA2B,WAAW,EAAG,8BAA8B,uCAAuC;MAAG,cAAY,KAAkB,EAAS;MACvJ,UAAA,kBAAC,GAAD;OAAU,eAAY;OAAO,QAAO;MAAQ,CAAA;KAClB,CAAA,CACtB;IACH,CAAA,IAAA,IACkB;;EACF,CAAA;CACX,CAAA;AAEd,CAAC"}
+{"version":3,"file":"number-field.js","names":[],"sources":["../../../src/components/forms/number-field.tsx"],"sourcesContent":["import { cx, withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { MinusIcon } from \"@phosphor-icons/react/dist/csr/Minus\";\nimport { PlusIcon } from \"@phosphor-icons/react/dist/csr/Plus\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\ntype NumberRootProps = Omit<BaseNumberField.Root.Props, \"className\" | \"disabled\" | \"name\" | \"readOnly\" | \"required\" | \"style\">;\n\nexport interface NumberFieldProps extends NumberRootProps, FieldAnatomyProps {\n\tinputClassName?: BaseNumberField.Input.Props[\"className\"];\n\tinputStyle?: React.CSSProperties;\n\tgroupClassName?: BaseNumberField.Group.Props[\"className\"];\n\tshowSteppers?: boolean;\n\tincrementLabel?: string;\n\tdecrementLabel?: string;\n}\n\n/** 以 Base UI Number Field 實作、支援地區格式的數字輸入元件。 */\nexport const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(function NumberField(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tinputStyle,\n\t\tgroupClassName,\n\t\tshowSteppers = true,\n\t\tincrementLabel,\n\t\tdecrementLabel,\n\t\t...numberProps\n\t},\n\tref\n) {\n\tconst messages = useMessages();\n\tconst ariaLabel = numberProps[\"aria-label\"];\n\tconst ariaLabelledBy = numberProps[\"aria-labelledby\"];\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseNumberField.Root {...numberProps} ref={ref} className=\"lyds-number-field\" name={name} disabled={disabled} readOnly={readOnly} required={required} data-size={size}>\n\t\t\t\t<BaseNumberField.Group className={withStateClassName<BaseNumberField.Group.State>(\"lyds-number-field__group\", groupClassName)}>\n\t\t\t\t\t<BaseNumberField.Input\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\t\tclassName={withStateClassName<BaseNumberField.Input.State>(\"lyds-number-field__input\", inputClassName)}\n\t\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\t/>\n\t\t\t\t\t{showSteppers ? (\n\t\t\t\t\t\t<span className=\"lyds-number-field__steppers\">\n\t\t\t\t\t\t\t<BaseNumberField.Decrement className={cx(\"lyds-number-field__stepper\", \"lyds-number-field__stepper--decrement\")} aria-label={decrementLabel ?? messages.numberFieldDecrement}>\n\t\t\t\t\t\t\t\t<MinusIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t\t\t\t</BaseNumberField.Decrement>\n\t\t\t\t\t\t\t<BaseNumberField.Increment className={cx(\"lyds-number-field__stepper\", \"lyds-number-field__stepper--increment\")} aria-label={incrementLabel ?? messages.numberFieldIncrement}>\n\t\t\t\t\t\t\t\t<PlusIcon aria-hidden=\"true\" weight=\"bold\" />\n\t\t\t\t\t\t\t</BaseNumberField.Increment>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</BaseNumberField.Group>\n\t\t\t</BaseNumberField.Root>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,IAAc,EAAM,WAA6C,SAC7E,EACC,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,aACA,mBACA,2BACA,UACA,YACA,eACA,mBACA,eACA,mBACA,kBAAe,IACf,mBACA,mBACA,GAAG,KAEJ,GACC;CACD,IAAM,IAAW,EAAY,GACvB,IAAY,EAAY,eACxB,IAAiB,EAAY;CAEnC,OACC,kBAAC,GAAD;EACQ;EACM;EACN;EACE;EACC;EACA;EACA;EACJ;EACA;EACK;EACJ;EACY;EACT;EACM;EACQ;EACjB;EACE;EACG;EAEZ,UAAA,kBAAC,EAAgB,MAAjB;GAAsB,GAAI;GAAkB;GAAK,WAAU;GAA0B;GAAgB;GAAoB;GAAoB;GAAU,aAAW;GACjK,UAAA,kBAAC,EAAgB,OAAjB;IAAuB,WAAW,EAAgD,4BAA4B,CAAc;IAA5H,UAAA,CACC,kBAAC,EAAgB,OAAjB;KACC,cAAY;KACZ,mBAAiB;KACjB,WAAW,EAAgD,4BAA4B,CAAc;KACrG,OAAO;IACP,CAAA,GACA,IACA,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACC,kBAAC,EAAgB,WAAjB;MAA2B,WAAW,EAAG,8BAA8B,uCAAuC;MAAG,cAAY,KAAkB,EAAS;MACvJ,UAAA,kBAAC,GAAD;OAAW,eAAY;OAAO,QAAO;MAAQ,CAAA;KACnB,CAAA,GAC3B,kBAAC,EAAgB,WAAjB;MAA2B,WAAW,EAAG,8BAA8B,uCAAuC;MAAG,cAAY,KAAkB,EAAS;MACvJ,UAAA,kBAAC,GAAD;OAAU,eAAY;OAAO,QAAO;MAAQ,CAAA;KAClB,CAAA,CACtB;IACH,CAAA,IAAA,IACkB;;EACF,CAAA;CACX,CAAA;AAEd,CAAC"}

package/dist/components/forms/otp-field.js

@@ -1,3 +1,4 @@
+"use client";
 /* empty css      */
 import { withStateClassName as e } from "../../internal/class-names.js";
 import { useMessages as t } from "../../intl/provider.js";

package/dist/components/forms/otp-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-field.js","names":[],"sources":["../../../src/components/forms/otp-field.tsx"],"sourcesContent":["import { withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { OTPField as BaseOTPField } from \"@base-ui/react/otp-field\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\ntype OTPRootProps = Omit<BaseOTPField.Root.Props, \"className\" | \"disabled\" | \"name\" | \"readOnly\" | \"required\" | \"style\">;\n\nexport interface OTPFieldProps extends OTPRootProps, FieldAnatomyProps {\n\tinputClassName?: BaseOTPField.Input.Props[\"className\"];\n\tinputStyle?: React.CSSProperties;\n\t/** 第一格之後各輸入格的選用在地化無障礙標籤。 */\n\tgetSlotLabel?: (index: number) => string;\n\tseparator?: React.ReactNode;\n\tseparatorAfter?: readonly number[];\n}\n\n/** 以 Base UI OTP Field 實作的多格驗證碼輸入元件。 */\nexport const OTPField = React.forwardRef<HTMLDivElement, OTPFieldProps>(function OTPField(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tinputStyle,\n\t\tgetSlotLabel,\n\t\tseparator = <span aria-hidden=\"true\">—</span>,\n\t\tseparatorAfter = [],\n\t\tlength,\n\t\t...otpProps\n\t},\n\tref\n) {\n\tconst messages = useMessages();\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseOTPField.Root {...otpProps} ref={ref} className=\"lyds-otp-field\" name={name} disabled={disabled} readOnly={readOnly} required={required} length={length} data-size={size}>\n\t\t\t\t{Array.from({ length }, (_, index) => (\n\t\t\t\t\t<React.Fragment key={index}>\n\t\t\t\t\t\t<BaseOTPField.Input\n\t\t\t\t\t\t\tclassName={withStateClassName<BaseOTPField.Input.State>(\"lyds-otp-field__input\", inputClassName)}\n\t\t\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\t\t\taria-label={index > 0 ? (getSlotLabel?.(index) ?? messages.codeSlotLabel(index + 1, length)) : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{separatorAfter.includes(index + 1) && index < length - 1 ? <span className=\"lyds-otp-field__separator\">{separator}</span> : null}\n\t\t\t\t\t</React.Fragment>\n\t\t\t\t))}\n\t\t\t</BaseOTPField.Root>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":";;;;;;;;AAkBA,IAAa,IAAW,EAAM,WAA0C,SACvE,EACC,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,aACA,mBACA,2BACA,UACA,YACA,eACA,mBACA,eACA,iBACA,eAAY,kBAAC,QAAD;CAAM,eAAY;CAAO,UAAA;AAAO,CAAA,GAC5C,oBAAiB,CAAC,GAClB,WACA,GAAG,KAEJ,GACC;CACD,IAAM,IAAW,EAAY;CAE7B,OACC,kBAAC,GAAD;EACQ;EACM;EACN;EACE;EACC;EACA;EACA;EACJ;EACA;EACK;EACJ;EACY;EACT;EACM;EACQ;EACjB;EACE;EACG;EAEZ,UAAA,kBAAC,EAAa,MAAd;GAAmB,GAAI;GAAe;GAAK,WAAU;GAAuB;GAAgB;GAAoB;GAAoB;GAAkB;GAAQ,aAAW;GACvK,UAAA,MAAM,KAAK,EAAE,UAAO,IAAI,GAAG,MAC3B,kBAAC,EAAM,UAAP,EAAA,UAAA,CACC,kBAAC,EAAa,OAAd;IACC,WAAW,EAA6C,yBAAyB,CAAc;IAC/F,OAAO;IACP,cAAY,IAAQ,IAAK,IAAe,CAAK,KAAK,EAAS,cAAc,IAAQ,GAAG,CAAM,IAAK,KAAA;GAC/F,CAAA,GACA,EAAe,SAAS,IAAQ,CAAC,KAAK,IAAQ,IAAS,IAAI,kBAAC,QAAD;IAAM,WAAU;IAA6B,UAAA;GAAgB,CAAA,IAAI,IAC9G,EAAA,GAPK,CAOL,CAChB;EACiB,CAAA;CACR,CAAA;AAEd,CAAC"}
+{"version":3,"file":"otp-field.js","names":[],"sources":["../../../src/components/forms/otp-field.tsx"],"sourcesContent":["import { withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { OTPField as BaseOTPField } from \"@base-ui/react/otp-field\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\ntype OTPRootProps = Omit<BaseOTPField.Root.Props, \"className\" | \"disabled\" | \"name\" | \"readOnly\" | \"required\" | \"style\">;\n\nexport interface OTPFieldProps extends OTPRootProps, FieldAnatomyProps {\n\tinputClassName?: BaseOTPField.Input.Props[\"className\"];\n\tinputStyle?: React.CSSProperties;\n\t/** 第一格之後各輸入格的選用在地化無障礙標籤。 */\n\tgetSlotLabel?: (index: number) => string;\n\tseparator?: React.ReactNode;\n\tseparatorAfter?: readonly number[];\n}\n\n/** 以 Base UI OTP Field 實作的多格驗證碼輸入元件。 */\nexport const OTPField = React.forwardRef<HTMLDivElement, OTPFieldProps>(function OTPField(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\tinputClassName,\n\t\tinputStyle,\n\t\tgetSlotLabel,\n\t\tseparator = <span aria-hidden=\"true\">—</span>,\n\t\tseparatorAfter = [],\n\t\tlength,\n\t\t...otpProps\n\t},\n\tref\n) {\n\tconst messages = useMessages();\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseOTPField.Root {...otpProps} ref={ref} className=\"lyds-otp-field\" name={name} disabled={disabled} readOnly={readOnly} required={required} length={length} data-size={size}>\n\t\t\t\t{Array.from({ length }, (_, index) => (\n\t\t\t\t\t<React.Fragment key={index}>\n\t\t\t\t\t\t<BaseOTPField.Input\n\t\t\t\t\t\t\tclassName={withStateClassName<BaseOTPField.Input.State>(\"lyds-otp-field__input\", inputClassName)}\n\t\t\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\t\t\taria-label={index > 0 ? (getSlotLabel?.(index) ?? messages.codeSlotLabel(index + 1, length)) : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{separatorAfter.includes(index + 1) && index < length - 1 ? <span className=\"lyds-otp-field__separator\">{separator}</span> : null}\n\t\t\t\t\t</React.Fragment>\n\t\t\t\t))}\n\t\t\t</BaseOTPField.Root>\n\t\t</FieldFrame>\n\t);\n});\n"],"mappings":";;;;;;;;;AAkBA,IAAa,IAAW,EAAM,WAA0C,SACvE,EACC,UACA,gBACA,UACA,YACA,aACA,aACA,aACA,SACA,UAAO,MACP,cACA,UACA,sBACA,aACA,mBACA,2BACA,UACA,YACA,eACA,mBACA,eACA,iBACA,eAAY,kBAAC,QAAD;CAAM,eAAY;CAAO,UAAA;AAAO,CAAA,GAC5C,oBAAiB,CAAC,GAClB,WACA,GAAG,KAEJ,GACC;CACD,IAAM,IAAW,EAAY;CAE7B,OACC,kBAAC,GAAD;EACQ;EACM;EACN;EACE;EACC;EACA;EACA;EACJ;EACA;EACK;EACJ;EACY;EACT;EACM;EACQ;EACjB;EACE;EACG;EAEZ,UAAA,kBAAC,EAAa,MAAd;GAAmB,GAAI;GAAe;GAAK,WAAU;GAAuB;GAAgB;GAAoB;GAAoB;GAAkB;GAAQ,aAAW;GACvK,UAAA,MAAM,KAAK,EAAE,UAAO,IAAI,GAAG,MAC3B,kBAAC,EAAM,UAAP,EAAA,UAAA,CACC,kBAAC,EAAa,OAAd;IACC,WAAW,EAA6C,yBAAyB,CAAc;IAC/F,OAAO;IACP,cAAY,IAAQ,IAAK,IAAe,CAAK,KAAK,EAAS,cAAc,IAAQ,GAAG,CAAM,IAAK,KAAA;GAC/F,CAAA,GACA,EAAe,SAAS,IAAQ,CAAC,KAAK,IAAQ,IAAS,IAAI,kBAAC,QAAD;IAAM,WAAU;IAA6B,UAAA;GAAgB,CAAA,IAAI,IAC9G,EAAA,GAPK,CAOL,CAChB;EACiB,CAAA;CACR,CAAA;AAEd,CAAC"}

package/dist/components/forms/text-field.js

@@ -1,3 +1,4 @@
+"use client";
 /* empty css      */
 import { cx as e, withStateClassName as t } from "../../internal/class-names.js";
 import { useMessages as n } from "../../intl/provider.js";

package/dist/components/forms/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","names":[],"sources":["../../../src/components/forms/text-field.tsx"],"sourcesContent":["import { cx, withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { EyeIcon } from \"@phosphor-icons/react/dist/csr/Eye\";\nimport { EyeSlashIcon } from \"@phosphor-icons/react/dist/csr/EyeSlash\";\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/dist/csr/MagnifyingGlass\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\ntype TextFieldInputProps = Omit<BaseInput.Props, \"className\" | \"disabled\" | \"name\" | \"readOnly\" | \"required\" | \"size\" | \"style\">;\n\nexport interface TextFieldProps extends TextFieldInputProps, FieldAnatomyProps {\n\tinputClassName?: BaseInput.Props[\"className\"];\n\tinputStyle?: React.CSSProperties;\n\t/** 原生 HTML `size` 屬性，並非 Linyao Design System 的視覺尺寸。 */\n\tinputSize?: number;\n\tstartAdornment?: React.ReactNode;\n\tendAdornment?: React.ReactNode;\n\t/** 使用等寬或表格數字排版，不會修改輸入值。 */\n\ttechnical?: boolean;\n}\n\ninterface TextFieldAnatomyProps extends TextFieldProps {\n\tforwardedRef: React.ForwardedRef<HTMLInputElement>;\n\tcountrySelector?: React.ReactNode;\n\tcountrySelectorClassName?: string;\n\tcountrySelectorStyle?: React.CSSProperties;\n}\n\nfunction TextFieldAnatomy({\n\tforwardedRef,\n\tcountrySelector,\n\tcountrySelectorClassName,\n\tcountrySelectorStyle,\n\tlabel,\n\tdescription,\n\terror,\n\tinvalid,\n\tdisabled,\n\treadOnly,\n\trequired,\n\tname,\n\tsize = \"md\",\n\tclassName,\n\tstyle,\n\trequiredIndicator,\n\tvalidate,\n\tvalidationMode,\n\tvalidationDebounceTime,\n\tdirty,\n\ttouched,\n\tactionsRef,\n\tinputClassName,\n\tinputStyle,\n\tinputSize,\n\tstartAdornment,\n\tendAdornment,\n\ttechnical,\n\t\"aria-invalid\": ariaInvalid,\n\t...inputProps\n}: TextFieldAnatomyProps) {\n\tconst control = (\n\t\t<div className={cx(\"lyds-field__control-frame\", countrySelector != null && \"lyds-phone-field__input-frame\")} data-size={size} data-technical={technical || undefined}>\n\t\t\t{startAdornment != null ? <span className=\"lyds-field__adornment lyds-field__adornment--start\">{startAdornment}</span> : null}\n\t\t\t<BaseInput\n\t\t\t\t{...inputProps}\n\t\t\t\tref={forwardedRef}\n\t\t\t\tclassName={withStateClassName<BaseInput.State>(\"lyds-field__input\", inputClassName)}\n\t\t\t\tstyle={inputStyle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tsize={inputSize}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t/>\n\t\t\t{endAdornment != null ? <span className=\"lyds-field__adornment lyds-field__adornment--end\">{endAdornment}</span> : null}\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t{countrySelector != null ? (\n\t\t\t\t<div className=\"lyds-phone-field\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={cx(\"lyds-phone-field__country\", countrySelectorClassName)}\n\t\t\t\t\t\tstyle={countrySelectorStyle}\n\t\t\t\t\t\taria-disabled={disabled || readOnly || undefined}\n\t\t\t\t\t\tinert={disabled || readOnly || undefined}\n\t\t\t\t\t\tdata-invalid={invalid || undefined}\n\t\t\t\t\t>\n\t\t\t\t\t\t{countrySelector}\n\t\t\t\t\t</span>\n\t\t\t\t\t{control}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tcontrol\n\t\t\t)}\n\t\t</FieldFrame>\n\t);\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(props, ref) {\n\treturn <TextFieldAnatomy {...props} forwardedRef={ref} />;\n});\n\nexport interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"className\" | \"size\" | \"style\"> {\n\tsize?: FieldAnatomyProps[\"size\"] | undefined;\n\tinvalid?: boolean | undefined;\n\tclassName?: string | undefined;\n\tstyle?: React.CSSProperties | undefined;\n\tonValueChange?: (value: string, eventDetails: BaseField.Control.ChangeEventDetails) => void;\n}\n\nconst TextareaControl = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function TextareaControl(\n\t{ size = \"md\", invalid, disabled, readOnly, required, name, value, defaultValue, onValueChange, className, style, \"aria-invalid\": ariaInvalid, ...props },\n\tref\n) {\n\treturn (\n\t\t<BaseField.Root className=\"lyds-input-root\" name={name} disabled={disabled} invalid={invalid} data-size={size} data-readonly={readOnly || undefined} data-required={required || undefined}>\n\t\t\t<BaseField.Control\n\t\t\t\tref={ref}\n\t\t\t\trender={<textarea {...props} />}\n\t\t\t\tclassName={cx(\"lyds-textarea\", className)}\n\t\t\t\tstyle={style}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonValueChange={onValueChange}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\tdata-size={size}\n\t\t\t/>\n\t\t</BaseField.Root>\n\t);\n});\n\n/** 以 Base UI 實作的獨立多行輸入控制項。 */\nexport const Textarea = TextareaControl;\n\nexport interface TextViewProps extends Omit<TextareaProps, \"className\" | \"disabled\" | \"invalid\" | \"name\" | \"readOnly\" | \"required\" | \"size\" | \"style\">, FieldAnatomyProps {\n\ttextareaClassName?: string;\n\ttextareaStyle?: React.CSSProperties;\n}\n\n/** 使用與 TextField 相同結構的完整多行欄位。 */\nexport const TextView = React.forwardRef<HTMLTextAreaElement, TextViewProps>(function TextView(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\ttextareaClassName,\n\t\ttextareaStyle,\n\t\tvalue,\n\t\tdefaultValue,\n\t\tonValueChange,\n\t\t\"aria-invalid\": ariaInvalid,\n\t\t...textareaProps\n\t},\n\tref\n) {\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseField.Control\n\t\t\t\tref={ref}\n\t\t\t\trender={<textarea {...textareaProps} />}\n\t\t\t\tclassName={cx(\"lyds-textarea\", textareaClassName)}\n\t\t\t\tstyle={textareaStyle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonValueChange={onValueChange}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\tdata-size={size}\n\t\t\t/>\n\t\t</FieldFrame>\n\t);\n});\n\nfunction SearchIcon() {\n\treturn <MagnifyingGlassIcon aria-hidden=\"true\" className=\"lyds-field__icon\" weight=\"regular\" />;\n}\n\nexport interface SearchFieldProps extends Omit<TextFieldProps, \"startAdornment\" | \"type\"> {\n\tsearchIcon?: React.ReactNode;\n}\n\nexport const SearchField = React.forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField({ searchIcon, autoComplete, ...props }, ref) {\n\treturn <TextField {...props} ref={ref} type=\"search\" autoComplete={autoComplete ?? \"off\"} startAdornment={searchIcon ?? <SearchIcon />} />;\n});\n\nfunction VisibilityIcon({ visible }: { visible: boolean }) {\n\treturn visible ? <EyeIcon aria-hidden=\"true\" className=\"lyds-field__icon\" weight=\"regular\" /> : <EyeSlashIcon aria-hidden=\"true\" className=\"lyds-field__icon\" weight=\"regular\" />;\n}\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"endAdornment\" | \"type\"> {\n\t/**\n\t * Left to the caller. A sign-in form wants `current-password`, a sign-up or change-password\n\t * form wants `new-password`, and guessing either one hands the browser the wrong value.\n\t */\n\tautoComplete?: string;\n\tvisible?: boolean;\n\tdefaultVisible?: boolean;\n\tonVisibilityChange?: (visible: boolean) => void;\n\tshowPasswordLabel?: string;\n\thidePasswordLabel?: string;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n\t{ visible: visibleProp, defaultVisible = false, onVisibilityChange, showPasswordLabel, hidePasswordLabel, ...props },\n\tref\n) {\n\tconst messages = useMessages();\n\tconst [uncontrolledVisible, setUncontrolledVisible] = React.useState(defaultVisible);\n\tconst visible = visibleProp ?? uncontrolledVisible;\n\n\tconst toggleVisibility = () => {\n\t\tconst nextVisible = !visible;\n\t\tif (visibleProp === undefined) {\n\t\t\tsetUncontrolledVisible(nextVisible);\n\t\t}\n\t\tonVisibilityChange?.(nextVisible);\n\t};\n\n\treturn (\n\t\t<TextField\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\ttype={visible ? \"text\" : \"password\"}\n\t\t\tendAdornment={\n\t\t\t\t<button\n\t\t\t\t\tclassName=\"lyds-field__utility-button\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label={visible ? (hidePasswordLabel ?? messages.passwordFieldHide) : (showPasswordLabel ?? messages.passwordFieldShow)}\n\t\t\t\t\taria-pressed={visible}\n\t\t\t\t\tonClick={toggleVisibility}\n\t\t\t\t\tdisabled={props.disabled}\n\t\t\t\t>\n\t\t\t\t\t<VisibilityIcon visible={visible} />\n\t\t\t\t</button>\n\t\t\t}\n\t\t/>\n\t);\n});\n\nexport interface PhoneFieldCountrySelectorState {\n\tdisabled: boolean;\n\treadOnly: boolean;\n\t/** 反映由外部控制的 `invalid` 屬性，不代表 Base UI 驗證器產生的狀態。 */\n\texternallyInvalid: boolean;\n}\n\nexport interface PhoneFieldProps extends Omit<TextFieldProps, \"technical\" | \"type\"> {\n\t/**\n\t * 由使用端提供的國家選擇器或其觸發按鈕。提供此插槽後，\n\t * PhoneField 會使用雙區段結構。\n\t */\n\tcountrySelector?: React.ReactNode | ((state: PhoneFieldCountrySelectorState) => React.ReactNode);\n\tcountrySelectorClassName?: string;\n\tcountrySelectorStyle?: React.CSSProperties;\n}\n\n/** 不預設格式的電話欄位。國家選擇與驗證規則由使用端負責。 */\nexport const PhoneField = React.forwardRef<HTMLInputElement, PhoneFieldProps>(function PhoneField(\n\t{ countrySelector, countrySelectorClassName, countrySelectorStyle, autoComplete, inputMode, ...props },\n\tref\n) {\n\tconst resolvedCountrySelector =\n\t\ttypeof countrySelector === \"function\"\n\t\t\t? countrySelector({\n\t\t\t\t\tdisabled: Boolean(props.disabled),\n\t\t\t\t\treadOnly: Boolean(props.readOnly),\n\t\t\t\t\texternallyInvalid: Boolean(props.invalid)\n\t\t\t\t})\n\t\t\t: countrySelector;\n\tconst hasCountrySelector = resolvedCountrySelector !== null && resolvedCountrySelector !== undefined && resolvedCountrySelector !== false;\n\n\treturn (\n\t\t<TextFieldAnatomy\n\t\t\t{...props}\n\t\t\tforwardedRef={ref}\n\t\t\ttype=\"tel\"\n\t\t\ttechnical\n\t\t\tautoComplete={autoComplete ?? \"tel\"}\n\t\t\tinputMode={inputMode ?? \"tel\"}\n\t\t\t{...(hasCountrySelector ? { countrySelector: resolvedCountrySelector } : {})}\n\t\t\t{...(countrySelectorClassName !== undefined ? { countrySelectorClassName } : {})}\n\t\t\t{...(countrySelectorStyle !== undefined ? { countrySelectorStyle } : {})}\n\t\t/>\n\t);\n});\n"],"mappings":"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"}
+{"version":3,"file":"text-field.js","names":[],"sources":["../../../src/components/forms/text-field.tsx"],"sourcesContent":["import { cx, withStateClassName } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { EyeIcon } from \"@phosphor-icons/react/dist/csr/Eye\";\nimport { EyeSlashIcon } from \"@phosphor-icons/react/dist/csr/EyeSlash\";\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/dist/csr/MagnifyingGlass\";\nimport * as React from \"react\";\nimport \"./forms.css\";\nimport { FieldFrame, type FieldAnatomyProps } from \"./internal\";\ntype TextFieldInputProps = Omit<BaseInput.Props, \"className\" | \"disabled\" | \"name\" | \"readOnly\" | \"required\" | \"size\" | \"style\">;\n\nexport interface TextFieldProps extends TextFieldInputProps, FieldAnatomyProps {\n\tinputClassName?: BaseInput.Props[\"className\"];\n\tinputStyle?: React.CSSProperties;\n\t/** 原生 HTML `size` 屬性，並非 Linyao Design System 的視覺尺寸。 */\n\tinputSize?: number;\n\tstartAdornment?: React.ReactNode;\n\tendAdornment?: React.ReactNode;\n\t/** 使用等寬或表格數字排版，不會修改輸入值。 */\n\ttechnical?: boolean;\n}\n\ninterface TextFieldAnatomyProps extends TextFieldProps {\n\tforwardedRef: React.ForwardedRef<HTMLInputElement>;\n\tcountrySelector?: React.ReactNode;\n\tcountrySelectorClassName?: string;\n\tcountrySelectorStyle?: React.CSSProperties;\n}\n\nfunction TextFieldAnatomy({\n\tforwardedRef,\n\tcountrySelector,\n\tcountrySelectorClassName,\n\tcountrySelectorStyle,\n\tlabel,\n\tdescription,\n\terror,\n\tinvalid,\n\tdisabled,\n\treadOnly,\n\trequired,\n\tname,\n\tsize = \"md\",\n\tclassName,\n\tstyle,\n\trequiredIndicator,\n\tvalidate,\n\tvalidationMode,\n\tvalidationDebounceTime,\n\tdirty,\n\ttouched,\n\tactionsRef,\n\tinputClassName,\n\tinputStyle,\n\tinputSize,\n\tstartAdornment,\n\tendAdornment,\n\ttechnical,\n\t\"aria-invalid\": ariaInvalid,\n\t...inputProps\n}: TextFieldAnatomyProps) {\n\tconst control = (\n\t\t<div className={cx(\"lyds-field__control-frame\", countrySelector != null && \"lyds-phone-field__input-frame\")} data-size={size} data-technical={technical || undefined}>\n\t\t\t{startAdornment != null ? <span className=\"lyds-field__adornment lyds-field__adornment--start\">{startAdornment}</span> : null}\n\t\t\t<BaseInput\n\t\t\t\t{...inputProps}\n\t\t\t\tref={forwardedRef}\n\t\t\t\tclassName={withStateClassName<BaseInput.State>(\"lyds-field__input\", inputClassName)}\n\t\t\t\tstyle={inputStyle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tsize={inputSize}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t/>\n\t\t\t{endAdornment != null ? <span className=\"lyds-field__adornment lyds-field__adornment--end\">{endAdornment}</span> : null}\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t{countrySelector != null ? (\n\t\t\t\t<div className=\"lyds-phone-field\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={cx(\"lyds-phone-field__country\", countrySelectorClassName)}\n\t\t\t\t\t\tstyle={countrySelectorStyle}\n\t\t\t\t\t\taria-disabled={disabled || readOnly || undefined}\n\t\t\t\t\t\tinert={disabled || readOnly || undefined}\n\t\t\t\t\t\tdata-invalid={invalid || undefined}\n\t\t\t\t\t>\n\t\t\t\t\t\t{countrySelector}\n\t\t\t\t\t</span>\n\t\t\t\t\t{control}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tcontrol\n\t\t\t)}\n\t\t</FieldFrame>\n\t);\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(props, ref) {\n\treturn <TextFieldAnatomy {...props} forwardedRef={ref} />;\n});\n\nexport interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"className\" | \"size\" | \"style\"> {\n\tsize?: FieldAnatomyProps[\"size\"] | undefined;\n\tinvalid?: boolean | undefined;\n\tclassName?: string | undefined;\n\tstyle?: React.CSSProperties | undefined;\n\tonValueChange?: (value: string, eventDetails: BaseField.Control.ChangeEventDetails) => void;\n}\n\nconst TextareaControl = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function TextareaControl(\n\t{ size = \"md\", invalid, disabled, readOnly, required, name, value, defaultValue, onValueChange, className, style, \"aria-invalid\": ariaInvalid, ...props },\n\tref\n) {\n\treturn (\n\t\t<BaseField.Root className=\"lyds-input-root\" name={name} disabled={disabled} invalid={invalid} data-size={size} data-readonly={readOnly || undefined} data-required={required || undefined}>\n\t\t\t<BaseField.Control\n\t\t\t\tref={ref}\n\t\t\t\trender={<textarea {...props} />}\n\t\t\t\tclassName={cx(\"lyds-textarea\", className)}\n\t\t\t\tstyle={style}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonValueChange={onValueChange}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\tdata-size={size}\n\t\t\t/>\n\t\t</BaseField.Root>\n\t);\n});\n\n/** 以 Base UI 實作的獨立多行輸入控制項。 */\nexport const Textarea = TextareaControl;\n\nexport interface TextViewProps extends Omit<TextareaProps, \"className\" | \"disabled\" | \"invalid\" | \"name\" | \"readOnly\" | \"required\" | \"size\" | \"style\">, FieldAnatomyProps {\n\ttextareaClassName?: string;\n\ttextareaStyle?: React.CSSProperties;\n}\n\n/** 使用與 TextField 相同結構的完整多行欄位。 */\nexport const TextView = React.forwardRef<HTMLTextAreaElement, TextViewProps>(function TextView(\n\t{\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\tinvalid,\n\t\tdisabled,\n\t\treadOnly,\n\t\trequired,\n\t\tname,\n\t\tsize = \"md\",\n\t\tclassName,\n\t\tstyle,\n\t\trequiredIndicator,\n\t\tvalidate,\n\t\tvalidationMode,\n\t\tvalidationDebounceTime,\n\t\tdirty,\n\t\ttouched,\n\t\tactionsRef,\n\t\ttextareaClassName,\n\t\ttextareaStyle,\n\t\tvalue,\n\t\tdefaultValue,\n\t\tonValueChange,\n\t\t\"aria-invalid\": ariaInvalid,\n\t\t...textareaProps\n\t},\n\tref\n) {\n\treturn (\n\t\t<FieldFrame\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\terror={error}\n\t\t\tinvalid={invalid}\n\t\t\tdisabled={disabled}\n\t\t\treadOnly={readOnly}\n\t\t\trequired={required}\n\t\t\tname={name}\n\t\t\tsize={size}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\trequiredIndicator={requiredIndicator}\n\t\t\tvalidate={validate}\n\t\t\tvalidationMode={validationMode}\n\t\t\tvalidationDebounceTime={validationDebounceTime}\n\t\t\tdirty={dirty}\n\t\t\ttouched={touched}\n\t\t\tactionsRef={actionsRef}\n\t\t>\n\t\t\t<BaseField.Control\n\t\t\t\tref={ref}\n\t\t\t\trender={<textarea {...textareaProps} />}\n\t\t\t\tclassName={cx(\"lyds-textarea\", textareaClassName)}\n\t\t\t\tstyle={textareaStyle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonValueChange={onValueChange}\n\t\t\t\taria-invalid={invalid ? true : ariaInvalid}\n\t\t\t\tdata-size={size}\n\t\t\t/>\n\t\t</FieldFrame>\n\t);\n});\n\nfunction SearchIcon() {\n\treturn <MagnifyingGlassIcon aria-hidden=\"true\" className=\"lyds-field__icon\" weight=\"regular\" />;\n}\n\nexport interface SearchFieldProps extends Omit<TextFieldProps, \"startAdornment\" | \"type\"> {\n\tsearchIcon?: React.ReactNode;\n}\n\nexport const SearchField = React.forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField({ searchIcon, autoComplete, ...props }, ref) {\n\treturn <TextField {...props} ref={ref} type=\"search\" autoComplete={autoComplete ?? \"off\"} startAdornment={searchIcon ?? <SearchIcon />} />;\n});\n\nfunction VisibilityIcon({ visible }: { visible: boolean }) {\n\treturn visible ? <EyeIcon aria-hidden=\"true\" className=\"lyds-field__icon\" weight=\"regular\" /> : <EyeSlashIcon aria-hidden=\"true\" className=\"lyds-field__icon\" weight=\"regular\" />;\n}\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"endAdornment\" | \"type\"> {\n\t/**\n\t * Left to the caller. A sign-in form wants `current-password`, a sign-up or change-password\n\t * form wants `new-password`, and guessing either one hands the browser the wrong value.\n\t */\n\tautoComplete?: string;\n\tvisible?: boolean;\n\tdefaultVisible?: boolean;\n\tonVisibilityChange?: (visible: boolean) => void;\n\tshowPasswordLabel?: string;\n\thidePasswordLabel?: string;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n\t{ visible: visibleProp, defaultVisible = false, onVisibilityChange, showPasswordLabel, hidePasswordLabel, ...props },\n\tref\n) {\n\tconst messages = useMessages();\n\tconst [uncontrolledVisible, setUncontrolledVisible] = React.useState(defaultVisible);\n\tconst visible = visibleProp ?? uncontrolledVisible;\n\n\tconst toggleVisibility = () => {\n\t\tconst nextVisible = !visible;\n\t\tif (visibleProp === undefined) {\n\t\t\tsetUncontrolledVisible(nextVisible);\n\t\t}\n\t\tonVisibilityChange?.(nextVisible);\n\t};\n\n\treturn (\n\t\t<TextField\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\ttype={visible ? \"text\" : \"password\"}\n\t\t\tendAdornment={\n\t\t\t\t<button\n\t\t\t\t\tclassName=\"lyds-field__utility-button\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label={visible ? (hidePasswordLabel ?? messages.passwordFieldHide) : (showPasswordLabel ?? messages.passwordFieldShow)}\n\t\t\t\t\taria-pressed={visible}\n\t\t\t\t\tonClick={toggleVisibility}\n\t\t\t\t\tdisabled={props.disabled}\n\t\t\t\t>\n\t\t\t\t\t<VisibilityIcon visible={visible} />\n\t\t\t\t</button>\n\t\t\t}\n\t\t/>\n\t);\n});\n\nexport interface PhoneFieldCountrySelectorState {\n\tdisabled: boolean;\n\treadOnly: boolean;\n\t/** 反映由外部控制的 `invalid` 屬性，不代表 Base UI 驗證器產生的狀態。 */\n\texternallyInvalid: boolean;\n}\n\nexport interface PhoneFieldProps extends Omit<TextFieldProps, \"technical\" | \"type\"> {\n\t/**\n\t * 由使用端提供的國家選擇器或其觸發按鈕。提供此插槽後，\n\t * PhoneField 會使用雙區段結構。\n\t */\n\tcountrySelector?: React.ReactNode | ((state: PhoneFieldCountrySelectorState) => React.ReactNode);\n\tcountrySelectorClassName?: string;\n\tcountrySelectorStyle?: React.CSSProperties;\n}\n\n/** 不預設格式的電話欄位。國家選擇與驗證規則由使用端負責。 */\nexport const PhoneField = React.forwardRef<HTMLInputElement, PhoneFieldProps>(function PhoneField(\n\t{ countrySelector, countrySelectorClassName, countrySelectorStyle, autoComplete, inputMode, ...props },\n\tref\n) {\n\tconst resolvedCountrySelector =\n\t\ttypeof countrySelector === \"function\"\n\t\t\t? countrySelector({\n\t\t\t\t\tdisabled: Boolean(props.disabled),\n\t\t\t\t\treadOnly: Boolean(props.readOnly),\n\t\t\t\t\texternallyInvalid: Boolean(props.invalid)\n\t\t\t\t})\n\t\t\t: countrySelector;\n\tconst hasCountrySelector = resolvedCountrySelector !== null && resolvedCountrySelector !== undefined && resolvedCountrySelector !== false;\n\n\treturn (\n\t\t<TextFieldAnatomy\n\t\t\t{...props}\n\t\t\tforwardedRef={ref}\n\t\t\ttype=\"tel\"\n\t\t\ttechnical\n\t\t\tautoComplete={autoComplete ?? \"tel\"}\n\t\t\tinputMode={inputMode ?? \"tel\"}\n\t\t\t{...(hasCountrySelector ? { countrySelector: resolvedCountrySelector } : {})}\n\t\t\t{...(countrySelectorClassName !== undefined ? { countrySelectorClassName } : {})}\n\t\t\t{...(countrySelectorStyle !== undefined ? { countrySelectorStyle } : {})}\n\t\t/>\n\t);\n});\n"],"mappings":"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"}

package/dist/components/foundations/avatar.js

@@ -1,13 +1,16 @@
+"use client";
 import { cx as e } from "../../internal/class-names.js";
 import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Avatar as i } from "@base-ui/react/avatar";
 //#region src/components/foundations/avatar.tsx
-function a(e) {
-	return e.trim().split(/\s+/u).slice(0, 2).map((e) => Array.from(e)[0] ?? "").join("").toUpperCase();
+var a = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+function o(e) {
+	let t = e.trim();
+	return t.length === 0 ? "" : !/\s/u.test(t) && a.test(t) ? Array.from(t).slice(-2).join("") : t.split(/\s+/u).slice(0, 2).map((e) => Array.from(e)[0] ?? "").join("").toUpperCase();
 }
-var o = t.forwardRef(function({ src: t, alt: o, fallback: s, fallbackDelay: c, size: l = "md", variant: u = "neutral", status: d, statusLabel: f, imageProps: p, onLoadingStatusChange: m, className: h, style: g, ..._ }, v) {
-	let y = f ? `${o}, ${f}` : o;
+var s = t.forwardRef(function({ src: t, alt: a, fallback: s, fallbackDelay: c, size: l = "md", variant: u = "neutral", status: d, statusLabel: f, imageProps: p, onLoadingStatusChange: m, className: h, style: g, ..._ }, v) {
+	let y = f ? `${a}, ${f}` : a;
 	return /* @__PURE__ */ r(i.Root, {
 		..._,
 		ref: v,
@@ -28,7 +31,7 @@ var o = t.forwardRef(function({ src: t, alt: o, fallback: s, fallbackDelay: c, s
 			/* @__PURE__ */ n(i.Fallback, {
 				className: "lyds-avatar__fallback",
 				delay: c,
-				children: s ?? a(o)
+				children: s ?? o(a)
 			}),
 			d ? /* @__PURE__ */ n("span", {
 				className: "lyds-avatar__status",
@@ -38,8 +41,8 @@ var o = t.forwardRef(function({ src: t, alt: o, fallback: s, fallbackDelay: c, s
 		]
 	});
 });
-o.displayName = "Avatar";
+s.displayName = "Avatar";
 //#endregion
-export { o as Avatar };
+export { s as Avatar };
 
 //# sourceMappingURL=avatar.js.map

package/dist/components/foundations/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../../src/components/foundations/avatar.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport { Avatar as BaseAvatar, type AvatarImageProps, type AvatarRootProps, type ImageLoadingStatus } from \"@base-ui/react/avatar\";\nimport * as React from \"react\";\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type AvatarVariant = \"neutral\" | \"accent\";\nexport type AvatarStatus = \"online\" | \"away\" | \"busy\" | \"offline\";\n\nexport interface AvatarBaseProps extends Omit<AvatarRootProps, \"children\" | \"className\" | \"style\"> {\n\tsrc?: string;\n\talt: string;\n\tfallback?: React.ReactNode;\n\tfallbackDelay?: number;\n\tsize?: AvatarSize;\n\tvariant?: AvatarVariant;\n\timageProps?: Omit<AvatarImageProps, \"alt\" | \"className\" | \"onLoadingStatusChange\" | \"src\"> & { className?: string };\n\tonLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n}\n\nexport type AvatarProps = AvatarBaseProps & ({ status?: never; statusLabel?: never } | { status: AvatarStatus; statusLabel: string });\n\nfunction getInitials(label: string): string {\n\treturn label\n\t\t.trim()\n\t\t.split(/\\s+/u)\n\t\t.slice(0, 2)\n\t\t.map(part => Array.from(part)[0] ?? \"\")\n\t\t.join(\"\")\n\t\t.toUpperCase();\n}\n\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n\t{ src, alt, fallback, fallbackDelay, size = \"md\", variant = \"neutral\", status, statusLabel, imageProps, onLoadingStatusChange, className, style, ...props },\n\tref\n) {\n\tconst accessibleLabel = statusLabel ? `${alt}, ${statusLabel}` : alt;\n\n\treturn (\n\t\t<BaseAvatar.Root\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\taria-label={props[\"aria-label\"] ?? accessibleLabel}\n\t\t\trole={props.role ?? \"img\"}\n\t\t\tdata-size={size}\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cx(\"lyds-avatar\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{src ? <BaseAvatar.Image {...imageProps} src={src} alt=\"\" className={cx(\"lyds-avatar__image\", imageProps?.className)} onLoadingStatusChange={onLoadingStatusChange} /> : null}\n\t\t\t<BaseAvatar.Fallback className=\"lyds-avatar__fallback\" delay={fallbackDelay}>\n\t\t\t\t{fallback ?? getInitials(alt)}\n\t\t\t</BaseAvatar.Fallback>\n\t\t\t{status ? <span className=\"lyds-avatar__status\" data-status={status} aria-hidden=\"true\" /> : null}\n\t\t</BaseAvatar.Root>\n\t);\n});\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;;;AAsBA,SAAS,EAAY,GAAuB;CAC3C,OAAO,EACL,KAAK,CAAC,CACN,MAAM,MAAM,CAAC,CACb,MAAM,GAAG,CAAC,CAAC,CACX,KAAI,MAAQ,MAAM,KAAK,CAAI,CAAC,CAAC,MAAM,EAAE,CAAC,CACtC,KAAK,EAAE,CAAC,CACR,YAAY;AACf;AAEA,IAAa,IAAS,EAAM,WAAyC,SACpE,EAAE,QAAK,QAAK,aAAU,kBAAe,UAAO,MAAM,aAAU,WAAW,WAAQ,gBAAa,eAAY,0BAAuB,cAAW,UAAO,GAAG,KACpJ,GACC;CACD,IAAM,IAAkB,IAAc,GAAG,EAAI,IAAI,MAAgB;CAEjE,OACC,kBAAC,EAAW,MAAZ;EACC,GAAI;EACC;EACL,cAAY,EAAM,iBAAiB;EACnC,MAAM,EAAM,QAAQ;EACpB,aAAW;EACX,gBAAc;EACd,WAAW,EAAG,eAAe,CAAS;EAC/B;EARR,UAAA;GAUE,IAAM,kBAAC,EAAW,OAAZ;IAAkB,GAAI;IAAiB;IAAK,KAAI;IAAG,WAAW,EAAG,sBAAsB,GAAY,SAAS;IAA0B;GAAwB,CAAA,IAAI;GACzK,kBAAC,EAAW,UAAZ;IAAqB,WAAU;IAAwB,OAAO;IAC5D,UAAA,KAAY,EAAY,CAAG;GACR,CAAA;GACpB,IAAS,kBAAC,QAAD;IAAM,WAAU;IAAsB,eAAa;IAAQ,eAAY;GAAQ,CAAA,IAAI;EAC7E;;AAEnB,CAAC;AAED,EAAO,cAAc"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../../src/components/foundations/avatar.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport { Avatar as BaseAvatar, type AvatarImageProps, type AvatarRootProps, type ImageLoadingStatus } from \"@base-ui/react/avatar\";\nimport * as React from \"react\";\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type AvatarVariant = \"neutral\" | \"accent\";\nexport type AvatarStatus = \"online\" | \"away\" | \"busy\" | \"offline\";\n\nexport interface AvatarBaseProps extends Omit<AvatarRootProps, \"children\" | \"className\" | \"style\"> {\n\tsrc?: string;\n\talt: string;\n\tfallback?: React.ReactNode;\n\tfallbackDelay?: number;\n\tsize?: AvatarSize;\n\tvariant?: AvatarVariant;\n\timageProps?: Omit<AvatarImageProps, \"alt\" | \"className\" | \"onLoadingStatusChange\" | \"src\"> & { className?: string };\n\tonLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n}\n\nexport type AvatarProps = AvatarBaseProps & ({ status?: never; statusLabel?: never } | { status: AvatarStatus; statusLabel: string });\n\n/** Han, Hiragana, Katakana and Hangul — the scripts that write a personal name without spaces. */\nconst UNSPACED_NAME_SCRIPT = /[\\p{Script=Han}\\p{Script=Hiragana}\\p{Script=Katakana}\\p{Script=Hangul}]/u;\n\n/**\n * A spaced name reduces to the first letter of its first two words. A CJK name has no spaces to\n * split on, so taking the leading character would leave only the family name — 「王小明」would\n * render as 「王」. These scripts put the given name last, so the trailing characters are the\n * part that identifies the person, and two of them is what fits the smallest avatar.\n */\nfunction getInitials(label: string): string {\n\tconst trimmed = label.trim();\n\tif (trimmed.length === 0) return \"\";\n\n\tif (!/\\s/u.test(trimmed) && UNSPACED_NAME_SCRIPT.test(trimmed)) {\n\t\treturn Array.from(trimmed).slice(-2).join(\"\");\n\t}\n\n\treturn trimmed\n\t\t.split(/\\s+/u)\n\t\t.slice(0, 2)\n\t\t.map(part => Array.from(part)[0] ?? \"\")\n\t\t.join(\"\")\n\t\t.toUpperCase();\n}\n\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n\t{ src, alt, fallback, fallbackDelay, size = \"md\", variant = \"neutral\", status, statusLabel, imageProps, onLoadingStatusChange, className, style, ...props },\n\tref\n) {\n\tconst accessibleLabel = statusLabel ? `${alt}, ${statusLabel}` : alt;\n\n\treturn (\n\t\t<BaseAvatar.Root\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\taria-label={props[\"aria-label\"] ?? accessibleLabel}\n\t\t\trole={props.role ?? \"img\"}\n\t\t\tdata-size={size}\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cx(\"lyds-avatar\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{src ? <BaseAvatar.Image {...imageProps} src={src} alt=\"\" className={cx(\"lyds-avatar__image\", imageProps?.className)} onLoadingStatusChange={onLoadingStatusChange} /> : null}\n\t\t\t<BaseAvatar.Fallback className=\"lyds-avatar__fallback\" delay={fallbackDelay}>\n\t\t\t\t{fallback ?? getInitials(alt)}\n\t\t\t</BaseAvatar.Fallback>\n\t\t\t{status ? <span className=\"lyds-avatar__status\" data-status={status} aria-hidden=\"true\" /> : null}\n\t\t</BaseAvatar.Root>\n\t);\n});\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;;;;AAuBA,IAAM,IAAuB;AAQ7B,SAAS,EAAY,GAAuB;CAC3C,IAAM,IAAU,EAAM,KAAK;CAO3B,OANI,EAAQ,WAAW,IAAU,KAE7B,CAAC,MAAM,KAAK,CAAO,KAAK,EAAqB,KAAK,CAAO,IACrD,MAAM,KAAK,CAAO,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,IAGtC,EACL,MAAM,MAAM,CAAC,CACb,MAAM,GAAG,CAAC,CAAC,CACX,KAAI,MAAQ,MAAM,KAAK,CAAI,CAAC,CAAC,MAAM,EAAE,CAAC,CACtC,KAAK,EAAE,CAAC,CACR,YAAY;AACf;AAEA,IAAa,IAAS,EAAM,WAAyC,SACpE,EAAE,QAAK,QAAK,aAAU,kBAAe,UAAO,MAAM,aAAU,WAAW,WAAQ,gBAAa,eAAY,0BAAuB,cAAW,UAAO,GAAG,KACpJ,GACC;CACD,IAAM,IAAkB,IAAc,GAAG,EAAI,IAAI,MAAgB;CAEjE,OACC,kBAAC,EAAW,MAAZ;EACC,GAAI;EACC;EACL,cAAY,EAAM,iBAAiB;EACnC,MAAM,EAAM,QAAQ;EACpB,aAAW;EACX,gBAAc;EACd,WAAW,EAAG,eAAe,CAAS;EAC/B;EARR,UAAA;GAUE,IAAM,kBAAC,EAAW,OAAZ;IAAkB,GAAI;IAAiB;IAAK,KAAI;IAAG,WAAW,EAAG,sBAAsB,GAAY,SAAS;IAA0B;GAAwB,CAAA,IAAI;GACzK,kBAAC,EAAW,UAAZ;IAAqB,WAAU;IAAwB,OAAO;IAC5D,UAAA,KAAY,EAAY,CAAG;GACR,CAAA;GACpB,IAAS,kBAAC,QAAD;IAAM,WAAU;IAAsB,eAAa;IAAQ,eAAY;GAAQ,CAAA,IAAI;EAC7E;;AAEnB,CAAC;AAED,EAAO,cAAc"}

package/dist/components/foundations/badge.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx as e } from "../../internal/class-names.js";
 import * as t from "react";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";

package/dist/components/foundations/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/foundations/badge.tsx"],"sourcesContent":["import { type ComponentRenderProp, cx, type ElementProps } from \"@/internal\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nexport type BadgeVariant = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\nexport type BadgeSize = \"sm\" | \"md\";\n\nexport interface BadgeState extends Record<string, unknown> {\n\tsize: BadgeSize;\n\tvariant: BadgeVariant;\n}\n\nexport interface BadgeProps extends Omit<ElementProps<\"span\">, \"children\"> {\n\tchildren: React.ReactNode;\n\tvariant?: BadgeVariant;\n\tsize?: BadgeSize;\n\trender?: ComponentRenderProp<BadgeState>;\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge({ children, variant = \"neutral\", size = \"md\", render, className, ...props }, ref) {\n\treturn useRender<BadgeState, HTMLSpanElement>({\n\t\tdefaultTagName: \"span\",\n\t\tref,\n\t\trender,\n\t\tstate: { size, variant },\n\t\tprops: {\n\t\t\t...props,\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t<span className=\"lyds-badge__indicator\" aria-hidden=\"true\" />\n\t\t\t\t\t<span className=\"lyds-badge__label\">{children}</span>\n\t\t\t\t</>\n\t\t\t),\n\t\t\tclassName: cx(\"lyds-badge\", className)\n\t\t}\n\t});\n});\n\nBadge.displayName = \"Badge\";\n"],"mappings":";;;;;AAkBA,IAAa,IAAQ,EAAM,WAAwC,SAAe,EAAE,aAAU,aAAU,WAAW,UAAO,MAAM,WAAQ,cAAW,GAAG,KAAS,GAAK;CACnK,OAAO,EAAuC;EAC7C,gBAAgB;EAChB;EACA;EACA,OAAO;GAAE;GAAM;EAAQ;EACvB,OAAO;GACN,GAAG;GACH,UACC,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAwB,eAAY;GAAQ,CAAA,GAC5D,kBAAC,QAAD;IAAM,WAAU;IAAqB;GAAe,CAAA,CACnD,EAAA,CAAA;GAEH,WAAW,EAAG,cAAc,CAAS;EACtC;CACD,CAAC;AACF,CAAC;AAED,EAAM,cAAc"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/foundations/badge.tsx"],"sourcesContent":["import { type ComponentRenderProp, cx, type ElementProps } from \"@/internal\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nexport type BadgeVariant = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\nexport type BadgeSize = \"sm\" | \"md\";\n\nexport interface BadgeState extends Record<string, unknown> {\n\tsize: BadgeSize;\n\tvariant: BadgeVariant;\n}\n\nexport interface BadgeProps extends Omit<ElementProps<\"span\">, \"children\"> {\n\tchildren: React.ReactNode;\n\tvariant?: BadgeVariant;\n\tsize?: BadgeSize;\n\trender?: ComponentRenderProp<BadgeState>;\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge({ children, variant = \"neutral\", size = \"md\", render, className, ...props }, ref) {\n\treturn useRender<BadgeState, HTMLSpanElement>({\n\t\tdefaultTagName: \"span\",\n\t\tref,\n\t\trender,\n\t\tstate: { size, variant },\n\t\tprops: {\n\t\t\t...props,\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t<span className=\"lyds-badge__indicator\" aria-hidden=\"true\" />\n\t\t\t\t\t<span className=\"lyds-badge__label\">{children}</span>\n\t\t\t\t</>\n\t\t\t),\n\t\t\tclassName: cx(\"lyds-badge\", className)\n\t\t}\n\t});\n});\n\nBadge.displayName = \"Badge\";\n"],"mappings":";;;;;;AAkBA,IAAa,IAAQ,EAAM,WAAwC,SAAe,EAAE,aAAU,aAAU,WAAW,UAAO,MAAM,WAAQ,cAAW,GAAG,KAAS,GAAK;CACnK,OAAO,EAAuC;EAC7C,gBAAgB;EAChB;EACA;EACA,OAAO;GAAE;GAAM;EAAQ;EACvB,OAAO;GACN,GAAG;GACH,UACC,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAwB,eAAY;GAAQ,CAAA,GAC5D,kBAAC,QAAD;IAAM,WAAU;IAAqB;GAAe,CAAA,CACnD,EAAA,CAAA;GAEH,WAAW,EAAG,cAAc,CAAS;EACtC;CACD,CAAC;AACF,CAAC;AAED,EAAM,cAAc"}

package/dist/components/foundations/button.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx as e } from "../../internal/class-names.js";
 import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";

package/dist/components/foundations/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/foundations/button.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport { Button as BaseButton, type ButtonProps as BaseButtonProps } from \"@base-ui/react/button\";\nimport * as React from \"react\";\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"neutral\" | \"quiet\" | \"danger\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends Omit<BaseButtonProps, \"children\" | \"className\" | \"style\"> {\n\tchildren: React.ReactNode;\n\tvariant?: ButtonVariant;\n\tsize?: ButtonSize;\n\tloading?: boolean;\n\tloadingIndicator?: React.ReactNode;\n\t/** 裝飾性的前置圖示。請使用 @phosphor-icons/react；按鈕文字仍是無障礙名稱。 */\n\tstartIcon?: React.ReactNode;\n\t/** 裝飾性的後置圖示。請使用 @phosphor-icons/react；按鈕文字仍是無障礙名稱。 */\n\tendIcon?: React.ReactNode;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n}\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(function Button(\n\t{ children, variant = \"primary\", size = \"md\", loading = false, loadingIndicator, startIcon, endIcon, className, disabled = false, focusableWhenDisabled, type, nativeButton, style, ...props },\n\tref\n) {\n\tconst isDisabled = disabled || loading;\n\n\treturn (\n\t\t<BaseButton\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\tnativeButton={nativeButton}\n\t\t\ttype={type ?? (nativeButton === false ? undefined : \"button\")}\n\t\t\tdisabled={isDisabled}\n\t\t\tfocusableWhenDisabled={focusableWhenDisabled ?? loading}\n\t\t\taria-busy={loading || undefined}\n\t\t\tdata-loading={loading ? \"\" : undefined}\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t\tclassName={cx(\"lyds-button\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{loading ? (\n\t\t\t\t<span className=\"lyds-button__spinner\" aria-hidden=\"true\">\n\t\t\t\t\t{loadingIndicator}\n\t\t\t\t</span>\n\t\t\t) : startIcon ? (\n\t\t\t\t<span className=\"lyds-button__icon\" aria-hidden=\"true\">\n\t\t\t\t\t{startIcon}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span className=\"lyds-button__label\">{children}</span>\n\t\t\t{!loading && endIcon ? (\n\t\t\t\t<span className=\"lyds-button__icon\" aria-hidden=\"true\">\n\t\t\t\t\t{endIcon}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</BaseButton>\n\t);\n});\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;AAoBA,IAAa,IAAS,EAAM,WAAqC,SAChE,EAAE,aAAU,aAAU,WAAW,UAAO,MAAM,aAAU,IAAO,qBAAkB,cAAW,YAAS,cAAW,cAAW,IAAO,0BAAuB,SAAM,iBAAc,UAAO,GAAG,KACvL,GACC;CACD,IAAM,IAAa,KAAY;CAE/B,OACC,kBAAC,GAAD;EACC,GAAI;EACC;EACS;EACd,MAAM,MAAS,MAAiB,KAAQ,KAAA,IAAY;EACpD,UAAU;EACV,uBAAuB,KAAyB;EAChD,aAAW,KAAW,KAAA;EACtB,gBAAc,IAAU,KAAK,KAAA;EAC7B,gBAAc;EACd,aAAW;EACX,WAAW,EAAG,eAAe,CAAS;EAC/B;EAZR,UAAA;GAcE,IACA,kBAAC,QAAD;IAAM,WAAU;IAAuB,eAAY;IACjD,UAAA;GACI,CAAA,IACH,IACH,kBAAC,QAAD;IAAM,WAAU;IAAoB,eAAY;IAC9C,UAAA;GACI,CAAA,IACH;GACJ,kBAAC,QAAD;IAAM,WAAU;IAAsB;GAAe,CAAA;GACpD,CAAC,KAAW,IACZ,kBAAC,QAAD;IAAM,WAAU;IAAoB,eAAY;IAC9C,UAAA;GACI,CAAA,IACH;EACO;;AAEd,CAAC;AAED,EAAO,cAAc"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/foundations/button.tsx"],"sourcesContent":["import { cx } from \"@/internal\";\nimport { Button as BaseButton, type ButtonProps as BaseButtonProps } from \"@base-ui/react/button\";\nimport * as React from \"react\";\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"neutral\" | \"quiet\" | \"danger\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends Omit<BaseButtonProps, \"children\" | \"className\" | \"style\"> {\n\tchildren: React.ReactNode;\n\tvariant?: ButtonVariant;\n\tsize?: ButtonSize;\n\tloading?: boolean;\n\tloadingIndicator?: React.ReactNode;\n\t/** 裝飾性的前置圖示。請使用 @phosphor-icons/react；按鈕文字仍是無障礙名稱。 */\n\tstartIcon?: React.ReactNode;\n\t/** 裝飾性的後置圖示。請使用 @phosphor-icons/react；按鈕文字仍是無障礙名稱。 */\n\tendIcon?: React.ReactNode;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n}\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(function Button(\n\t{ children, variant = \"primary\", size = \"md\", loading = false, loadingIndicator, startIcon, endIcon, className, disabled = false, focusableWhenDisabled, type, nativeButton, style, ...props },\n\tref\n) {\n\tconst isDisabled = disabled || loading;\n\n\treturn (\n\t\t<BaseButton\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\tnativeButton={nativeButton}\n\t\t\ttype={type ?? (nativeButton === false ? undefined : \"button\")}\n\t\t\tdisabled={isDisabled}\n\t\t\tfocusableWhenDisabled={focusableWhenDisabled ?? loading}\n\t\t\taria-busy={loading || undefined}\n\t\t\tdata-loading={loading ? \"\" : undefined}\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t\tclassName={cx(\"lyds-button\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{loading ? (\n\t\t\t\t<span className=\"lyds-button__spinner\" aria-hidden=\"true\">\n\t\t\t\t\t{loadingIndicator}\n\t\t\t\t</span>\n\t\t\t) : startIcon ? (\n\t\t\t\t<span className=\"lyds-button__icon\" aria-hidden=\"true\">\n\t\t\t\t\t{startIcon}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span className=\"lyds-button__label\">{children}</span>\n\t\t\t{!loading && endIcon ? (\n\t\t\t\t<span className=\"lyds-button__icon\" aria-hidden=\"true\">\n\t\t\t\t\t{endIcon}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</BaseButton>\n\t);\n});\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;AAoBA,IAAa,IAAS,EAAM,WAAqC,SAChE,EAAE,aAAU,aAAU,WAAW,UAAO,MAAM,aAAU,IAAO,qBAAkB,cAAW,YAAS,cAAW,cAAW,IAAO,0BAAuB,SAAM,iBAAc,UAAO,GAAG,KACvL,GACC;CACD,IAAM,IAAa,KAAY;CAE/B,OACC,kBAAC,GAAD;EACC,GAAI;EACC;EACS;EACd,MAAM,MAAS,MAAiB,KAAQ,KAAA,IAAY;EACpD,UAAU;EACV,uBAAuB,KAAyB;EAChD,aAAW,KAAW,KAAA;EACtB,gBAAc,IAAU,KAAK,KAAA;EAC7B,gBAAc;EACd,aAAW;EACX,WAAW,EAAG,eAAe,CAAS;EAC/B;EAZR,UAAA;GAcE,IACA,kBAAC,QAAD;IAAM,WAAU;IAAuB,eAAY;IACjD,UAAA;GACI,CAAA,IACH,IACH,kBAAC,QAAD;IAAM,WAAU;IAAoB,eAAY;IAC9C,UAAA;GACI,CAAA,IACH;GACJ,kBAAC,QAAD;IAAM,WAAU;IAAsB;GAAe,CAAA;GACpD,CAAC,KAAW,IACZ,kBAAC,QAAD;IAAM,WAAU;IAAoB,eAAY;IAC9C,UAAA;GACI,CAAA,IACH;EACO;;AAEd,CAAC;AAED,EAAO,cAAc"}

package/dist/components/foundations/card.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx as e } from "../../internal/class-names.js";
 import * as t from "react";
 import { jsx as n } from "react/jsx-runtime";

package/dist/components/foundations/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/foundations/card.tsx"],"sourcesContent":["import { type ComponentRenderProp, cx, type ElementProps } from \"@/internal\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nimport type { HeadingLevel } from \"./section-heading\";\nexport type CardVariant = \"material\" | \"elevated\" | \"inset\" | \"outline\" | \"cloud\";\nexport type CardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface CardState extends Record<string, unknown> {\n\tsize: CardSize;\n\tvariant: CardVariant;\n}\n\nexport interface CardProps extends Omit<ElementProps<\"div\">, \"children\"> {\n\tchildren: React.ReactNode;\n\tvariant?: CardVariant;\n\tsize?: CardSize;\n\trender?: ComponentRenderProp<CardState>;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card({ children, variant = \"material\", size = \"md\", render, className, ...props }, ref) {\n\treturn useRender<CardState, HTMLDivElement>({\n\t\tdefaultTagName: \"div\",\n\t\tref,\n\t\trender,\n\t\tstate: { size, variant },\n\t\tprops: {\n\t\t\t...props,\n\t\t\tchildren,\n\t\t\tclassName: cx(\"lyds-card\", className)\n\t\t}\n\t});\n});\n\nCard.displayName = \"Card\";\n\nexport type CloudBoxProps = Omit<CardProps, \"variant\">;\n\nexport const CloudBox = React.forwardRef<HTMLDivElement, CloudBoxProps>(function CloudBox(props, ref) {\n\treturn <Card {...props} ref={ref} variant=\"cloud\" />;\n});\n\nCloudBox.displayName = \"CloudBox\";\n\ntype CardSlotProps<ElementType extends React.ElementType> = Omit<ElementProps<ElementType>, \"children\"> & {\n\tchildren: React.ReactNode;\n\trender?: ComponentRenderProp<Record<string, unknown>>;\n};\n\nfunction useCardSlot<Element extends HTMLElement>(\n\tdefaultTagName: keyof React.JSX.IntrinsicElements,\n\tslotName: string,\n\tchildren: React.ReactNode,\n\trender: ComponentRenderProp<Record<string, unknown>> | undefined,\n\tclassName: string | undefined,\n\tprops: Record<string, unknown>,\n\tref: React.ForwardedRef<Element>\n) {\n\treturn useRender<Record<string, unknown>, Element>({\n\t\tdefaultTagName,\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tchildren,\n\t\t\tclassName: cx(`lyds-card__${slotName}`, className)\n\t\t}\n\t});\n}\n\nexport type CardHeaderProps = CardSlotProps<\"div\">;\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader({ children, render, className, ...props }, ref) {\n\treturn useCardSlot(\"div\", \"header\", children, render, className, props, ref);\n});\n\nexport type CardTitleProps = CardSlotProps<\"h3\"> & {\n\t/** Heading level for the surrounding document outline. Cards nest, so this is rarely h3. */\n\tlevel?: HeadingLevel;\n};\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle({ children, level = 3, render, className, ...props }, ref) {\n\treturn useCardSlot(`h${level}` as const, \"title\", children, render, className, props, ref);\n});\n\nexport type CardDescriptionProps = CardSlotProps<\"p\">;\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(function CardDescription({ children, render, className, ...props }, ref) {\n\treturn useCardSlot(\"p\", \"description\", children, render, className, props, ref);\n});\n\nexport type CardBodyProps = CardSlotProps<\"div\">;\nexport const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(function CardBody({ children, render, className, ...props }, ref) {\n\treturn useCardSlot(\"div\", \"body\", children, render, className, props, ref);\n});\n\nexport type CardFooterProps = CardSlotProps<\"div\">;\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter({ children, render, className, ...props }, ref) {\n\treturn useCardSlot(\"div\", \"footer\", children, render, className, props, ref);\n});\n"],"mappings":";;;;;AAmBA,IAAa,IAAO,EAAM,WAAsC,SAAc,EAAE,aAAU,aAAU,YAAY,UAAO,MAAM,WAAQ,cAAW,GAAG,KAAS,GAAK;CAChK,OAAO,EAAqC;EAC3C,gBAAgB;EAChB;EACA;EACA,OAAO;GAAE;GAAM;EAAQ;EACvB,OAAO;GACN,GAAG;GACH;GACA,WAAW,EAAG,aAAa,CAAS;EACrC;CACD,CAAC;AACF,CAAC;AAED,EAAK,cAAc;AAInB,IAAa,IAAW,EAAM,WAA0C,SAAkB,GAAO,GAAK;CACrG,OAAO,kBAAC,GAAD;EAAM,GAAI;EAAY;EAAK,SAAQ;CAAS,CAAA;AACpD,CAAC;AAED,EAAS,cAAc;AAOvB,SAAS,EACR,GACA,GACA,GACA,GACA,GACA,GACA,GACC;CACD,OAAO,EAA4C;EAClD;EACA;EACA;EACA,OAAO;GACN,GAAG;GACH;GACA,WAAW,EAAG,cAAc,KAAY,CAAS;EAClD;CACD,CAAC;AACF;AAGA,IAAa,IAAa,EAAM,WAA4C,SAAoB,EAAE,aAAU,WAAQ,cAAW,GAAG,KAAS,GAAK;CAC/I,OAAO,EAAY,OAAO,UAAU,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC5E,CAAC,GAOY,IAAY,EAAM,WAA+C,SAAmB,EAAE,aAAU,WAAQ,GAAG,WAAQ,cAAW,GAAG,KAAS,GAAK;CAC3J,OAAO,EAAY,IAAI,KAAkB,SAAS,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC1F,CAAC,GAGY,IAAkB,EAAM,WAAuD,SAAyB,EAAE,aAAU,WAAQ,cAAW,GAAG,KAAS,GAAK;CACpK,OAAO,EAAY,KAAK,eAAe,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC/E,CAAC,GAGY,IAAW,EAAM,WAA0C,SAAkB,EAAE,aAAU,WAAQ,cAAW,GAAG,KAAS,GAAK;CACzI,OAAO,EAAY,OAAO,QAAQ,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC1E,CAAC,GAGY,IAAa,EAAM,WAA4C,SAAoB,EAAE,aAAU,WAAQ,cAAW,GAAG,KAAS,GAAK;CAC/I,OAAO,EAAY,OAAO,UAAU,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC5E,CAAC"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/foundations/card.tsx"],"sourcesContent":["import { type ComponentRenderProp, cx, type ElementProps } from \"@/internal\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nimport type { HeadingLevel } from \"./section-heading\";\nexport type CardVariant = \"material\" | \"elevated\" | \"inset\" | \"outline\" | \"cloud\";\nexport type CardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface CardState extends Record<string, unknown> {\n\tsize: CardSize;\n\tvariant: CardVariant;\n}\n\nexport interface CardProps extends Omit<ElementProps<\"div\">, \"children\"> {\n\tchildren: React.ReactNode;\n\tvariant?: CardVariant;\n\tsize?: CardSize;\n\trender?: ComponentRenderProp<CardState>;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card({ children, variant = \"material\", size = \"md\", render, className, ...props }, ref) {\n\treturn useRender<CardState, HTMLDivElement>({\n\t\tdefaultTagName: \"div\",\n\t\tref,\n\t\trender,\n\t\tstate: { size, variant },\n\t\tprops: {\n\t\t\t...props,\n\t\t\tchildren,\n\t\t\tclassName: cx(\"lyds-card\", className)\n\t\t}\n\t});\n});\n\nCard.displayName = \"Card\";\n\nexport type CloudBoxProps = Omit<CardProps, \"variant\">;\n\nexport const CloudBox = React.forwardRef<HTMLDivElement, CloudBoxProps>(function CloudBox(props, ref) {\n\treturn <Card {...props} ref={ref} variant=\"cloud\" />;\n});\n\nCloudBox.displayName = \"CloudBox\";\n\ntype CardSlotProps<ElementType extends React.ElementType> = Omit<ElementProps<ElementType>, \"children\"> & {\n\tchildren: React.ReactNode;\n\trender?: ComponentRenderProp<Record<string, unknown>>;\n};\n\nfunction useCardSlot<Element extends HTMLElement>(\n\tdefaultTagName: keyof React.JSX.IntrinsicElements,\n\tslotName: string,\n\tchildren: React.ReactNode,\n\trender: ComponentRenderProp<Record<string, unknown>> | undefined,\n\tclassName: string | undefined,\n\tprops: Record<string, unknown>,\n\tref: React.ForwardedRef<Element>\n) {\n\treturn useRender<Record<string, unknown>, Element>({\n\t\tdefaultTagName,\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tchildren,\n\t\t\tclassName: cx(`lyds-card__${slotName}`, className)\n\t\t}\n\t});\n}\n\nexport type CardHeaderProps = CardSlotProps<\"div\">;\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader({ children, render, className, ...props }, ref) {\n\treturn useCardSlot(\"div\", \"header\", children, render, className, props, ref);\n});\n\nexport type CardTitleProps = CardSlotProps<\"h3\"> & {\n\t/** Heading level for the surrounding document outline. Cards nest, so this is rarely h3. */\n\tlevel?: HeadingLevel;\n};\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle({ children, level = 3, render, className, ...props }, ref) {\n\treturn useCardSlot(`h${level}` as const, \"title\", children, render, className, props, ref);\n});\n\nexport type CardDescriptionProps = CardSlotProps<\"p\">;\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(function CardDescription({ children, render, className, ...props }, ref) {\n\treturn useCardSlot(\"p\", \"description\", children, render, className, props, ref);\n});\n\nexport type CardBodyProps = CardSlotProps<\"div\">;\nexport const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(function CardBody({ children, render, className, ...props }, ref) {\n\treturn useCardSlot(\"div\", \"body\", children, render, className, props, ref);\n});\n\nexport type CardFooterProps = CardSlotProps<\"div\">;\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter({ children, render, className, ...props }, ref) {\n\treturn useCardSlot(\"div\", \"footer\", children, render, className, props, ref);\n});\n"],"mappings":";;;;;;AAmBA,IAAa,IAAO,EAAM,WAAsC,SAAc,EAAE,aAAU,aAAU,YAAY,UAAO,MAAM,WAAQ,cAAW,GAAG,KAAS,GAAK;CAChK,OAAO,EAAqC;EAC3C,gBAAgB;EAChB;EACA;EACA,OAAO;GAAE;GAAM;EAAQ;EACvB,OAAO;GACN,GAAG;GACH;GACA,WAAW,EAAG,aAAa,CAAS;EACrC;CACD,CAAC;AACF,CAAC;AAED,EAAK,cAAc;AAInB,IAAa,IAAW,EAAM,WAA0C,SAAkB,GAAO,GAAK;CACrG,OAAO,kBAAC,GAAD;EAAM,GAAI;EAAY;EAAK,SAAQ;CAAS,CAAA;AACpD,CAAC;AAED,EAAS,cAAc;AAOvB,SAAS,EACR,GACA,GACA,GACA,GACA,GACA,GACA,GACC;CACD,OAAO,EAA4C;EAClD;EACA;EACA;EACA,OAAO;GACN,GAAG;GACH;GACA,WAAW,EAAG,cAAc,KAAY,CAAS;EAClD;CACD,CAAC;AACF;AAGA,IAAa,IAAa,EAAM,WAA4C,SAAoB,EAAE,aAAU,WAAQ,cAAW,GAAG,KAAS,GAAK;CAC/I,OAAO,EAAY,OAAO,UAAU,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC5E,CAAC,GAOY,IAAY,EAAM,WAA+C,SAAmB,EAAE,aAAU,WAAQ,GAAG,WAAQ,cAAW,GAAG,KAAS,GAAK;CAC3J,OAAO,EAAY,IAAI,KAAkB,SAAS,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC1F,CAAC,GAGY,IAAkB,EAAM,WAAuD,SAAyB,EAAE,aAAU,WAAQ,cAAW,GAAG,KAAS,GAAK;CACpK,OAAO,EAAY,KAAK,eAAe,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC/E,CAAC,GAGY,IAAW,EAAM,WAA0C,SAAkB,EAAE,aAAU,WAAQ,cAAW,GAAG,KAAS,GAAK;CACzI,OAAO,EAAY,OAAO,QAAQ,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC1E,CAAC,GAGY,IAAa,EAAM,WAA4C,SAAoB,EAAE,aAAU,WAAQ,cAAW,GAAG,KAAS,GAAK;CAC/I,OAAO,EAAY,OAAO,UAAU,GAAU,GAAQ,GAAW,GAAO,CAAG;AAC5E,CAAC"}

package/dist/components/foundations/icon-button.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx as e } from "../../internal/class-names.js";
 import { Button as t } from "./button.js";
 import * as n from "react";

package/dist/components/foundations/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../../src/components/foundations/icon-button.tsx"],"sourcesContent":["import { type AccessibleName, cx } from \"@/internal\";\nimport * as React from \"react\";\nimport { Button, type ButtonProps } from \"./button\";\ntype IconButtonBaseProps = Omit<ButtonProps, \"aria-label\" | \"aria-labelledby\" | \"children\" | \"endIcon\" | \"startIcon\"> & {\n\tchildren: React.ReactNode;\n};\n\nexport type IconButtonProps = IconButtonBaseProps & AccessibleName;\n\nexport const IconButton = React.forwardRef<HTMLElement, IconButtonProps>(function IconButton({ children, className, loading = false, ...props }, ref) {\n\treturn (\n\t\t<Button {...props} ref={ref} className={cx(\"lyds-icon-button\", className)} loading={loading}>\n\t\t\t{loading ? null : children}\n\t\t</Button>\n\t);\n});\n\nIconButton.displayName = \"IconButton\";\n"],"mappings":";;;;;AASA,IAAa,IAAa,EAAM,WAAyC,SAAoB,EAAE,aAAU,cAAW,aAAU,IAAO,GAAG,KAAS,GAAK;CACrJ,OACC,kBAAC,GAAD;EAAQ,GAAI;EAAY;EAAK,WAAW,EAAG,oBAAoB,CAAS;EAAY;EAClF,UAAA,IAAU,OAAO;CACX,CAAA;AAEV,CAAC;AAED,EAAW,cAAc"}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../../src/components/foundations/icon-button.tsx"],"sourcesContent":["import { type AccessibleName, cx } from \"@/internal\";\nimport * as React from \"react\";\nimport { Button, type ButtonProps } from \"./button\";\ntype IconButtonBaseProps = Omit<ButtonProps, \"aria-label\" | \"aria-labelledby\" | \"children\" | \"endIcon\" | \"startIcon\"> & {\n\tchildren: React.ReactNode;\n};\n\nexport type IconButtonProps = IconButtonBaseProps & AccessibleName;\n\nexport const IconButton = React.forwardRef<HTMLElement, IconButtonProps>(function IconButton({ children, className, loading = false, ...props }, ref) {\n\treturn (\n\t\t<Button {...props} ref={ref} className={cx(\"lyds-icon-button\", className)} loading={loading}>\n\t\t\t{loading ? null : children}\n\t\t</Button>\n\t);\n});\n\nIconButton.displayName = \"IconButton\";\n"],"mappings":";;;;;;AASA,IAAa,IAAa,EAAM,WAAyC,SAAoB,EAAE,aAAU,cAAW,aAAU,IAAO,GAAG,KAAS,GAAK;CACrJ,OACC,kBAAC,GAAD;EAAQ,GAAI;EAAY;EAAK,WAAW,EAAG,oBAAoB,CAAS;EAAY;EAClF,UAAA,IAAU,OAAO;CACX,CAAA;AAEV,CAAC;AAED,EAAW,cAAc"}

package/dist/components/foundations/link.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx as e } from "../../internal/class-names.js";
 import { useMessages as t } from "../../intl/provider.js";
 import * as n from "react";

package/dist/components/foundations/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":[],"sources":["../../../src/components/foundations/link.tsx"],"sourcesContent":["import { type ComponentRenderProp, cx, type ElementProps } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nexport type LinkVariant = \"default\" | \"accent\" | \"subtle\";\nexport type LinkSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface LinkState extends Record<string, unknown> {\n\tdisabled: boolean;\n\texternal: boolean;\n\tsize: LinkSize;\n\tvariant: LinkVariant;\n}\n\nexport interface LinkProps extends Omit<ElementProps<\"a\">, \"children\"> {\n\tchildren: React.ReactNode;\n\tvariant?: LinkVariant;\n\tsize?: LinkSize;\n\tdisabled?: boolean;\n\texternal?: boolean;\n\trender?: ComponentRenderProp<LinkState>;\n}\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n\t{ children, variant = \"default\", size = \"md\", disabled = false, external = false, render, className, href, target, rel, onClick, ...props },\n\tref\n) {\n\tconst messages = useMessages();\n\tconst state: LinkState = { disabled, external, size, variant };\n\tconst secureRel = target === \"_blank\" && !rel ? \"noopener noreferrer\" : rel;\n\t// The warning belongs to what the link actually does, not to the decorative flag: a link is\n\t// only unexpected when it really opens a new window.\n\tconst opensNewWindow = !disabled && target === \"_blank\";\n\n\treturn useRender<LinkState, HTMLAnchorElement>({\n\t\tdefaultTagName: \"a\",\n\t\tref,\n\t\t// 多型 `render` 函式或路由元件可能重新加入導覽行為。\n\t\t// 停用時改用無互動的原生連結，確保元件契約成立。\n\t\trender: disabled ? undefined : render,\n\t\tstate,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tchildren: opensNewWindow ? (\n\t\t\t\t<>\n\t\t\t\t\t{children}\n\t\t\t\t\t<span className=\"lyds-sr-only\">{messages.linkOpensInNewWindow}</span>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t),\n\t\t\thref: disabled ? undefined : href,\n\t\t\ttarget,\n\t\t\trel: secureRel,\n\t\t\t\"aria-disabled\": disabled || undefined,\n\t\t\t\"data-external\": external || undefined,\n\t\t\ttabIndex: disabled ? -1 : props.tabIndex,\n\t\t\tclassName: cx(\"lyds-link\", className),\n\t\t\tonClick: (event: React.MouseEvent<HTMLAnchorElement>) => {\n\t\t\t\tif (disabled) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonClick?.(event);\n\t\t\t}\n\t\t}\n\t});\n});\n\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;AAuBA,IAAa,IAAO,EAAM,WAAyC,SAClE,EAAE,aAAU,aAAU,WAAW,UAAO,MAAM,cAAW,IAAO,cAAW,IAAO,WAAQ,cAAW,SAAM,WAAQ,QAAK,YAAS,GAAG,KACpI,GACC;CACD,IAAM,IAAW,EAAY,GACvB,IAAmB;EAAE;EAAU;EAAU;EAAM;CAAQ,GACvD,IAAY,MAAW,YAAY,CAAC,IAAM,wBAAwB,GAGlE,IAAiB,CAAC,KAAY,MAAW;CAE/C,OAAO,EAAwC;EAC9C,gBAAgB;EAChB;EAGA,QAAQ,IAAW,KAAA,IAAY;EAC/B;EACA,OAAO;GACN,GAAG;GACH,UAAU,IACT,kBAAA,GAAA,EAAA,UAAA,CACE,GACD,kBAAC,QAAD;IAAM,WAAU;IAAgB,UAAA,EAAS;GAA2B,CAAA,CACnE,EAAA,CAAA,IAEF;GAED,MAAM,IAAW,KAAA,IAAY;GAC7B;GACA,KAAK;GACL,iBAAiB,KAAY,KAAA;GAC7B,iBAAiB,KAAY,KAAA;GAC7B,UAAU,IAAW,KAAK,EAAM;GAChC,WAAW,EAAG,aAAa,CAAS;GACpC,UAAU,MAA+C;IACxD,IAAI,GAAU;KAEb,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;KACtB;IACD;IAEA,IAAU,CAAK;GAChB;EACD;CACD,CAAC;AACF,CAAC;AAED,EAAK,cAAc"}
+{"version":3,"file":"link.js","names":[],"sources":["../../../src/components/foundations/link.tsx"],"sourcesContent":["import { type ComponentRenderProp, cx, type ElementProps } from \"@/internal\";\nimport { useMessages } from \"@/intl\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nexport type LinkVariant = \"default\" | \"accent\" | \"subtle\";\nexport type LinkSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface LinkState extends Record<string, unknown> {\n\tdisabled: boolean;\n\texternal: boolean;\n\tsize: LinkSize;\n\tvariant: LinkVariant;\n}\n\nexport interface LinkProps extends Omit<ElementProps<\"a\">, \"children\"> {\n\tchildren: React.ReactNode;\n\tvariant?: LinkVariant;\n\tsize?: LinkSize;\n\tdisabled?: boolean;\n\texternal?: boolean;\n\trender?: ComponentRenderProp<LinkState>;\n}\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n\t{ children, variant = \"default\", size = \"md\", disabled = false, external = false, render, className, href, target, rel, onClick, ...props },\n\tref\n) {\n\tconst messages = useMessages();\n\tconst state: LinkState = { disabled, external, size, variant };\n\tconst secureRel = target === \"_blank\" && !rel ? \"noopener noreferrer\" : rel;\n\t// The warning belongs to what the link actually does, not to the decorative flag: a link is\n\t// only unexpected when it really opens a new window.\n\tconst opensNewWindow = !disabled && target === \"_blank\";\n\n\treturn useRender<LinkState, HTMLAnchorElement>({\n\t\tdefaultTagName: \"a\",\n\t\tref,\n\t\t// 多型 `render` 函式或路由元件可能重新加入導覽行為。\n\t\t// 停用時改用無互動的原生連結，確保元件契約成立。\n\t\trender: disabled ? undefined : render,\n\t\tstate,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tchildren: opensNewWindow ? (\n\t\t\t\t<>\n\t\t\t\t\t{children}\n\t\t\t\t\t<span className=\"lyds-sr-only\">{messages.linkOpensInNewWindow}</span>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t),\n\t\t\thref: disabled ? undefined : href,\n\t\t\ttarget,\n\t\t\trel: secureRel,\n\t\t\t\"aria-disabled\": disabled || undefined,\n\t\t\t\"data-external\": external || undefined,\n\t\t\ttabIndex: disabled ? -1 : props.tabIndex,\n\t\t\tclassName: cx(\"lyds-link\", className),\n\t\t\tonClick: (event: React.MouseEvent<HTMLAnchorElement>) => {\n\t\t\t\tif (disabled) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonClick?.(event);\n\t\t\t}\n\t\t}\n\t});\n});\n\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAuBA,IAAa,IAAO,EAAM,WAAyC,SAClE,EAAE,aAAU,aAAU,WAAW,UAAO,MAAM,cAAW,IAAO,cAAW,IAAO,WAAQ,cAAW,SAAM,WAAQ,QAAK,YAAS,GAAG,KACpI,GACC;CACD,IAAM,IAAW,EAAY,GACvB,IAAmB;EAAE;EAAU;EAAU;EAAM;CAAQ,GACvD,IAAY,MAAW,YAAY,CAAC,IAAM,wBAAwB,GAGlE,IAAiB,CAAC,KAAY,MAAW;CAE/C,OAAO,EAAwC;EAC9C,gBAAgB;EAChB;EAGA,QAAQ,IAAW,KAAA,IAAY;EAC/B;EACA,OAAO;GACN,GAAG;GACH,UAAU,IACT,kBAAA,GAAA,EAAA,UAAA,CACE,GACD,kBAAC,QAAD;IAAM,WAAU;IAAgB,UAAA,EAAS;GAA2B,CAAA,CACnE,EAAA,CAAA,IAEF;GAED,MAAM,IAAW,KAAA,IAAY;GAC7B;GACA,KAAK;GACL,iBAAiB,KAAY,KAAA;GAC7B,iBAAiB,KAAY,KAAA;GAC7B,UAAU,IAAW,KAAK,EAAM;GAChC,WAAW,EAAG,aAAa,CAAS;GACpC,UAAU,MAA+C;IACxD,IAAI,GAAU;KAEb,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;KACtB;IACD;IAEA,IAAU,CAAK;GAChB;EACD;CACD,CAAC;AACF,CAAC;AAED,EAAK,cAAc"}

package/dist/components/foundations/list-cell.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx as e } from "../../internal/class-names.js";
 import * as t from "react";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";