@cmdniels/uikit 1.0.0 → 1.0.2

package/out/components/copy-input/CopyInput.d.ts

@@ -1,3 +1,3 @@
 import { type ComponentProps } from "react";
 import InputGroupInput from "../../components/input-group/InputGroupInput";
-export default function CopyInput({ disabled, defaultValue, value, onChange, ...props }: ComponentProps<typeof InputGroupInput>): import("react/jsx-runtime").JSX.Element;
+export default function CopyInput({ disabled, defaultValue, value, onChange, children, ...props }: ComponentProps<typeof InputGroupInput>): import("react/jsx-runtime").JSX.Element;

package/out/components/copy-input/CopyInput.js

@@ -12,21 +12,34 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconCopy } from "@tabler/icons-react";
-import { useState, useRef } from "react";
+import { useState, useRef, Children, isValidElement } from "react";
 import Button from "../../components/button/Button";
 import InputGroup from "../../components/input-group/InputGroup";
 import InputGroupAddon from "../../components/input-group/InputGroupAddon";
 import InputGroupInput from "../../components/input-group/InputGroupInput";
 export default function CopyInput(_a) {
-    var { disabled, defaultValue, value, onChange } = _a, props = __rest(_a, ["disabled", "defaultValue", "value", "onChange"]);
+    var { disabled, defaultValue, value, onChange, children } = _a, props = __rest(_a, ["disabled", "defaultValue", "value", "onChange", "children"]);
     const inputRef = useRef(null);
     const [hasValue, setHasValue] = useState(Boolean(value !== null && value !== void 0 ? value : defaultValue));
     const handleChange = (e) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
         setHasValue(Boolean(e.target.value));
     };
-    return (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, Object.assign({ ref: inputRef, disabled: disabled, defaultValue: defaultValue, value: value, onChange: handleChange }, props)), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(Button, { variant: "link", className: "h-8 px-2", disabled: disabled !== null && disabled !== void 0 ? disabled : !hasValue, onClick: () => {
-                        var _a, _b;
-                        navigator.clipboard.writeText((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
-                    }, children: _jsx(IconCopy, { className: "size-4" }) }) })] }));
+    const handleCopy = () => {
+        var _a, _b, _c, _d;
+        const inputValue = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+        const text = (_d = (_c = Children.map(children, (child) => {
+            if (isValidElement(child) && child.props.children) {
+                const inputGroupText = child.props.children;
+                if (isValidElement(inputGroupText) && inputGroupText.props.children) {
+                    const innerText = inputGroupText.props.children;
+                    if (typeof innerText === "string" || typeof innerText === "number") {
+                        return innerText;
+                    }
+                }
+            }
+        })) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : "";
+        navigator.clipboard.writeText(text + inputValue);
+    };
+    return (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, Object.assign({ ref: inputRef, disabled: disabled, defaultValue: defaultValue, value: value, onChange: handleChange }, props)), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(Button, { variant: "link", className: "h-8 px-2", disabled: disabled !== null && disabled !== void 0 ? disabled : !hasValue, onClick: handleCopy, children: _jsx(IconCopy, { className: "size-4" }) }) }), children] }));
 }

package/out/components/input-group/InputGroup.js

@@ -14,5 +14,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from "../../cn";
 export default function InputGroup(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0", className) }, props)));
+    return (_jsx("div", Object.assign({ "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className) }, props)));
 }

package/out/components/link-input/LinkInput.d.ts

@@ -1,3 +1,3 @@
 import { type ComponentProps } from "react";
 import InputGroupInput from "../../components/input-group/InputGroupInput";
-export default function LinkInput({ disabled, defaultValue, value, onChange, ...props }: ComponentProps<typeof InputGroupInput>): import("react/jsx-runtime").JSX.Element;
+export default function LinkInput({ disabled, defaultValue, value, onChange, children, ...props }: ComponentProps<typeof InputGroupInput>): import("react/jsx-runtime").JSX.Element;

package/out/components/link-input/LinkInput.js

@@ -12,13 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconExternalLink } from "@tabler/icons-react";
-import { useState, useRef } from "react";
+import { useState, useRef, isValidElement, Children } from "react";
 import Button from "../../components/button/Button";
 import InputGroup from "../../components/input-group/InputGroup";
 import InputGroupAddon from "../../components/input-group/InputGroupAddon";
 import InputGroupInput from "../../components/input-group/InputGroupInput";
 export default function LinkInput(_a) {
-    var { disabled, defaultValue, value, onChange } = _a, props = __rest(_a, ["disabled", "defaultValue", "value", "onChange"]);
+    var { disabled, defaultValue, value, onChange, children } = _a, props = __rest(_a, ["disabled", "defaultValue", "value", "onChange", "children"]);
     const inputRef = useRef(null);
     const debounceRef = useRef(undefined);
     const [hasValidValue, setHasValidValue] = useState(/^https?:\/\/.+/.test(String(value !== null && value !== void 0 ? value : defaultValue)));
@@ -32,10 +32,21 @@ export default function LinkInput(_a) {
             setHasValidValue(/^https?:\/\/.+/.test(e.target.value));
         }, 300);
     };
-    return (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, Object.assign({ ref: inputRef, disabled: disabled, defaultValue: defaultValue, value: value, onChange: handleChange }, props)), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(Button, { variant: "link", className: "h-8 px-2", disabled: disabled !== null && disabled !== void 0 ? disabled : !hasValidValue, onClick: () => {
-                        var _a, _b;
-                        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
-                            window.open((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value, "_blank", "noopener,noreferrer");
-                        }
-                    }, children: _jsx(IconExternalLink, { className: "size-4" }) }) })] }));
+    const handleCopy = () => {
+        var _a, _b, _c, _d;
+        const inputValue = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+        const text = (_d = (_c = Children.map(children, (child) => {
+            if (isValidElement(child) && child.props.children) {
+                const inputGroupText = child.props.children;
+                if (isValidElement(inputGroupText) && inputGroupText.props.children) {
+                    const innerText = inputGroupText.props.children;
+                    if (typeof innerText === "string" || typeof innerText === "number") {
+                        return innerText;
+                    }
+                }
+            }
+        })) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : "";
+        window.open(text + inputValue, "_blank", "noopener,noreferrer");
+    };
+    return (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, Object.assign({ ref: inputRef, disabled: disabled, defaultValue: defaultValue, value: value, onChange: handleChange }, props)), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(Button, { variant: "link", className: "h-8 px-2", disabled: disabled !== null && disabled !== void 0 ? disabled : !hasValidValue, onClick: handleCopy, children: _jsx(IconExternalLink, { className: "size-4" }) }) }), children] }));
 }

package/out/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,2 @@
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+export default function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;

package/out/components/scroll-area/ScrollArea.js

@@ -0,0 +1,20 @@
+"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 } from "react/jsx-runtime";
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import cn from "../../cn";
+import ScrollBar from "./ScrollBar";
+export default function ScrollArea(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsxs(ScrollAreaPrimitive.Root, Object.assign({ "data-slot": "scroll-area", className: cn("relative", className) }, props, { children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+}

package/out/components/scroll-area/ScrollBar.d.ts

@@ -0,0 +1,2 @@
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+export default function ScrollBar({ className, orientation, ...props }: ScrollAreaPrimitive.Scrollbar.Props): import("react/jsx-runtime").JSX.Element;

package/out/components/scroll-area/ScrollBar.js

@@ -0,0 +1,19 @@
+"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 } from "react/jsx-runtime";
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import cn from "../../cn";
+export default function ScrollBar(_a) {
+    var { className, orientation = "vertical" } = _a, props = __rest(_a, ["className", "orientation"]);
+    return (_jsx(ScrollAreaPrimitive.Scrollbar, Object.assign({ "data-slot": "scroll-area-scrollbar", "data-orientation": orientation, orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent", className) }, props, { children: _jsx(ScrollAreaPrimitive.Thumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border" }) })));
+}

package/out/index.d.ts

@@ -120,6 +120,8 @@ export { default as PopoverDescription } from "./components/popover/PopoverDescr
 export { default as PopoverHeader } from "./components/popover/PopoverHeader";
 export { default as PopoverTitle } from "./components/popover/PopoverTitle";
 export { default as PopoverTrigger } from "./components/popover/PopoverTrigger";
+export { default as ScrollArea } from "./components/scroll-area/ScrollArea";
+export { default as ScrollBar } from "./components/scroll-area/ScrollBar";
 export { default as Select } from "./components/select/Select";
 export { default as SelectContent } from "./components/select/SelectContent";
 export { default as SelectGroup } from "./components/select/SelectGroup";

package/out/index.js

@@ -144,6 +144,9 @@ export { default as PopoverDescription } from "./components/popover/PopoverDescr
 export { default as PopoverHeader } from "./components/popover/PopoverHeader";
 export { default as PopoverTitle } from "./components/popover/PopoverTitle";
 export { default as PopoverTrigger } from "./components/popover/PopoverTrigger";
+// Scroll Area
+export { default as ScrollArea } from "./components/scroll-area/ScrollArea";
+export { default as ScrollBar } from "./components/scroll-area/ScrollBar";
 // Select
 export { default as Select } from "./components/select/Select";
 export { default as SelectContent } from "./components/select/SelectContent";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmdniels/uikit",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -35,6 +35,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@tabler/icons-react": "^3.35.0",
     "@tailwindcss/postcss": "^4",
     "class-variance-authority": "^0.7.1",
@@ -49,7 +50,7 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@cmdniels/eslint-config": "1.0.0",
+    "@cmdniels/eslint-config": "^1.0.1",
     "@ladle/react": "^5.1.1",
     "@types/node": "24.10.1",
     "@types/react": "^19.2.7",