@seedgrid/fe-components 0.2.4

package/dist/clock/themes/useDarkFlag.js

@@ -0,0 +1,14 @@
+"use client";
+import * as React from "react";
+export function useDarkFlag() {
+    const [dark, setDark] = React.useState(false);
+    React.useEffect(() => {
+        const root = document.documentElement;
+        const compute = () => setDark(root.classList.contains("dark"));
+        compute();
+        const obs = new MutationObserver(() => compute());
+        obs.observe(root, { attributes: true, attributeFilter: ["class"] });
+        return () => obs.disconnect();
+    }, []);
+    return dark;
+}

package/dist/commons/SgBadge.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export type SgBadgeSeverity = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral" | "custom";
+export type SgBadgeVariant = "solid" | "soft" | "outline" | "ghost";
+export type SgBadgeSize = "xs" | "sm" | "md" | "lg";
+export type SgBadgeCustomColors = {
+    bg?: string;
+    fg?: string;
+    border?: string;
+    softBg?: string;
+    softFg?: string;
+    hoverBg?: string;
+    hoverFg?: string;
+    hoverBorder?: string;
+    ring?: string;
+};
+export type SgBadgePartsClassName = {
+    container?: string;
+    label?: string;
+    removeButton?: string;
+    dot?: string;
+};
+export type SgBadgeProps = {
+    value?: React.ReactNode;
+    severity?: SgBadgeSeverity;
+    variant?: SgBadgeVariant;
+    size?: SgBadgeSize;
+    rounded?: boolean;
+    dot?: boolean;
+    pulse?: boolean;
+    max?: number;
+    showZero?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    removable?: boolean;
+    onRemove?: () => void;
+    removeAriaLabel?: string;
+    autoRemove?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    disabled?: boolean;
+    title?: string;
+    hint?: string;
+    customColors?: SgBadgeCustomColors;
+    className?: string;
+    partsClassName?: SgBadgePartsClassName;
+    "aria-label"?: string;
+};
+export declare function SgBadge(props: Readonly<SgBadgeProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace SgBadge {
+    var displayName: string;
+}
+//# sourceMappingURL=SgBadge.d.ts.map

package/dist/commons/SgBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgBadge.d.ts","sourceRoot":"","sources":["../../src/commons/SgBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AACpE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AA0HF,wBAAgB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,kDAiHpD;yBAjHe,OAAO"}

package/dist/commons/SgBadge.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+const SIZE = {
+    xs: "h-4 px-1.5 text-[11px]",
+    sm: "h-5 px-2 text-xs",
+    md: "h-6 px-2.5 text-sm",
+    lg: "h-7 px-3 text-base"
+};
+const ICON_SIZE = {
+    xs: "size-3",
+    sm: "size-4",
+    md: "size-4",
+    lg: "size-5"
+};
+const PRESET = {
+    primary: {
+        bg: "hsl(var(--primary))",
+        fg: "hsl(var(--primary-foreground))",
+        border: "hsl(var(--primary))",
+        ring: "hsl(var(--ring, var(--primary)))"
+    },
+    secondary: {
+        bg: "hsl(var(--secondary))",
+        fg: "hsl(var(--secondary-foreground))",
+        border: "hsl(var(--secondary))",
+        ring: "hsl(var(--ring, var(--secondary)))"
+    },
+    success: {
+        bg: "hsl(var(--tertiary, var(--accent, var(--primary))))",
+        fg: "hsl(var(--tertiary-foreground, var(--accent-foreground, var(--primary-foreground))))",
+        border: "hsl(var(--tertiary, var(--accent, var(--primary))))",
+        ring: "hsl(var(--ring, var(--tertiary, var(--accent, var(--primary)))))"
+    },
+    warning: {
+        bg: "hsl(var(--accent, var(--secondary, var(--primary))))",
+        fg: "hsl(var(--accent-foreground, var(--secondary-foreground, var(--primary-foreground))))",
+        border: "hsl(var(--accent, var(--secondary, var(--primary))))",
+        ring: "hsl(var(--ring, var(--accent, var(--secondary, var(--primary)))))"
+    },
+    danger: {
+        bg: "hsl(var(--destructive))",
+        fg: "hsl(var(--destructive-foreground))",
+        border: "hsl(var(--destructive))",
+        ring: "hsl(var(--ring, var(--destructive)))"
+    },
+    info: {
+        bg: "hsl(var(--secondary, var(--primary)))",
+        fg: "hsl(var(--secondary-foreground, var(--primary-foreground)))",
+        border: "hsl(var(--secondary, var(--primary)))",
+        ring: "hsl(var(--ring, var(--secondary, var(--primary))))"
+    },
+    neutral: {
+        bg: "hsl(var(--muted))",
+        fg: "hsl(var(--muted-foreground))",
+        border: "hsl(var(--border))",
+        ring: "hsl(var(--ring, var(--muted)))"
+    }
+};
+function resolveBadgeColors(severity, custom) {
+    const base = severity === "custom" ? PRESET.primary : PRESET[severity];
+    const bg = custom?.bg ?? base.bg;
+    const fg = custom?.fg ?? base.fg;
+    const border = custom?.border ?? base.border;
+    const softBg = custom?.softBg ?? `color-mix(in_srgb, ${bg} 14%, transparent)`;
+    const softFg = custom?.softFg ?? bg;
+    const hoverBg = custom?.hoverBg ?? `color-mix(in_srgb, ${bg} 12%, transparent)`;
+    const hoverFg = custom?.hoverFg ?? bg;
+    const hoverBorder = custom?.hoverBorder ?? border;
+    const ring = custom?.ring ?? base.ring;
+    return {
+        bg,
+        fg,
+        border,
+        softBg,
+        softFg,
+        hoverBg,
+        hoverFg,
+        hoverBorder,
+        ring
+    };
+}
+function buildVars(severity, custom) {
+    const merged = resolveBadgeColors(severity, custom);
+    return {
+        ["--sg-badge-bg"]: merged.bg,
+        ["--sg-badge-fg"]: merged.fg,
+        ["--sg-badge-border"]: merged.border,
+        ["--sg-badge-soft-bg"]: merged.softBg,
+        ["--sg-badge-soft-fg"]: merged.softFg,
+        ["--sg-badge-hover-bg"]: merged.hoverBg,
+        ["--sg-badge-hover-fg"]: merged.hoverFg,
+        ["--sg-badge-hover-border"]: merged.hoverBorder,
+        ["--sg-badge-ring"]: merged.ring
+    };
+}
+function getDisplayValue(value, max, showZero) {
+    if (typeof value === "number") {
+        if (!showZero && value === 0)
+            return null;
+        if (typeof max === "number" && value > max)
+            return `${max}+`;
+        return String(value);
+    }
+    return value ?? null;
+}
+export function SgBadge(props) {
+    const { value, severity = "primary", variant = "solid", size = "md", rounded = true, dot = false, pulse = false, max, showZero = true, leftIcon, rightIcon, removable = false, onRemove, removeAriaLabel = "Remover", autoRemove = false, onClick, disabled, title, hint, customColors, className, partsClassName, ...aria } = props;
+    const displayValue = getDisplayValue(value, max, showZero);
+    const [autoRemoved, setAutoRemoved] = React.useState(false);
+    if (dot) {
+        return (_jsxs("span", { title: hint ?? title, className: cn("relative inline-flex items-center justify-center", partsClassName?.dot, className), style: buildVars(severity, customColors), ...aria, children: [pulse ? (_jsx("span", { className: "absolute inline-flex size-3 rounded-full bg-[var(--sg-badge-bg)] opacity-75 animate-ping" })) : null, _jsx("span", { className: "inline-flex size-2.5 rounded-full bg-[var(--sg-badge-bg)]" })] }));
+    }
+    if (autoRemoved)
+        return null;
+    if (displayValue === null && !leftIcon && !rightIcon && !removable)
+        return null;
+    const isButton = typeof onClick === "function";
+    const Tag = isButton ? "button" : "span";
+    const base = cn("inline-flex items-center gap-1.5 whitespace-nowrap font-medium", "transition-[color,background-color,border-color] duration-150", SIZE[size], rounded ? "rounded-full" : "rounded-md", variant === "solid"
+        ? "bg-[var(--sg-badge-bg)] text-[var(--sg-badge-fg)] border border-[var(--sg-badge-border)]"
+        : variant === "soft"
+            ? "bg-[var(--sg-badge-soft-bg)] text-[var(--sg-badge-soft-fg)] border border-transparent"
+            : variant === "outline"
+                ? "bg-transparent text-[var(--sg-badge-bg)] border border-[var(--sg-badge-border)]"
+                : "bg-transparent text-[var(--sg-badge-bg)] border border-transparent", variant === "ghost" || variant === "outline"
+        ? "hover:bg-[var(--sg-badge-hover-bg)] hover:text-[var(--sg-badge-hover-fg)] hover:border-[var(--sg-badge-hover-border)]"
+        : "", isButton
+        ? cn("cursor-pointer select-none", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sg-badge-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background", disabled ? "pointer-events-none opacity-50" : "")
+        : "", className, partsClassName?.container);
+    return (_jsxs(Tag, { type: isButton ? "button" : undefined, title: hint ?? title, onClick: disabled ? undefined : onClick, disabled: isButton ? disabled : undefined, style: buildVars(severity, customColors), className: base, role: isButton ? undefined : "status", ...aria, children: [leftIcon ? _jsx("span", { className: cn("inline-flex", ICON_SIZE[size]), children: leftIcon }) : null, displayValue !== null ? _jsx("span", { className: cn("inline-flex items-center", partsClassName?.label), children: displayValue }) : null, rightIcon ? _jsx("span", { className: cn("inline-flex", ICON_SIZE[size]), children: rightIcon }) : null, removable ? (_jsx("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    if (autoRemove)
+                        setAutoRemoved(true);
+                    onRemove?.();
+                }, "aria-label": removeAriaLabel, className: cn("ml-0.5 inline-flex items-center justify-center rounded-full", "opacity-70 hover:opacity-100", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--sg-badge-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background", partsClassName?.removeButton), children: _jsx("span", { className: cn("inline-flex", ICON_SIZE[size]), children: "x" }) })) : null] }));
+}
+SgBadge.displayName = "SgBadge";

package/dist/commons/SgBadgeOverlay.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type SgBadgeOverlayPlacement = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "right" | "left" | "top" | "bottom";
+export type SgBadgeOverlayProps = {
+    children: React.ReactNode;
+    badge: React.ReactNode;
+    placement?: SgBadgeOverlayPlacement;
+    className?: string;
+};
+export declare function SgBadgeOverlay(props: Readonly<SgBadgeOverlayProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgBadgeOverlay {
+    var displayName: string;
+}
+//# sourceMappingURL=SgBadgeOverlay.d.ts.map

package/dist/commons/SgBadgeOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgBadgeOverlay.d.ts","sourceRoot":"","sources":["../../src/commons/SgBadgeOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,OAAO,GACP,MAAM,GACN,KAAK,GACL,QAAQ,CAAC;AAEb,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAmBlE;yBAnBe,cAAc"}

package/dist/commons/SgBadgeOverlay.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+export function SgBadgeOverlay(props) {
+    const { children, badge, placement = "top-right", className } = props;
+    const pos = {
+        "top-left": "left-0 top-0 -translate-x-1/3 -translate-y-1/3",
+        "top-right": "right-0 top-0 translate-x-1/3 -translate-y-1/3",
+        "bottom-left": "left-0 bottom-0 -translate-x-1/3 translate-y-1/3",
+        "bottom-right": "right-0 bottom-0 translate-x-1/3 translate-y-1/3",
+        right: "right-0 top-1/2 translate-x-1/2 -translate-y-1/2",
+        left: "left-0 top-1/2 -translate-x-1/2 -translate-y-1/2",
+        top: "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2",
+        bottom: "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
+    };
+    return (_jsxs("span", { className: cn("relative inline-flex", className), children: [children, _jsx("span", { className: cn("absolute", pos[placement]), children: badge })] }));
+}
+SgBadgeOverlay.displayName = "SgBadgeOverlay";

package/dist/commons/SgButton.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+type Severity = "primary" | "secondary" | "success" | "info" | "warning" | "help" | "danger" | "plain";
+type Appearance = "solid" | "flat" | "outline" | "ghost" | "text";
+type Size = "sm" | "md" | "lg";
+type Shape = "default" | "rounded";
+export type SgButtonCustomColors = {
+    bg?: string;
+    fg?: string;
+    border?: string;
+    hoverBg?: string;
+    hoverFg?: string;
+    hoverBorder?: string;
+    activeBg?: string;
+    ring?: string;
+};
+export type SgButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    severity?: Severity;
+    appearance?: Appearance;
+    size?: Size;
+    shape?: Shape;
+    raised?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    loading?: boolean;
+    customColors?: SgButtonCustomColors;
+};
+export declare const SgButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    severity?: Severity;
+    appearance?: Appearance;
+    size?: Size;
+    shape?: Shape;
+    raised?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    loading?: boolean;
+    customColors?: SgButtonCustomColors;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=SgButton.d.ts.map

package/dist/commons/SgButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgButton.d.ts","sourceRoot":"","sources":["../../src/commons/SgButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,QAAQ,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,KAAK,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAElE,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAEnC,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAsIF,eAAO,MAAM,QAAQ;eA/IR,QAAQ;iBACN,UAAU;WAChB,IAAI;YACH,KAAK;aACJ,OAAO;eACL,KAAK,CAAC,SAAS;gBACd,KAAK,CAAC,SAAS;cACjB,OAAO;mBACF,oBAAoB;2CAuMpC,CAAC"}

package/dist/commons/SgButton.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+const PRESET = {
+    primary: {
+        bg: "#1d4ed8",
+        fg: "#ffffff",
+        border: "#1d4ed8",
+        hoverBg: "#1e40af",
+        ring: "rgba(29,78,216,.35)"
+    },
+    secondary: {
+        bg: "#64748b",
+        fg: "#ffffff",
+        border: "#64748b",
+        hoverBg: "#475569",
+        ring: "rgba(100,116,139,.35)"
+    },
+    success: {
+        bg: "#65a30d",
+        fg: "#ffffff",
+        border: "#65a30d",
+        hoverBg: "#4d7c0f",
+        ring: "rgba(101,163,13,.35)"
+    },
+    info: {
+        bg: "#0284c7",
+        fg: "#ffffff",
+        border: "#0284c7",
+        hoverBg: "#0369a1",
+        ring: "rgba(2,132,199,.35)"
+    },
+    warning: {
+        bg: "#f59e0b",
+        fg: "#111827",
+        border: "#f59e0b",
+        hoverBg: "#d97706",
+        ring: "rgba(245,158,11,.35)"
+    },
+    help: {
+        bg: "#9333ea",
+        fg: "#ffffff",
+        border: "#9333ea",
+        hoverBg: "#7e22ce",
+        ring: "rgba(147,51,234,.35)"
+    },
+    danger: {
+        bg: "#dc2626",
+        fg: "#ffffff",
+        border: "#dc2626",
+        hoverBg: "#b91c1c",
+        ring: "rgba(220,38,38,.35)"
+    },
+    plain: {
+        bg: "#e5e7eb",
+        fg: "#111827",
+        border: "#d1d5db",
+        hoverBg: "#d1d5db",
+        ring: "rgba(17,24,39,.20)"
+    }
+};
+const SIZE = {
+    sm: { h: "h-8", px: "px-3", text: "text-sm", gap: "gap-2", icon: "size-4", radius: "rounded-md" },
+    md: { h: "h-10", px: "px-4", text: "text-sm", gap: "gap-2", icon: "size-4", radius: "rounded-lg" },
+    lg: { h: "h-12", px: "px-5", text: "text-base", gap: "gap-2.5", icon: "size-5", radius: "rounded-xl" }
+};
+function buildVars(severity, custom) {
+    const base = PRESET[severity];
+    const merged = {
+        bg: custom?.bg ?? base.bg,
+        fg: custom?.fg ?? base.fg,
+        border: custom?.border ?? base.border,
+        hoverBg: custom?.hoverBg ?? base.hoverBg,
+        hoverFg: custom?.hoverFg ?? (custom?.fg ?? base.fg),
+        hoverBorder: custom?.hoverBorder ?? (custom?.border ?? base.border),
+        activeBg: custom?.activeBg ?? (custom?.hoverBg ?? base.hoverBg),
+        ring: custom?.ring ?? base.ring
+    };
+    return {
+        ["--sg-btn-bg"]: merged.bg,
+        ["--sg-btn-fg"]: merged.fg,
+        ["--sg-btn-border"]: merged.border,
+        ["--sg-btn-hover-bg"]: merged.hoverBg,
+        ["--sg-btn-hover-fg"]: merged.hoverFg,
+        ["--sg-btn-hover-border"]: merged.hoverBorder,
+        ["--sg-btn-active-bg"]: merged.activeBg,
+        ["--sg-btn-ring"]: merged.ring
+    };
+}
+function appearanceClass(appearance) {
+    switch (appearance) {
+        case "solid":
+            return cn("bg-[var(--sg-btn-bg)] text-[var(--sg-btn-fg)] border border-[var(--sg-btn-border)]", "hover:bg-[var(--sg-btn-hover-bg)] hover:text-[var(--sg-btn-hover-fg)] hover:border-[var(--sg-btn-hover-border)]", "active:bg-[var(--sg-btn-active-bg)]");
+        case "flat":
+            return cn("bg-[var(--sg-btn-bg)] text-[var(--sg-btn-fg)] border border-transparent", "hover:bg-[var(--sg-btn-hover-bg)] hover:text-[var(--sg-btn-hover-fg)]", "active:bg-[var(--sg-btn-active-bg)]");
+        case "outline":
+            return cn("bg-transparent text-[var(--sg-btn-bg)] border border-[var(--sg-btn-border)]", "hover:bg-[color-mix(in_srgb,var(--sg-btn-bg)_12%,transparent)]", "active:bg-[color-mix(in_srgb,var(--sg-btn-bg)_18%,transparent)]");
+        case "ghost":
+            return cn("bg-transparent text-[var(--sg-btn-bg)] border border-transparent", "hover:bg-[color-mix(in_srgb,var(--sg-btn-bg)_10%,transparent)]", "active:bg-[color-mix(in_srgb,var(--sg-btn-bg)_16%,transparent)]");
+        case "text":
+            return cn("bg-transparent text-[var(--sg-btn-bg)] border border-transparent", "hover:underline underline-offset-4");
+    }
+}
+export const SgButton = React.forwardRef(({ severity = "primary", appearance = "solid", size = "md", shape = "default", raised = false, leftIcon, rightIcon, loading = false, disabled, className, children, style, customColors, type = "button", ...rest }, ref) => {
+    const isDisabled = Boolean(disabled || loading);
+    const isIconOnly = !children && (leftIcon || rightIcon);
+    const s = SIZE[size];
+    return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, style: { ...buildVars(severity, customColors), ...style }, className: cn("inline-flex items-center justify-center select-none whitespace-nowrap", "font-medium", "transition-[background-color,color,border-color,box-shadow,transform] duration-150", "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--sg-btn-ring)]", "disabled:opacity-60 disabled:cursor-not-allowed", s.h, isIconOnly ? "aspect-square" : s.px, s.text, s.gap, shape === "rounded" ? "rounded-full" : s.radius, appearanceClass(appearance), raised && appearance !== "text" ? "shadow-sm hover:shadow-md active:shadow-sm" : false, !isDisabled && appearance !== "text" ? "active:translate-y-[0.5px]" : false, className), ...rest, children: loading ? (_jsxs("span", { className: cn("inline-flex items-center", s.gap), children: [_jsx(Spinner, { className: s.icon }), children ? _jsx("span", { children: children }) : null] })) : (_jsxs("span", { className: cn("inline-flex items-center", s.gap), children: [leftIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: leftIcon }) : null, children ? _jsx("span", { children: children }) : null, rightIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: rightIcon }) : null] })) }));
+});
+SgButton.displayName = "SgButton";
+function Spinner({ className }) {
+    return (_jsxs("svg", { className: cn("animate-spin", className), viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "3" }), _jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })] }));
+}

package/dist/commons/SgPopup.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export type SgPopupPlacement = "auto" | "top" | "right" | "bottom" | "left";
+export type SgPopupPreferPlacement = "top" | "right" | "bottom" | "left";
+export type SgPopupAlign = "start" | "center" | "end";
+export type SgPopupSeverity = "primary" | "secondary" | "success" | "info" | "warning" | "help" | "danger" | "plain";
+export type SgPopupAction = {
+    icon?: React.ReactNode;
+    label: string;
+    hint?: string;
+    severity?: SgPopupSeverity;
+    disabled?: boolean;
+    closeOnClick?: boolean;
+    onClick?: () => void;
+};
+export type SgPopupProps = {
+    title?: string;
+    subtitle?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    anchorRef: React.RefObject<HTMLElement>;
+    placement?: SgPopupPlacement;
+    preferPlacement?: SgPopupPreferPlacement;
+    align?: SgPopupAlign;
+    offset?: number;
+    padding?: number;
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    zIndex?: number;
+    minWidth?: number | string;
+    actions?: SgPopupAction[];
+    children?: React.ReactNode;
+};
+export declare function SgPopup(props: Readonly<SgPopupProps>): React.ReactPortal | null;
+export declare namespace SgPopup {
+    var displayName: string;
+}
+//# sourceMappingURL=SgPopup.d.ts.map

package/dist/commons/SgPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgPopup.d.ts","sourceRoot":"","sources":["../../src/commons/SgPopup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC5E,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AACzE,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAExC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,eAAe,CAAC,EAAE,sBAAsB,CAAC;IACzC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAwHF,wBAAgB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,4BAwLpD;yBAxLe,OAAO"}