@glyphui/ui 0.3.0 → 0.5.0

package/dist/components/calendar/calendar.js

@@ -0,0 +1,75 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { calendarStyles } from "./calendar.styles.js";
+import { jsx } from "react/jsx-runtime";
+import { DayPicker } from "react-day-picker";
+//#region src/components/calendar/calendar.tsx
+function ChevronIcon({ className, orientation = "left" }) {
+	const d = {
+		left: "m15 18-6-6 6-6",
+		right: "m9 18 6-6-6-6",
+		up: "m18 15-6-6-6 6",
+		down: "m6 9 6 6 6-6"
+	}[orientation];
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		children: /* @__PURE__ */ jsx("path", { d })
+	});
+}
+/**
+* A month grid for picking dates, built on react-day-picker and styled by the theme.
+* Supports `mode="single" | "multiple" | "range"`, disabled dates and several months.
+*/
+function Calendar(inProps) {
+	const [props, slots] = useComponentConfig("Calendar", inProps);
+	const { className, classNames, components, showOutsideDays = true, ...rest } = props;
+	const s = calendarStyles();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: s.root({ class: [slots.root, className] }),
+		classNames: {
+			months: s.months({ class: slots.months }),
+			month: s.month({ class: slots.month }),
+			month_caption: s.monthCaption({ class: slots.monthCaption }),
+			caption_label: s.captionLabel({ class: slots.captionLabel }),
+			nav: s.nav({ class: slots.nav }),
+			button_previous: s.navButton({ class: slots.navButton }),
+			button_next: s.navButton({ class: slots.navButton }),
+			chevron: s.chevron({ class: slots.chevron }),
+			month_grid: s.monthGrid({ class: slots.monthGrid }),
+			weekdays: s.weekdays({ class: slots.weekdays }),
+			weekday: s.weekday({ class: slots.weekday }),
+			weeks: s.weeks({ class: slots.weeks }),
+			week: s.week({ class: slots.week }),
+			day: s.day({ class: slots.day }),
+			day_button: s.dayButton({ class: slots.dayButton }),
+			today: s.today({ class: slots.today }),
+			selected: s.selected({ class: slots.selected }),
+			outside: s.outside({ class: slots.outside }),
+			disabled: s.disabled({ class: slots.disabled }),
+			range_start: s.rangeStart({ class: slots.rangeStart }),
+			range_middle: s.rangeMiddle({ class: slots.rangeMiddle }),
+			range_end: s.rangeEnd({ class: slots.rangeEnd }),
+			hidden: s.hidden({ class: slots.hidden }),
+			footer: s.footer({ class: slots.footer }),
+			...classNames
+		},
+		components: {
+			Chevron: ({ className: chevronClass, orientation }) => /* @__PURE__ */ jsx(ChevronIcon, {
+				className: chevronClass,
+				orientation
+			}),
+			...components
+		},
+		...rest
+	});
+}
+//#endregion
+export { Calendar };

package/dist/components/calendar/calendar.styles.d.ts

@@ -0,0 +1,171 @@
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/calendar/calendar.styles.d.ts
+export declare const calendarStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      footer?: import("tailwind-variants").ClassValue;
+      nav?: import("tailwind-variants").ClassValue;
+      hidden?: import("tailwind-variants").ClassValue;
+      disabled?: import("tailwind-variants").ClassValue;
+      chevron?: import("tailwind-variants").ClassValue;
+      months?: import("tailwind-variants").ClassValue;
+      month?: import("tailwind-variants").ClassValue;
+      monthCaption?: import("tailwind-variants").ClassValue;
+      captionLabel?: import("tailwind-variants").ClassValue;
+      monthGrid?: import("tailwind-variants").ClassValue;
+      weekdays?: import("tailwind-variants").ClassValue;
+      weekday?: import("tailwind-variants").ClassValue;
+      weeks?: import("tailwind-variants").ClassValue;
+      week?: import("tailwind-variants").ClassValue;
+      day?: import("tailwind-variants").ClassValue;
+      today?: import("tailwind-variants").ClassValue;
+      selected?: import("tailwind-variants").ClassValue;
+      outside?: import("tailwind-variants").ClassValue;
+      rangeStart?: import("tailwind-variants").ClassValue;
+      rangeMiddle?: import("tailwind-variants").ClassValue;
+      rangeEnd?: import("tailwind-variants").ClassValue;
+      navButton?: import("tailwind-variants").ClassValue;
+      dayButton?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      footer?: import("tailwind-variants").ClassValue;
+      nav?: import("tailwind-variants").ClassValue;
+      hidden?: import("tailwind-variants").ClassValue;
+      disabled?: import("tailwind-variants").ClassValue;
+      chevron?: import("tailwind-variants").ClassValue;
+      months?: import("tailwind-variants").ClassValue;
+      month?: import("tailwind-variants").ClassValue;
+      monthCaption?: import("tailwind-variants").ClassValue;
+      captionLabel?: import("tailwind-variants").ClassValue;
+      monthGrid?: import("tailwind-variants").ClassValue;
+      weekdays?: import("tailwind-variants").ClassValue;
+      weekday?: import("tailwind-variants").ClassValue;
+      weeks?: import("tailwind-variants").ClassValue;
+      week?: import("tailwind-variants").ClassValue;
+      day?: import("tailwind-variants").ClassValue;
+      today?: import("tailwind-variants").ClassValue;
+      selected?: import("tailwind-variants").ClassValue;
+      outside?: import("tailwind-variants").ClassValue;
+      rangeStart?: import("tailwind-variants").ClassValue;
+      rangeMiddle?: import("tailwind-variants").ClassValue;
+      rangeEnd?: import("tailwind-variants").ClassValue;
+      navButton?: import("tailwind-variants").ClassValue;
+      dayButton?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  months: string;
+  month: string;
+  monthCaption: string;
+  captionLabel: string;
+  nav: string;
+  navButton: string[];
+  chevron: string;
+  monthGrid: string;
+  weekdays: string;
+  weekday: string;
+  weeks: string;
+  week: string;
+  day: string;
+  dayButton: string[];
+  today: string;
+  selected: string;
+  outside: string;
+  disabled: string;
+  rangeStart: string;
+  rangeMiddle: string;
+  rangeEnd: string;
+  hidden: string;
+  footer: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      footer?: import("tailwind-variants").ClassValue;
+      nav?: import("tailwind-variants").ClassValue;
+      hidden?: import("tailwind-variants").ClassValue;
+      disabled?: import("tailwind-variants").ClassValue;
+      chevron?: import("tailwind-variants").ClassValue;
+      months?: import("tailwind-variants").ClassValue;
+      month?: import("tailwind-variants").ClassValue;
+      monthCaption?: import("tailwind-variants").ClassValue;
+      captionLabel?: import("tailwind-variants").ClassValue;
+      monthGrid?: import("tailwind-variants").ClassValue;
+      weekdays?: import("tailwind-variants").ClassValue;
+      weekday?: import("tailwind-variants").ClassValue;
+      weeks?: import("tailwind-variants").ClassValue;
+      week?: import("tailwind-variants").ClassValue;
+      day?: import("tailwind-variants").ClassValue;
+      today?: import("tailwind-variants").ClassValue;
+      selected?: import("tailwind-variants").ClassValue;
+      outside?: import("tailwind-variants").ClassValue;
+      rangeStart?: import("tailwind-variants").ClassValue;
+      rangeMiddle?: import("tailwind-variants").ClassValue;
+      rangeEnd?: import("tailwind-variants").ClassValue;
+      navButton?: import("tailwind-variants").ClassValue;
+      dayButton?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  months: string;
+  month: string;
+  monthCaption: string;
+  captionLabel: string;
+  nav: string;
+  navButton: string[];
+  chevron: string;
+  monthGrid: string;
+  weekdays: string;
+  weekday: string;
+  weeks: string;
+  week: string;
+  day: string;
+  dayButton: string[];
+  today: string;
+  selected: string;
+  outside: string;
+  disabled: string;
+  rangeStart: string;
+  rangeMiddle: string;
+  rangeEnd: string;
+  hidden: string;
+  footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  months: string;
+  month: string;
+  monthCaption: string;
+  captionLabel: string;
+  nav: string;
+  navButton: string[];
+  chevron: string;
+  monthGrid: string;
+  weekdays: string;
+  weekday: string;
+  weeks: string;
+  week: string;
+  day: string;
+  dayButton: string[];
+  today: string;
+  selected: string;
+  outside: string;
+  disabled: string;
+  rangeStart: string;
+  rangeMiddle: string;
+  rangeEnd: string;
+  hidden: string;
+  footer: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Calendar: StylesEntry<typeof calendarStyles>;
+  }
+}
+//#endregion

package/dist/components/calendar/calendar.styles.js

@@ -0,0 +1,42 @@
+"use client";
+import { focusRing, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/calendar/calendar.styles.ts
+const calendarStyles = /* @__PURE__ */ tv({ slots: {
+	root: "relative w-fit p-3 text-small text-foreground",
+	months: "relative flex flex-col gap-6 sm:flex-row",
+	month: "grid content-start gap-3",
+	monthCaption: "flex h-8 items-center justify-center px-9",
+	captionLabel: "font-medium text-foreground",
+	nav: "pointer-events-none absolute inset-x-3 top-3 z-10 flex items-center justify-between",
+	navButton: [
+		"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground",
+		"hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40",
+		transition,
+		focusRing
+	],
+	chevron: "size-4",
+	monthGrid: "border-collapse",
+	weekdays: "",
+	weekday: "size-9 p-0 text-caption font-normal text-faint-foreground",
+	weeks: "",
+	week: "",
+	day: "size-9 p-0 text-center align-middle",
+	dayButton: [
+		"inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-small tabular-nums text-foreground",
+		"hover:bg-muted",
+		transition,
+		focusRing
+	],
+	today: "[&>button]:font-semibold [&:not([data-selected])>button]:text-primary-text",
+	selected: "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary/90",
+	outside: "[&:not([data-selected])>button]:text-faint-foreground",
+	disabled: "[&>button]:pointer-events-none [&>button]:opacity-35 [&>button]:line-through",
+	rangeStart: "rounded-l-md bg-primary/14",
+	rangeMiddle: "bg-primary/14 [&>button]:rounded-none [&>button]:bg-transparent! [&>button]:text-foreground! [&>button]:hover:bg-primary/10!",
+	rangeEnd: "rounded-r-md bg-primary/14",
+	hidden: "invisible",
+	footer: "pt-2 text-small text-muted-foreground"
+} });
+//#endregion
+export { calendarStyles };

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

@@ -0,0 +1,4 @@
+import { Calendar, CalendarProps } from "./calendar.js";
+import { calendarStyles } from "./calendar.styles.js";
+import { DateRange as DateRange$1, Matcher as Matcher$1 } from "react-day-picker";
+export { Calendar, type CalendarProps, type DateRange$1 as DateRange, type Matcher$1 as Matcher, calendarStyles };

package/dist/components/card/card.d.ts

@@ -0,0 +1,17 @@
+import { CardVariants } from "./card.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/card/card.d.ts
+export interface CardProps extends ComponentProps<'div'>, CardVariants {
+  asChild?: boolean;
+}
+/** A surface that groups related content. Compose with CardHeader, CardTitle, CardBody, CardFooter. */
+export declare function Card(inProps: CardProps): import("react").JSX.Element;
+export declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export interface CardTitleProps extends ComponentProps<'h3'> {
+  asChild?: boolean;
+}
+export declare function CardTitle({ asChild, className, ...props }: CardTitleProps): import("react").JSX.Element;
+export declare function CardDescription({ className, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
+export declare function CardBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function CardFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion

package/dist/components/card/card.js

@@ -0,0 +1,79 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { cardStyles } from "./card.styles.js";
+import { Slot } from "radix-ui";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/card/card.tsx
+const CardContext = createContext(null);
+function useCardParts() {
+	return useContext(CardContext) ?? {
+		s: cardStyles(),
+		slots: {}
+	};
+}
+/** A surface that groups related content. Compose with CardHeader, CardTitle, CardBody, CardFooter. */
+function Card(inProps) {
+	const [props, slots] = useComponentConfig("Card", inProps);
+	const { variant, padding, asChild, className, ...rest } = props;
+	const s = cardStyles({
+		variant,
+		padding
+	});
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(CardContext.Provider, {
+		value: {
+			s,
+			slots
+		},
+		children: /* @__PURE__ */ jsx(Comp, {
+			"data-slot": "card",
+			"data-variant": variant,
+			className: s.root({ class: [slots.root, className] }),
+			...rest
+		})
+	});
+}
+function CardHeader({ className, ...props }) {
+	const { s, slots } = useCardParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function CardTitle({ asChild, className, ...props }) {
+	const { s, slots } = useCardParts();
+	const Comp = asChild ? Slot.Root : "h3";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "card-title",
+		className: s.title({ class: [slots.title, className] }),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	const { s, slots } = useCardParts();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "card-description",
+		className: s.description({ class: [slots.description, className] }),
+		...props
+	});
+}
+function CardBody({ className, ...props }) {
+	const { s, slots } = useCardParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-body",
+		className: s.body({ class: [slots.body, className] }),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	const { s, slots } = useCardParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+//#endregion
+export { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/card/card.styles.d.ts

@@ -0,0 +1,113 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/card/card.styles.d.ts
+export declare const cardStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    outline: {
+      root: string;
+    };
+    elevated: {
+      root: string;
+    };
+    ghost: {
+      root: string;
+    };
+    interactive: {
+      root: string;
+    };
+  };
+  padding: {
+    none: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}, undefined, {
+  variant: {
+    outline: {
+      root: string;
+    };
+    elevated: {
+      root: string;
+    };
+    ghost: {
+      root: string;
+    };
+    interactive: {
+      root: string;
+    };
+  };
+  padding: {
+    none: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    outline: {
+      root: string;
+    };
+    elevated: {
+      root: string;
+    };
+    ghost: {
+      root: string;
+    };
+    interactive: {
+      root: string;
+    };
+  };
+  padding: {
+    none: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}>>;
+export type CardVariants = VariantProps<typeof cardStyles>;
+//#endregion

package/dist/components/card/card.styles.js

@@ -0,0 +1,38 @@
+"use client";
+import { themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/card/card.styles.ts
+const cardStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: [
+			"flex flex-col rounded-lg text-foreground",
+			themedBorder,
+			transition
+		],
+		header: "flex flex-col gap-1",
+		title: "font-display text-h4 text-foreground",
+		description: "text-small text-muted-foreground",
+		body: "min-w-0",
+		footer: "mt-auto flex items-center gap-2 pt-1"
+	},
+	variants: {
+		variant: {
+			outline: { root: "border-border bg-surface" },
+			elevated: { root: "border-border bg-surface shadow-md" },
+			ghost: { root: "border-transparent bg-subtle" },
+			interactive: { root: "cursor-pointer border-border bg-surface shadow-sm hover:-translate-y-0.5 hover:border-border-strong hover:shadow-lg" }
+		},
+		padding: {
+			none: { root: "gap-0 p-0" },
+			sm: { root: "gap-3 p-4" },
+			md: { root: "gap-4 p-6" },
+			lg: { root: "gap-5 p-8" }
+		}
+	},
+	defaultVariants: {
+		variant: "elevated",
+		padding: "md"
+	}
+});
+//#endregion
+export { cardStyles };

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

@@ -0,0 +1,3 @@
+import { CardVariants, cardStyles } from "./card.styles.js";
+import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardProps, CardTitle, CardTitleProps } from "./card.js";
+export { Card, CardBody, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, type CardTitleProps, type CardVariants, cardStyles };

package/dist/components/carousel/carousel.d.ts

@@ -0,0 +1,37 @@
+import { IconButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { CarouselVariants } from "./carousel.styles.js";
+import { ComponentProps, ReactNode } from "react";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+//#region src/components/carousel/carousel.d.ts
+export type CarouselApi = UseEmblaCarouselType[1];
+type EmblaArgs = Parameters<typeof useEmblaCarousel>;
+export type CarouselOptions = EmblaArgs[0];
+export type CarouselPlugin = NonNullable<EmblaArgs[1]>[number];
+export interface CarouselProps extends Omit<ComponentProps<'section'>, 'aria-label'>, CarouselVariants {
+  /** Embla options, e.g. `{ align: 'start', loop: true }`. */
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin[];
+  /** Shortcut for `opts.loop`. */
+  loop?: boolean;
+  /** Receives the Embla API for custom controls. */
+  setApi?: (api: CarouselApi) => void;
+  /** Required: describes the content, e.g. "Customer stories". */
+  'aria-label': string;
+}
+/**
+ * Swipeable, keyboard-accessible slides. Compose with CarouselContent, CarouselItem,
+ * CarouselPrevious, CarouselNext and CarouselDots.
+ */
+export declare function Carousel(inProps: CarouselProps): import("react").JSX.Element;
+export declare function CarouselContent({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function CarouselItem({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+type ControlProps = Omit<IconButtonProps, 'icon' | 'aria-label'> & {
+  'aria-label'?: string;
+  icon?: ReactNode;
+};
+export declare function CarouselPrevious({ className, icon, ...props }: ControlProps): import("react").JSX.Element;
+export declare function CarouselNext({ className, icon, ...props }: ControlProps): import("react").JSX.Element;
+/** One button per snap point; the current one is highlighted. */
+export declare function CarouselDots({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element | null;
+//#endregion