@seedgrid/fe-components 2026.3.9 → 2026.3.11-1

package/dist/buttons/SgButton.d.ts

@@ -20,6 +20,7 @@ export type SgButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     size?: Size;
     shape?: Shape;
     elevation?: Elevation;
+    label?: React.ReactNode;
     iconOnly?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
@@ -33,6 +34,7 @@ export declare const SgButton: React.ForwardRefExoticComponent<Omit<React.Button
     size?: Size;
     shape?: Shape;
     elevation?: Elevation;
+    label?: React.ReactNode;
     iconOnly?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"SgButton.d.ts","sourceRoot":"","sources":["../../src/buttons/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,CAAC;AAEb,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,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,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AAsEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,oBAAoB,GAC5B,QAAQ,CAAC,oBAAoB,CAAC,CAYhC;AAoDD,eAAO,MAAM,QAAQ;eAnJR,QAAQ;iBACN,UAAU;WAChB,IAAI;YACH,KAAK;gBACD,SAAS;eACV,OAAO;eACP,KAAK,CAAC,SAAS;gBACd,KAAK,CAAC,SAAS;cACjB,OAAO;mBACF,oBAAoB;2CAiNpC,CAAC"}
+{"version":3,"file":"SgButton.d.ts","sourceRoot":"","sources":["../../src/buttons/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,CAAC;AAEb,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,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,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AAsEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,oBAAoB,GAC5B,QAAQ,CAAC,oBAAoB,CAAC,CAYhC;AAoDD,eAAO,MAAM,QAAQ;eApJR,QAAQ;iBACN,UAAU;WAChB,IAAI;YACH,KAAK;gBACD,SAAS;YACb,KAAK,CAAC,SAAS;eACZ,OAAO;eACP,KAAK,CAAC,SAAS;gBACd,KAAK,CAAC,SAAS;cACjB,OAAO;mBACF,oBAAoB;2CAmNpC,CAAC"}

package/dist/buttons/SgButton.js

@@ -108,15 +108,16 @@ function elevationClass(elevation) {
             return "";
     }
 }
-export const SgButton = React.forwardRef(({ severity = "primary", appearance = "solid", size, shape, elevation = "none", iconOnly, leftIcon, rightIcon, loading = false, disabled, className, children, style, customColors, type = "button", ...rest }, ref) => {
+export const SgButton = React.forwardRef(({ severity = "primary", appearance = "solid", size, shape, elevation = "none", label, iconOnly, leftIcon, rightIcon, loading = false, disabled, className, children, style, customColors, type = "button", ...rest }, ref) => {
+    const resolvedChildren = children ?? label;
     const isDisabled = Boolean(disabled || loading);
-    const inferredIconOnly = !children && (leftIcon || rightIcon);
+    const inferredIconOnly = !resolvedChildren && (leftIcon || rightIcon);
     const isIconOnly = iconOnly ?? inferredIconOnly;
     const resolvedSize = size ?? (isIconOnly ? "sm" : "md");
     const resolvedShape = shape ?? (isIconOnly ? "circle" : "default");
     const s = SIZE[resolvedSize];
     const contentClass = cn("inline-flex min-w-0 items-center justify-center", !isIconOnly ? "w-full" : undefined, s.gap);
-    return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, style: { ...buildVars(severity, customColors), ...style }, className: cn("inline-flex min-w-0 max-w-full items-center justify-center select-none whitespace-normal break-words text-center", "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", isIconOnly ? cn("aspect-square", s.h) : cn(s.minH, s.py, s.px), s.text, resolvedShape === "rounded" ? "rounded-full" : resolvedShape === "circle" ? "rounded-full" : resolvedShape === "square" ? "rounded-none" : s.radius, appearanceClass(appearance), elevationClass(elevation), !isDisabled ? "active:translate-y-[0.5px]" : false, className), ...rest, children: loading ? (_jsxs("span", { className: contentClass, children: [_jsx(Spinner, { className: s.icon }), children ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: children }) : null] })) : (_jsxs("span", { className: contentClass, children: [leftIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: leftIcon }) : null, children ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: children }) : null, rightIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: rightIcon }) : null] })) }));
+    return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, style: { ...buildVars(severity, customColors), ...style }, className: cn("inline-flex min-w-0 max-w-full items-center justify-center select-none whitespace-normal break-words text-center", "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", isIconOnly ? cn("aspect-square", s.h) : cn(s.minH, s.py, s.px), s.text, resolvedShape === "rounded" ? "rounded-full" : resolvedShape === "circle" ? "rounded-full" : resolvedShape === "square" ? "rounded-none" : s.radius, appearanceClass(appearance), elevationClass(elevation), !isDisabled ? "active:translate-y-[0.5px]" : false, className), ...rest, children: loading ? (_jsxs("span", { className: contentClass, children: [_jsx(Spinner, { className: s.icon }), resolvedChildren ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: resolvedChildren }) : null] })) : (_jsxs("span", { className: contentClass, children: [leftIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: leftIcon }) : null, resolvedChildren ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: resolvedChildren }) : null, rightIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: rightIcon }) : null] })) }));
 });
 SgButton.displayName = "SgButton";
 function Spinner({ className }) {

package/dist/digits/segment-digit/SgSegmentDigit.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type SgSegmentDigitProps = {
+    /** Character rendered by the component (first character is used). */
+    value: string;
+    /** Display height in pixels. */
+    size?: number;
+    /** Color of active segments. */
+    color?: string;
+    /** Additional classes on outer wrapper. */
+    className?: string;
+    /** Additional inline styles on outer wrapper. */
+    style?: React.CSSProperties;
+};
+export declare function SgSegmentDigit({ value, size, color, className, style }: Readonly<SgSegmentDigitProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgSegmentDigit.d.ts.map

package/dist/digits/segment-digit/SgSegmentDigit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgSegmentDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/segment-digit/SgSegmentDigit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2F/B,MAAM,MAAM,mBAAmB,GAAG;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACN,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAkC/B"}

package/dist/digits/segment-digit/SgSegmentDigit.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function round(n) {
+    return Math.round(n * 1000) / 1000;
+}
+const DIGIT_GLYPHS = {
+    "0": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 0, y: 1, w: 1, h: 4 }
+    ],
+    "1": [
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 }
+    ],
+    "2": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "3": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "4": [
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 5, y: 5, w: 1, h: 4 }
+    ],
+    "5": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "6": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 }
+    ],
+    "7": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 }
+    ],
+    "8": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 },
+        { x: 0, y: 5, w: 1, h: 4 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 }
+    ],
+    "9": [
+        { x: 1, y: 0, w: 4, h: 1 },
+        { x: 5, y: 1, w: 1, h: 4 },
+        { x: 5, y: 5, w: 1, h: 4 },
+        { x: 1, y: 9, w: 4, h: 1 },
+        { x: 0, y: 1, w: 1, h: 4 },
+        { x: 1, y: 4.5, w: 4, h: 1 }
+    ],
+    "-": [{ x: 1, y: 4.5, w: 4, h: 1 }],
+    " ": []
+};
+const COLON_GLYPH = [
+    { x: 1.5, y: 2, w: 1, h: 1 },
+    { x: 1.5, y: 7, w: 1, h: 1 }
+];
+export function SgSegmentDigit({ value, size = 16, color, className, style }) {
+    const char = (value ?? " ").charAt(0);
+    const normalized = char === ":" ? ":" : (DIGIT_GLYPHS[char] ? char : " ");
+    const isColon = normalized === ":";
+    const glyph = isColon ? COLON_GLYPH : DIGIT_GLYPHS[normalized] ?? DIGIT_GLYPHS[" "] ?? [];
+    const viewWidth = isColon ? 4 : 6;
+    const viewHeight = 10;
+    const scale = Math.max(0.2, size / viewHeight);
+    const width = round(viewWidth * scale);
+    const height = round(viewHeight * scale);
+    return (_jsx("svg", { role: "img", "aria-label": value, width: width, height: height, viewBox: `0 0 ${viewWidth} ${viewHeight}`, className: cn("inline-block align-middle text-neutral-800 dark:text-neutral-200", className), style: { color, ...style }, children: glyph.map((segment, idx) => (_jsx("rect", { x: segment.x, y: segment.y, width: segment.w, height: segment.h, rx: 0.3, fill: "currentColor" }, `${normalized}-${idx}`))) }));
+}

package/dist/digits/segment-digit/index.d.ts

@@ -0,0 +1,3 @@
+export { SgSegmentDigit } from "./SgSegmentDigit";
+export type { SgSegmentDigitProps } from "./SgSegmentDigit";
+//# sourceMappingURL=index.d.ts.map

package/dist/digits/segment-digit/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/digits/segment-digit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/digits/segment-digit/index.js

@@ -0,0 +1 @@
+export { SgSegmentDigit } from "./SgSegmentDigit";

package/dist/digits/seven-segment-digit/SgSevenSegmentDigit.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export type SgSevenSegmentDigitPalette = "red" | "blue" | "yellow" | "green" | "white";
+export type SgSevenSegmentDigitProps = {
+    /** Character rendered by the component (first character is used). */
+    value: string;
+    /** Preset visual palette for active, inactive and background colors. */
+    palette?: SgSevenSegmentDigitPalette;
+    /** Color of active segments. */
+    color?: string;
+    /** Background color of the component panel. */
+    backgroundColor?: string;
+    /** Color of inactive segments. */
+    offColor?: string;
+    /** Component height in pixels. */
+    size?: number;
+    /** Component width in pixels. By default, derived from `size`. */
+    width?: number;
+    /** Segment thickness in pixels. */
+    thickness?: number;
+    /** Internal panel padding in pixels. */
+    padding?: number;
+    /** Border radius of the panel in pixels. */
+    rounded?: number;
+    /** Applies a subtle skew to mimic classic LED displays. */
+    skew?: number;
+    /** Enables glow effect on active segments. */
+    glow?: boolean;
+    /** Segment transition duration in milliseconds. */
+    transitionMs?: number;
+    /** Additional classes on outer wrapper. */
+    className?: string;
+    /** Additional inline styles on outer wrapper. */
+    style?: React.CSSProperties;
+};
+export declare function SgSevenSegmentDigit({ value, palette, color, backgroundColor, offColor, size, width, thickness, padding, rounded, skew, glow, transitionMs, className, style }: Readonly<SgSevenSegmentDigitProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgSevenSegmentDigit.d.ts.map

package/dist/digits/seven-segment-digit/SgSevenSegmentDigit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgSevenSegmentDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/seven-segment-digit/SgSevenSegmentDigit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsC/B,MAAM,MAAM,0BAA0B,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAiCvF,MAAM,MAAM,wBAAwB,GAAG;IACrC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,0BAA0B,CAAC;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAQF,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAe,EACf,KAAK,EACL,eAAe,EACf,QAAQ,EACR,IAAU,EACV,KAAK,EACL,SAAc,EACd,OAAY,EACZ,OAAY,EACZ,IAAS,EACT,IAAW,EACX,YAAkB,EAClB,SAAS,EACT,KAAK,EACN,EAAE,QAAQ,CAAC,wBAAwB,CAAC,2CA+EpC"}

package/dist/digits/seven-segment-digit/SgSevenSegmentDigit.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+const SEGMENT_ORDER = ["a", "b", "c", "d", "e", "f", "g"];
+const GLYPHS = {
+    " ": [],
+    "-": ["g"],
+    _: ["d"],
+    "0": ["a", "b", "c", "d", "e", "f"],
+    "1": ["b", "c"],
+    "2": ["a", "b", "d", "e", "g"],
+    "3": ["a", "b", "c", "d", "g"],
+    "4": ["b", "c", "f", "g"],
+    "5": ["a", "c", "d", "f", "g"],
+    "6": ["a", "c", "d", "e", "f", "g"],
+    "7": ["a", "b", "c"],
+    "8": ["a", "b", "c", "d", "e", "f", "g"],
+    "9": ["a", "b", "c", "d", "f", "g"],
+    A: ["a", "b", "c", "e", "f", "g"],
+    B: ["c", "d", "e", "f", "g"],
+    C: ["a", "d", "e", "f"],
+    D: ["b", "c", "d", "e", "g"],
+    E: ["a", "d", "e", "f", "g"],
+    F: ["a", "e", "f", "g"],
+    H: ["b", "c", "e", "f", "g"],
+    J: ["b", "c", "d", "e"],
+    L: ["d", "e", "f"],
+    P: ["a", "b", "e", "f", "g"],
+    U: ["b", "c", "d", "e", "f"],
+    Y: ["b", "c", "d", "f", "g"]
+};
+const PALETTES = {
+    red: {
+        color: "#ef4444",
+        backgroundColor: "#120909",
+        offColor: "rgba(127, 29, 29, 0.28)"
+    },
+    blue: {
+        color: "#60a5fa",
+        backgroundColor: "#061226",
+        offColor: "rgba(30, 64, 175, 0.3)"
+    },
+    yellow: {
+        color: "#facc15",
+        backgroundColor: "#1a1303",
+        offColor: "rgba(161, 98, 7, 0.32)"
+    },
+    green: {
+        color: "#22c55e",
+        backgroundColor: "#04120a",
+        offColor: "rgba(20, 83, 45, 0.28)"
+    },
+    white: {
+        color: "#f8fafc",
+        backgroundColor: "#111827",
+        offColor: "rgba(148, 163, 184, 0.3)"
+    }
+};
+function segmentSetFor(value) {
+    const char = (value ?? " ").charAt(0).toUpperCase();
+    const segments = GLYPHS[char] ?? GLYPHS[" "] ?? [];
+    return new Set(segments);
+}
+export function SgSevenSegmentDigit({ value, palette = "red", color, backgroundColor, offColor, size = 108, width, thickness = 14, padding = 10, rounded = 12, skew = -8, glow = true, transitionMs = 180, className, style }) {
+    const active = React.useMemo(() => segmentSetFor(value), [value]);
+    const paletteTokens = PALETTES[palette];
+    const activeColor = color ?? paletteTokens.color;
+    const panelBackground = backgroundColor ?? paletteTokens.backgroundColor;
+    const inactiveColor = offColor ?? paletteTokens.offColor;
+    const h = Math.max(48, Math.round(size));
+    const w = Math.max(28, Math.round(width ?? h * 0.62));
+    const t = Math.max(4, Math.round(thickness));
+    const p = Math.max(2, Math.round(padding));
+    const innerW = Math.max(1, w - p * 2);
+    const innerH = Math.max(1, h - p * 2);
+    const halfInner = Math.floor(innerH / 2);
+    const segmentLength = Math.max(1, innerW - t);
+    const verticalLength = Math.max(1, halfInner - t);
+    const glowSize = Math.max(4, Math.round(t * 1.25));
+    const horizontalStyle = (top) => ({
+        left: p + t / 2,
+        top,
+        width: segmentLength,
+        height: t,
+        borderRadius: t / 2
+    });
+    const verticalStyle = (left, top) => ({
+        left,
+        top,
+        width: t,
+        height: verticalLength,
+        borderRadius: t / 2
+    });
+    const segmentStyles = {
+        a: horizontalStyle(p),
+        b: verticalStyle(w - p - t, p + t / 2),
+        c: verticalStyle(w - p - t, p + halfInner + t / 2),
+        d: horizontalStyle(h - p - t),
+        e: verticalStyle(p, p + halfInner + t / 2),
+        f: verticalStyle(p, p + t / 2),
+        g: horizontalStyle(p + halfInner - t / 2)
+    };
+    return (_jsx("div", { role: "img", "aria-label": value, className: cn("inline-flex", className), style: {
+            width: w,
+            height: h,
+            borderRadius: rounded,
+            overflow: "hidden",
+            backgroundColor: panelBackground,
+            boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 10px 20px rgba(0,0,0,0.16)",
+            ...style
+        }, children: _jsx("div", { className: "relative h-full w-full", style: { transform: `skewX(${skew}deg)` }, children: SEGMENT_ORDER.map((segmentName) => {
+                const isOn = active.has(segmentName);
+                return (_jsx("span", { "aria-hidden": "true", style: {
+                        position: "absolute",
+                        ...segmentStyles[segmentName],
+                        backgroundColor: isOn ? activeColor : inactiveColor,
+                        boxShadow: isOn && glow ? `0 0 ${glowSize}px ${activeColor}` : "none",
+                        transition: `background-color ${transitionMs}ms ease, box-shadow ${transitionMs}ms ease`
+                    } }, segmentName));
+            }) }) }));
+}

package/dist/digits/seven-segment-digit/index.d.ts

@@ -0,0 +1,3 @@
+export { SgSevenSegmentDigit } from "./SgSevenSegmentDigit";
+export type { SgSevenSegmentDigitProps, SgSevenSegmentDigitPalette } from "./SgSevenSegmentDigit";
+//# sourceMappingURL=index.d.ts.map

package/dist/digits/seven-segment-digit/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/digits/seven-segment-digit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/digits/seven-segment-digit/index.js

@@ -0,0 +1 @@
+export { SgSevenSegmentDigit } from "./SgSevenSegmentDigit";

package/dist/gadgets/calendar/SgCalendar.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { type SgCardProps } from "../../layout/SgCard";
+export type SgCalendarWeekdayFormat = "narrow" | "short" | "long";
+export type SgCalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    value?: Date | string;
+    defaultValue?: Date | string;
+    onValueChange?: (date: Date) => void;
+    viewDate?: Date | string;
+    defaultViewDate?: Date | string;
+    onViewDateChange?: (viewDate: Date) => void;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: SgCalendarWeekdayFormat;
+    numberOfMonths?: number;
+    monthsPerLine?: number;
+    monthMinWidth?: number | string;
+    showAdjacentMonths?: boolean;
+    minDate?: Date | string;
+    maxDate?: Date | string;
+    isDateDisabled?: (date: Date) => boolean;
+    showTodayShortcut?: boolean;
+    cardTitle?: React.ReactNode;
+    cardProps?: Omit<SgCardProps, "children" | "title">;
+};
+export declare function SgCalendar(props: Readonly<SgCalendarProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgCalendar {
+    var displayName: string;
+}
+//# sourceMappingURL=SgCalendar.d.ts.map

package/dist/gadgets/calendar/SgCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgCalendar.d.ts","sourceRoot":"","sources":["../../../src/gadgets/calendar/SgCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA8H/D,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAElE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAClG,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;CACrD,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAyT1D;yBAzTe,UAAU"}

package/dist/gadgets/calendar/SgCalendar.js

@@ -0,0 +1,248 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SgCard } from "../../layout/SgCard";
+import { t, useComponentsI18n } from "../../i18n";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function normalizeDate(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addMonths(date, amount) {
+    return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function addDays(date, amount) {
+    const next = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    next.setDate(next.getDate() + amount);
+    return normalizeDate(next);
+}
+function isValidDate(date) {
+    return date instanceof Date && Number.isFinite(date.getTime());
+}
+const DATE_ONLY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+function parseDateInput(value) {
+    if (value === undefined || value === null)
+        return null;
+    if (isValidDate(value))
+        return normalizeDate(value);
+    if (typeof value === "string") {
+        const trimmed = value.trim();
+        if (!trimmed)
+            return null;
+        const dateOnlyMatch = DATE_ONLY_RE.exec(trimmed);
+        if (dateOnlyMatch) {
+            const year = Number.parseInt(dateOnlyMatch[1] ?? "0", 10);
+            const month = Number.parseInt(dateOnlyMatch[2] ?? "1", 10) - 1;
+            const day = Number.parseInt(dateOnlyMatch[3] ?? "1", 10);
+            const localDate = new Date(year, month, day);
+            return isValidDate(localDate) ? normalizeDate(localDate) : null;
+        }
+        const parsed = new Date(trimmed);
+        return isValidDate(parsed) ? normalizeDate(parsed) : null;
+    }
+    return null;
+}
+function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+function isSameMonth(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function clampWeekStart(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    const normalized = Math.trunc(value) % 7;
+    return normalized < 0 ? normalized + 7 : normalized;
+}
+function clampInt(value, fallback, min, max) {
+    if (!Number.isFinite(value))
+        return fallback;
+    const numeric = Math.trunc(value);
+    if (numeric < min)
+        return min;
+    if (numeric > max)
+        return max;
+    return numeric;
+}
+function resolveCssLength(value, fallback) {
+    if (typeof value === "number" && Number.isFinite(value) && value > 0) {
+        return `${value}px`;
+    }
+    if (typeof value === "string" && value.trim().length > 0) {
+        return value.trim();
+    }
+    return fallback;
+}
+function dateKey(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+}
+function capitalizeFirst(value, locale) {
+    if (!value)
+        return value;
+    return value.charAt(0).toLocaleUpperCase(locale) + value.slice(1);
+}
+function resolveCalendarUiLabels(locale) {
+    const lower = locale.toLowerCase();
+    if (lower.startsWith("pt")) {
+        return {
+            previousMonth: "Mes anterior",
+            nextMonth: "Proximo mes",
+            goToday: "Ir para hoje"
+        };
+    }
+    if (lower.startsWith("es")) {
+        return {
+            previousMonth: "Mes anterior",
+            nextMonth: "Mes siguiente",
+            goToday: "Ir a hoy"
+        };
+    }
+    return {
+        previousMonth: "Previous month",
+        nextMonth: "Next month",
+        goToday: "Go to today"
+    };
+}
+export function SgCalendar(props) {
+    const i18n = useComponentsI18n();
+    const { value, defaultValue, onValueChange, viewDate, defaultViewDate, onViewDateChange, locale = "pt-BR", weekStartsOn = 0, weekdayFormat = "narrow", numberOfMonths = 1, monthsPerLine = 3, monthMinWidth, showAdjacentMonths = true, minDate, maxDate, isDateDisabled, showTodayShortcut = true, className, style, cardTitle, cardProps, ...rest } = props;
+    const resolvedCardTitle = cardTitle ?? t(i18n, "components.gadgets.calendar.title");
+    const today = React.useMemo(() => normalizeDate(new Date()), []);
+    const valueControlled = value !== undefined;
+    const viewControlled = viewDate !== undefined;
+    const parsedControlledValue = React.useMemo(() => parseDateInput(value), [value]);
+    const parsedMinDate = React.useMemo(() => parseDateInput(minDate), [minDate]);
+    const parsedMaxDate = React.useMemo(() => parseDateInput(maxDate), [maxDate]);
+    const [internalValue, setInternalValue] = React.useState(() => {
+        const parsedDefault = parseDateInput(defaultValue);
+        return parsedDefault ?? today;
+    });
+    const selectedDate = valueControlled ? parsedControlledValue ?? today : internalValue;
+    const [internalViewDate, setInternalViewDate] = React.useState(() => {
+        const parsedDefaultView = parseDateInput(defaultViewDate);
+        const parsedDefaultValue = parseDateInput(defaultValue);
+        return startOfMonth(parsedDefaultView ?? parsedDefaultValue ?? today);
+    });
+    const parsedControlledViewDate = React.useMemo(() => parseDateInput(viewDate), [viewDate]);
+    const monthViewDate = viewControlled
+        ? startOfMonth(parsedControlledViewDate ?? selectedDate)
+        : internalViewDate;
+    React.useEffect(() => {
+        if (viewControlled)
+            return;
+        if (!valueControlled)
+            return;
+        if (!parsedControlledValue)
+            return;
+        setInternalViewDate((current) => {
+            if (isSameMonth(current, parsedControlledValue))
+                return current;
+            return startOfMonth(parsedControlledValue);
+        });
+    }, [parsedControlledValue, valueControlled, viewControlled]);
+    const safeWeekStartsOn = clampWeekStart(weekStartsOn);
+    const safeNumberOfMonths = clampInt(numberOfMonths, 1, 1, 12);
+    const safeMonthsPerLine = Math.min(safeNumberOfMonths, clampInt(monthsPerLine, 3, 1, 12));
+    const uiLabels = resolveCalendarUiLabels(locale);
+    const formatSelectedDate = React.useMemo(() => new Intl.DateTimeFormat(locale, {
+        weekday: "long",
+        day: "numeric",
+        month: "long"
+    }), [locale]);
+    const formatMonthYear = React.useMemo(() => new Intl.DateTimeFormat(locale, {
+        month: "long",
+        year: "numeric"
+    }), [locale]);
+    const weekdayLabels = React.useMemo(() => {
+        const formatter = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat });
+        const sundayAnchor = new Date(2026, 2, 1);
+        return Array.from({ length: 7 }, (_, index) => {
+            const weekDay = (safeWeekStartsOn + index) % 7;
+            const dayDate = addDays(sundayAnchor, weekDay);
+            const raw = formatter.format(dayDate);
+            return capitalizeFirst(raw, locale);
+        });
+    }, [locale, safeWeekStartsOn, weekdayFormat]);
+    const setMonthViewDate = React.useCallback((next) => {
+        const normalized = startOfMonth(next);
+        if (!viewControlled) {
+            setInternalViewDate(normalized);
+        }
+        onViewDateChange?.(new Date(normalized));
+    }, [onViewDateChange, viewControlled]);
+    const isCellDisabled = React.useCallback((date) => {
+        if (parsedMinDate && date.getTime() < parsedMinDate.getTime())
+            return true;
+        if (parsedMaxDate && date.getTime() > parsedMaxDate.getTime())
+            return true;
+        if (isDateDisabled?.(date))
+            return true;
+        return false;
+    }, [isDateDisabled, parsedMaxDate, parsedMinDate]);
+    const handleSelectDate = React.useCallback((date) => {
+        if (isCellDisabled(date))
+            return;
+        if (!valueControlled) {
+            setInternalValue(date);
+        }
+        onValueChange?.(new Date(date));
+        if (!isSameMonth(date, monthViewDate)) {
+            setMonthViewDate(date);
+        }
+    }, [isCellDisabled, monthViewDate, onValueChange, setMonthViewDate, valueControlled]);
+    const handleGoToday = React.useCallback(() => {
+        const now = normalizeDate(new Date());
+        if (!isCellDisabled(now)) {
+            if (!valueControlled) {
+                setInternalValue(now);
+            }
+            onValueChange?.(new Date(now));
+        }
+        setMonthViewDate(now);
+    }, [isCellDisabled, onValueChange, setMonthViewDate, valueControlled]);
+    const monthDates = React.useMemo(() => Array.from({ length: safeNumberOfMonths }, (_, index) => addMonths(monthViewDate, index)), [monthViewDate, safeNumberOfMonths]);
+    const selectedLabel = capitalizeFirst(formatSelectedDate.format(selectedDate), locale);
+    const visibleColumns = Math.min(safeMonthsPerLine, safeNumberOfMonths);
+    const monthColumnMinWidth = resolveCssLength(monthMinWidth, visibleColumns === 1 ? "20.75rem" : "16rem");
+    const monthGridStyle = {
+        gridTemplateColumns: `repeat(${visibleColumns}, minmax(${monthColumnMinWidth}, 1fr))`,
+        width: visibleColumns === 1 ? "max-content" : "100%"
+    };
+    const mergedCardClassName = cn("max-w-full", cardProps?.className);
+    const mergedCardBodyClassName = cn("max-h-full max-w-full overflow-auto", cardProps?.bodyClassName);
+    const mergedCardStyle = {
+        width: "fit-content",
+        maxWidth: "100%",
+        ...(cardProps?.style ?? {})
+    };
+    return (_jsx(SgCard, { title: resolvedCardTitle, collapsible: true, defaultOpen: true, collapseToggleAlign: "right", collapseIconSize: 20, draggable: true, bgColor: "#ffffff", bgColorTitle: "#f3f4f6", cardStyle: "outlined", ...cardProps, className: mergedCardClassName, bodyClassName: mergedCardBodyClassName, style: mergedCardStyle, children: _jsxs("div", { className: cn("inline-flex max-w-full select-none flex-col gap-3", className), style: style, ...rest, children: [_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-background px-4 py-3", children: [_jsx("div", { className: "min-h-6 text-sm font-medium text-foreground", children: selectedLabel }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setMonthViewDate(addMonths(monthViewDate, -1)), className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": uiLabels.previousMonth, title: uiLabels.previousMonth, children: _jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", "aria-hidden": "true", children: _jsx("path", { d: "m12.5 5.8-4.2 4.2 4.2 4.2", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { type: "button", onClick: () => setMonthViewDate(addMonths(monthViewDate, 1)), className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": uiLabels.nextMonth, title: uiLabels.nextMonth, children: _jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", "aria-hidden": "true", children: _jsx("path", { d: "m7.5 5.8 4.2 4.2-4.2 4.2", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), showTodayShortcut ? (_jsx("button", { type: "button", onClick: handleGoToday, className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border/70 bg-muted/40 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": uiLabels.goToday, title: uiLabels.goToday, children: _jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", "aria-hidden": "true", children: _jsx("path", { d: "M5.6 7.6 10 12l4.4-4.4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : null] })] }), _jsx("div", { className: "max-h-full max-w-full overflow-auto", children: _jsx("div", { className: "grid gap-4", style: monthGridStyle, children: monthDates.map((monthDate) => {
+                            const firstDayOfMonth = startOfMonth(monthDate);
+                            const firstDayOffset = (firstDayOfMonth.getDay() - safeWeekStartsOn + 7) % 7;
+                            const gridStart = addDays(firstDayOfMonth, -firstDayOffset);
+                            const days = Array.from({ length: 42 }, (_, index) => addDays(gridStart, index));
+                            const monthLabel = capitalizeFirst(formatMonthYear.format(monthDate), locale);
+                            return (_jsxs("div", { className: "rounded-xl border border-border/70 bg-background", children: [_jsx("div", { className: "border-b border-border/70 px-4 py-3", children: _jsx("div", { className: "text-[1.1rem] font-semibold text-foreground", children: monthLabel }) }), _jsxs("div", { className: "px-4 pb-4 pt-3", children: [_jsx("div", { className: "mb-2 grid grid-cols-7 text-center text-[0.79rem] font-medium uppercase tracking-wide text-muted-foreground", children: weekdayLabels.map((label, index) => (_jsx("span", { className: "py-1", children: label }, `${label}-${index}`))) }), _jsx("div", { className: "grid grid-cols-7 gap-y-1", children: days.map((day) => {
+                                                    const inCurrentMonth = isSameMonth(day, monthDate);
+                                                    const hiddenAdjacentDay = !showAdjacentMonths && !inCurrentMonth;
+                                                    const disabled = isCellDisabled(day);
+                                                    const selected = isSameDay(day, selectedDate) && inCurrentMonth;
+                                                    const isToday = isSameDay(day, today) && inCurrentMonth;
+                                                    if (hiddenAdjacentDay) {
+                                                        return (_jsx("span", { className: "mx-auto inline-flex h-10 w-10", "aria-hidden": "true" }, `${dateKey(day)}-blank`));
+                                                    }
+                                                    return (_jsx("button", { type: "button", onClick: () => handleSelectDate(day), disabled: disabled, className: cn("mx-auto inline-flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-colors", selected
+                                                            ? "bg-primary text-primary-foreground shadow-sm"
+                                                            : "hover:bg-muted", inCurrentMonth ? "text-foreground" : "text-muted-foreground", disabled ? "cursor-not-allowed opacity-40" : "", isToday && !selected ? "ring-1 ring-primary/45 ring-offset-1 ring-offset-background" : ""), "aria-pressed": selected, children: day.getDate() }, dateKey(day)));
+                                                }) })] })] }, `${monthDate.getFullYear()}-${monthDate.getMonth()}`));
+                        }) }) })] }) }));
+}
+SgCalendar.displayName = "SgCalendar";

package/dist/gadgets/calendar/index.d.ts

@@ -0,0 +1,3 @@
+export { SgCalendar } from "./SgCalendar";
+export type { SgCalendarProps, SgCalendarWeekdayFormat } from "./SgCalendar";
+//# sourceMappingURL=index.d.ts.map