@glyphui/ui 0.3.0 → 0.5.0

package/dist/components/stepper/stepper.styles.js

@@ -0,0 +1,67 @@
+"use client";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/stepper/stepper.styles.ts
+const stepperStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "flex w-full list-none p-0",
+		step: "relative flex min-w-0",
+		trigger: ["flex min-w-0 rounded-md text-left", focusRing],
+		indicator: [
+			"relative z-10 flex size-8 shrink-0 items-center justify-center rounded-pill text-small font-medium tabular-nums [&>svg]:size-4",
+			themedBorder,
+			transition
+		],
+		connector: "absolute transition-colors duration-(--glyph-duration-base)",
+		text: "grid min-w-0 gap-0.5",
+		title: "text-small font-medium",
+		description: "text-caption text-muted-foreground"
+	},
+	variants: {
+		orientation: {
+			horizontal: {
+				root: "items-start",
+				step: "flex-1 flex-col items-center text-center",
+				trigger: "flex-col items-center gap-2 text-center",
+				connector: "top-4 right-[calc(-50%+1.25rem)] left-[calc(50%+1.25rem)] h-px",
+				text: "px-2"
+			},
+			vertical: {
+				root: "flex-col",
+				step: "gap-3 pb-7 last:pb-0",
+				trigger: "items-start gap-3",
+				connector: "top-9.5 bottom-1.5 left-4 w-px -translate-x-1/2",
+				text: "pt-1.5"
+			}
+		},
+		status: {
+			complete: {
+				indicator: "border-primary bg-primary text-primary-foreground",
+				connector: "bg-primary",
+				title: "text-foreground"
+			},
+			current: {
+				indicator: "border-primary bg-surface text-primary-text ring-4 ring-primary/15",
+				connector: "bg-border",
+				title: "text-foreground"
+			},
+			upcoming: {
+				indicator: "border-border bg-surface text-muted-foreground",
+				connector: "bg-border",
+				title: "text-muted-foreground"
+			},
+			error: {
+				indicator: "border-danger bg-danger text-danger-foreground",
+				connector: "bg-border",
+				title: "text-danger-text"
+			}
+		},
+		clickable: { true: { trigger: "cursor-pointer hover:[&_[data-slot=stepper-title]]:underline underline-offset-4" } }
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		status: "upcoming"
+	}
+});
+//#endregion
+export { stepperStyles };

package/dist/components/switch/index.d.ts

@@ -0,0 +1,2 @@
+import { Switch, SwitchProps, switchStyles } from "./switch.js";
+export { Switch, type SwitchProps, switchStyles };

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,51 @@
+import { VariantProps } from "../../utils/tv.js";
+import { Switch } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/switch/switch.d.ts
+export declare const switchStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      thumb: string;
+    };
+    md: {
+      root: string;
+      thumb: string;
+    };
+  };
+}, {
+  root: string[];
+  thumb: string;
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+      thumb: string;
+    };
+    md: {
+      root: string;
+      thumb: string;
+    };
+  };
+}, {
+  root: string[];
+  thumb: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      root: string;
+      thumb: string;
+    };
+    md: {
+      root: string;
+      thumb: string;
+    };
+  };
+}, {
+  root: string[];
+  thumb: string;
+}>>;
+export interface SwitchProps extends ComponentProps<typeof Switch.Root>, VariantProps<typeof switchStyles> {}
+declare function Switch$1(inProps: SwitchProps): import("react").JSX.Element;
+//#endregion
+export { Switch$1 as Switch };

package/dist/components/switch/switch.js

@@ -0,0 +1,43 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { useFieldControl } from "../field/field-context.js";
+import { Switch } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/switch/switch.tsx
+const switchStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: [
+			"peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-transparent bg-input p-px",
+			themedBorder,
+			transition,
+			focusRing,
+			"data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		thumb: "pointer-events-none block rounded-pill bg-white shadow-sm transition-[translate] duration-(--glyph-duration-spring) ease-spring data-[state=unchecked]:translate-x-0"
+	},
+	variants: { size: {
+		sm: {
+			root: "h-4 w-7",
+			thumb: "size-3 data-[state=checked]:translate-x-3"
+		},
+		md: {
+			root: "h-5 w-9",
+			thumb: "size-4 data-[state=checked]:translate-x-4"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+function Switch$1(inProps) {
+	const [{ size, className, ...rest }, slots] = useComponentConfig("Switch", useFieldControl(inProps));
+	const s = switchStyles({ size });
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: s.thumb({ class: slots.thumb }) })
+	});
+}
+//#endregion
+export { Switch$1 as Switch, switchStyles };

package/dist/components/table/index.d.ts

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, tableStyles } from "./table.js";
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, tableStyles };

package/dist/components/table/table.d.ts

@@ -0,0 +1,78 @@
+import { ComponentProps } from "react";
+//#region src/components/table/table.d.ts
+export declare const tableStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      caption?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+      wrapper?: import("tailwind-variants").ClassValue;
+      row?: import("tailwind-variants").ClassValue;
+      head?: import("tailwind-variants").ClassValue;
+      cell?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      caption?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+      wrapper?: import("tailwind-variants").ClassValue;
+      row?: import("tailwind-variants").ClassValue;
+      head?: import("tailwind-variants").ClassValue;
+      cell?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  wrapper: string;
+  table: string;
+  header: string;
+  body: string;
+  row: string;
+  head: string;
+  cell: string;
+  caption: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      caption?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+      wrapper?: import("tailwind-variants").ClassValue;
+      row?: import("tailwind-variants").ClassValue;
+      head?: import("tailwind-variants").ClassValue;
+      cell?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  wrapper: string;
+  table: string;
+  header: string;
+  body: string;
+  row: string;
+  head: string;
+  cell: string;
+  caption: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  wrapper: string;
+  table: string;
+  header: string;
+  body: string;
+  row: string;
+  head: string;
+  cell: string;
+  caption: string;
+}>>;
+/** Semantic table primitives styled by the theme. For sorting and pagination use DataTable. */
+export declare function Table({ className, ...props }: ComponentProps<'table'>): import("react").JSX.Element;
+export declare function TableHeader({ className, ...props }: ComponentProps<'thead'>): import("react").JSX.Element;
+export declare function TableBody({ className, ...props }: ComponentProps<'tbody'>): import("react").JSX.Element;
+export declare function TableRow({ className, ...props }: ComponentProps<'tr'>): import("react").JSX.Element;
+export declare function TableHead({ className, ...props }: ComponentProps<'th'>): import("react").JSX.Element;
+export declare function TableCell({ className, ...props }: ComponentProps<'td'>): import("react").JSX.Element;
+export declare function TableCaption({ className, ...props }: ComponentProps<'caption'>): import("react").JSX.Element;
+//#endregion

package/dist/components/table/table.js

@@ -0,0 +1,82 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table.tsx
+const tableStyles = /* @__PURE__ */ tv({ slots: {
+	wrapper: "relative w-full overflow-x-auto",
+	table: "w-full caption-bottom border-collapse text-small tabular-nums",
+	header: "[&_tr]:border-b [&_tr]:border-border",
+	body: "[&_tr:last-child]:border-0",
+	row: "border-b border-border transition-colors duration-(--glyph-duration-fast) hover:bg-muted/50 data-[state=selected]:bg-primary/6",
+	head: "h-10 whitespace-nowrap px-3 first:pl-4 last:pr-4 text-left align-middle text-caption font-medium text-muted-foreground [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0",
+	cell: "px-3 py-2.5 align-middle first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0",
+	caption: "mt-3 text-small text-faint-foreground"
+} });
+const s = tableStyles();
+function useSlots() {
+	return useComponentConfig("Table", {})[1];
+}
+/** Semantic table primitives styled by the theme. For sorting and pagination use DataTable. */
+function Table({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-wrapper",
+		className: s.wrapper({ class: slots.wrapper }),
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: s.table({ class: [slots.table, className] }),
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: s.body({ class: [slots.body, className] }),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: s.row({ class: [slots.row, className] }),
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: s.head({ class: [slots.head, className] }),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: s.cell({ class: [slots.cell, className] }),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: s.caption({ class: [slots.caption, className] }),
+		...props
+	});
+}
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, tableStyles };

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,2 @@
+import { Tabs, TabsContent, TabsList, TabsProps, TabsTrigger, tabsStyles } from "./tabs.js";
+export { Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, tabsStyles };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,73 @@
+import { VariantProps } from "../../utils/tv.js";
+import { Tabs } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/tabs/tabs.d.ts
+export declare const tabsStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    underline: {
+      list: string;
+      trigger: string;
+      indicator: string;
+    };
+    pill: {
+      list: string[];
+      trigger: string;
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  trigger: string[];
+  /** Slides to the active tab. Underline bar or pill background, by variant. */
+  indicator: string;
+  content: string;
+}, undefined, {
+  variant: {
+    underline: {
+      list: string;
+      trigger: string;
+      indicator: string;
+    };
+    pill: {
+      list: string[];
+      trigger: string;
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  trigger: string[];
+  /** Slides to the active tab. Underline bar or pill background, by variant. */
+  indicator: string;
+  content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    underline: {
+      list: string;
+      trigger: string;
+      indicator: string;
+    };
+    pill: {
+      list: string[];
+      trigger: string;
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  trigger: string[];
+  /** Slides to the active tab. Underline bar or pill background, by variant. */
+  indicator: string;
+  content: string;
+}>>;
+type TabsVariants = VariantProps<typeof tabsStyles>;
+export interface TabsProps extends ComponentProps<typeof Tabs.Root>, TabsVariants {}
+declare function Tabs$1(inProps: TabsProps): import("react").JSX.Element;
+export declare function TabsList({ className, ...props }: ComponentProps<typeof Tabs.List>): import("react").JSX.Element;
+export declare function TabsTrigger({ className, children, ...props }: ComponentProps<typeof Tabs.Trigger>): import("react").JSX.Element;
+export declare function TabsContent({ className, ...props }: ComponentProps<typeof Tabs.Content>): import("react").JSX.Element;
+//#endregion
+export { Tabs$1 as Tabs };

package/dist/components/tabs/tabs.js

@@ -0,0 +1,103 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { ActiveIndicator } from "../../motion/active-indicator.js";
+import { Tabs } from "radix-ui";
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tabs/tabs.tsx
+const tabsStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "flex flex-col gap-4",
+		list: "isolate flex items-center",
+		trigger: [
+			"relative inline-flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap text-small font-medium text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:text-foreground data-[state=active]:text-foreground disabled:pointer-events-none disabled:opacity-50",
+			"[&>svg]:size-4"
+		],
+		/** Slides to the active tab. Underline bar or pill background, by variant. */
+		indicator: "pointer-events-none absolute",
+		content: "outline-none"
+	},
+	variants: { variant: {
+		underline: {
+			list: "gap-5 border-b border-border",
+			trigger: "h-9",
+			indicator: "inset-x-0 -bottom-px h-0.5 rounded-pill bg-foreground"
+		},
+		pill: {
+			list: ["inline-flex w-fit gap-0.5 rounded-md border-border bg-muted p-0.5", themedBorder],
+			trigger: "h-7 rounded-[calc(var(--radius-md)-2px)] px-3",
+			indicator: "inset-0 -z-10 rounded-[calc(var(--radius-md)-2px)] bg-raised shadow-xs"
+		}
+	} },
+	defaultVariants: { variant: "underline" }
+});
+const TabsContext = createContext({});
+function Tabs$1(inProps) {
+	const [props, slots] = useComponentConfig("Tabs", inProps);
+	const { variant, className, value: valueProp, defaultValue, onValueChange, ...rest } = props;
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	const indicatorId = `${useId()}-tabs-indicator`;
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			variant,
+			value,
+			indicatorId
+		},
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			"data-slot": "tabs",
+			className: tabsStyles({ variant }).root({ class: [slots.root, className] }),
+			value,
+			onValueChange: setValue,
+			...rest
+		})
+	});
+}
+function useTabsParts() {
+	const context = useContext(TabsContext);
+	const [, slots] = useComponentConfig("Tabs", {});
+	return {
+		s: tabsStyles({ variant: context.variant }),
+		slots,
+		context
+	};
+}
+function TabsList({ className, ...props }) {
+	const { s, slots } = useTabsParts();
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		className: s.list({ class: [slots.list, className] }),
+		...props
+	});
+}
+function TabsTrigger({ className, children, ...props }) {
+	const { s, slots, context } = useTabsParts();
+	return /* @__PURE__ */ jsxs(Tabs.Trigger, {
+		"data-slot": "tabs-trigger",
+		className: s.trigger({ class: [slots.trigger, className] }),
+		...props,
+		children: [children, context.indicatorId && context.value === props.value && /* @__PURE__ */ jsx(ActiveIndicator, {
+			layoutId: context.indicatorId,
+			className: s.indicator({ class: slots.indicator })
+		})]
+	});
+}
+function TabsContent({ className, ...props }) {
+	const { s, slots } = useTabsParts();
+	return /* @__PURE__ */ jsx(Tabs.Content, {
+		"data-slot": "tabs-content",
+		className: s.content({ class: [slots.content, className] }),
+		...props
+	});
+}
+//#endregion
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, tabsStyles };

package/dist/components/tag-input/index.d.ts

@@ -0,0 +1,3 @@
+import { TagInputVariants, tagInputStyles } from "./tag-input.styles.js";
+import { TagInput, TagInputProps } from "./tag-input.js";
+export { TagInput, type TagInputProps, type TagInputVariants, tagInputStyles };

package/dist/components/tag-input/tag-input.d.ts

@@ -0,0 +1,30 @@
+import { TagInputVariants } from "./tag-input.styles.js";
+//#region src/components/tag-input/tag-input.d.ts
+export interface TagInputProps extends TagInputVariants {
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (tags: string[]) => void;
+  placeholder?: string;
+  /** Stop accepting tags after this many. */
+  maxTags?: number;
+  /** Return an error message to reject a tag, or `true` to accept it. */
+  validate?: (tag: string, tags: readonly string[]) => string | true;
+  /** Allow the same tag more than once. Default false. */
+  allowDuplicates?: boolean;
+  /** Keys (besides Enter) that turn the typed text into a tag. Default `[',']`. */
+  separators?: readonly string[];
+  disabled?: boolean;
+  /** Submits each tag as its own hidden input with this name. */
+  name?: string;
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+}
+/**
+ * Free-form multi-value input. Enter or a comma turns the text into a removable tag;
+ * Backspace on an empty input removes the last one. Pasting a comma-separated list adds them all.
+ */
+export declare function TagInput(inProps: TagInputProps): import("react").JSX.Element;
+//#endregion