@ekkolyth/ui 0.1.17 → 0.1.18

package/dist/themes.css

@@ -1,66 +1,7 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-/* Import all theme CSS files */
-@import "./themes/catpuccin/latte.css";
-@import "./themes/catpuccin/frappe.css";
-@import "./themes/catpuccin/macchiato.css";
-@import "./themes/catpuccin/mocha.css";
-@import "./themes/ekko-os.css";
-@import "./themes/tokyo-night.css";
-@import "./themes/ekkolyth.css";
-@import "./themes/ekko-playlist.css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@import './themes/catpuccin/latte.css';
+@import './themes/catpuccin/frappe.css';
+@import './themes/catpuccin/macchiato.css';
+@import './themes/catpuccin/mocha.css';
+@import './themes/ekko-os.css';
+@import './themes/tokyo-night.css';
+@import './themes/ekkolyth.css';

package/dist/toggle-B2PFPImC.js

@@ -0,0 +1,182 @@
+import { t as cn } from "./utils-C_uf36nf.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { createContext, use } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Toaster } from "sonner";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+//#region src/components/ui/select/index.tsx
+function Select({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Root, {
+		"data-slot": "select",
+		...props
+	});
+}
+function SelectGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Group, {
+		"data-slot": "select-group",
+		...props
+	});
+}
+function SelectValue({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Value, {
+		"data-slot": "select-value",
+		...props
+	});
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+		className: cn("bg-input hover:bg-input/80 cursor-pointer data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:ring-ring/50 aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-2 rounded-md px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] aria-invalid:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		"data-size": size,
+		"data-slot": "select-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
+		})]
+	});
+}
+function SelectContent({ className, children, position = "popper", ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+		className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+		"data-slot": "select-content",
+		position,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+			/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+				className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
+				children
+			}),
+			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+		]
+	}) });
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Label, {
+		className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+		"data-slot": "select-label",
+		...props
+	});
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+		className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		"data-slot": "select-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute right-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+		}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
+		className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+		"data-slot": "select-separator",
+		...props
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		"data-slot": "select-scroll-up-button",
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		"data-slot": "select-scroll-down-button",
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+	});
+}
+//#endregion
+//#region src/components/themes/context.tsx
+const ThemeContext = createContext(null);
+function normalizeMode(mode) {
+	return mode === "normal" ? "light" : mode;
+}
+function applyTheme(theme, mode) {
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	root.setAttribute("data-theme", theme);
+	root.classList.toggle("dark", mode === "dark");
+}
+function useTheme() {
+	const context = use(ThemeContext);
+	if (context === null) throw new Error("useTheme must be used within a ThemeProvider");
+	return context;
+}
+function useThemeContext() {
+	return use(ThemeContext);
+}
+//#endregion
+//#region src/components/ui/sonner/index.tsx
+const Toaster$1 = ({ ...props }) => {
+	const theme = useThemeContext();
+	return /* @__PURE__ */ jsx(Toaster, {
+		className: "toaster group",
+		position: "bottom-right",
+		richColors: true,
+		style: {
+			"--normal-bg": "var(--popover)",
+			"--normal-text": "var(--popover-foreground)",
+			"--normal-border": "var(--border)",
+			"--success-bg": "var(--popover)",
+			"--success-text": "var(--popover-foreground)",
+			"--success-border": "var(--success)",
+			"--error-bg": "var(--popover)",
+			"--error-text": "var(--popover-foreground)",
+			"--error-border": "var(--destructive)",
+			"--warning-bg": "var(--popover)",
+			"--warning-text": "var(--popover-foreground)",
+			"--warning-border": "var(--warning)",
+			"--info-bg": "var(--popover)",
+			"--info-text": "var(--popover-foreground)",
+			"--info-border": "var(--border)"
+		},
+		theme: theme?.resolvedMode ?? "system",
+		toastOptions: { classNames: {
+			error: "group-[.toaster]:[&_[data-button]]:border-destructive group-[.toaster]:[&_[data-button]]:text-destructive group-[.toaster]:[&_[data-icon]]:text-destructive",
+			warning: "group-[.toaster]:[&_[data-button]]:border-warning group-[.toaster]:[&_[data-button]]:text-warning group-[.toaster]:[&_[data-icon]]:text-warning",
+			success: "group-[.toaster]:[&_[data-button]]:border-success group-[.toaster]:[&_[data-button]]:text-success group-[.toaster]:[&_[data-icon]]:text-success"
+		} },
+		...props
+	});
+};
+//#endregion
+//#region src/components/ui/toggle/index.tsx
+const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+		},
+		size: {
+			default: "h-9 px-2 min-w-9",
+			sm: "h-8 px-1.5 min-w-8",
+			lg: "h-10 px-2.5 min-w-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Toggle({ className, variant, size, ...props }) {
+	return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
+		className: cn(toggleVariants({
+			variant,
+			size,
+			className
+		})),
+		"data-slot": "toggle",
+		...props
+	});
+}
+//#endregion
+export { SelectTrigger as _, applyTheme as a, useThemeContext as c, SelectGroup as d, SelectItem as f, SelectSeparator as g, SelectScrollUpButton as h, ThemeContext as i, Select as l, SelectScrollDownButton as m, toggleVariants as n, normalizeMode as o, SelectLabel as p, Toaster$1 as r, useTheme as s, Toggle as t, SelectContent as u, SelectValue as v };

package/dist/use-mobile-BVGje-2e.d.ts

@@ -0,0 +1,4 @@
+//#region src/hooks/use-mobile.d.ts
+declare function useIsMobile(): boolean;
+//#endregion
+export { useIsMobile as t };

package/dist/use-mobile-CqHXB_Nc.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+//#region src/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState(void 0);
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: 767px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+//#endregion
+export { useIsMobile as t };

package/dist/utils-C_uf36nf.js

@@ -0,0 +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 as t };

package/dist/widget-C2vjxQms.js

@@ -0,0 +1,94 @@
+import { t as cn } from "./utils-C_uf36nf.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#region src/components/ui/card/index.tsx
+function Card({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-card text-card-foreground flex flex-col gap-4 rounded-sm border border-border py-5 shadow-sm", className),
+		"data-slot": "card",
+		...props
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
+		"data-slot": "card-header",
+		...props
+	});
+}
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("leading-none font-semibold", className),
+		"data-slot": "card-title",
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "card-description",
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		"data-slot": "card-action",
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("px-6", className),
+		"data-slot": "card-content",
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+		"data-slot": "card-footer",
+		...props
+	});
+}
+//#endregion
+//#region src/components/blocks/widget/index.tsx
+function AnchorLink({ children, className, href }) {
+	return /* @__PURE__ */ jsx("a", {
+		className,
+		href,
+		children
+	});
+}
+function Widget({ children, contentClassName, count, emptyLabel, href, icon, isLoading, linkComponent, title }) {
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsxs(CardTitle, {
+		className: "flex items-center gap-2 text-base",
+		children: [icon, title]
+	}), /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs(linkComponent ?? AnchorLink, {
+		className: "flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground",
+		href,
+		children: [count !== void 0 && /* @__PURE__ */ jsx("span", { children: count }), /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })]
+	}) })] }), /* @__PURE__ */ jsx(CardContent, {
+		className: contentClassName,
+		children: isLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				0,
+				1,
+				2
+			].map((i) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				"data-testid": "widget-skeleton-row",
+				children: [/* @__PURE__ */ jsx("div", { className: "h-3 bg-muted rounded animate-pulse" }), /* @__PURE__ */ jsx("div", { className: "h-2 bg-muted/60 rounded animate-pulse w-1/2" })]
+			}, i))
+		}) : Boolean(children) ? /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-1",
+			children
+		}) : emptyLabel ? /* @__PURE__ */ jsx("div", {
+			className: "text-sm text-muted-foreground py-2",
+			children: emptyLabel
+		}) : null
+	})] });
+}
+//#endregion
+export { CardDescription as a, CardTitle as c, CardContent as i, Card as n, CardFooter as o, CardAction as r, CardHeader as s, Widget as t };

package/dist/widget.d.ts

@@ -0,0 +1,6 @@
+import { r as WidgetProps$1 } from "./index-qji4ohJZ.js";
+//#region src/widget/widget.d.ts
+type WidgetProps = Omit<WidgetProps$1, 'linkComponent'>;
+declare function Widget(props: WidgetProps): import("react").JSX.Element;
+//#endregion
+export { Widget, type WidgetProps };

package/dist/widget.js

@@ -0,0 +1,19 @@
+import { t as Widget$1 } from "./widget-C2vjxQms.js";
+import { jsx } from "react/jsx-runtime";
+import NextLink from "next/link.js";
+//#region src/widget/widget.tsx
+function NextWidgetLink({ children, className, href }) {
+	return /* @__PURE__ */ jsx(NextLink, {
+		className,
+		href,
+		children
+	});
+}
+function Widget(props) {
+	return /* @__PURE__ */ jsx(Widget$1, {
+		...props,
+		linkComponent: NextWidgetLink
+	});
+}
+//#endregion
+export { Widget };