@devslab/dds-solid 0.19.0 → 0.21.0

package/dist/server.js

@@ -14,6 +14,7 @@ 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);
@@ -37,9 +38,9 @@ function describedBy(...ids) {
 }
 //#endregion
 //#region src/controls.tsx
-var _tmpl$$5 = ["<span", " class=\"dds-spinner\" aria-hidden=\"true\"></span>"];
-var _tmpl$2$3 = ["<span", " aria-hidden=\"true\"> *</span>"];
-var _tmpl$3$1 = [
+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>"
@@ -75,7 +76,7 @@ function Button(props) {
 		}
 	}), () => [
 		"<!--$-->",
-		local.loading && _tmpl$$5[0] + ssrHydrationKey() + _tmpl$$5[1],
+		local.loading && _tmpl$$6[0] + ssrHydrationKey() + _tmpl$$6[1],
 		"<!--/-->",
 		"<!--$-->",
 		escape(local.children),
@@ -105,7 +106,7 @@ function IconButton(props) {
 		get ["aria-busy"]() {
 			return local.loading ? "true" : void 0;
 		}
-	}), () => local.loading ? _tmpl$$5[0] + ssrHydrationKey() + _tmpl$$5[1] : escape(local.children), true);
+	}), () => local.loading ? _tmpl$$6[0] + ssrHydrationKey() + _tmpl$$6[1] : escape(local.children), true);
 }
 function Field(props) {
 	const generated = createUniqueId();
@@ -146,7 +147,7 @@ function Field(props) {
 						return id();
 					},
 					get children() {
-						return [props.label, props.required && ssr(_tmpl$2$3, ssrHydrationKey())];
+						return [props.label, props.required && ssr(_tmpl$2$4, ssrHydrationKey())];
 					}
 				}),
 				typeof props.children === "function" ? props.children(control()) : props.children,
@@ -173,7 +174,7 @@ function Select(props) {
 		"invalid",
 		"children"
 	]);
-	return ssr(_tmpl$3$1, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-select", local.class), true), false), ssrElement("select", mergeProps$1(rest, {
+	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;
@@ -269,17 +270,17 @@ function ArkCheckable(props) {
 }
 //#endregion
 //#region src/console-shell.tsx
-var _tmpl$$4 = [
+var _tmpl$$5 = [
 	"<dl",
 	" class=\"dds-console-rail__context\">",
 	"</dl>"
 ];
-var _tmpl$2$2 = [
+var _tmpl$2$3 = [
 	"<div",
 	" class=\"dds-console-rail__foot\">",
 	"</div>"
 ];
-var _tmpl$3 = [
+var _tmpl$3$1 = [
 	"<p",
 	" class=\"dds-console-page-eyebrow\">",
 	"</p>"
@@ -370,7 +371,7 @@ function ConsoleShell(props) {
 			return memo(() => !!props.context)() && props.context.length > 0;
 		},
 		get children() {
-			return ssr(_tmpl$$4, ssrHydrationKey(), escape(createComponent(For, {
+			return ssr(_tmpl$$5, ssrHydrationKey(), escape(createComponent(For, {
 				get each() {
 					return props.context;
 				},
@@ -402,14 +403,14 @@ function ConsoleShell(props) {
 			return props.foot;
 		},
 		get children() {
-			return ssr(_tmpl$2$2, ssrHydrationKey(), escape(props.foot));
+			return ssr(_tmpl$2$3, ssrHydrationKey(), escape(props.foot));
 		}
 	})), escape(createComponent(Show, {
 		get when() {
 			return props.header.eyebrow;
 		},
 		get children() {
-			return ssr(_tmpl$3, ssrHydrationKey(), escape(props.header.eyebrow));
+			return ssr(_tmpl$3$1, ssrHydrationKey(), escape(props.header.eyebrow));
 		}
 	})), escape(props.header.title), escape(createComponent(Show, {
 		get when() {
@@ -422,7 +423,7 @@ function ConsoleShell(props) {
 }
 //#endregion
 //#region src/dialog.tsx
-var _tmpl$$3 = [
+var _tmpl$$4 = [
 	"<div",
 	">",
 	"</div>"
@@ -546,7 +547,7 @@ function Dialog(props) {
 									return props.children;
 								},
 								get actions() {
-									return props.actions && ssr(_tmpl$$3, ssrHydrationKey() + ssrAttribute("class", escape(cls("dds-dialog__actions", props.actionsClass), true), false), escape(props.actions));
+									return props.actions && ssr(_tmpl$$4, ssrHydrationKey() + ssrAttribute("class", escape(cls("dds-dialog__actions", props.actionsClass), true), false), escape(props.actions));
 								}
 							};
 							return props.frame ? props.frame(parts) : [
@@ -645,8 +646,8 @@ function RadioGroup(props) {
 }
 //#endregion
 //#region src/icon.tsx
-var _tmpl$$2 = ["<g>", "</g>"];
-var _tmpl$2$1 = [
+var _tmpl$$3 = ["<g>", "</g>"];
+var _tmpl$2$2 = [
 	"<title",
 	">",
 	"</title>"
@@ -692,20 +693,20 @@ function Icon(props) {
 		}
 	}), () => [
 		"<!--$-->",
-		local.label && ssr(_tmpl$2$1, ssrHydrationKey(), escape(local.label)),
+		local.label && ssr(_tmpl$2$2, ssrHydrationKey(), escape(local.label)),
 		"<!--/-->",
-		ssr(_tmpl$$2, icon().body)
+		ssr(_tmpl$$3, icon().body)
 	], true);
 }
 //#endregion
 //#region src/status-pill.tsx
-var _tmpl$$1 = [
+var _tmpl$$2 = [
 	"<code",
 	" data-status=\"",
 	"\">",
 	"</code>"
 ];
-var _tmpl$2 = [
+var _tmpl$2$1 = [
 	"<span",
 	" data-status=\"",
 	"\"",
@@ -733,12 +734,12 @@ function createStatusPill(config) {
 				return known() || !open.has(props.domain);
 			},
 			get fallback() {
-				return ssr(_tmpl$$1, ssrHydrationKey(), `${escape(props.domain, true)}.${escape(props.value, true)}`, escape(props.value));
+				return ssr(_tmpl$$2, ssrHydrationKey(), `${escape(props.domain, true)}.${escape(props.value, true)}`, escape(props.value));
 			},
 			get children() {
 				return (() => {
 					const value = resolved();
-					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));
+					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));
 				})();
 			}
 		});
@@ -969,7 +970,7 @@ function useToast() {
 }
 //#endregion
 //#region src/tooltip.tsx
-var _tmpl$ = [
+var _tmpl$$1 = [
 	"<span",
 	"><!--$-->",
 	"<!--/--><!--$-->",
@@ -996,7 +997,7 @@ function Tooltip(props) {
 		lazyMount: false,
 		unmountOnExit: false,
 		get children() {
-			return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-tooltip", props.class), true), false), escape(createComponent(Tooltip$1.Trigger, { asChild: (merge) => {
+			return ssr(_tmpl$$1, 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,
@@ -1018,6 +1019,174 @@ function Tooltip(props) {
 	});
 }
 //#endregion
-export { Button, Checkbox, ConsoleShell, Dialog, Field, Icon, IconButton, Radio, RadioGroup, Select, Switch, Tab, TabList, TabPanel, Tabs, ToastProvider, Tooltip, createControllableSignal, createStatusPill, useToast };
+//#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 };
 
 //# sourceMappingURL=server.js.map