@bysages/react 0.2.1 → 0.2.3

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

@@ -0,0 +1,31 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from "react";
+//#region src/components/banner/index.d.ts
+export type BannerStatus = "ink" | "info" | "success" | "warning" | "danger";
+export interface BannerRootProps extends HTMLAttributes<HTMLElement> {
+  status?: BannerStatus;
+}
+export declare const Banner: (({ status, children, ...rest }: BannerRootProps) => import("react").JSX.Element) & {
+  Root: ({ status, children, ...rest }: BannerRootProps) => import("react").JSX.Element;
+  Icon: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Body: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Title: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Description: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Actions: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Close: (rest: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+};
+//#endregion

package/dist/components/banner/index.mjs

@@ -0,0 +1,63 @@
+import { injectComponentStyle } from "@bysages/core";
+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
+* status pigment, one heavier hairline on the leading edge, and room
+* for actions and a quiet close. Ink is the neutral register; the four
+* semantic pigments are fixed. */
+const Root = ({ status = "ink", children, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	role: status === "ink" ? void 0 : "status",
+	"data-scope": "banner",
+	"data-part": "root",
+	"data-status": status,
+	children
+});
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "banner",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Banner" + name;
+	return Component;
+}
+const Icon = part("Icon", "span");
+const Body = part("Body", "div");
+const Title = part("Title", "p");
+const Description = part("Description", "p");
+const Actions = part("Actions", "div");
+/** The quiet close: a plain square-cut button; dismissal stays the
+* consumer's state. */
+const Close = (rest) => /* @__PURE__ */ jsx("button", {
+	...rest,
+	type: rest.type ?? "button",
+	"aria-label": rest["aria-label"] ?? "Dismiss",
+	"data-scope": "banner",
+	"data-part": "close",
+	children: /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 4l8 8M12 4l-8 8",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			strokeLinecap: "round"
+		})
+	})
+});
+const Banner = Object.assign(Root, {
+	Root,
+	Icon,
+	Body,
+	Title,
+	Description,
+	Actions,
+	Close
+});
+injectComponentStyle("banner");
+//#endregion
+export { Banner };

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

@@ -0,0 +1,32 @@
+import { AnchorHTMLAttributes, HTMLAttributes } from "react";
+//#region src/components/breadcrumb/index.d.ts
+export declare const Breadcrumb: {
+  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+  displayName: string;
+} & {
+  Root: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  List: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Item: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Link: {
+    ({ children, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Current: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Separator: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/breadcrumb/index.mjs

@@ -0,0 +1,35 @@
+import { injectComponentStyle } from "@bysages/core";
+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
+* each Item carries a Link — or the Current page — parted by a quiet
+* Separator. Links take href and the rest through attributes. */
+function part(name, tag, extra = {}, fallback) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...extra,
+		...rest,
+		"data-scope": "breadcrumb",
+		"data-part": name.toLowerCase(),
+		children: children ?? fallback
+	});
+	Component.displayName = "Breadcrumb" + name;
+	return Component;
+}
+const Root = part("Root", "nav", { "aria-label": "Breadcrumb" });
+const List = part("List", "ol");
+const Item = part("Item", "li");
+const Link = part("Link", "a");
+const Current = part("Current", "span", { "aria-current": "page" });
+const Separator = part("Separator", "span", { "aria-hidden": "true" }, "/");
+const Breadcrumb = Object.assign(Root, {
+	Root,
+	List,
+	Item,
+	Link,
+	Current,
+	Separator
+});
+injectComponentStyle("breadcrumb");
+//#endregion
+export { Breadcrumb };

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

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+//#region src/components/button/index.d.ts
+/** The control recipe as a standalone button: the variant chooses how it
+ * rests, the tone chooses the pigment. Ink is the solemn default; any
+ * action can carry the primary weight. */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "solid" | "outline" | "ghost" | "subtle";
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  size?: "sm" | "md" | "lg";
+  /** Icon-only: the silhouette squares to the control height. */
+  square?: boolean;
+  /** Render the child element as the button — the recipe rides on it
+   * (a router Link, say) instead of wrapping it in a nested <button>. */
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+export declare function Button({ variant, tone, size, square, asChild, disabled, type, children, ...rest }: ButtonProps): import("react").JSX.Element | null;
+//#endregion

package/dist/components/button/index.mjs

@@ -0,0 +1,29 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+//#region src/components/button/index.tsx
+function Button({ variant = "solid", tone = "ink", size = "md", square = false, asChild = false, disabled = false, type = "button", children, ...rest }) {
+	injectComponentStyle("button");
+	const partProps = {
+		...rest,
+		"data-scope": "button",
+		"data-part": "root",
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		"data-square": square ? "true" : void 0,
+		"data-motion": "ink-ripple lit"
+	};
+	if (asChild) {
+		const child = Children.only(children);
+		return isValidElement(child) ? cloneElement(child, partProps) : null;
+	}
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		disabled,
+		...partProps,
+		children
+	});
+}
+//#endregion
+export { Button };

package/dist/components/button-group/index.d.mts

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/button-group/index.d.ts
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /** The seam runs across the group (default) or down it. */
+  orientation?: "horizontal" | "vertical";
+  /** One register for every member: falls onto data-size for the
+   * stylesheet to retune the buttons' heights. */
+  size?: "sm" | "md" | "lg";
+  /** The members' corner register: retunes --bs-radius-control for the
+   * whole fused shape — edges and trimmed seams keep one story. */
+  radius?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  children?: ReactNode;
+}
+/**
+ * Buttons fused into one control: the group owns only the joinery, so
+ * members keep every variant they were given — a solid action can sit
+ * beside an outline one and the seam still reads. Selection belongs to
+ * the toggle group; this is layout alone.
+ */
+declare function Root({ orientation, size, radius, children, ...rest }: ButtonGroupProps): import("react").JSX.Element;
+export declare const ButtonGroup: typeof Root & {
+  Root: typeof Root;
+};
+//#endregion

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

@@ -0,0 +1,25 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button-group/index.tsx
+/**
+* Buttons fused into one control: the group owns only the joinery, so
+* members keep every variant they were given — a solid action can sit
+* beside an outline one and the seam still reads. Selection belongs to
+* the toggle group; this is layout alone.
+*/
+function Root({ orientation = "horizontal", size, radius, children, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "group",
+		"data-scope": "button-group",
+		"data-part": "root",
+		"data-orientation": orientation,
+		"data-size": size,
+		"data-radius": radius,
+		children
+	});
+}
+const ButtonGroup = Object.assign(Root, { Root });
+injectComponentStyle("button-group");
+//#endregion
+export { ButtonGroup };

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

@@ -0,0 +1,17 @@
+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> {
+  /** Selected date(s) — an array, as the machine speaks in ranges. */
+  value?: DatePickerRootProps["value"];
+  min?: DatePickerRootProps["min"];
+  max?: DatePickerRootProps["max"];
+  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. */
+export declare function Calendar({ value, min, max, onValueChange, children, ...rest }: CalendarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/calendar/index.mjs

@@ -0,0 +1,96 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DatePicker } from "@ark-ui/react/date-picker";
+//#region src/components/calendar/index.tsx
+function chevron(dir) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		"aria-hidden": true,
+		style: dir === "left" ? { transform: "rotate(180deg)" } : void 0,
+		children: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7" })
+	});
+}
+/** 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 Calendar({ value, min, max, onValueChange, children, ...rest }) {
+	injectComponentStyle("calendar");
+	injectComponentStyle("date-picker");
+	const title = (dp) => {
+		const d = dp.focusedValue;
+		if (!d) return "";
+		if (dp.view === "day") return dp.format(d, {
+			month: "long",
+			year: "numeric"
+		});
+		if (dp.view === "month") return dp.format(d, { year: "numeric" });
+		const decade = Math.floor(d.year / 10) * 10;
+		return `${decade} - ${decade + 9}`;
+	};
+	const header = /* @__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.NextTrigger, { children: chevron("right") })
+		] })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "calendar",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsxs(DatePicker.Root, {
+			open: true,
+			closeOnSelect: true,
+			inline: true,
+			...value !== void 0 ? { value } : {},
+			...min !== void 0 ? { min } : {},
+			...max !== void 0 ? { max } : {},
+			onValueChange: (details) => onValueChange?.(details.value),
+			children: [
+				/* @__PURE__ */ jsxs(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)) }) })] })]
+				}),
+				/* @__PURE__ */ jsxs(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)) }) })
+					})]
+				}),
+				/* @__PURE__ */ jsxs(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]
+	});
+}
+//#endregion
+export { Calendar };

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

@@ -0,0 +1,46 @@
+import { HTMLAttributes } from "react";
+//#region src/components/card/index.d.ts
+export declare const Card: {
+  ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+    asChild?: boolean;
+  }): import("react").JSX.Element | null;
+  displayName: string;
+} & {
+  Root: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Header: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Title: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Description: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Content: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Footer: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/card/index.mjs

@@ -0,0 +1,44 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+//#region src/components/card/index.tsx
+/** A vessel: round, resting at the first elevation, one hairline for its
+* edge. Root, Header, Title, Description, Content, Footer — sections
+* carry their own whitespace, so any subset composes. */
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ asChild, children, ...rest }) => {
+		const partProps = {
+			...rest,
+			"data-scope": "card",
+			"data-part": name.toLowerCase()
+		};
+		if (asChild) {
+			const child = Children.only(children);
+			return isValidElement(child) ? cloneElement(child, partProps) : null;
+		}
+		return /* @__PURE__ */ jsx(Tag, {
+			...partProps,
+			children
+		});
+	};
+	Component.displayName = "Card" + name;
+	return Component;
+}
+const Root = part("Root", "section");
+const Header = part("Header", "header");
+const Title = part("Title", "h3");
+const Description = part("Description", "p");
+const Content = part("Content", "div");
+const Footer = part("Footer", "footer");
+const Card = Object.assign(Root, {
+	Root,
+	Header,
+	Title,
+	Description,
+	Content,
+	Footer
+});
+injectComponentStyle("card");
+//#endregion
+export { Card };

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

@@ -0,0 +1,9 @@
+import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
+//#region src/components/carousel/index.d.ts
+/** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
+ * hairline-clipped lane, the triggers are quiet outline controls, and the
+ * current indicator alone carries the ink. The API is Ark's own — Root,
+ * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
+ * Indicator, AutoplayTrigger, ProgressText. */
+export declare const Carousel: typeof Carousel$1;
+//#endregion

package/dist/components/carousel/index.mjs

@@ -0,0 +1,12 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
+//#region src/components/carousel/index.tsx
+/** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
+* hairline-clipped lane, the triggers are quiet outline controls, and the
+* current indicator alone carries the ink. The API is Ark's own — Root,
+* Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
+* Indicator, AutoplayTrigger, ProgressText. */
+const Carousel = Carousel$1;
+injectComponentStyle("carousel");
+//#endregion
+export { Carousel };

package/dist/components/cascade-select/index.d.mts

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from "react";
+//#region src/components/cascade-select/index.d.ts
+export interface CascadeSelectNode {
+  label: string;
+  value: string;
+  children?: CascadeSelectNode[];
+  disabled?: boolean;
+}
+/**
+ * A corridor of linked columns: pick a branch and the next column
+ * dissolves open beside it, until a leaf click settles the whole path.
+ * `value` is the selected path (or paths, when `multiple`) — the joined
+ * labels ride the trigger. `highlightTrigger: "hover"` turns the
+ * classic cascading menu: pointing is enough to unfold. `filterable`
+ * swaps the corridor for a flat list of matching paths while a query
+ * runs — each hit still reads as its full route.
+ */
+export interface CascadeSelectProps extends HTMLAttributes<HTMLDivElement> {
+  value?: string[][];
+  data: CascadeSelectNode[];
+  placeholder?: string;
+  highlightTrigger?: "click" | "hover";
+  filterable?: boolean;
+  multiple?: boolean;
+  disabled?: boolean;
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string[][]) => void;
+}
+export declare function CascadeSelect({ value, data, placeholder, highlightTrigger, filterable, multiple, disabled, size, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
+//#endregion