@ucdjs-internal/shared-ui 0.1.5 → 0.1.7

package/README.md

@@ -2,7 +2,6 @@
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![codecov][codecov-src]][codecov-href]
 
 > [!IMPORTANT]
 > This is an internal package. It may change without warning and is not subject to semantic versioning. Use at your own risk.
@@ -23,5 +22,3 @@ Published under [MIT License](./LICENSE).
 [npm-version-href]: https://npmjs.com/package/@ucdjs-internal/shared-ui
 [npm-downloads-src]: https://img.shields.io/npm/dm/@ucdjs-internal/shared-ui?style=flat&colorA=18181B&colorB=4169E1
 [npm-downloads-href]: https://npmjs.com/package/@ucdjs-internal/shared-ui
-[codecov-src]: https://img.shields.io/codecov/c/gh/ucdjs/ucd?style=flat&colorA=18181B&colorB=4169E1
-[codecov-href]: https://codecov.io/gh/ucdjs/ucd

package/dist/components/index.d.mts

@@ -0,0 +1,4 @@
+import { ShikiCode, ShikiCodeProps } from "./shiki-code.mjs";
+import { ThemeToggle, ThemeToggleFallback } from "./theme-toggle.mjs";
+import { UcdLogo } from "./ucd-logo.mjs";
+export { ShikiCode, ShikiCodeProps, ThemeToggle, ThemeToggleFallback, UcdLogo };

package/dist/components/index.mjs

@@ -0,0 +1,4 @@
+import { ShikiCode } from "./shiki-code.mjs";
+import { ThemeToggle, ThemeToggleFallback } from "./theme-toggle.mjs";
+import { UcdLogo } from "./ucd-logo.mjs";
+export { ShikiCode, ThemeToggle, ThemeToggleFallback, UcdLogo };

package/dist/components/shiki-code.d.mts

@@ -11,7 +11,7 @@ interface ShikiCodeProps {
    * The language to use for syntax highlighting
    * @default "typescript"
    */
-  language?: BundledLanguage;
+  language?: BundledLanguage | "ucd";
   /**
    * Additional CSS class names
    */

package/dist/components/shiki-code.mjs

@@ -1,8 +1,8 @@
+import ucd_tmLanguage_default from "../vscode/syntaxes/ucd.tmLanguage.mjs";
 import { use, useMemo } from "react";
 import { createJavaScriptRegexEngine } from "shiki";
 import { createCssVariablesTheme, createHighlighterCore } from "shiki/core";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/shiki-code.tsx
 const highlighterPromise = createHighlighterCore({
 	themes: [createCssVariablesTheme({
@@ -12,7 +12,8 @@ const highlighterPromise = createHighlighterCore({
 	langs: [
 		import("shiki/langs/javascript.mjs"),
 		import("shiki/langs/typescript.mjs"),
-		import("shiki/langs/json.mjs")
+		import("shiki/langs/json.mjs"),
+		ucd_tmLanguage_default
 	],
 	engine: createJavaScriptRegexEngine()
 });
@@ -71,6 +72,5 @@ function ShikiCode({ code, language = "typescript", className, preClassName, cod
 		dangerouslySetInnerHTML: { __html: html }
 	});
 }
-
 //#endregion
-export { ShikiCode };
+export { ShikiCode };

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

@@ -2,5 +2,6 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/theme-toggle.d.ts
 declare function ThemeToggle(): react_jsx_runtime0.JSX.Element;
+declare function ThemeToggleFallback(): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { ThemeToggle };
+export { ThemeToggle, ThemeToggleFallback };

package/dist/components/theme-toggle.mjs

@@ -4,7 +4,6 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Moon, Sun, SunMoon } from "lucide-react";
-
 //#region src/components/theme-toggle.tsx
 const labelByTheme = {
 	light: "Light",
@@ -22,7 +21,10 @@ function ThemeToggle() {
 			size: "icon",
 			className: "h-7 w-7",
 			...props,
-			children: [/* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+			children: [/* @__PURE__ */ jsx(Icon, {
+				className: "h-4 w-4",
+				suppressHydrationWarning: true
+			}), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: "Toggle theme"
 			})]
@@ -70,6 +72,23 @@ function ThemeToggle() {
 	} else t3 = $[8];
 	return t3;
 }
-
+function ThemeToggleFallback() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "h-7 w-7",
+			disabled: true,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Toggle theme"
+			})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
 //#endregion
-export { ThemeToggle };
+export { ThemeToggle, ThemeToggleFallback };

package/dist/components/ucd-logo.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ucd-logo.d.ts
+declare function UcdLogo({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { UcdLogo };

package/dist/components/ucd-logo.mjs

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+//#region src/components/ucd-logo.tsx
+function UcdLogo(t0) {
+	const $ = c(5);
+	const { className } = t0;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("rect", {
+			x: "20",
+			y: "20",
+			width: "60",
+			height: "60",
+			rx: "8",
+			fill: "#10B981",
+			opacity: "0.2"
+		});
+		t2 = /* @__PURE__ */ jsx("path", {
+			d: "M35 40 L65 40 M35 50 L55 50 M35 60 L60 60",
+			stroke: "#059669",
+			strokeWidth: "6",
+			strokeLinecap: "round"
+		});
+		t3 = /* @__PURE__ */ jsx("circle", {
+			cx: "70",
+			cy: "30",
+			r: "8",
+			fill: "#059669",
+			opacity: "0.8"
+		});
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+		t3 = $[2];
+	}
+	let t4;
+	if ($[3] !== className) {
+		t4 = /* @__PURE__ */ jsxs("svg", {
+			viewBox: "15 15 70 70",
+			width: "100%",
+			height: "100%",
+			className,
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				t1,
+				t2,
+				t3
+			]
+		});
+		$[3] = className;
+		$[4] = t4;
+	} else t4 = $[4];
+	return t4;
+}
+//#endregion
+export { UcdLogo };

package/dist/hooks/index.d.mts

@@ -1,3 +1,4 @@
+import { useClipboard } from "./use-clipboard.mjs";
 import { useIsMobile } from "./use-mobile.mjs";
 import { ThemeMode, UseThemeReturn, useTheme } from "./use-theme.mjs";
-export { type ThemeMode, type UseThemeReturn, useIsMobile, useTheme };
+export { type ThemeMode, type UseThemeReturn, useClipboard, useIsMobile, useTheme };

package/dist/hooks/index.mjs

@@ -1,4 +1,4 @@
 import { useTheme } from "./use-theme.mjs";
+import { useClipboard } from "./use-clipboard.mjs";
 import { useIsMobile } from "./use-mobile.mjs";
-
-export { useIsMobile, useTheme };
+export { useClipboard, useIsMobile, useTheme };

package/dist/hooks/use-clipboard.d.mts

@@ -0,0 +1,28 @@
+//#region src/hooks/use-clipboard.d.ts
+interface UseClipboardOptions {
+  /**
+   * Time in ms after which the copied state will reset, `2000` by default
+   */
+  timeout?: number;
+}
+interface UseClipboardReturnValue {
+  /**
+   * Function to copy value to clipboard
+   */
+  copy: (value: unknown) => void;
+  /**
+   * Function to reset copied state and error
+   */
+  reset: () => void;
+  /**
+   * Error if copying failed
+   */
+  error: Error | null;
+  /**
+   * Boolean indicating if the value was copied successfully
+   */
+  copied: boolean;
+}
+declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturnValue;
+//#endregion
+export { useClipboard };

package/dist/hooks/use-clipboard.mjs

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { c } from "react/compiler-runtime";
+//#region src/hooks/use-clipboard.ts
+function useClipboard(t0) {
+	const $ = c(12);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? { timeout: 2e3 } : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const options = t1;
+	const [error, setError] = useState(null);
+	const [copied, setCopied] = useState(false);
+	const [copyTimeout, setCopyTimeout] = useState(null);
+	let t2;
+	if ($[2] !== copyTimeout || $[3] !== options) {
+		const handleCopyResult = (value) => {
+			window.clearTimeout(copyTimeout);
+			setCopyTimeout(window.setTimeout(setCopied, options.timeout, false));
+			setCopied(value);
+		};
+		t2 = (value_0) => {
+			if ("clipboard" in navigator) navigator.clipboard.writeText(value_0).then(() => handleCopyResult(true)).catch((err) => setError(err));
+			else setError(/* @__PURE__ */ new Error("useClipboard: navigator.clipboard is not supported"));
+		};
+		$[2] = copyTimeout;
+		$[3] = options;
+		$[4] = t2;
+	} else t2 = $[4];
+	const copy = t2;
+	let t3;
+	if ($[5] !== copyTimeout) {
+		t3 = () => {
+			setCopied(false);
+			setError(null);
+			window.clearTimeout(copyTimeout);
+		};
+		$[5] = copyTimeout;
+		$[6] = t3;
+	} else t3 = $[6];
+	const reset = t3;
+	let t4;
+	if ($[7] !== copied || $[8] !== copy || $[9] !== error || $[10] !== reset) {
+		t4 = {
+			copy,
+			reset,
+			error,
+			copied
+		};
+		$[7] = copied;
+		$[8] = copy;
+		$[9] = error;
+		$[10] = reset;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+//#endregion
+export { useClipboard };

package/dist/hooks/use-mobile.mjs

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { c } from "react/compiler-runtime";
-
 //#region src/hooks/use-mobile.ts
 const MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
@@ -36,6 +35,5 @@ function useIsMobile() {
 function _temp() {
 	return typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : false;
 }
-
 //#endregion
-export { useIsMobile };
+export { useIsMobile };

package/dist/hooks/use-theme.mjs

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { c } from "react/compiler-runtime";
-
 //#region src/hooks/use-theme.ts
 const STORAGE_KEY = "theme";
 const DARK_CLASS = "dark";
@@ -21,7 +20,7 @@ function syncTheme(resolved) {
 }
 function useTheme() {
 	const $ = c(11);
-	const [theme, setThemeState] = useState(_temp);
+	const [theme, setTheme] = useState(_temp);
 	const [systemTheme, setSystemTheme] = useState(_temp2);
 	const resolvedTheme = theme === "system" ? systemTheme : theme;
 	let t0;
@@ -62,15 +61,15 @@ function useTheme() {
 	let t4;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = (nextTheme) => {
-			setThemeState(nextTheme);
+			setTheme(nextTheme);
 		};
 		$[6] = t4;
 	} else t4 = $[6];
-	const setTheme = t4;
+	const setThemeCb = t4;
 	let t5;
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = () => {
-			setThemeState(_temp3);
+			setTheme(_temp3);
 		};
 		$[7] = t5;
 	} else t5 = $[7];
@@ -80,7 +79,7 @@ function useTheme() {
 		t6 = {
 			theme,
 			resolvedTheme,
-			setTheme,
+			setTheme: setThemeCb,
 			toggleTheme
 		};
 		$[8] = resolvedTheme;
@@ -100,6 +99,5 @@ function _temp2() {
 function _temp() {
 	return getStoredTheme();
 }
-
 //#endregion
-export { useTheme };
+export { useTheme };

package/dist/index.mjs

@@ -1,4 +1,3 @@
 import { THEME_STORAGE_KEY, createThemeScript } from "./lib/theme-script.mjs";
 import { cn } from "./lib/utils.mjs";
-
-export { THEME_STORAGE_KEY, cn, createThemeScript };
+export { THEME_STORAGE_KEY, cn, createThemeScript };

package/dist/lib/theme-script.mjs

@@ -21,6 +21,5 @@ function createThemeScript() {
 })();
   `.trim();
 }
-
 //#endregion
-export { THEME_STORAGE_KEY, createThemeScript };
+export { THEME_STORAGE_KEY, createThemeScript };

package/dist/lib/utils.mjs

@@ -1,10 +1,8 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-
 //#region src/lib/utils.ts
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
-
 //#endregion
-export { cn };
+export { cn };

package/dist/ui/alert-dialog.mjs

@@ -4,7 +4,6 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
-
 //#region src/ui/alert-dialog.tsx
 function AlertDialog(t0) {
 	const $ = c(4);
@@ -382,6 +381,5 @@ function AlertDialogCancel(t0) {
 	} else t5 = $[13];
 	return t5;
 }
-
 //#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/ui/avatar.mjs

@@ -3,7 +3,6 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
-
 //#region src/ui/avatar.tsx
 function Avatar(t0) {
 	const $ = c(10);
@@ -203,6 +202,5 @@ function AvatarGroupCount(t0) {
 	} else t2 = $[7];
 	return t2;
 }
-
 //#endregion
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/ui/badge.d.mts

@@ -5,7 +5,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/ui/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Badge({
   className,

package/dist/ui/badge.mjs

@@ -3,7 +3,6 @@ import { c } from "react/compiler-runtime";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-
 //#region src/ui/badge.tsx
 const badgeVariants = cva("h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge", {
 	variants: { variant: {
@@ -71,6 +70,5 @@ function Badge(t0) {
 	} else t5 = $[12];
 	return t3(t5);
 }
-
 //#endregion
-export { Badge, badgeVariants };
+export { Badge, badgeVariants };

package/dist/ui/breadcrumb.mjs

@@ -5,7 +5,6 @@ import { c } from "react/compiler-runtime";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-
 //#region src/ui/breadcrumb.tsx
 function Breadcrumb(t0) {
 	const $ = c(8);
@@ -276,6 +275,5 @@ function BreadcrumbEllipsis(t0) {
 	} else t4 = $[9];
 	return t4;
 }
-
 //#endregion
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/ui/button.d.mts

@@ -5,8 +5,8 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/ui/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
-  size?: "xs" | "sm" | "icon-xs" | "icon-sm" | "default" | "lg" | "icon" | "icon-lg" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Button({
   className,

package/dist/ui/button.mjs

@@ -3,7 +3,6 @@ import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
-
 //#region src/ui/button.tsx
 const buttonVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", {
 	variants: {
@@ -77,6 +76,5 @@ function Button(t0) {
 	} else t4 = $[11];
 	return t4;
 }
-
 //#endregion
-export { Button, buttonVariants };
+export { Button, buttonVariants };

package/dist/ui/card.mjs

@@ -2,7 +2,6 @@ import { cn } from "../lib/utils.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-
 //#region src/ui/card.tsx
 function Card(t0) {
 	const $ = c(10);
@@ -234,6 +233,5 @@ function CardFooter(t0) {
 	} else t2 = $[7];
 	return t2;
 }
-
 //#endregion
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/ui/checkbox.mjs

@@ -3,7 +3,6 @@ import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { CheckIcon } from "lucide-react";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
-
 //#region src/ui/checkbox.tsx
 function Checkbox(t0) {
 	const $ = c(9);
@@ -47,6 +46,5 @@ function Checkbox(t0) {
 	} else t3 = $[8];
 	return t3;
 }
-
 //#endregion
-export { Checkbox };
+export { Checkbox };

package/dist/ui/collapsible.mjs

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
-
 //#region src/ui/collapsible.tsx
 function Collapsible(t0) {
 	const $ = c(4);
@@ -60,6 +59,5 @@ function CollapsibleContent(t0) {
 	} else t1 = $[3];
 	return t1;
 }
-
 //#endregion
-export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/ui/combobox.mjs

@@ -6,7 +6,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Check, ChevronDown, X } from "lucide-react";
 import { Combobox as Combobox$1 } from "@base-ui/react";
-
 //#region src/ui/combobox.tsx
 const Combobox = Combobox$1.Root;
 function ComboboxValue(t0) {
@@ -636,6 +635,5 @@ function ComboboxChipsInput(t0) {
 function useComboboxAnchor() {
 	return React.useRef(null);
 }
-
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };