@cmdniels/uikit 1.4.7 → 1.5.0

package/out/components/glass/Glass.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes } from "react";
+export default function Glass({ children, className, depth, zIndex, refraction, ...props }: HTMLAttributes<HTMLDivElement> & {
+    depth?: number;
+    zIndex?: number;
+    refraction?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/out/components/glass/Glass.js

@@ -0,0 +1,89 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useRef, useEffect, useState } from "react";
+import cn from "../../cn";
+import GlassFilter from "./GlassFilter";
+export default function Glass(_a) {
+    var { children, className, depth = 10, zIndex = 0, refraction = false } = _a, props = __rest(_a, ["children", "className", "depth", "zIndex", "refraction"]);
+    const refractionFilterId = useId();
+    const containerRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 200, height: 200 });
+    const [radius, setRadius] = useState({ bottomLeft: 0, bottomRight: 0, topLeft: 0, topRight: 0 });
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const rect = containerRef.current.getBoundingClientRect();
+                const computedStyle = window.getComputedStyle(containerRef.current);
+                const parseRadius = (value) => parseFloat(value) || 0;
+                const radiusValues = {
+                    topLeft: parseRadius(computedStyle.borderTopLeftRadius),
+                    topRight: parseRadius(computedStyle.borderTopRightRadius),
+                    bottomLeft: parseRadius(computedStyle.borderBottomLeftRadius),
+                    bottomRight: parseRadius(computedStyle.borderBottomRightRadius),
+                };
+                const maxRadius = Math.min(rect.width, rect.height) / 2;
+                setDimensions({
+                    width: rect.width || 200,
+                    height: rect.height || 200,
+                });
+                setRadius({
+                    topLeft: Math.min(radiusValues.topLeft, maxRadius),
+                    topRight: Math.min(radiusValues.topRight, maxRadius),
+                    bottomLeft: Math.min(radiusValues.bottomLeft, maxRadius),
+                    bottomRight: Math.min(radiusValues.bottomRight, maxRadius),
+                });
+            }
+        };
+        updateDimensions();
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => resizeObserver.disconnect();
+    }, [refraction]);
+    const { width, height } = dimensions;
+    const avarageSize = (width + height) / 2;
+    const strength = avarageSize / 3;
+    const chromaticAberration = avarageSize / 10;
+    return (_jsxs(_Fragment, { children: [refraction && (_jsx(GlassFilter, { id: refractionFilterId, depth: depth, height: height, width: width, radius: radius, strength: strength, chromaticAberration: chromaticAberration })), _jsxs("div", Object.assign({}, props, { ref: containerRef, className: cn("relative isolate overflow-hidden rounded-lg bg-card/10 shadow-xl", className), style: { zIndex }, children: [refraction && (_jsx("div", { style: {
+                            content: "",
+                            position: "absolute",
+                            inset: 0,
+                            zIndex: zIndex - 1,
+                            opacity: 1,
+                            borderBottomLeftRadius: radius.bottomLeft,
+                            borderBottomRightRadius: radius.bottomRight,
+                            borderTopLeftRadius: radius.topLeft,
+                            borderTopRightRadius: radius.topRight,
+                            backdropFilter: `url(#${refractionFilterId})`,
+                            WebkitBackdropFilter: `url(#${refractionFilterId})`,
+                            willChange: "backdrop-filter, border-radius",
+                            pointerEvents: "none",
+                        } })), _jsx("div", { style: {
+                            content: "",
+                            position: "absolute",
+                            inset: 0,
+                            zIndex: zIndex - 1,
+                            opacity: 1,
+                            borderBottomLeftRadius: radius.bottomLeft,
+                            borderBottomRightRadius: radius.bottomRight,
+                            borderTopLeftRadius: radius.topLeft,
+                            borderTopRightRadius: radius.topRight,
+                            boxShadow: `inset 0 0 8px 0px oklch(1 0 0 / 0.3)`,
+                            backdropFilter: `blur(2px) brightness(1.1) saturate(1.5)`,
+                            WebkitBackdropFilter: `blur(2px) brightness(1.1) saturate(1.5)`,
+                            willChange: "backdrop-filter, border-radius",
+                            pointerEvents: "none",
+                        } }), children] }))] }));
+}

package/out/components/glass/GlassDisplacementMap.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Creating the displacement map that is used by feDisplacementMap filter.
+ * Gradients take into account the radius of the element.
+ * This is why they start and end in the middle of the angle curve.
+ */
+export default function GlassDisplacementMap({ height, width, radius, depth, }: {
+    height: number;
+    width: number;
+    radius: {
+        bottomLeft: number;
+        bottomRight: number;
+        topLeft: number;
+        topRight: number;
+    };
+    depth: number;
+}): string;

package/out/components/glass/GlassDisplacementMap.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
+/**
+ * Creating the displacement map that is used by feDisplacementMap filter.
+ * Gradients take into account the radius of the element.
+ * This is why they start and end in the middle of the angle curve.
+ */
+export default function GlassDisplacementMap({ height, width, radius, depth, }) {
+    const averageRadius = (radius.topLeft + radius.topRight + radius.bottomLeft + radius.bottomRight) / 4;
+    const innerWidth = width - 2 * depth;
+    const innerHeight = height - 2 * depth;
+    const innerRadius = {
+        topLeft: Math.max(0, radius.topLeft - depth),
+        topRight: Math.max(0, radius.topRight - depth),
+        bottomLeft: Math.max(0, radius.bottomLeft - depth),
+        bottomRight: Math.max(0, radius.bottomRight - depth),
+    };
+    const createRoundedRectPath = (x, y, w, h, r) => {
+        const maxRadius = Math.min(w / 2, h / 2);
+        const tl = Math.min(r.topLeft, maxRadius);
+        const tr = Math.min(r.topRight, maxRadius);
+        const bl = Math.min(r.bottomLeft, maxRadius);
+        const br = Math.min(r.bottomRight, maxRadius);
+        return `
+			M ${x + tl} ${y}
+			L ${x + w - tr} ${y}
+			Q ${x + w} ${y} ${x + w} ${y + tr}
+			L ${x + w} ${y + h - br}
+			Q ${x + w} ${y + h} ${x + w - br} ${y + h}
+			L ${x + bl} ${y + h}
+			Q ${x} ${y + h} ${x} ${y + h - bl}
+			L ${x} ${y + tl}
+			Q ${x} ${y} ${x + tl} ${y}
+			Z
+		`;
+    };
+    const svg = (_jsxs("svg", { height: height, width: width, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "Y", x1: "0", x2: "0", y1: `${Math.ceil((averageRadius / height) * 15)}%`, y2: `${Math.floor(100 - (averageRadius / height) * 15)}%`, children: [_jsx("stop", { offset: "0%", stopColor: "#0F0" }), _jsx("stop", { offset: "100%", stopColor: "#000" })] }), _jsxs("linearGradient", { id: "X", x1: `${Math.ceil((averageRadius / width) * 15)}%`, x2: `${Math.floor(100 - (averageRadius / width) * 15)}%`, y1: "0", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: "#F00" }), _jsx("stop", { offset: "100%", stopColor: "#000" })] })] }), _jsx("rect", { x: "0", y: "0", height: height, width: width, fill: "#808080" }), _jsxs("g", { filter: "blur(2px)", children: [_jsx("rect", { x: "0", y: "0", height: height, width: width, fill: "#000080" }), _jsx("rect", { x: "0", y: "0", height: height, width: width, fill: "url(#Y)", style: { mixBlendMode: "screen" } }), _jsx("rect", { x: "0", y: "0", height: height, width: width, fill: "url(#X)", style: { mixBlendMode: "screen" } }), _jsx("path", { d: createRoundedRectPath(depth, depth, innerWidth, innerHeight, innerRadius), fill: "#808080", filter: `blur(${depth}px)` })] })] }));
+    return `data:image/svg+xml;utf8,${encodeURIComponent(renderToStaticMarkup(svg))}`;
+}

package/out/components/glass/GlassFilter.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from "react";
+export default function GlassFilter({ id, depth, height, width, radius, strength, chromaticAberration, }: HTMLAttributes<HTMLDivElement> & {
+    id: string;
+    depth?: number;
+    height: number;
+    width: number;
+    strength?: number;
+    chromaticAberration?: number;
+    radius: {
+        bottomLeft: number;
+        bottomRight: number;
+        topLeft: number;
+        topRight: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/out/components/glass/GlassFilter.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import GlassDisplacementMap from "./GlassDisplacementMap";
+export default function GlassFilter({ id, depth = 10, height, width, radius, strength = 20, chromaticAberration = 2, }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0", style: { position: "absolute", overflow: "hidden" }, children: _jsx("defs", { children: _jsxs("filter", { id: id, colorInterpolationFilters: "sRGB", children: [_jsx("feImage", { x: "0", y: "0", height: height, width: width, href: GlassDisplacementMap({
+                            height,
+                            width,
+                            radius,
+                            depth,
+                        }), result: "displacementMap" }), _jsx("feDisplacementMap", { in: "SourceGraphic", in2: "displacementMap", scale: strength + chromaticAberration * 2, xChannelSelector: "R", yChannelSelector: "G" }), _jsx("feColorMatrix", { type: "matrix", values: "1 0 0 0 0\n\t\t\t\t\t\t\t\t\t0 0 0 0 0\n\t\t\t\t\t\t\t\t\t0 0 0 0 0\n\t\t\t\t\t\t\t\t\t0 0 0 1 0", result: "displacedR" }), _jsx("feDisplacementMap", { in: "SourceGraphic", in2: "displacementMap", scale: strength + chromaticAberration, xChannelSelector: "R", yChannelSelector: "G" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0\n\t\t\t\t\t\t\t\t\t0 1 0 0 0\n\t\t\t\t\t\t\t\t\t0 0 0 0 0\n\t\t\t\t\t\t\t\t\t0 0 0 1 0", result: "displacedG" }), _jsx("feDisplacementMap", { in: "SourceGraphic", in2: "displacementMap", scale: strength, xChannelSelector: "R", yChannelSelector: "G" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0\n\t\t\t\t\t\t\t\t\t0 0 0 0 0\n\t\t\t\t\t\t\t\t\t0 0 1 0 0\n\t\t\t\t\t\t\t\t\t0 0 0 1 0", result: "displacedB" }), _jsx("feBlend", { in: "displacedR", in2: "displacedG", mode: "screen" }), _jsx("feBlend", { in2: "displacedB", mode: "screen" })] }) }) }));
+}

package/out/components/input-group/{InputGroupTextarea.d.ts → InputGroupTextArea.d.ts}

@@ -1,2 +1,2 @@
 import type { ComponentProps } from "react";
-export default function InputGroupTextarea({ className, ...props }: ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export default function InputGroupTextArea({ className, ...props }: ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;

package/out/components/input-group/{InputGroupTextarea.js → InputGroupTextArea.js}

@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from "../../cn";
-import Textarea from "../../components/textarea/TextArea";
-export default function InputGroupTextarea(_a) {
+import TextArea from "../../components/textarea/TextArea";
+export default function InputGroupTextArea(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(Textarea, Object.assign({ "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className) }, props)));
+    return (_jsx(TextArea, Object.assign({ "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className) }, props)));
 }

package/out/components/select/Select.js

@@ -32,7 +32,6 @@ export default function Select(_a) {
         if (items) {
             return items;
         }
-        ;
         const itemsArray = [];
         extractItemsFromChildren(children, itemsArray);
         return itemsArray;

package/out/index.d.ts

@@ -118,13 +118,14 @@ export { default as FieldSeparator } from "./components/field/FieldSeparator";
 export { default as FieldSet } from "./components/field/FieldSet";
 export { default as FieldTitle } from "./components/field/FieldTitle";
 export { default as FileDropzone } from "./components/file-dropzone/FileDropzone";
+export { default as Glass } from "./components/glass/Glass";
 export { default as Input } from "./components/input/Input";
 export { default as InputGroup } from "./components/input-group/InputGroup";
 export { default as InputGroupAddon } from "./components/input-group/InputGroupAddon";
 export { default as InputGroupButton } from "./components/input-group/InputGroupButton";
 export { default as InputGroupInput } from "./components/input-group/InputGroupInput";
 export { default as InputGroupText } from "./components/input-group/InputGroupText";
-export { default as InputGroupTextarea } from "./components/input-group/InputGroupTextarea";
+export { default as InputGroupTextArea } from "./components/input-group/InputGroupTextArea";
 export { default as Item } from "./components/item/Item";
 export { default as ItemActions } from "./components/item/ItemActions";
 export { default as ItemContent } from "./components/item/ItemContent";

package/out/index.js

@@ -137,6 +137,8 @@ export { default as FieldSet } from "./components/field/FieldSet";
 export { default as FieldTitle } from "./components/field/FieldTitle";
 // File Dropzone
 export { default as FileDropzone } from "./components/file-dropzone/FileDropzone";
+// Glass
+export { default as Glass } from "./components/glass/Glass";
 // Input
 export { default as Input } from "./components/input/Input";
 // Input Group
@@ -145,7 +147,7 @@ export { default as InputGroupAddon } from "./components/input-group/InputGroupA
 export { default as InputGroupButton } from "./components/input-group/InputGroupButton";
 export { default as InputGroupInput } from "./components/input-group/InputGroupInput";
 export { default as InputGroupText } from "./components/input-group/InputGroupText";
-export { default as InputGroupTextarea } from "./components/input-group/InputGroupTextarea";
+export { default as InputGroupTextArea } from "./components/input-group/InputGroupTextArea";
 // Item
 export { default as Item } from "./components/item/Item";
 export { default as ItemActions } from "./components/item/ItemActions";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cmdniels/uikit",
-	"version": "1.4.7",
+	"version": "1.5.0",
 	"private": false,
 	"license": "MIT",
 	"type": "module",