@bysages/react 0.4.0 → 0.4.2

package/dist/{ai-response-B4DX7nmJ.mjs → ai-response-nhDOlELQ.mjs}

@@ -1,6 +1,6 @@
 import { t as withSelfRoot } from "./family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "./messages-1jJWtaYU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { renderHtml } from "@tanstack/markdown/html";

package/dist/components/accordion/index.mjs

@@ -1,7 +1,7 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { Accordion as Accordion$1 } from "@ark-ui/react/accordion";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion/index.tsx
 /** Ark's Accordion, dressed in the paper-and-ink system: a ruled sheet

package/dist/components/affix/index.mjs

@@ -1,8 +1,8 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/affix/index.tsx
-function AffixImpl({ offsetTop = "0px", offsetBottom = "0px", ...rest }) {
+function AffixImpl({ offsetTop, offsetBottom, ...rest }) {
 	injectComponentStyle("affix");
 	return /* @__PURE__ */ jsx("div", {
 		...rest,

package/dist/components/ai/index.d.mts

@@ -1,2 +1,2 @@
-import { a as FileUIPart, c as SourceUrlUIPart, d as ToolUIPart, f as UIMessage, i as DataUIPart, l as StepStartUIPart, n as AiActions, o as ReasoningUIPart, p as UIMessagePart, r as AiContent, s as SourceDocumentUIPart, t as Ai, u as TextUIPart } from "../../index-DdNKngUQ.mjs";
+import { a as FileUIPart, c as SourceUrlUIPart, d as ToolUIPart, f as UIMessage, i as DataUIPart, l as StepStartUIPart, n as AiActions, o as ReasoningUIPart, p as UIMessagePart, r as AiContent, s as SourceDocumentUIPart, t as Ai, u as TextUIPart } from "../../index-B4twHAQC.mjs";
 export { Ai, AiActions, AiContent, type DataUIPart, type FileUIPart, type ReasoningUIPart, type SourceDocumentUIPart, type SourceUrlUIPart, type StepStartUIPart, type TextUIPart, type ToolUIPart, type UIMessage, type UIMessagePart };

package/dist/components/ai/index.mjs

@@ -4,11 +4,11 @@ import { Action } from "../ai-action/index.mjs";
 import { AiMessage as Message } from "../ai-message/index.mjs";
 import { AiPromptInput as PromptInput } from "../ai-prompt-input/index.mjs";
 import { AiReasoning as Reasoning } from "../ai-reasoning/index.mjs";
-import { t as Response } from "../../ai-response-B4DX7nmJ.mjs";
+import { t as Response } from "../../ai-response-nhDOlELQ.mjs";
 import { AiSource as Source, AiSources as Sources } from "../ai-source/index.mjs";
 import { AiSuggestion as Suggestion } from "../ai-suggestion/index.mjs";
 import { AiTool as Tool } from "../ai-tool/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai/index.tsx
 /** A conversation column: Root is the log, Message carries a role, and

package/dist/components/ai-action/index.mjs

@@ -1,6 +1,6 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Button } from "../button/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-action/index.tsx
 function ActionImpl({ label, children, ...rest }) {

package/dist/components/ai-attachments/index.mjs

@@ -1,7 +1,7 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-attachments/index.tsx
 const imageIcon = iconNode("image", {

package/dist/components/ai-message/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-message/index.tsx
 function MessageImpl({ role = "assistant", children, ...rest }) {

package/dist/components/ai-prompt-input/index.mjs

@@ -3,8 +3,8 @@ import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { Field } from "../field/index.mjs";
-import { n as MentionsVessel, r as useMentions } from "../../mentions-BuWibdci.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { n as MentionsVessel, r as useMentions } from "../../mentions-BwnyvdXz.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 //#region src/components/ai-prompt-input/index.tsx
@@ -12,18 +12,9 @@ const arrowUpIcon = iconNode("arrow-up", {
 	width: 14,
 	height: 14
 });
-const stopIcon = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 16 16",
+const stopIcon = iconNode("square", {
 	width: 14,
-	height: 14,
-	"aria-hidden": "true",
-	children: /* @__PURE__ */ jsx("rect", {
-		x: 4.5,
-		y: 4.5,
-		width: 7,
-		height: 7,
-		fill: "currentColor"
-	})
+	height: 14
 });
 /** An empty slot leaves no part in the anatomy — the bare vessel keeps
 * its single-line posture. */

package/dist/components/ai-reasoning/index.mjs

@@ -1,7 +1,7 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { t as chevron } from "../../chevron-a2nIZKN4.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-reasoning/index.tsx
 function ReasoningImpl({ label = "Thinking", children, ...rest }) {

package/dist/components/ai-response/index.mjs

@@ -1,2 +1,2 @@
-import { t as Response } from "../../ai-response-B4DX7nmJ.mjs";
+import { t as Response } from "../../ai-response-nhDOlELQ.mjs";
 export { Response as AiResponse, Response };

package/dist/components/ai-source/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-source/index.tsx
 function SourceImpl({ href, children, ...rest }) {

package/dist/components/ai-suggestion/index.mjs

@@ -1,6 +1,6 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Button } from "../button/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-suggestion/index.tsx
 function SuggestionImpl({ prompt, onSelect, ...rest }) {

package/dist/components/ai-tool/index.mjs

@@ -1,7 +1,7 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { t as chevron } from "../../chevron-a2nIZKN4.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-tool/index.tsx
 function ToolImpl({ name, label, status, input, output, ...rest }) {

package/dist/components/alert/index.mjs

@@ -1,5 +1,5 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 //#region src/components/alert/index.tsx

package/dist/components/angle-slider/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/react/angle-slider";
 //#region src/components/angle-slider/index.tsx

package/dist/components/aspect-ratio/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/aspect-ratio/index.tsx
 function AspectRatioImpl({ ratio = "1 / 1", ...rest }) {

package/dist/components/autocomplete/index.mjs

@@ -1,8 +1,9 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Combobox as Combobox$1 } from "../combobox/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { Portal } from "@ark-ui/react/portal";
 import { useListCollection } from "@ark-ui/react/collection";
 import { Combobox } from "@ark-ui/react/combobox";
@@ -11,10 +12,15 @@ function AutoCompleteImpl({ value = "", items = [], placeholder, filter, size =
 	injectComponentStyle("combobox");
 	const messages = useComponentMessages();
 	const hostId = useElementId("autocomplete", rest);
-	const { collection, filter: filterItems } = useListCollection({
+	const fieldText = useRef("");
+	const { collection, set, filter: filterItems } = useListCollection({
 		initialItems: items,
 		filter: (item, input) => filter ? filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
 	});
+	useEffect(() => {
+		set(items);
+		filterItems(fieldText.current);
+	}, [items]);
 	return /* @__PURE__ */ jsxs(Combobox.Root, {
 		...rest,
 		id: `${hostId}:combobox`,
@@ -27,6 +33,7 @@ function AutoCompleteImpl({ value = "", items = [], placeholder, filter, size =
 			if (first != null) onValueChange?.(first);
 		},
 		onInputValueChange: (details) => {
+			fieldText.current = details.inputValue;
 			filterItems(details.inputValue);
 			onValueChange?.(details.inputValue);
 		},

package/dist/components/avatar/index.mjs

@@ -1,5 +1,5 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
 //#region src/components/avatar/index.tsx

package/dist/components/avatar-group/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar-group/index.tsx
 function AvatarGroupImpl({ size, children, ...rest }) {

package/dist/components/back-top/index.mjs

@@ -1,7 +1,7 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Button } from "../button/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 //#region src/components/back-top/index.tsx

package/dist/components/badge/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/badge/index.tsx
 function BadgeImpl({ tone = "ink", variant = "solid", ...rest }) {

package/dist/components/banner/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/banner/index.tsx
 /** A page-level notice, spoken across the full measure: a wash of the

package/dist/components/bento/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/bento/index.tsx
 /** The bento lattice: a grid of unequal tiles that reads as one plate.

package/dist/components/block-ui/index.mjs

@@ -1,6 +1,6 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Spinner } from "../spinner/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/block-ui/index.tsx
 /** A curtain over content that must wait: the blocked region keeps its

package/dist/components/breadcrumb/index.mjs

@@ -1,5 +1,5 @@
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/breadcrumb/index.tsx
 /** A trail of waymarks: Root wraps the nav, List the ordered trail, and

package/dist/components/browser/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/browser/index.tsx
 /** The three lamps are the system's own fixed pigments — the same

package/dist/components/button/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from "react";
 //#region src/components/button/index.tsx

package/dist/components/button-group/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/button-group/index.tsx
 /**

package/dist/components/calendar/index.d.mts

@@ -2,18 +2,29 @@ import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { HTMLAttributes } from "react";
 import { DatePickerRootProps } from "@ark-ui/react/date-picker";
 //#region src/components/calendar/index.d.ts
-export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
+export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   /** Selected date(s) — an array, as the machine speaks in ranges. */
   value?: DatePickerRootProps["value"];
+  defaultValue?: DatePickerRootProps["defaultValue"];
   min?: DatePickerRootProps["min"];
   max?: DatePickerRootProps["max"];
+  /** compact keeps the popup's measure; full gives cells room for content. */
+  variant?: "compact" | "full";
+  /** month is the day grid; year starts on a month overview. */
+  mode?: "month" | "year";
+  selectionMode?: DatePickerRootProps["selectionMode"];
+  startOfWeek?: number;
+  fixedWeeks?: boolean;
+  showWeekNumbers?: boolean;
+  outsideDaySelectable?: boolean;
+  closeOnSelect?: boolean;
+  minView?: DatePickerRootProps["minView"];
+  maxView?: DatePickerRootProps["maxView"];
   onValueChange?: (value: NonNullable<DatePickerRootProps["value"]>) => void;
 }
-/** The date-picker's month grid, standing on the page without its
- * popup: always open, the trigger gone, the vessel a quiet card. The
- * title zooms out through month and year grids; the grids themselves
- * are the shared machinery — value, range selection, and focus ride
- * Ark's own contract. */
-declare function CalendarImpl({ value, min, max, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
+/** The date-picker's grid standing on the page. Compact is the popup's
+ * quiet card; full opens it into a dashboard calendar. Year mode starts
+ * on a month overview; choosing a month drills into its day grid. */
+declare function CalendarImpl({ value, defaultValue, min, max, variant, mode, selectionMode, startOfWeek, fixedWeeks, showWeekNumbers, outsideDaySelectable, closeOnSelect, minView, maxView, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
 export declare const Calendar: typeof CalendarImpl & typeof DatePicker$1;
 //#endregion

package/dist/components/calendar/index.mjs

@@ -1,8 +1,8 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker } from "@ark-ui/react/date-picker";
 //#region src/components/calendar/index.tsx
 function chevron(dir) {
@@ -11,81 +11,117 @@ function chevron(dir) {
 		height: 16
 	});
 }
-/** The date-picker's month grid, standing on the page without its
-* popup: always open, the trigger gone, the vessel a quiet card. The
-* title zooms out through month and year grids; the grids themselves
-* are the shared machinery — value, range selection, and focus ride
-* Ark's own contract. */
-function CalendarImpl({ value, min, max, onValueChange, children, ...rest }) {
+/** The date-picker's grid standing on the page. Compact is the popup's
+* quiet card; full opens it into a dashboard calendar. Year mode starts
+* on a month overview; choosing a month drills into its day grid. */
+function CalendarImpl({ value, defaultValue, min, max, variant = "compact", mode = "month", selectionMode, startOfWeek, fixedWeeks = false, showWeekNumbers = false, outsideDaySelectable = true, closeOnSelect = true, minView, maxView, onValueChange, children, ...rest }) {
 	injectComponentStyle("calendar");
 	injectComponentStyle("date-picker");
 	const hostId = useElementId("calendar", rest);
 	const title = (dp) => {
-		const d = dp.focusedValue;
-		if (!d) return "";
-		if (dp.view === "day") return dp.format(d, {
+		const date = dp.focusedValue;
+		if (!date) return "";
+		if (dp.view === "month") return dp.format(date, { year: "numeric" });
+		if (dp.view === "day") return dp.format(date, {
 			month: "long",
 			year: "numeric"
 		});
-		if (dp.view === "month") return dp.format(d, { year: "numeric" });
-		const decade = Math.floor(d.year / 10) * 10;
+		const decade = Math.floor(date.year / 10) * 10;
 		return `${decade} - ${decade + 9}`;
 	};
-	const header = /* @__PURE__ */ jsx("div", {
+	const header = (dp) => /* @__PURE__ */ jsx("div", {
 		"data-scope": "calendar",
 		"data-part": "header",
 		children: /* @__PURE__ */ jsxs(DatePicker.ViewControl, { children: [
 			/* @__PURE__ */ jsx(DatePicker.PrevTrigger, { children: chevron("left") }),
-			/* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => /* @__PURE__ */ jsx(DatePicker.ViewTrigger, { children: title(dp) }) }),
+			/* @__PURE__ */ jsx(DatePicker.Context, { children: (context) => /* @__PURE__ */ jsx(DatePicker.ViewTrigger, { children: title(context) }) }),
+			variant === "full" && dp ? todayTrigger(dp) : null,
 			/* @__PURE__ */ jsx(DatePicker.NextTrigger, { children: chevron("right") })
 		] })
 	});
+	const todayTrigger = (dp) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-scope": "calendar",
+		"data-part": "today-trigger",
+		onClick: () => {
+			dp.selectToday();
+			if (mode === "year" && dp.view === "month") dp.setView("day");
+		},
+		children: "Today"
+	});
+	const dayTable = (dp) => {
+		const weeks = dp.weeks;
+		return /* @__PURE__ */ jsxs(DatePicker.Table, { children: [/* @__PURE__ */ jsx(DatePicker.TableHead, { children: /* @__PURE__ */ jsxs(DatePicker.TableRow, { children: [showWeekNumbers ? /* @__PURE__ */ jsx(DatePicker.WeekNumberHeaderCell, { children: "Wk" }) : null, dp.weekDays.map((day, id) => /* @__PURE__ */ jsx(DatePicker.TableHeader, {
+			"aria-label": day.long,
+			children: day.narrow
+		}, id))] }) }), /* @__PURE__ */ jsx(DatePicker.TableBody, { children: weeks.map((week, id) => /* @__PURE__ */ jsxs(DatePicker.TableRow, { children: [showWeekNumbers ? /* @__PURE__ */ jsx(DatePicker.WeekNumberCell, {
+			weekIndex: id,
+			week,
+			children: dp.getWeekNumber(week)
+		}, "week") : null, week.map((day, cellId) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
+			value: day,
+			children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: day.day })
+		}, cellId))] }, id)) })] });
+	};
+	const monthGrid = (dp, columns) => /* @__PURE__ */ jsx(DatePicker.Table, {
+		columns,
+		children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: dp.getMonthsGrid({
+			columns,
+			format: columns === 4 ? "short" : "long"
+		}).map((months, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: months.map((month, monthId) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
+			value: month.value,
+			columns,
+			children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: month.label })
+		}, monthId)) }, id)) })
+	});
+	const yearGrid = (dp) => /* @__PURE__ */ jsx(DatePicker.Table, {
+		columns: 3,
+		children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: dp.getYearsGrid({ columns: 3 }).map((years, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: years.map((year, yearId) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
+			value: year.value,
+			columns: 3,
+			children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: year.label })
+		}, yearId)) }, id)) })
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		"data-scope": "calendar",
 		"data-part": "root",
+		"data-variant": variant,
+		"data-mode": mode,
 		children: [/* @__PURE__ */ jsxs(DatePicker.Root, {
 			id: `${hostId}:date-picker`,
 			open: true,
-			closeOnSelect: true,
 			inline: true,
+			closeOnSelect,
+			outsideDaySelectable,
 			...value !== void 0 ? { value } : {},
+			...defaultValue !== void 0 ? { defaultValue } : {},
 			...min !== void 0 ? { min } : {},
 			...max !== void 0 ? { max } : {},
+			...selectionMode !== void 0 ? { selectionMode } : {},
+			...startOfWeek !== void 0 ? { startOfWeek } : {},
+			fixedWeeks: fixedWeeks || variant === "full",
+			showWeekNumbers,
+			...minView !== void 0 ? { minView } : {},
+			...maxView !== void 0 ? { maxView } : {},
+			...mode === "year" ? {
+				defaultView: "month",
+				maxView: "month"
+			} : {},
 			onValueChange: (details) => onValueChange?.(details.value),
 			children: [
-				/* @__PURE__ */ jsxs(DatePicker.View, {
+				/* @__PURE__ */ jsx(DatePicker.View, {
 					view: "day",
-					children: [header, /* @__PURE__ */ jsxs(DatePicker.Table, { children: [/* @__PURE__ */ jsx(DatePicker.TableHead, { children: /* @__PURE__ */ jsx(DatePicker.TableRow, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.weekDays.map((day, id) => /* @__PURE__ */ jsx(DatePicker.TableHeader, {
-						"aria-label": day.long,
-						children: day.narrow
-					}, id)) }) }) }), /* @__PURE__ */ jsx(DatePicker.TableBody, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.weeks.map((week, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
-						value: day,
-						children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: day.day })
-					}, id2)) }, id)) }) })] })]
+					children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [header(dp), dayTable(dp)] }) })
 				}),
-				/* @__PURE__ */ jsxs(DatePicker.View, {
+				/* @__PURE__ */ jsx(DatePicker.View, {
 					view: "month",
-					children: [header, /* @__PURE__ */ jsx(DatePicker.Table, {
-						columns: 3,
-						children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.getMonthsGrid({ columns: 3 }).map((months, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
-							value: month.value,
-							columns: 3,
-							children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: month.label })
-						}, id2)) }, id)) }) })
-					})]
+					children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [header(dp), monthGrid(dp, mode === "year" ? 4 : 3)] }) })
 				}),
-				/* @__PURE__ */ jsxs(DatePicker.View, {
+				mode === "month" ? /* @__PURE__ */ jsx(DatePicker.View, {
 					view: "year",
-					children: [header, /* @__PURE__ */ jsx(DatePicker.Table, {
-						columns: 3,
-						children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.getYearsGrid({ columns: 3 }).map((years, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
-							value: year.value,
-							columns: 3,
-							children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: year.label })
-						}, id2)) }, id)) }) })
-					})]
-				})
+					children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [header(), yearGrid(dp)] }) })
+				}) : null
 			]
 		}), children]
 	});

package/dist/components/card/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from "react";
 //#region src/components/card/index.tsx

package/dist/components/carousel/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
 //#region src/components/carousel/index.tsx

package/dist/components/cascade-select/index.mjs

@@ -2,8 +2,8 @@ import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
-import { t as Input } from "../../input-C21Zzuy6.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { t as Input } from "../../input-BDpQ0e6G.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Portal } from "@ark-ui/react/portal";

package/dist/components/checkbox/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@ark-ui/react/checkbox";
 //#region src/components/checkbox/index.tsx

package/dist/components/checkbox-group/index.mjs

@@ -1,7 +1,7 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFieldContext } from "@ark-ui/react/field";
 import { Checkbox } from "@ark-ui/react/checkbox";

package/dist/components/chip/index.d.mts

@@ -5,7 +5,7 @@ import { HTMLAttributes } from "react";
 export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
   value: number;
   max?: number;
-  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  tone?: "ink" | "primary" | "success" | "warning" | "danger" | "info";
   variant?: "solid" | "subtle" | "outline";
 }
 declare function ChipImpl({ value, max, tone, variant, ...rest }: ChipProps): import("react").JSX.Element;

package/dist/components/chip/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/chip/index.tsx
 function ChipImpl({ value, max, tone = "ink", variant = "solid", ...rest }) {

package/dist/components/clipboard/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
 //#region src/components/clipboard/index.tsx

package/dist/components/collapsible/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
 //#region src/components/collapsible/index.tsx

package/dist/components/color-picker/index.mjs

@@ -1,6 +1,6 @@
 import { t as iconNode } from "../../icon-BALgGtNK.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker as ColorPicker$1, parseColor } from "@ark-ui/react/color-picker";
 //#region src/components/color-picker/index.tsx