@devslab/dds-solid 0.21.2 → 0.22.0

package/dist/server.js

@@ -1,8 +1,14 @@
+import { c as Button, d as IconButton, f as Radio, h as createControllableSignal, l as Checkbox, m as Switch, p as Select, u as Field } from "./assets/calendar-view-1RO2mtf1.js";
+import { t as classes } from "./assets/utils-Ou0UJRlO.js";
+import { DatePicker } from "./date-picker.server.js";
+import { Input, InputGroup } from "./input.server.js";
+import { Combobox } from "./combobox.server.js";
+import { SelectPicker } from "./select-picker.server.js";
+import { DropdownMenu } from "./dropdown-menu.server.js";
+import { Popover } from "./popover.server.js";
+import { Calendar } from "./calendar.server.js";
 import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps, useContext } from "solid-js";
 import { Dynamic, Portal, createComponent, escape, isServer, memo, mergeProps as mergeProps$1, ssr, ssrAttribute, ssrElement, ssrHydrationKey } from "solid-js/web";
-import { useCheckbox } from "@ark-ui/solid/checkbox";
-import { useSwitch } from "@ark-ui/solid/switch";
-import { Field as Field$1 } from "@ark-ui/solid/field";
 import { Dialog as Dialog$1, useDialog } from "@ark-ui/solid/dialog";
 import { usePresenceContext } from "@ark-ui/solid/presence";
 import { FocusTrap } from "@zag-js/focus-trap";
@@ -14,273 +20,18 @@ import { LocaleProvider } from "@ark-ui/solid/locale";
 import { Toast, Toaster, createToaster } from "@ark-ui/solid/toast";
 import { space } from "@devslab/dds-tokens";
 import { Tooltip as Tooltip$1, useTooltip } from "@ark-ui/solid/tooltip";
-import { DatePicker as DatePicker$1, parseDate } from "@ark-ui/solid/date-picker";
-//#region src/controllable.ts
-function createControllableSignal(options) {
-	const [internal, setInternal] = createSignal(options.defaultValue);
-	const value = () => options.value() ?? internal();
-	const setInternalValue = setInternal;
-	const setValue = (next) => {
-		const resolved = typeof next === "function" ? next(value()) : next;
-		if (options.value() === void 0) setInternalValue(() => resolved);
-		options.onChange?.(resolved);
-		return resolved;
-	};
-	return [value, setValue];
-}
-//#endregion
-//#region src/utils.ts
-function classes(...values) {
-	return values.filter(Boolean).join(" ");
-}
-function describedBy(...ids) {
-	return ids.filter(Boolean).join(" ") || void 0;
-}
-//#endregion
-//#region src/controls.tsx
-var _tmpl$$6 = ["<span", " class=\"dds-spinner\" aria-hidden=\"true\"></span>"];
-var _tmpl$2$4 = ["<span", " aria-hidden=\"true\"> *</span>"];
-var _tmpl$3$2 = [
-	"<span",
-	">",
-	"</span>"
-];
-var _tmpl$4$1 = [
-	"<label",
-	">",
-	"<span>",
-	"</span></label>"
-];
-function Button(props) {
-	const [local, rest] = splitProps(props, [
-		"class",
-		"tone",
-		"size",
-		"loading",
-		"disabled",
-		"type",
-		"children"
-	]);
-	return ssrElement("button", mergeProps$1(rest, {
-		get type() {
-			return local.type ?? "button";
-		},
-		get ["class"]() {
-			return classes("dds-btn", `dds-btn--${local.tone ?? "primary"}`, local.size !== "md" && local.size ? `dds-btn--${local.size}` : void 0, local.class);
-		},
-		get disabled() {
-			return local.disabled || local.loading;
-		},
-		get ["aria-busy"]() {
-			return local.loading ? "true" : void 0;
-		}
-	}), () => [
-		"<!--$-->",
-		local.loading && _tmpl$$6[0] + ssrHydrationKey() + _tmpl$$6[1],
-		"<!--/-->",
-		"<!--$-->",
-		escape(local.children),
-		"<!--/-->"
-	], true);
-}
-function IconButton(props) {
-	const [local, rest] = splitProps(props, [
-		"class",
-		"tone",
-		"size",
-		"loading",
-		"disabled",
-		"type",
-		"children"
-	]);
-	return ssrElement("button", mergeProps$1(rest, {
-		get type() {
-			return local.type ?? "button";
-		},
-		get ["class"]() {
-			return classes("dds-iconbtn", local.tone && local.tone !== "ghost" ? `dds-iconbtn--${local.tone}` : void 0, local.size !== "md" && local.size ? `dds-iconbtn--${local.size}` : void 0, local.class);
-		},
-		get disabled() {
-			return local.disabled || local.loading;
-		},
-		get ["aria-busy"]() {
-			return local.loading ? "true" : void 0;
-		}
-	}), () => local.loading ? _tmpl$$6[0] + ssrHydrationKey() + _tmpl$$6[1] : escape(local.children), true);
-}
-function Field(props) {
-	const generated = createUniqueId();
-	const id = () => props.id ?? `dds-field-${generated}`;
-	const helpId = () => props.helpText ? `${id()}-help` : void 0;
-	const errorId = () => props.error ? `${id()}-error` : void 0;
-	const control = () => ({
-		id: id(),
-		"aria-describedby": describedBy(helpId(), errorId()),
-		"aria-invalid": props.error ? "true" : void 0,
-		"aria-required": props.required ? "true" : void 0
-	});
-	return createComponent(Field$1.Root, {
-		get id() {
-			return id();
-		},
-		get required() {
-			return props.required ?? false;
-		},
-		get invalid() {
-			return Boolean(props.error);
-		},
-		get ids() {
-			return {
-				control: `${id()}-root`,
-				helperText: `${id()}-help`,
-				errorText: `${id()}-error`
-			};
-		},
-		get ["class"]() {
-			return classes("dds-field", props.error ? "dds-field--error" : void 0, props.class);
-		},
-		get children() {
-			return [
-				createComponent(Field$1.Label, {
-					"class": "dds-field__label",
-					get ["for"]() {
-						return id();
-					},
-					get children() {
-						return [props.label, props.required && ssr(_tmpl$2$4, ssrHydrationKey())];
-					}
-				}),
-				typeof props.children === "function" ? props.children(control()) : props.children,
-				props.helpText && createComponent(Field$1.HelperText, {
-					"class": "dds-field__help",
-					get children() {
-						return props.helpText;
-					}
-				}),
-				props.error && createComponent(Field$1.ErrorText, {
-					"class": "dds-field__error",
-					role: "alert",
-					get children() {
-						return props.error;
-					}
-				})
-			];
-		}
-	});
-}
-function Select(props) {
-	const [local, rest] = splitProps(props, [
-		"class",
-		"invalid",
-		"children"
-	]);
-	return ssr(_tmpl$3$2, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-select", local.class), true), false), ssrElement("select", mergeProps$1(rest, {
-		"class": "dds-select__input",
-		get ["aria-invalid"]() {
-			return local.invalid ? "true" : void 0;
-		}
-	}), () => escape(local.children), false));
-}
-function Checkable(props) {
-	const [local, rest] = splitProps(props, [
-		"checked",
-		"defaultChecked",
-		"onCheckedChange",
-		"label",
-		"class",
-		"inputClass",
-		"type",
-		"role"
-	]);
-	const [checked, setChecked] = createControllableSignal({
-		value: () => local.checked,
-		defaultValue: local.defaultChecked ?? false,
-		onChange: local.onCheckedChange
-	});
-	return ssr(_tmpl$4$1, ssrHydrationKey() + ssrAttribute("class", escape(classes(local.role === "switch" ? "dds-switch" : "dds-check", local.class), true), false), ssrElement("input", mergeProps$1(rest, {
-		get type() {
-			return local.type;
-		},
-		get role() {
-			return local.role;
-		},
-		get ["class"]() {
-			return classes(local.role === "switch" ? "dds-switch__input" : "dds-check__input", local.inputClass);
-		},
-		get checked() {
-			return checked();
-		}
-	}), void 0, false), escape(local.label));
-}
-var Checkbox = (props) => createComponent(ArkCheckable, mergeProps$1(props, { kind: "checkbox" }));
-var Radio = (props) => createComponent(Checkable, mergeProps$1(props, { type: "radio" }));
-var Switch = (props) => createComponent(ArkCheckable, mergeProps$1(props, { kind: "switch" }));
-function ArkCheckable(props) {
-	const generated = createUniqueId();
-	const [local, rest] = splitProps(props, [
-		"checked",
-		"defaultChecked",
-		"onCheckedChange",
-		"label",
-		"class",
-		"inputClass",
-		"kind",
-		"id",
-		"onClick",
-		"onFocusIn",
-		"onFocusOut",
-		"style"
-	]);
-	const options = () => ({
-		id: `dds-check-${generated}`,
-		ids: { hiddenInput: local.id ?? `dds-check-${generated}-input` },
-		checked: local.checked,
-		defaultChecked: local.defaultChecked,
-		onCheckedChange: (details) => local.onCheckedChange?.(details.checked === true),
-		disabled: rest.disabled,
-		required: rest.required,
-		readOnly: rest.readonly,
-		name: rest.name,
-		form: rest.form,
-		value: String(rest.value ?? "on")
-	});
-	const api = local.kind === "switch" ? useSwitch(options) : useCheckbox(options);
-	const inputClass = () => local.kind === "switch" ? "dds-switch__input" : "dds-check__input";
-	const rootProps = () => {
-		const [, attributes] = splitProps(api().getRootProps(), ["onClick"]);
-		return attributes;
-	};
-	return ssrElement("label", mergeProps$1(rootProps, { get ["class"]() {
-		return classes(local.kind === "switch" ? "dds-switch" : "dds-check", local.class);
-	} }), () => [ssrElement("input", mergeProps$1(() => api().getHiddenInputProps(), rest, {
-		type: "checkbox",
-		get role() {
-			return local.kind === "switch" ? "switch" : void 0;
-		},
-		get ["class"]() {
-			return classes(inputClass(), local.inputClass);
-		},
-		get style() {
-			return local.style ?? {};
-		},
-		get checked() {
-			return api().checked;
-		}
-	}), void 0, false), ssrElement("span", api().getLabelProps(), () => escape(local.label), false)], true);
-}
-//#endregion
 //#region src/console-shell.tsx
-var _tmpl$$5 = [
+var _tmpl$$4 = [
 	"<dl",
 	" class=\"dds-console-rail__context\">",
 	"</dl>"
 ];
-var _tmpl$2$3 = [
+var _tmpl$2$2 = [
 	"<div",
 	" class=\"dds-console-rail__foot\">",
 	"</div>"
 ];
-var _tmpl$3$1 = [
+var _tmpl$3 = [
 	"<p",
 	" class=\"dds-console-page-eyebrow\">",
 	"</p>"
@@ -371,7 +122,7 @@ function ConsoleShell(props) {
 			return memo(() => !!props.context)() && props.context.length > 0;
 		},
 		get children() {
-			return ssr(_tmpl$$5, ssrHydrationKey(), escape(createComponent(For, {
+			return ssr(_tmpl$$4, ssrHydrationKey(), escape(createComponent(For, {
 				get each() {
 					return props.context;
 				},
@@ -403,14 +154,14 @@ function ConsoleShell(props) {
 			return props.foot;
 		},
 		get children() {
-			return ssr(_tmpl$2$3, ssrHydrationKey(), escape(props.foot));
+			return ssr(_tmpl$2$2, ssrHydrationKey(), escape(props.foot));
 		}
 	})), escape(createComponent(Show, {
 		get when() {
 			return props.header.eyebrow;
 		},
 		get children() {
-			return ssr(_tmpl$3$1, ssrHydrationKey(), escape(props.header.eyebrow));
+			return ssr(_tmpl$3, ssrHydrationKey(), escape(props.header.eyebrow));
 		}
 	})), escape(props.header.title), escape(createComponent(Show, {
 		get when() {
@@ -423,7 +174,7 @@ function ConsoleShell(props) {
 }
 //#endregion
 //#region src/dialog.tsx
-var _tmpl$$4 = [
+var _tmpl$$3 = [
 	"<div",
 	">",
 	"</div>"
@@ -547,7 +298,7 @@ function Dialog(props) {
 									return props.children;
 								},
 								get actions() {
-									return props.actions && ssr(_tmpl$$4, ssrHydrationKey() + ssrAttribute("class", escape(cls("dds-dialog__actions", props.actionsClass), true), false), escape(props.actions));
+									return props.actions && ssr(_tmpl$$3, ssrHydrationKey() + ssrAttribute("class", escape(cls("dds-dialog__actions", props.actionsClass), true), false), escape(props.actions));
 								}
 							};
 							return props.frame ? props.frame(parts) : [
@@ -646,8 +397,8 @@ function RadioGroup(props) {
 }
 //#endregion
 //#region src/icon.tsx
-var _tmpl$$3 = ["<g>", "</g>"];
-var _tmpl$2$2 = [
+var _tmpl$$2 = ["<g>", "</g>"];
+var _tmpl$2$1 = [
 	"<title",
 	">",
 	"</title>"
@@ -693,20 +444,20 @@ function Icon(props) {
 		}
 	}), () => [
 		"<!--$-->",
-		local.label && ssr(_tmpl$2$2, ssrHydrationKey(), escape(local.label)),
+		local.label && ssr(_tmpl$2$1, ssrHydrationKey(), escape(local.label)),
 		"<!--/-->",
-		ssr(_tmpl$$3, icon().body)
+		ssr(_tmpl$$2, icon().body)
 	], true);
 }
 //#endregion
 //#region src/status-pill.tsx
-var _tmpl$$2 = [
+var _tmpl$$1 = [
 	"<code",
 	" data-status=\"",
 	"\">",
 	"</code>"
 ];
-var _tmpl$2$1 = [
+var _tmpl$2 = [
 	"<span",
 	" data-status=\"",
 	"\"",
@@ -734,12 +485,12 @@ function createStatusPill(config) {
 				return known() || !open.has(props.domain);
 			},
 			get fallback() {
-				return ssr(_tmpl$$2, ssrHydrationKey(), `${escape(props.domain, true)}.${escape(props.value, true)}`, escape(props.value));
+				return ssr(_tmpl$$1, ssrHydrationKey(), `${escape(props.domain, true)}.${escape(props.value, true)}`, escape(props.value));
 			},
 			get children() {
 				return (() => {
 					const value = resolved();
-					return ssr(_tmpl$2$1, ssrHydrationKey() + ssrAttribute("class", value.tone === "neutral" ? "dds-badge" : `dds-badge dds-badge--${escape(value.tone, true)}`, false), `${escape(props.domain, true)}.${escape(props.value, true)}`, ssrAttribute("data-tone", escape(value.tone, true), false), escape(value.text));
+					return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", value.tone === "neutral" ? "dds-badge" : `dds-badge dds-badge--${escape(value.tone, true)}`, false), `${escape(props.domain, true)}.${escape(props.value, true)}`, ssrAttribute("data-tone", escape(value.tone, true), false), escape(value.text));
 				})();
 			}
 		});
@@ -970,7 +721,7 @@ function useToast() {
 }
 //#endregion
 //#region src/tooltip.tsx
-var _tmpl$$1 = [
+var _tmpl$ = [
 	"<span",
 	"><!--$-->",
 	"<!--/--><!--$-->",
@@ -997,7 +748,7 @@ function Tooltip(props) {
 		lazyMount: false,
 		unmountOnExit: false,
 		get children() {
-			return ssr(_tmpl$$1, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-tooltip", props.class), true), false), escape(createComponent(Tooltip$1.Trigger, { asChild: (merge) => {
+			return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-tooltip", props.class), true), false), escape(createComponent(Tooltip$1.Trigger, { asChild: (merge) => {
 				const [, attributes] = splitProps(merge(), ["onFocusIn", "onFocusOut"]);
 				return props.children({
 					...attributes,
@@ -1019,174 +770,6 @@ function Tooltip(props) {
 	});
 }
 //#endregion
-//#region src/date-picker.tsx
-var _tmpl$ = ["<svg", " width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><rect x=\"3.5\" y=\"5.5\" width=\"17\" height=\"15\" rx=\"2\"></rect><path d=\"M7.5 3v5M16.5 3v5M3.5 10.5h17\"></path></svg>"];
-var _tmpl$2 = [
-	"<svg",
-	" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path",
-	"></path></svg>"
-];
-var _tmpl$3 = [
-	"<div",
-	" class=\"dds-date-picker-footer\"><!--$-->",
-	"<!--/--><!--$-->",
-	"<!--/--></div>"
-];
-function CalendarIcon() {
-	return ssr(_tmpl$, ssrHydrationKey());
-}
-function Chevron(props) {
-	return ssr(_tmpl$2, ssrHydrationKey(), ssrAttribute("d", props.next ? "m9 5 7 7-7 7" : "m15 5-7 7 7 7", false));
-}
-function DatePicker(props) {
-	return createComponent(Field, {
-		get label() {
-			return props.label;
-		},
-		children: (control) => createComponent(DatePicker$1.Root, {
-			get locale() {
-				return props.locale ?? "ko-KR";
-			},
-			get timeZone() {
-				return props.timeZone ?? "Asia/Seoul";
-			},
-			get disabled() {
-				return props.disabled;
-			},
-			get min() {
-				return memo(() => !!props.min)() ? parseDate(props.min) : void 0;
-			},
-			get max() {
-				return memo(() => !!props.max)() ? parseDate(props.max) : void 0;
-			},
-			startOfWeek: 0,
-			minView: "day",
-			maxView: "day",
-			fixedWeeks: true,
-			translations: {
-				dayCell: (state) => `${state.valueText} 선택`,
-				clearTrigger: "선택 날짜 지우기"
-			},
-			get value() {
-				return memo(() => !!props.value)() ? [parseDate(props.value)] : [];
-			},
-			format: (v) => v.toString(),
-			onValueChange: (details) => props.onChange(details.valueAsString[0] || ""),
-			positioning: {
-				placement: "bottom-start",
-				gutter: 8
-			},
-			get children() {
-				return [createComponent(DatePicker$1.Control, {
-					"class": "dds-date-picker-control",
-					get children() {
-						return [createComponent(DatePicker$1.Input, mergeProps$1(control, {
-							placeholder: "YYYY-MM-DD",
-							autocomplete: "off"
-						})), createComponent(DatePicker$1.Trigger, {
-							"class": "dds-btn dds-btn--secondary",
-							get ["aria-label"]() {
-								return `${props.label} 달력 열기`;
-							},
-							get children() {
-								return createComponent(CalendarIcon, {});
-							}
-						})];
-					}
-				}), createComponent(Portal, { get children() {
-					return createComponent(DatePicker$1.Positioner, {
-						"class": "dds-date-picker-positioner",
-						get children() {
-							return createComponent(DatePicker$1.Content, {
-								"class": "dds-date-picker-content",
-								get ["aria-label"]() {
-									return `${props.label} 날짜 선택`;
-								},
-								get children() {
-									return createComponent(DatePicker$1.View, {
-										view: "day",
-										get children() {
-											return createComponent(DatePicker$1.Context, { children: (picker) => [
-												createComponent(DatePicker$1.ViewControl, {
-													"class": "dds-date-picker-header",
-													get children() {
-														return [
-															createComponent(DatePicker$1.PrevTrigger, {
-																"class": "dds-btn dds-btn--secondary",
-																"aria-label": "이전 달",
-																get children() {
-																	return createComponent(Chevron, {});
-																}
-															}),
-															createComponent(DatePicker$1.RangeText, {}),
-															createComponent(DatePicker$1.NextTrigger, {
-																"class": "dds-btn dds-btn--secondary",
-																"aria-label": "다음 달",
-																get children() {
-																	return createComponent(Chevron, { next: true });
-																}
-															})
-														];
-													}
-												}),
-												createComponent(DatePicker$1.Table, {
-													"class": "dds-date-picker-table",
-													get children() {
-														return [createComponent(DatePicker$1.TableHead, { get children() {
-															return createComponent(DatePicker$1.TableRow, { get children() {
-																return createComponent(For, {
-																	get each() {
-																		return picker().weekDays;
-																	},
-																	children: (day) => createComponent(DatePicker$1.TableHeader, { get children() {
-																		return day.short;
-																	} })
-																});
-															} });
-														} }), createComponent(DatePicker$1.TableBody, { get children() {
-															return createComponent(For, {
-																get each() {
-																	return picker().weeks;
-																},
-																children: (week) => createComponent(DatePicker$1.TableRow, { get children() {
-																	return createComponent(For, {
-																		each: week,
-																		children: (day) => createComponent(DatePicker$1.TableCell, {
-																			value: day,
-																			get children() {
-																				return createComponent(DatePicker$1.TableCellTrigger, { get children() {
-																					return day.day;
-																				} });
-																			}
-																		})
-																	});
-																} })
-															});
-														} })];
-													}
-												}),
-												ssr(_tmpl$3, ssrHydrationKey(), escape(createComponent(Button, {
-													type: "button",
-													tone: "secondary",
-													onClick: () => picker().selectToday(),
-													children: "오늘"
-												})), escape(createComponent(DatePicker$1.ClearTrigger, {
-													"class": "dds-btn dds-btn--secondary",
-													children: "지우기"
-												})))
-											] });
-										}
-									});
-								}
-							});
-						}
-					});
-				} })];
-			}
-		})
-	});
-}
-//#endregion
-export { Button, Checkbox, ConsoleShell, DatePicker, Dialog, Field, Icon, IconButton, Radio, RadioGroup, Select, Switch, Tab, TabList, TabPanel, Tabs, ToastProvider, Tooltip, createControllableSignal, createStatusPill, useToast };
+export { Button, Calendar, Checkbox, Combobox, ConsoleShell, DatePicker, Dialog, DropdownMenu, Field, Icon, IconButton, Input, InputGroup, Popover, Radio, RadioGroup, Select, SelectPicker, Switch, Tab, TabList, TabPanel, Tabs, ToastProvider, Tooltip, createControllableSignal, createStatusPill, useToast };
 
 //# sourceMappingURL=server.js.map