@k8ordo/ui 2.0.0 → 2.1.0

package/dist/integrations/_shared/renderers.mjs

@@ -1,32 +1,46 @@
 "use client";
-import { useMessages } from "../../i18n/context.mjs";
+import { getMessages } from "../../i18n/current.mjs";
 import { Spinner } from "../../components/feedback/spinner/spinner.mjs";
 import { Button } from "../../components/buttons/button/button.mjs";
-import { Popover } from "../../components/overlays/popover/index.mjs";
-import { Tooltip } from "../../components/overlays/tooltip/index.mjs";
-import { IconButton } from "../../components/buttons/icon-button/icon-button.mjs";
 import { GitHubIcon } from "../../components/icons/github-mark.mjs";
 import { LogoIcon } from "../../components/icons/logo.mjs";
 import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "../../components/icons/lucide.mjs";
 import { QiitaIcon } from "../../components/icons/qiita.mjs";
 import { TwitterIcon } from "../../components/icons/twitter.mjs";
 import { VerticalWritingIcon } from "../../components/icons/vertical-writing.mjs";
+import { Popover } from "../../components/overlays/popover/index.mjs";
+import { Tooltip } from "../../components/overlays/tooltip/index.mjs";
+import { IconButton } from "../../components/buttons/icon-button/icon-button.mjs";
+import { CopyButton } from "../../components/buttons/copy-button/copy-button.mjs";
+import { Separator } from "../../components/layout/separator/separator.mjs";
+import { Toolbar } from "../../components/buttons/toolbar/index.mjs";
 import { Accordion } from "../../components/data-display/accordion/index.mjs";
 import { Avatar } from "../../components/data-display/avatar/avatar.mjs";
 import { Badge } from "../../components/data-display/badge/badge.mjs";
 import { Card } from "../../components/data-display/card/card.mjs";
+import { Carousel } from "../../components/data-display/carousel/index.mjs";
 import { Code } from "../../components/data-display/code/code.mjs";
-import { Heading } from "../../components/data-display/heading/heading.mjs";
+import { Checkbox } from "../../components/form/checkbox/checkbox.mjs";
+import { CheckboxGroup } from "../../components/form/checkbox-group/index.mjs";
+import { EmptyState } from "../../components/feedback/empty-state/empty-state.mjs";
 import { Table } from "../../components/data-display/table/table.mjs";
+import { DataTable } from "../../components/data-display/data-table/data-table.mjs";
+import { Heading } from "../../components/data-display/heading/heading.mjs";
+import { Kbd } from "../../components/data-display/kbd/kbd.mjs";
+import { Tree } from "../../components/data-display/tree/tree.mjs";
 import { Alert } from "../../components/feedback/alert/alert.mjs";
+import { Callout } from "../../components/feedback/callout/callout.mjs";
 import { Progress } from "../../components/feedback/progress/progress.mjs";
 import { Skeleton } from "../../components/feedback/skeleton/skeleton.mjs";
 import { useToast } from "../../components/feedback/toast/context.mjs";
 import { ToastProvider } from "../../components/feedback/toast/provider.mjs";
 import { Autocomplete } from "../../components/form/autocomplete/autocomplete.mjs";
-import { Checkbox } from "../../components/form/checkbox/checkbox.mjs";
+import { Calendar } from "../../components/form/calendar/calendar.mjs";
 import { CheckboxCard } from "../../components/form/checkbox-card/checkbox-card.mjs";
-import { CheckboxGroup } from "../../components/form/checkbox-group/index.mjs";
+import { ColorPicker } from "../../components/form/color-picker/color-picker.mjs";
+import { Combobox } from "../../components/form/combobox/combobox.mjs";
+import { DateField } from "../../components/form/date-field/date-field.mjs";
+import { DatePicker } from "../../components/form/date-picker/date-picker.mjs";
 import { FileField } from "../../components/form/file-field/index.mjs";
 import { Form } from "../../components/form/form/form.mjs";
 import { FormControl } from "../../components/form/form-control/form-control.mjs";
@@ -34,24 +48,26 @@ import { NumberField } from "../../components/form/number-field/number-field.mjs
 import { PasswordInput } from "../../components/form/password-input/password-input.mjs";
 import { Radio } from "../../components/form/radio/radio.mjs";
 import { RadioCard } from "../../components/form/radio-card/radio-card.mjs";
+import { RangeSlider } from "../../components/form/range-slider/range-slider.mjs";
 import { Select } from "../../components/form/select/select.mjs";
 import { Slider } from "../../components/form/slider/slider.mjs";
 import { Switch } from "../../components/form/switch/switch.mjs";
 import { TextField } from "../../components/form/text-field/text-field.mjs";
 import { Textarea } from "../../components/form/textarea/textarea.mjs";
 import { Grid } from "../../components/layout/grid/grid.mjs";
-import { ScrollLinked } from "../../components/layout/scroll-linked/scroll-linked.mjs";
-import { Separator } from "../../components/layout/separator/separator.mjs";
 import { Stack } from "../../components/layout/stack/stack.mjs";
 import { Anchor } from "../../components/navigation/anchor/anchor.mjs";
 import { Breadcrumb } from "../../components/navigation/breadcrumb/index.mjs";
 import { Pagination } from "../../components/navigation/pagination/pagination.mjs";
+import { Stepper } from "../../components/navigation/stepper/stepper.mjs";
+import { SideNav } from "../../components/navigation/side-nav/index.mjs";
 import { Tabs } from "../../components/navigation/tabs/index.mjs";
-import { Dialog } from "../../components/overlays/dialog/index.mjs";
 import { Modal } from "../../components/overlays/modal/modal.mjs";
+import { Dialog } from "../../components/overlays/dialog/index.mjs";
 import { Drawer } from "../../components/overlays/drawer/drawer.mjs";
 import { DropdownMenu } from "../../components/overlays/dropdown-menu/index.mjs";
 import { ListBox } from "../../components/overlays/list-box/index.mjs";
+import renderers_module_default from "./renderers.module.mjs";
 import { Fragment, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/integrations/_shared/renderers.tsx
@@ -155,6 +171,13 @@ function renderAlert(props) {
 		tone: props.tone
 	});
 }
+function renderCallout(props) {
+	return /* @__PURE__ */ jsx(Callout, {
+		label: u(props.label),
+		tone: props.tone,
+		children: /* @__PURE__ */ jsx("p", { children: props.content })
+	});
+}
 function renderSpinner(props) {
 	return /* @__PURE__ */ jsx(Spinner, {
 		label: u(props.label),
@@ -168,9 +191,9 @@ function renderSeparator(props) {
 	});
 }
 const CARD_PADDING_CLASS = {
-	sm: "p-4",
-	md: "p-6",
-	lg: "p-8"
+	sm: renderers_module_default.cardSm,
+	md: renderers_module_default.cardMd,
+	lg: renderers_module_default.cardLg
 };
 function renderCard(props, children) {
 	return /* @__PURE__ */ jsx(Card, {
@@ -184,7 +207,7 @@ function renderCard(props, children) {
 	});
 }
 const TabsView = ({ props }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const baseId = useId();
 	const ids = props.tabs.map((_, index) => `${baseId}-tab-${index}`);
 	return /* @__PURE__ */ jsxs(Tabs.Root, {
@@ -318,17 +341,102 @@ function renderSlider(props, value, onChange) {
 		value
 	});
 }
+function renderRangeSlider(props, value, onChange) {
+	return /* @__PURE__ */ jsx(RangeSlider, {
+		"aria-label": props.label,
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		max: u(props.max),
+		min: u(props.min),
+		name: [props.name, props.name],
+		onChange,
+		step: u(props.step),
+		value
+	});
+}
 const LabeledField = ({ label, children }) => {
 	const labelId = useId();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1",
+		className: renderers_module_default.field,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-fg-base text-sm font-medium",
+			className: renderers_module_default.fieldLabel,
 			id: labelId,
 			children: label
 		}), children(labelId)]
 	});
 };
+const ColorPickerView = ({ props, value, onChange }) => /* @__PURE__ */ jsx(LabeledField, {
+	label: props.label,
+	children: (labelId) => /* @__PURE__ */ jsx(ColorPicker, {
+		"aria-labelledby": labelId,
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		name: props.name,
+		onChange,
+		required: u(props.required),
+		swatches: u(props.swatches),
+		value
+	})
+});
+function renderColorPicker(props, value, onChange) {
+	return /* @__PURE__ */ jsx(ColorPickerView, {
+		onChange,
+		props,
+		value
+	});
+}
+const DateFieldView = ({ props, value, onChange }) => /* @__PURE__ */ jsx(LabeledField, {
+	label: props.label,
+	children: (labelId) => /* @__PURE__ */ jsx(DateField, {
+		"aria-labelledby": labelId,
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		max: u(props.max),
+		min: u(props.min),
+		name: props.name,
+		onChange: (event) => {
+			onChange(event.target.value);
+		},
+		required: u(props.required),
+		value
+	})
+});
+function renderDateField(props, value, onChange) {
+	return /* @__PURE__ */ jsx(DateFieldView, {
+		onChange,
+		props,
+		value
+	});
+}
+const DatePickerView = ({ props, value, onChange }) => /* @__PURE__ */ jsx(LabeledField, {
+	label: props.label,
+	children: (labelId) => /* @__PURE__ */ jsx(DatePicker, {
+		"aria-labelledby": labelId,
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		max: u(props.max),
+		min: u(props.min),
+		name: props.name,
+		onChange,
+		required: u(props.required),
+		value
+	})
+});
+function renderDatePicker(props, value, onChange) {
+	return /* @__PURE__ */ jsx(DatePickerView, {
+		onChange,
+		props,
+		value
+	});
+}
+function renderCalendar(props, value, onChange) {
+	return /* @__PURE__ */ jsx(Calendar, {
+		max: u(props.max),
+		min: u(props.min),
+		onChange,
+		value: value === "" ? null : value
+	});
+}
 const RadioView = ({ props, value, onChange }) => /* @__PURE__ */ jsx(LabeledField, {
 	label: props.label,
 	children: (labelId) => /* @__PURE__ */ jsx(Radio, {
@@ -420,6 +528,14 @@ function renderIconButton(props) {
 		children: /* @__PURE__ */ jsx(IconComponent, { size: u(props.size) ?? "md" })
 	});
 }
+function renderCopyButton(props) {
+	return /* @__PURE__ */ jsx(CopyButton, {
+		iconOnly: u(props.iconOnly),
+		label: u(props.label),
+		size: u(props.size),
+		value: props.value
+	});
+}
 function renderAnchor(props) {
 	return /* @__PURE__ */ jsx(Anchor, {
 		href: props.href,
@@ -439,12 +555,34 @@ function renderAvatar(props) {
 function renderCode(props) {
 	return /* @__PURE__ */ jsx(Code, { children: props.code });
 }
+function renderKbd(props) {
+	return /* @__PURE__ */ jsx("span", {
+		className: renderers_module_default.keys,
+		children: props.keys.map((key, index) => /* @__PURE__ */ jsx(Kbd, { children: key }, `${key}-${index}`))
+	});
+}
+function renderEmptyState(props) {
+	const icon = u(props.icon);
+	const IconComponent = icon === void 0 ? void 0 : iconMap[icon];
+	return /* @__PURE__ */ jsx(EmptyState, {
+		description: u(props.description),
+		icon: IconComponent === void 0 ? void 0 : /* @__PURE__ */ jsx(IconComponent, { size: "lg" }),
+		title: props.title
+	});
+}
+function renderCarousel(props, slides) {
+	return /* @__PURE__ */ jsx(Carousel.Root, {
+		label: props.label,
+		slideSize: u(props.slideSize),
+		children: slides.map((slide, index) => /* @__PURE__ */ jsx(Carousel.Slide, { children: slide }, index))
+	});
+}
 function renderProgress(props) {
 	return /* @__PURE__ */ jsx(Progress, {
 		label: u(props.label),
-		max: props.max,
+		max: u(props.max),
 		min: u(props.min),
-		value: props.value
+		value: u(props.value)
 	});
 }
 function renderSkeleton(props) {
@@ -470,6 +608,55 @@ function renderBreadcrumb(props) {
 		}) : item.label })] }, item.label))
 	});
 }
+function renderStepper(props) {
+	return /* @__PURE__ */ jsx(Stepper, {
+		"aria-label": props.label,
+		orientation: u(props.orientation),
+		steps: props.steps.map((step) => ({
+			label: step.label,
+			description: u(step.description)
+		})),
+		value: props.current
+	});
+}
+const toTree = (items) => {
+	const ids = new Set(items.map((item) => item.id));
+	const build = (parentId) => items.filter((item) => {
+		const parent = u(item.parentId);
+		return parentId === void 0 ? parent === void 0 || !ids.has(parent) : parent === parentId;
+	}).map((item) => {
+		const children = build(item.id);
+		return children.length > 0 ? {
+			id: item.id,
+			label: item.label,
+			children
+		} : {
+			id: item.id,
+			label: item.label
+		};
+	});
+	return build(void 0);
+};
+function renderTree(props) {
+	return /* @__PURE__ */ jsx(Tree, {
+		defaultExpandedIds: props.items.filter((item) => item.expanded === true).map((item) => item.id),
+		items: toTree(props.items),
+		label: props.label
+	});
+}
+function renderSideNav(props) {
+	return /* @__PURE__ */ jsx(SideNav.Root, {
+		label: props.label,
+		children: props.groups.map((group) => /* @__PURE__ */ jsx(SideNav.Group, {
+			title: group.title,
+			children: group.links.map((link) => /* @__PURE__ */ jsx(SideNav.Link, {
+				current: u(link.current),
+				href: link.href,
+				children: link.label
+			}, link.href))
+		}, group.title))
+	});
+}
 function renderTable(props) {
 	return /* @__PURE__ */ jsxs(Table.Root, { children: [
 		props.caption !== void 0 && props.caption !== "" ? /* @__PURE__ */ jsx(Table.Caption, { children: props.caption }) : null,
@@ -551,7 +738,7 @@ function renderPopover(props, children) {
 		variant: "outline",
 		children: props.triggerLabel
 	}) }), /* @__PURE__ */ jsx(Popover.Content, { renderItem: ({ id, ref }) => /* @__PURE__ */ jsx("div", {
-		className: "bg-bg-raised text-fg-base rounded-lg p-4 shadow-md",
+		className: renderers_module_default.popover,
 		id,
 		ref,
 		children
@@ -564,15 +751,33 @@ function renderTooltip(props) {
 		children: props.triggerLabel
 	}) }), /* @__PURE__ */ jsx(Tooltip.Content, { children: props.content })] });
 }
+function renderToolbar(props) {
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		"aria-label": props.label,
+		orientation: u(props.orientation),
+		children: props.items.map((item, index) => {
+			const icon = u(item.icon);
+			const IconComponent = icon === void 0 ? void 0 : iconMap[icon];
+			return /* @__PURE__ */ jsx(Toolbar.Item, { renderItem: (itemProps) => IconComponent === void 0 ? /* @__PURE__ */ jsx(Button, {
+				...itemProps,
+				size: "sm",
+				variant: "skeleton",
+				children: item.label
+			}) : /* @__PURE__ */ jsx(IconButton, {
+				...itemProps,
+				label: item.label,
+				size: "sm",
+				children: /* @__PURE__ */ jsx(IconComponent, { size: "sm" })
+			}) }, `${item.label}-${index}`);
+		})
+	});
+}
 function renderDropdownMenu(props) {
 	return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { label: props.triggerLabel }), /* @__PURE__ */ jsx(DropdownMenu.Content, { children: props.items.map((item) => /* @__PURE__ */ jsx(DropdownMenu.Item, {
 		label: item.label,
 		onAction: () => {}
 	}, item.label)) })] });
 }
-function renderScrollLinked(_props) {
-	return /* @__PURE__ */ jsx(ScrollLinked, {});
-}
 const ToastTriggerInner = ({ props }) => {
 	const { open } = useToast();
 	return /* @__PURE__ */ jsx(Button, {
@@ -583,6 +788,34 @@ const ToastTriggerInner = ({ props }) => {
 		children: props.triggerLabel
 	});
 };
+const collator = new Intl.Collator(void 0, { numeric: true });
+const DataTableWidget = ({ props }) => {
+	const [sort, setSort] = useState(null);
+	const [selectedIds, setSelectedIds] = useState([]);
+	const rows = props.rows.map((cells, index) => ({
+		id: String(index),
+		cells
+	}));
+	const columnIndex = sort === null ? -1 : Number(sort.columnId);
+	const sorted = sort === null ? rows : rows.toSorted((a, b) => collator.compare(a.cells[columnIndex] ?? "", b.cells[columnIndex] ?? ""));
+	const ordered = sort?.direction === "descending" ? sorted.toReversed() : sorted;
+	return /* @__PURE__ */ jsx(DataTable, {
+		columns: props.columns.map((column, index) => ({
+			id: String(index),
+			header: column.label,
+			cell: (row) => row.cells[index] ?? "",
+			align: u(column.align),
+			sortable: u(column.sortable)
+		})),
+		getRowId: (row) => row.id,
+		label: props.label,
+		onSelectedIdsChange: props.selectable === true ? setSelectedIds : void 0,
+		onSortChange: setSort,
+		rows: ordered,
+		selectedIds,
+		sort
+	});
+};
 const ToastWidget = ({ props }) => /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ToastTriggerInner, { props }) });
 function renderListBox(props, value, onChange) {
 	return /* @__PURE__ */ jsxs(ListBox.Root, {
@@ -626,17 +859,42 @@ function renderAutocomplete(props, value, onChange) {
 		value
 	});
 }
+const ComboboxView = ({ props, value, onChange }) => /* @__PURE__ */ jsx(LabeledField, {
+	label: props.label,
+	children: (labelId) => /* @__PURE__ */ jsx(Combobox, {
+		"aria-labelledby": labelId,
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		name: props.name,
+		onChange,
+		options: props.options,
+		placeholder: u(props.placeholder),
+		required: u(props.required),
+		value
+	})
+});
+function renderCombobox(props, value, onChange) {
+	return /* @__PURE__ */ jsx(ComboboxView, {
+		onChange,
+		props,
+		value
+	});
+}
 const FileFieldWidget = ({ props }) => {
-	const messages = useMessages();
+	const messages = getMessages();
+	const trigger = /* @__PURE__ */ jsx(FileField.Trigger, { renderItem: ({ onClick, disabled }) => /* @__PURE__ */ jsx(Button, {
+		disabled,
+		onClick,
+		variant: "outline",
+		children: u(props.triggerLabel) ?? messages.fileFieldTrigger
+	}) });
 	return /* @__PURE__ */ jsxs(FileField.Root, {
 		maxFiles: u(props.maxFiles),
 		multiple: u(props.multiple),
-		children: [/* @__PURE__ */ jsx(FileField.Trigger, { renderItem: ({ onClick, disabled }) => /* @__PURE__ */ jsx(Button, {
-			disabled,
-			onClick,
-			variant: "outline",
-			children: u(props.triggerLabel) ?? messages.fileFieldTrigger
-		}) }), /* @__PURE__ */ jsx(FileField.ItemList, { clearable: u(props.clearable) })]
+		children: [u(props.dropzone) === true ? /* @__PURE__ */ jsxs(FileField.Dropzone, { children: [/* @__PURE__ */ jsx("p", {
+			className: renderers_module_default.dropHint,
+			children: messages.fileFieldDrop
+		}), trigger] }) : trigger, /* @__PURE__ */ jsx(FileField.ItemList, { clearable: u(props.clearable) })]
 	});
 };
 const FormControlWidget = ({ props }) => {
@@ -676,4 +934,4 @@ const FormControlWidget = ({ props }) => {
 	});
 };
 //#endregion
-export { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, TabsView, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBreadcrumb, renderButton, renderCard, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderScrollLinked, renderSelect, renderSeparator, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderTooltip };
+export { DataTableWidget, DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, TabsView, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBreadcrumb, renderButton, renderCalendar, renderCallout, renderCard, renderCarousel, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderColorPicker, renderCombobox, renderCopyButton, renderDateField, renderDatePicker, renderDropdownMenu, renderEmptyState, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderKbd, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderRangeSlider, renderSelect, renderSeparator, renderSideNav, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderStepper, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderToolbar, renderTooltip, renderTree, toTree };

package/dist/integrations/_shared/renderers.module.mjs

@@ -0,0 +1,14 @@
+import './renderers.css';
+//#region src/integrations/_shared/renderers.module.css
+var renderers_module_default = {
+	"cardLg": "_6aBdoW_cardLg",
+	"cardMd": "_6aBdoW_cardMd",
+	"cardSm": "_6aBdoW_cardSm",
+	"dropHint": "_6aBdoW_dropHint",
+	"field": "_6aBdoW_field",
+	"fieldLabel": "_6aBdoW_fieldLabel",
+	"keys": "_6aBdoW_keys",
+	"popover": "_6aBdoW_popover"
+};
+//#endregion
+export { renderers_module_default as default };