@lfrprazeres/ui 0.1.0 → 0.3.0

package/dist/components/search-combobox.js

@@ -0,0 +1,128 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { SearchComboboxOption } from "./search-combobox-option.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+//#region src/components/search-combobox.tsx
+/**
+* A combobox with a listbox popup, following the ARIA authoring practices:
+* focus stays in the input and the active option is pointed at with
+* `aria-activedescendant` rather than moved.
+*
+* Controlled and source-agnostic. Filtering, fetching and what a selection
+* does all belong to the caller.
+*/
+function SearchCombobox({ className, emptyLabel, getOptionKey, icon, label, loading = false, loadingLabel, onOpenChange, onQueryChange, onSelect, options, placeholder, query, renderOption }) {
+	const [open, setOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const containerRef = useRef(null);
+	const inputRef = useRef(null);
+	const listboxId = useId();
+	const changeOpen = useCallback((next) => {
+		setOpen(next);
+		onOpenChange?.(next);
+	}, [onOpenChange]);
+	useEffect(() => {
+		if (!open) return;
+		function handlePointerDown(event) {
+			if (!containerRef.current?.contains(event.target)) changeOpen(false);
+		}
+		window.addEventListener("mousedown", handlePointerDown);
+		return () => window.removeEventListener("mousedown", handlePointerDown);
+	}, [open, changeOpen]);
+	const choose = useCallback((option) => {
+		changeOpen(false);
+		onSelect(option);
+	}, [changeOpen, onSelect]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Escape") {
+			changeOpen(false);
+			inputRef.current?.blur();
+			return;
+		}
+		if (options.length === 0) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			setActiveIndex((index) => (index + 1) % options.length);
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActiveIndex((index) => (index - 1 + options.length) % options.length);
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			const target = options[activeIndex];
+			if (target) choose(target);
+		}
+	}, [
+		activeIndex,
+		changeOpen,
+		choose,
+		options
+	]);
+	const handleChange = useCallback((event) => {
+		onQueryChange(event.target.value);
+		setActiveIndex(0);
+		changeOpen(true);
+	}, [changeOpen, onQueryChange]);
+	const handleFocus = useCallback(() => changeOpen(true), [changeOpen]);
+	const active = options[activeIndex];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative w-full", className),
+		ref: containerRef,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground [&_svg]:size-4",
+				children: icon ?? /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": "true" })
+			}),
+			/* @__PURE__ */ jsx("input", {
+				"aria-activedescendant": open && active ? `${listboxId}-${getOptionKey(active)}` : void 0,
+				"aria-autocomplete": "list",
+				"aria-controls": listboxId,
+				"aria-expanded": open,
+				"aria-label": label,
+				autoComplete: "off",
+				className: "h-9 w-full rounded-md border border-border bg-card pr-3 pl-9 text-foreground text-sm shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/50",
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onKeyDown: handleKeyDown,
+				placeholder,
+				ref: inputRef,
+				role: "combobox",
+				type: "search",
+				value: query
+			}),
+			open ? /* @__PURE__ */ jsxs("div", {
+				className: "absolute right-0 left-0 z-50 mt-2 max-h-96 overflow-y-auto rounded-md border border-border bg-popover shadow-md",
+				id: listboxId,
+				role: "listbox",
+				children: [
+					loading ? /* @__PURE__ */ jsx("p", {
+						className: "px-3 py-3 text-muted-foreground text-sm",
+						children: loadingLabel
+					}) : null,
+					!loading && options.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "px-3 py-3 text-muted-foreground text-sm",
+						children: emptyLabel
+					}) : null,
+					options.map((option, index) => /* @__PURE__ */ jsx(SearchComboboxOption, {
+						active: index === activeIndex,
+						id: `${listboxId}-${getOptionKey(option)}`,
+						index,
+						onActivate: setActiveIndex,
+						onChoose: choose,
+						option,
+						render: renderOption
+					}, getOptionKey(option)))
+				]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { SearchCombobox };
+
+//# sourceMappingURL=search-combobox.js.map

package/dist/components/search-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-combobox.js","names":[],"sources":["../../src/components/search-combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { SearchIcon } from \"lucide-react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from \"react\";\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport { SearchComboboxOption } from \"@/components/search-combobox-option\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface SearchComboboxProps<T> {\n  className?: string;\n  /** Shown when the query returned nothing. */\n  emptyLabel: ReactNode;\n  /** Stable identity for each option, used for keys and aria wiring. */\n  getOptionKey: (option: T) => string;\n  icon?: ReactNode;\n  /** Accessible name for the input. A placeholder is not a label. */\n  label: string;\n  /** Replaces the icon and list with a pending message. */\n  loading?: boolean;\n  loadingLabel?: ReactNode;\n  onOpenChange?: (open: boolean) => void;\n  onQueryChange: (query: string) => void;\n  onSelect: (option: T) => void;\n  /** Already filtered. This component matches nothing on its own. */\n  options: T[];\n  placeholder?: string;\n  query: string;\n  renderOption: (option: T, active: boolean) => ReactNode;\n}\n\n/**\n * A combobox with a listbox popup, following the ARIA authoring practices:\n * focus stays in the input and the active option is pointed at with\n * `aria-activedescendant` rather than moved.\n *\n * Controlled and source-agnostic. Filtering, fetching and what a selection\n * does all belong to the caller.\n */\nexport function SearchCombobox<T>({\n  className,\n  emptyLabel,\n  getOptionKey,\n  icon,\n  label,\n  loading = false,\n  loadingLabel,\n  onOpenChange,\n  onQueryChange,\n  onSelect,\n  options,\n  placeholder,\n  query,\n  renderOption,\n}: SearchComboboxProps<T>) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listboxId = useId();\n\n  const changeOpen = useCallback(\n    (next: boolean) => {\n      setOpen(next);\n      onOpenChange?.(next);\n    },\n    [onOpenChange]\n  );\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n    function handlePointerDown(event: MouseEvent) {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        changeOpen(false);\n      }\n    }\n    window.addEventListener(\"mousedown\", handlePointerDown);\n    return () => window.removeEventListener(\"mousedown\", handlePointerDown);\n  }, [open, changeOpen]);\n\n  const choose = useCallback(\n    (option: T) => {\n      changeOpen(false);\n      onSelect(option);\n    },\n    [changeOpen, onSelect]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Escape\") {\n        changeOpen(false);\n        inputRef.current?.blur();\n        return;\n      }\n      if (options.length === 0) {\n        return;\n      }\n      if (event.key === \"ArrowDown\") {\n        event.preventDefault();\n        setActiveIndex((index) => (index + 1) % options.length);\n        return;\n      }\n      if (event.key === \"ArrowUp\") {\n        event.preventDefault();\n        setActiveIndex(\n          (index) => (index - 1 + options.length) % options.length\n        );\n        return;\n      }\n      if (event.key === \"Enter\") {\n        event.preventDefault();\n        const target = options[activeIndex];\n        if (target) {\n          choose(target);\n        }\n      }\n    },\n    [activeIndex, changeOpen, choose, options]\n  );\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onQueryChange(event.target.value);\n      setActiveIndex(0);\n      changeOpen(true);\n    },\n    [changeOpen, onQueryChange]\n  );\n\n  const handleFocus = useCallback(() => changeOpen(true), [changeOpen]);\n\n  const active = options[activeIndex];\n\n  return (\n    <div className={cn(\"relative w-full\", className)} ref={containerRef}>\n      <span className=\"pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground [&_svg]:size-4\">\n        {icon ?? <SearchIcon aria-hidden=\"true\" />}\n      </span>\n      <input\n        // Options only exist while the listbox is open, so pointing at one\n        // when it is closed leaves a dangling ARIA reference.\n        aria-activedescendant={\n          open && active ? `${listboxId}-${getOptionKey(active)}` : undefined\n        }\n        aria-autocomplete=\"list\"\n        aria-controls={listboxId}\n        aria-expanded={open}\n        aria-label={label}\n        autoComplete=\"off\"\n        className=\"h-9 w-full rounded-md border border-border bg-card pr-3 pl-9 text-foreground text-sm shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        ref={inputRef}\n        role=\"combobox\"\n        type=\"search\"\n        value={query}\n      />\n      {open ? (\n        <div\n          className=\"absolute right-0 left-0 z-50 mt-2 max-h-96 overflow-y-auto rounded-md border border-border bg-popover shadow-md\"\n          id={listboxId}\n          role=\"listbox\"\n        >\n          {loading ? (\n            <p className=\"px-3 py-3 text-muted-foreground text-sm\">\n              {loadingLabel}\n            </p>\n          ) : null}\n          {!loading && options.length === 0 ? (\n            <p className=\"px-3 py-3 text-muted-foreground text-sm\">\n              {emptyLabel}\n            </p>\n          ) : null}\n          {options.map((option, index) => (\n            <SearchComboboxOption\n              active={index === activeIndex}\n              id={`${listboxId}-${getOptionKey(option)}`}\n              index={index}\n              key={getOptionKey(option)}\n              onActivate={setActiveIndex}\n              onChoose={choose}\n              option={option}\n              render={renderOption}\n            />\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/theme-toggle.d.ts

@@ -1,13 +1,24 @@
 //#region src/components/theme-toggle.d.ts
 type ThemeMode = "light" | "dark" | "system";
+type ThemeToggleLabels = Record<ThemeMode, string>;
 interface ThemeToggleProps {
   className?: string;
+  /**
+   * Accessible name for the group. Supply a translated string in a localised
+   * app, since the default is English.
+   */
+  groupLabel?: string;
+  /**
+   * Per-mode names, used for the tooltip and the accessible name of each
+   * button. Defaults to English; override to localise.
+   */
+  labels?: Partial<ThemeToggleLabels>;
   onValueChange: (value: ThemeMode) => void;
   /** The active mode. This component is controlled and holds no state. */
   value: ThemeMode;
 }
 /** Controlled. Holds no state and reads no theme provider. */
-declare function ThemeToggle({ value, onValueChange, className }: ThemeToggleProps): import("react").JSX.Element;
+declare function ThemeToggle({ value, onValueChange, className, groupLabel, labels }: ThemeToggleProps): import("react").JSX.Element;
 //#endregion
-export { ThemeMode, ThemeToggle, ThemeToggleProps };
+export { ThemeMode, ThemeToggle, ThemeToggleLabels, ThemeToggleProps };
 //# sourceMappingURL=theme-toggle.d.ts.map

package/dist/components/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","names":[],"sources":["../../src/components/theme-toggle.tsx"],"mappings":";KAOY;UA4CK;EACf;EACA,gBAAgB,OAAO;;EAEvB,OAAO;;;iBAIO,cACd,OACA,eACA,aACC,mCAAgB,IAAA"}
+{"version":3,"file":"theme-toggle.d.ts","names":[],"sources":["../../src/components/theme-toggle.tsx"],"mappings":";KAOY;KAcA,oBAAoB,OAAO;UAgCtB;EACf;;;;;EAKA;;;;;EAKA,SAAS,QAAQ;EACjB,gBAAgB,OAAO;;EAEvB,OAAO;;;iBAIO,cACd,OACA,eACA,WACA,YACA,UACC,mCAAgB,IAAA"}

package/dist/components/theme-toggle.js

@@ -37,13 +37,16 @@ function ThemeToggleOption({ mode, active, onSelect }) {
 	});
 }
 /** Controlled. Holds no state and reads no theme provider. */
-function ThemeToggle({ value, onValueChange, className }) {
+function ThemeToggle({ value, onValueChange, className, groupLabel = "Colour theme", labels }) {
 	return /* @__PURE__ */ jsx("fieldset", {
-		"aria-label": "Colour theme",
+		"aria-label": groupLabel,
 		className: cn("inline-flex items-center gap-1 rounded-md border border-border bg-card p-1", className),
 		children: MODES.map((mode) => /* @__PURE__ */ jsx(ThemeToggleOption, {
 			active: mode.value === value,
-			mode,
+			mode: labels?.[mode.value] ? {
+				...mode,
+				label: labels[mode.value]
+			} : mode,
 			onSelect: onValueChange
 		}, mode.value))
 	});

package/dist/components/theme-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.js","names":[],"sources":["../../src/components/theme-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { type LucideIcon, MonitorIcon, MoonIcon, SunIcon } from \"lucide-react\";\nimport { useCallback } from \"react\";\nimport { Button } from \"@/elements/button\";\nimport { cn } from \"@/lib/cn\";\n\nexport type ThemeMode = \"light\" | \"dark\" | \"system\";\n\ninterface Mode {\n  icon: LucideIcon;\n  label: string;\n  value: ThemeMode;\n}\n\nconst MODES = [\n  { icon: SunIcon, label: \"Light\", value: \"light\" },\n  { icon: MoonIcon, label: \"Dark\", value: \"dark\" },\n  { icon: MonitorIcon, label: \"System\", value: \"system\" },\n] satisfies Mode[];\n\nfunction ThemeToggleOption({\n  mode,\n  active,\n  onSelect,\n}: {\n  mode: Mode;\n  active: boolean;\n  onSelect: (value: ThemeMode) => void;\n}) {\n  const handleClick = useCallback(\n    () => onSelect(mode.value),\n    [mode.value, onSelect]\n  );\n  const Icon = mode.icon;\n\n  return (\n    <Button\n      aria-label={mode.label}\n      aria-pressed={active}\n      className={cn(\"size-8\", active && \"bg-accent text-accent-foreground\")}\n      onClick={handleClick}\n      size=\"icon-sm\"\n      title={mode.label}\n      variant=\"ghost\"\n    >\n      <Icon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n\nexport interface ThemeToggleProps {\n  className?: string;\n  onValueChange: (value: ThemeMode) => void;\n  /** The active mode. This component is controlled and holds no state. */\n  value: ThemeMode;\n}\n\n/** Controlled. Holds no state and reads no theme provider. */\nexport function ThemeToggle({\n  value,\n  onValueChange,\n  className,\n}: ThemeToggleProps) {\n  return (\n    <fieldset\n      aria-label=\"Colour theme\"\n      className={cn(\n        \"inline-flex items-center gap-1 rounded-md border border-border bg-card p-1\",\n        className\n      )}\n    >\n      {MODES.map((mode) => (\n        <ThemeToggleOption\n          active={mode.value === value}\n          key={mode.value}\n          mode={mode}\n          onSelect={onValueChange}\n        />\n      ))}\n    </fieldset>\n  );\n}\n"],"mappings":";;;;;;;AAeA,MAAM,QAAQ;CACZ;EAAE,MAAM;EAAS,OAAO;EAAS,OAAO;CAAQ;CAChD;EAAE,MAAM;EAAU,OAAO;EAAQ,OAAO;CAAO;CAC/C;EAAE,MAAM;EAAa,OAAO;EAAU,OAAO;CAAS;AACxD;AAEA,SAAS,kBAAkB,EACzB,MACA,QACA,YAKC;CACD,MAAM,cAAc,kBACZ,SAAS,KAAK,KAAK,GACzB,CAAC,KAAK,OAAO,QAAQ,CACvB;CACA,MAAM,OAAO,KAAK;CAElB,OACE,oBAAC,QAAD;EACE,cAAY,KAAK;EACjB,gBAAc;EACd,WAAW,GAAG,UAAU,UAAU,kCAAkC;EACpE,SAAS;EACT,MAAK;EACL,OAAO,KAAK;EACZ,SAAQ;EAER,UAAA,oBAAC,MAAD,EAAM,eAAY,OAAQ,CAAA;CACpB,CAAA;AAEZ;;AAUA,SAAgB,YAAY,EAC1B,OACA,eACA,aACmB;CACnB,OACE,oBAAC,YAAD;EACE,cAAW;EACX,WAAW,GACT,8EACA,SACF;EAEC,UAAA,MAAM,KAAK,SACV,oBAAC,mBAAD;GACE,QAAQ,KAAK,UAAU;GAEjB;GACN,UAAU;EACX,GAHM,KAAK,KAGX,CACF;CACO,CAAA;AAEd"}
+{"version":3,"file":"theme-toggle.js","names":[],"sources":["../../src/components/theme-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { type LucideIcon, MonitorIcon, MoonIcon, SunIcon } from \"lucide-react\";\nimport { useCallback } from \"react\";\nimport { Button } from \"@/elements/button\";\nimport { cn } from \"@/lib/cn\";\n\nexport type ThemeMode = \"light\" | \"dark\" | \"system\";\n\ninterface Mode {\n  icon: LucideIcon;\n  label: string;\n  value: ThemeMode;\n}\n\nconst MODES = [\n  { icon: SunIcon, label: \"Light\", value: \"light\" },\n  { icon: MoonIcon, label: \"Dark\", value: \"dark\" },\n  { icon: MonitorIcon, label: \"System\", value: \"system\" },\n] satisfies Mode[];\n\nexport type ThemeToggleLabels = Record<ThemeMode, string>;\n\nfunction ThemeToggleOption({\n  mode,\n  active,\n  onSelect,\n}: {\n  mode: Mode;\n  active: boolean;\n  onSelect: (value: ThemeMode) => void;\n}) {\n  const handleClick = useCallback(\n    () => onSelect(mode.value),\n    [mode.value, onSelect]\n  );\n  const Icon = mode.icon;\n\n  return (\n    <Button\n      aria-label={mode.label}\n      aria-pressed={active}\n      className={cn(\"size-8\", active && \"bg-accent text-accent-foreground\")}\n      onClick={handleClick}\n      size=\"icon-sm\"\n      title={mode.label}\n      variant=\"ghost\"\n    >\n      <Icon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n\nexport interface ThemeToggleProps {\n  className?: string;\n  /**\n   * Accessible name for the group. Supply a translated string in a localised\n   * app, since the default is English.\n   */\n  groupLabel?: string;\n  /**\n   * Per-mode names, used for the tooltip and the accessible name of each\n   * button. Defaults to English; override to localise.\n   */\n  labels?: Partial<ThemeToggleLabels>;\n  onValueChange: (value: ThemeMode) => void;\n  /** The active mode. This component is controlled and holds no state. */\n  value: ThemeMode;\n}\n\n/** Controlled. Holds no state and reads no theme provider. */\nexport function ThemeToggle({\n  value,\n  onValueChange,\n  className,\n  groupLabel = \"Colour theme\",\n  labels,\n}: ThemeToggleProps) {\n  return (\n    <fieldset\n      aria-label={groupLabel}\n      className={cn(\n        \"inline-flex items-center gap-1 rounded-md border border-border bg-card p-1\",\n        className\n      )}\n    >\n      {MODES.map((mode) => (\n        <ThemeToggleOption\n          active={mode.value === value}\n          key={mode.value}\n          mode={\n            labels?.[mode.value]\n              ? { ...mode, label: labels[mode.value] as string }\n              : mode\n          }\n          onSelect={onValueChange}\n        />\n      ))}\n    </fieldset>\n  );\n}\n"],"mappings":";;;;;;;AAeA,MAAM,QAAQ;CACZ;EAAE,MAAM;EAAS,OAAO;EAAS,OAAO;CAAQ;CAChD;EAAE,MAAM;EAAU,OAAO;EAAQ,OAAO;CAAO;CAC/C;EAAE,MAAM;EAAa,OAAO;EAAU,OAAO;CAAS;AACxD;AAIA,SAAS,kBAAkB,EACzB,MACA,QACA,YAKC;CACD,MAAM,cAAc,kBACZ,SAAS,KAAK,KAAK,GACzB,CAAC,KAAK,OAAO,QAAQ,CACvB;CACA,MAAM,OAAO,KAAK;CAElB,OACE,oBAAC,QAAD;EACE,cAAY,KAAK;EACjB,gBAAc;EACd,WAAW,GAAG,UAAU,UAAU,kCAAkC;EACpE,SAAS;EACT,MAAK;EACL,OAAO,KAAK;EACZ,SAAQ;EAER,UAAA,oBAAC,MAAD,EAAM,eAAY,OAAQ,CAAA;CACpB,CAAA;AAEZ;;AAoBA,SAAgB,YAAY,EAC1B,OACA,eACA,WACA,aAAa,gBACb,UACmB;CACnB,OACE,oBAAC,YAAD;EACE,cAAY;EACZ,WAAW,GACT,8EACA,SACF;EAEC,UAAA,MAAM,KAAK,SACV,oBAAC,mBAAD;GACE,QAAQ,KAAK,UAAU;GAEvB,MACE,SAAS,KAAK,SACV;IAAE,GAAG;IAAM,OAAO,OAAO,KAAK;GAAiB,IAC/C;GAEN,UAAU;EACX,GAPM,KAAK,KAOX,CACF;CACO,CAAA;AAEd"}

package/dist/elements/avatar.d.ts

@@ -1,5 +1,5 @@
-import { Avatar } from "radix-ui";
 import * as React from "react";
+import { Avatar } from "radix-ui";
 //#region src/elements/avatar.d.ts
 declare function Avatar$1({ className, size, ...props }: React.ComponentProps<typeof Avatar.Root> & {
   size?: "default" | "sm" | "lg";

package/dist/elements/badge.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/elements/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "outline" | "destructive" | "ghost" | "link" | "secondary" | null | undefined;
+  variant?: "link" | "default" | "outline" | "destructive" | "ghost" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;

package/dist/elements/button.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 //#region src/elements/button.d.ts
 declare const buttonVariants: (props?: ({
   size?: "default" | "sm" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "xs" | null | undefined;
-  variant?: "default" | "outline" | "destructive" | "ghost" | "link" | "secondary" | null | undefined;
+  variant?: "link" | "default" | "outline" | "destructive" | "ghost" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;

package/dist/elements/chart.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { TooltipValueType } from "recharts";
+//#region src/elements/chart.d.ts
+declare const THEMES: {
+  readonly dark: ".dark";
+  readonly light: "";
+};
+type TooltipNameType = number | string;
+type ChartConfig = Record<string, {
+  label?: React.ReactNode;
+  icon?: React.ComponentType;
+} & ({
+  color?: string;
+  theme?: never;
+} | {
+  color?: never;
+  theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  initialDimension?: {
+    width: number;
+    height: number;
+  };
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+  id: string;
+  config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: "line" | "dot" | "dashed";
+  nameKey?: string;
+  labelKey?: string;
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey }: React.ComponentProps<"div"> & {
+  hideIcon?: boolean;
+  nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
+//#endregion
+export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
+//# sourceMappingURL=chart.d.ts.map

package/dist/elements/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","names":[],"sources":["../../src/elements/chart.tsx"],"mappings":";;;;cASM;WAAA;WAAA;;KAGD;KAEO,cAAc;EAGtB,QAAQ,MAAM;EACd,OAAO,MAAM;;EAET;EAAgB;;EAChB;EAAe,OAAO,oBAAoB;;iBAoBzC,iBACP,IACA,WACA,UACA,QACA,qBACG,SACF,MAAM;EACP,QAAQ;EACR,UAAU,MAAM,sBACP,kBAAkB;EAE3B;IACE;IACA;;IAEH,MAAA,IAAA;cA0BK,eAAc,IAAA;EAAkB;EAAY,QAAQ;MAAa,MAAA,IAAA;cAiCjE,qBAAY,kBAAA;iBAET,sBACP,QACA,SACA,WACA,WACA,WACA,eACA,OACA,gBACA,gBACA,WACA,OACA,SACA,YACC,MAAM,sBAAsB,kBAAkB,WAC/C,MAAM;EACJ;EACA;EACA;EACA;EACA;IACE,KACF,kBAAkB,2BAChB,kBACA,0CAGH,MAAA,IAAA;cA+HG,aAAW,MAAA,qBAAA,cAAA,kBAAA,gBAAA,MAAA;iBAER,qBACP,WACA,UACA,SACA,eACA,WACC,MAAM;EACP;EACA;IACE,kBAAkB,4BAAyB,MAAA,IAAA"}

package/dist/elements/chart.js

@@ -0,0 +1,151 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+//#region src/elements/chart.tsx
+const THEMES = {
+	dark: ".dark",
+	light: ""
+};
+const INITIAL_DIMENSION = {
+	height: 200,
+	width: 320
+};
+const ChartContext = React.createContext(null);
+function useChart() {
+	const context = React.useContext(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+}
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden", className),
+			"data-chart": chartId,
+			"data-slot": "chart",
+			...props,
+			children: [/* @__PURE__ */ jsx(ChartStyle, {
+				config,
+				id: chartId
+			}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+				initialDimension,
+				children
+			})]
+		})
+	});
+}
+const ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n") } });
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+	const { config } = useChart();
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!(active && payload?.length)) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
+		children: [nestLabel ? null : tooltipLabel, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+				const itemConfig = getPayloadConfigFromPayload(config, item, key);
+				const indicatorColor = color ?? item.payload?.fill ?? item.color;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
+						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"my-0.5": nestLabel && indicator === "dashed",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"w-1": indicator === "line"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ jsx("span", {
+							className: "font-medium font-mono text-foreground tabular-nums",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+						})]
+					})] })
+				}, index);
+			})
+		})]
+	});
+}
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		children: payload.filter((item) => item.type !== "none").map((item, index) => {
+			const key = `${nameKey ?? item.dataKey ?? "value"}`;
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
+					className: "h-2 w-2 shrink-0 rounded-[2px]",
+					style: { backgroundColor: item.color }
+				}), itemConfig?.label]
+			}, index);
+		})
+	});
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+//#endregion
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
+
+//# sourceMappingURL=chart.js.map

package/dist/elements/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../../src/elements/chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"@/lib/cn\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { dark: \".dark\", light: \"\" } as const;\n\nconst INITIAL_DIMENSION = { height: 200, width: 320 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>;\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig;\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"];\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        data-chart={chartId}\n        data-slot=\"chart\"\n        {...props}\n      >\n        <ChartStyle config={config} id={chartId} />\n        <RechartsPrimitive.ResponsiveContainer\n          initialDimension={initialDimension}\n        >\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme ?? config.color\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n      itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    nameKey?: string;\n    labelKey?: string;\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<\n      TooltipValueType,\n      TooltipNameType\n    >,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? (config[label]?.label ?? label)\n        : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ]);\n\n  if (!(active && payload?.length)) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {nestLabel ? null : tooltipLabel}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n                key={index}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"w-1\": indicator === \"line\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-medium font-mono text-foreground tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  hideIcon?: boolean;\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n              key={index}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n};\n"],"mappings":"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"}

package/dist/elements/checkbox.d.ts

@@ -1,5 +1,5 @@
-import { Checkbox } from "radix-ui";
 import * as React from "react";
+import { Checkbox } from "radix-ui";
 //#region src/elements/checkbox.d.ts
 declare function Checkbox$1({ className, ...props }: React.ComponentProps<typeof Checkbox.Root>): React.JSX.Element;
 //#endregion

package/dist/elements/dialog.d.ts

@@ -1,5 +1,5 @@
-import { Dialog } from "radix-ui";
 import * as React from "react";
+import { Dialog } from "radix-ui";
 //#region src/elements/dialog.d.ts
 declare function Dialog$1({ ...props }: React.ComponentProps<typeof Dialog.Root>): React.JSX.Element;
 declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog.Trigger>): React.JSX.Element;

package/dist/elements/dropdown-menu.d.ts

@@ -1,5 +1,5 @@
-import { DropdownMenu } from "radix-ui";
 import * as React from "react";
+import { DropdownMenu } from "radix-ui";
 //#region src/elements/dropdown-menu.d.ts
 declare function DropdownMenu$1({ ...props }: React.ComponentProps<typeof DropdownMenu.Root>): React.JSX.Element;
 declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenu.Portal>): React.JSX.Element;

package/dist/elements/index.d.ts

@@ -13,5 +13,8 @@ import { Separator } from "./separator.js";
 import { Skeleton } from "./skeleton.js";
 import { Toaster, toast } from "./sonner.js";
 import { Switch } from "./switch.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
 import { Textarea } from "./textarea.js";
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Switch, Textarea, Toaster, badgeVariants, buttonVariants, toast };
+import { Toggle, toggleVariants } from "./toggle.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, badgeVariants, buttonVariants, toast, toggleVariants };

package/dist/elements/index.js

@@ -13,5 +13,8 @@ import { Separator } from "./separator.js";
 import { Skeleton } from "./skeleton.js";
 import { Toaster, toast } from "./sonner.js";
 import { Switch } from "./switch.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
 import { Textarea } from "./textarea.js";
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Switch, Textarea, Toaster, badgeVariants, buttonVariants, toast };
+import { Toggle, toggleVariants } from "./toggle.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, badgeVariants, buttonVariants, toast, toggleVariants };

package/dist/elements/label.d.ts

@@ -1,5 +1,5 @@
-import { Label } from "radix-ui";
 import * as React from "react";
+import { Label } from "radix-ui";
 //#region src/elements/label.d.ts
 declare function Label$1({ className, ...props }: React.ComponentProps<typeof Label.Root>): React.JSX.Element;
 //#endregion

package/dist/elements/popover.d.ts

@@ -1,5 +1,5 @@
-import { Popover } from "radix-ui";
 import * as React from "react";
+import { Popover } from "radix-ui";
 //#region src/elements/popover.d.ts
 declare function Popover$1({ ...props }: React.ComponentProps<typeof Popover.Root>): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof Popover.Trigger>): React.JSX.Element;

package/dist/elements/select.d.ts

@@ -1,5 +1,5 @@
-import { Select } from "radix-ui";
 import * as React from "react";
+import { Select } from "radix-ui";
 //#region src/elements/select.d.ts
 declare function Select$1({ ...props }: React.ComponentProps<typeof Select.Root>): React.JSX.Element;
 declare function SelectGroup({ ...props }: React.ComponentProps<typeof Select.Group>): React.JSX.Element;

package/dist/elements/separator.d.ts

@@ -1,5 +1,5 @@
-import { Separator } from "radix-ui";
 import * as React from "react";
+import { Separator } from "radix-ui";
 //#region src/elements/separator.d.ts
 declare function Separator$1({ className, orientation, decorative, ...props }: React.ComponentProps<typeof Separator.Root>): React.JSX.Element;
 //#endregion

package/dist/elements/switch.d.ts

@@ -1,5 +1,5 @@
-import { Switch } from "radix-ui";
 import * as React from "react";
+import { Switch } from "radix-ui";
 //#region src/elements/switch.d.ts
 declare function Switch$1({ className, size, ...props }: React.ComponentProps<typeof Switch.Root> & {
   size?: "sm" | "default";

package/dist/elements/table.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+//#region src/elements/table.d.ts
+declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+//# sourceMappingURL=table.d.ts.map

package/dist/elements/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","names":[],"sources":["../../src/elements/table.tsx"],"mappings":";;iBAMS,QAAQ,cAAc,SAAS,MAAM,0BAAuB,MAAA,IAAA;iBAe5D,cAAc,cAAc,SAAS,MAAM,0BAAuB,MAAA,IAAA;iBAUlE,YAAY,cAAc,SAAS,MAAM,0BAAuB,MAAA,IAAA;iBAUhE,cAAc,cAAc,SAAS,MAAM,0BAAuB,MAAA,IAAA;iBAalE,WAAW,cAAc,SAAS,MAAM,uBAAoB,MAAA,IAAA;iBAa5D,YAAY,cAAc,SAAS,MAAM,uBAAoB,MAAA,IAAA;iBAa7D,YAAY,cAAc,SAAS,MAAM,uBAAoB,MAAA,IAAA;iBAa7D,eACP,cACG,SACF,MAAM,4BAAyB,MAAA,IAAA"}