@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/calendar.js

@@ -1,293 +1,139 @@
-// src/components/ui/calendar.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, ComboboxValue } from "./combobox.js";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import {
-  DayPicker,
-  getDefaultClassNames
-} from "react-day-picker";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+//#region src/calendar.tsx
+function Calendar({ className, classNames, showOutsideDays = false, weekStartsOn = 1, locale, formatters, components, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		weekStartsOn,
+		className: cn("group/calendar bg-transparent p-4 [--cell-radius:var(--radius-md)] [--cell-height:36px] [--cell-width:40px]", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+		locale,
+		formatters: {
+			formatWeekdayName: (date) => date.toLocaleString(locale?.code, { weekday: "narrow" }),
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+			nav: cn("pointer-events-none absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1 *:pointer-events-auto", defaultClassNames.nav),
+			button_previous: cn("flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40", defaultClassNames.button_previous),
+			button_next: cn("flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40", defaultClassNames.button_next),
+			month_caption: cn("flex h-(--cell-height) w-full items-center justify-center px-(--cell-width)", defaultClassNames.month_caption),
+			caption_label: cn("text-gdt-sm font-medium text-fg-primary select-none", defaultClassNames.caption_label),
+			dropdowns: cn("flex h-(--cell-height) w-full items-center justify-center gap-1.5", defaultClassNames.dropdowns),
+			table: "w-full border-collapse",
+			weekdays: cn("flex", defaultClassNames.weekdays),
+			weekday: cn("flex-1 text-gdt-xs font-normal text-fg-secondary select-none", defaultClassNames.weekday),
+			week: cn("mt-1 flex w-full", defaultClassNames.week),
+			day: cn("group/day relative aspect-square h-full w-full p-0 text-center select-none", defaultClassNames.day),
+			range_start: cn("rounded-l-full bg-surface-brand-subtle", defaultClassNames.range_start),
+			range_middle: cn("rounded-none bg-surface-brand-subtle", defaultClassNames.range_middle),
+			range_end: cn("rounded-r-full bg-surface-brand-subtle", defaultClassNames.range_end),
+			today: cn("rounded-full h-(--cell-height) w-(--cell-width) flex items-center justify-center bg-surface-brand-subtle p-0", defaultClassNames.today),
+			outside: cn("text-fg-caption-placeholder aria-selected:text-fg-caption-placeholder", defaultClassNames.outside),
+			disabled: cn("text-fg-caption-placeholder opacity-50", defaultClassNames.disabled),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className, rootRef, ...props }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(className),
+					...props
+				});
+			},
+			Chevron: ({ className, orientation, ...props }) => {
+				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+				return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+			},
+			DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
+				locale,
+				...props
+			}),
+			Dropdown: CalendarDropdown,
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex h-(--cell-height) w-(--cell-width) items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
 }
-
-// src/components/ui/button.tsx
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
+function CalendarDropdown({ options = [], value, onChange, disabled, "aria-label": ariaLabel }) {
+	const selected = options.find((option) => option.value === Number(value));
+	return /* @__PURE__ */ jsxs(Combobox, {
+		size: "sm",
+		items: options.map((option) => option.label),
+		value: selected?.label ?? null,
+		onValueChange: (label) => {
+			const next = options.find((option) => option.label === label);
+			if (!next) return;
+			onChange?.({ target: { value: String(next.value) } });
+		},
+		disabled,
+		children: [/* @__PURE__ */ jsx(ComboboxTrigger, {
+			"aria-label": ariaLabel,
+			children: /* @__PURE__ */ jsx(ComboboxValue, {})
+		}), /* @__PURE__ */ jsxs(ComboboxContent, {
+			className: "w-auto min-w-32",
+			children: [
+				/* @__PURE__ */ jsx(ComboboxInput, {
+					placeholder: "Search",
+					showTrigger: false
+				}),
+				/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No results" }),
+				/* @__PURE__ */ jsx(ComboboxList, {
+					className: "max-h-56",
+					children: (label) => /* @__PURE__ */ jsx(ComboboxItem, {
+						value: label,
+						disabled: options.find((option) => option.label === label)?.disabled,
+						children: label
+					}, label)
+				})
+			]
+		})]
+	});
 }
-
-// src/components/ui/button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
-        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
-        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
-        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
-        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
-      },
-      size: {
-        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
-        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-10",
-        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
-        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "primary",
-  size,
-  isLoading = false,
-  children,
-  disabled = false,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const _disabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxs(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-      disabled: _disabled,
-      ...props,
-      children: [
-        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
-        " ",
-        children
-      ]
-    }
-  );
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	const isEndpoint = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle || modifiers.range_start || modifiers.range_end;
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		variant: "ghost",
+		size: "icon",
+		"data-day": day.date.toLocaleDateString(locale?.code),
+		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+		"data-range-start": modifiers.range_start,
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-width) h-(--cell-height) items-center justify-center rounded-full border-0 text-gdt-sm font-normal leading-none", "data-[range-end=true]:bg-action-primary data-[range-end=true]:text-fg-on-brand data-[range-end=true]:hover:bg-action-primary-hover data-[range-end=true]:hover:text-fg-on-brand", "data-[range-start=true]:bg-action-primary data-[range-start=true]:text-fg-on-brand data-[range-start=true]:hover:bg-action-primary-hover data-[range-start=true]:hover:text-fg-on-brand", "data-[selected-single=true]:bg-action-primary data-[selected-single=true]:text-fg-on-brand data-[selected-single=true]:hover:bg-action-primary-hover data-[selected-single=true]:hover:text-fg-on-brand", "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-fg-brand data-[range-middle=true]:hover:bg-transparent", isEndpoint && "font-medium", "group-data-[focused=true]/day:border-line-focus group-data-[focused=true]/day:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", defaultClassNames.day, className),
+		...props
+	});
 }
-
-// src/components/ui/calendar.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = false,
-  weekStartsOn = 1,
-  locale,
-  formatters,
-  components,
-  ...props
-}) {
-  const defaultClassNames = getDefaultClassNames();
-  return /* @__PURE__ */ jsx3(
-    DayPicker,
-    {
-      showOutsideDays,
-      weekStartsOn,
-      className: cn(
-        "group/calendar bg-transparent p-4 [--cell-radius:var(--radius-md)] [--cell-height:36px] [--cell-width:40px]",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      ),
-      locale,
-      formatters: {
-        formatWeekdayName: (date) => date.toLocaleString(locale?.code, { weekday: "narrow" }),
-        ...formatters
-      },
-      classNames: {
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
-        ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          "flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          "flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-(--cell-height) w-full items-center justify-center px-(--cell-width)",
-          defaultClassNames.month_caption
-        ),
-        caption_label: cn(
-          "text-gdt-sm font-medium text-fg-primary select-none",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "flex-1 text-gdt-xs font-normal text-fg-secondary select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-1 flex w-full", defaultClassNames.week),
-        day: cn(
-          "group/day relative aspect-square h-full w-full p-0 text-center select-none",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-full bg-surface-brand-subtle",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn(
-          "rounded-none bg-surface-brand-subtle",
-          defaultClassNames.range_middle
-        ),
-        range_end: cn(
-          "rounded-r-full bg-surface-brand-subtle",
-          defaultClassNames.range_end
-        ),
-        today: cn(
-          "rounded-full h-(--cell-height) w-(--cell-width) flex items-center justify-center bg-surface-brand-subtle p-0",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-fg-caption-placeholder aria-selected:text-fg-caption-placeholder",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-fg-caption-placeholder opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames
-      },
-      components: {
-        Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ jsx3(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
-          if (orientation === "right") {
-            return /* @__PURE__ */ jsx3(
-              ChevronRightIcon,
-              {
-                className: cn("size-4", className2),
-                ...props2
-              }
-            );
-          }
-          return /* @__PURE__ */ jsx3(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
-        },
-        DayButton: ({ ...props2 }) => /* @__PURE__ */ jsx3(CalendarDayButton, { locale, ...props2 }),
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsx3("td", { ...props2, children: /* @__PURE__ */ jsx3("div", { className: "flex h-(--cell-height) w-(--cell-width) items-center justify-center text-center", children }) });
-        },
-        ...components
-      },
-      ...props
-    }
-  );
-}
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  locale,
-  ...props
-}) {
-  const defaultClassNames = getDefaultClassNames();
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
-  const isEndpoint = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle || modifiers.range_start || modifiers.range_end;
-  return /* @__PURE__ */ jsx3(
-    Button,
-    {
-      ref,
-      variant: "ghost",
-      size: "icon",
-      "data-day": day.date.toLocaleDateString(locale?.code),
-      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
-      "data-range-start": modifiers.range_start,
-      "data-range-end": modifiers.range_end,
-      "data-range-middle": modifiers.range_middle,
-      className: cn(
-        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-width) h-(--cell-height) items-center justify-center rounded-full border-0 text-gdt-sm font-normal leading-none",
-        // Selected single + range endpoints: filled brand circle.
-        "data-[range-end=true]:bg-action-primary data-[range-end=true]:text-fg-on-brand data-[range-end=true]:hover:bg-action-primary-hover data-[range-end=true]:hover:text-fg-on-brand",
-        "data-[range-start=true]:bg-action-primary data-[range-start=true]:text-fg-on-brand data-[range-start=true]:hover:bg-action-primary-hover data-[range-start=true]:hover:text-fg-on-brand",
-        "data-[selected-single=true]:bg-action-primary data-[selected-single=true]:text-fg-on-brand data-[selected-single=true]:hover:bg-action-primary-hover data-[selected-single=true]:hover:text-fg-on-brand",
-        // In-range days: brand wash carried by the cell, brand text on the button.
-        "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-fg-brand data-[range-middle=true]:hover:bg-transparent",
-        isEndpoint && "font-medium",
-        "group-data-[focused=true]/day:border-line-focus group-data-[focused=true]/day:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
-        defaultClassNames.day,
-        className
-      ),
-      ...props
-    }
-  );
-}
-export {
-  Calendar,
-  CalendarDayButton
-};
-//# sourceMappingURL=calendar.js.map
+//#endregion
+export { Calendar, CalendarDayButton };

package/dist/card.d.ts

@@ -1,18 +1,16 @@
-import * as React from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { useRender } from '@base-ui/react/use-render';
-import { VariantProps } from 'class-variance-authority';
-
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+//#region src/card.d.ts
 declare const cardVariants: (props?: ({
-    selected?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type CardProps = useRender.ComponentProps<"article"> & VariantProps<typeof cardVariants>;
-declare function Card({ className, render, selected, ...props }: CardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function CardTitle({ className, render, ...props }: useRender.ComponentProps<"h3">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function CardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function CardDescription({ className, render, ...props }: useRender.ComponentProps<"p">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function CardContent({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function CardFooter({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function CardAction({ className, render, ...props }: useRender.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, cardVariants };
+declare function Card({ className, render, selected, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function CardTitle({ className, render, ...props }: useRender.ComponentProps<"h3">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function CardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function CardDescription({ className, render, ...props }: useRender.ComponentProps<"p">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function CardContent({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function CardFooter({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function CardAction({ className, render, ...props }: useRender.ComponentProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, cardVariants };