@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/connectionstatus/ConnectionStatus.js

@@ -0,0 +1,197 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__badge_index_js_eba1cd2a__ from "../badge/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__ from "../flex/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__tooltip_index_js_7d77ed34__ from "../tooltip/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-xs text-base-content/70">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-xs font-mono text-base-content/70">');
+const ConnectionStatus = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "state",
+        "errorMessage",
+        "serviceName",
+        "url",
+        "isCustomUrl",
+        "showDetails",
+        "showUrl",
+        "showReconnectButton",
+        "onReconnect",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const containerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className));
+    const getBadgeColor = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        switch(local.state){
+            case "connected":
+                return "success";
+            case "connecting":
+                return "warning";
+            case "error":
+                return "danger";
+            default:
+                return "default";
+        }
+    });
+    const getStatusText = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        switch(local.state){
+            case "connected":
+                return "Connected";
+            case "connecting":
+                return "Connecting...";
+            case "error":
+                return local.errorMessage ? `Error: ${local.errorMessage}` : "Error";
+            default:
+                return "Disconnected";
+        }
+    });
+    const formatUrl = (url)=>{
+        if (!url) return "";
+        try {
+            const urlObj = new URL(url);
+            return urlObj.hostname + (urlObj.port ? `:${urlObj.port}` : "");
+        } catch  {
+            return url;
+        }
+    };
+    const getTooltipText = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        let tooltip = `Status: ${getStatusText()}`;
+        if (local.url) {
+            tooltip += `\nURL: ${local.url}`;
+            if (local.isCustomUrl) tooltip += " (Custom)";
+        }
+        if (local.serviceName) tooltip += `\nService: ${local.serviceName}`;
+        return tooltip;
+    });
+    const handleReconnect = async ()=>{
+        if (local.onReconnect) await local.onReconnect();
+    };
+    const shouldShowReconnectButton = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.showReconnectButton && ("disconnected" === local.state || "error" === local.state));
+    const displayUrl = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.url ? formatUrl(local.url) : "");
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        align: "center",
+        gap: "sm",
+        get ["class"] () {
+            return containerClasses();
+        },
+        get style () {
+            return local.style;
+        },
+        get ["data-theme"] () {
+            return local.dataTheme;
+        }
+    }, others, {
+        get children () {
+            return [
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__tooltip_index_js_7d77ed34__["default"], {
+                    placement: "bottom",
+                    get children () {
+                        return [
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__tooltip_index_js_7d77ed34__["default"].Trigger, {
+                                get children () {
+                                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+                                        align: "center",
+                                        gap: "sm",
+                                        get children () {
+                                            return [
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                                    get when () {
+                                                        return local.showDetails;
+                                                    },
+                                                    get children () {
+                                                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+                                                            direction: "col",
+                                                            align: "start",
+                                                            gap: "sm",
+                                                            get children () {
+                                                                return [
+                                                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__badge_index_js_eba1cd2a__["default"], {
+                                                                        get color () {
+                                                                            return getBadgeColor();
+                                                                        },
+                                                                        size: "sm",
+                                                                        get children () {
+                                                                            return getStatusText();
+                                                                        }
+                                                                    }),
+                                                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                                                        get when () {
+                                                                            return local.serviceName;
+                                                                        },
+                                                                        get children () {
+                                                                            var _el$ = _tmpl$();
+                                                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.serviceName);
+                                                                            return _el$;
+                                                                        }
+                                                                    }),
+                                                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                                                        get when () {
+                                                                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.showUrl)() && displayUrl();
+                                                                        },
+                                                                        get children () {
+                                                                            var _el$2 = _tmpl$2();
+                                                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, displayUrl);
+                                                                            return _el$2;
+                                                                        }
+                                                                    })
+                                                                ];
+                                                            }
+                                                        });
+                                                    }
+                                                }),
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                                    get when () {
+                                                        return !local.showDetails;
+                                                    },
+                                                    get children () {
+                                                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__badge_index_js_eba1cd2a__["default"], {
+                                                            get color () {
+                                                                return getBadgeColor();
+                                                            },
+                                                            size: "sm",
+                                                            get children () {
+                                                                return getStatusText();
+                                                            }
+                                                        });
+                                                    }
+                                                })
+                                            ];
+                                        }
+                                    });
+                                }
+                            }),
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__tooltip_index_js_7d77ed34__["default"].Content, {
+                                get children () {
+                                    return getTooltipText();
+                                }
+                            })
+                        ];
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return shouldShowReconnectButton();
+                    },
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
+                            onClick: handleReconnect,
+                            variant: "outline",
+                            size: "sm",
+                            get isDisabled () {
+                                return "connecting" === local.state;
+                            },
+                            get isPending () {
+                                return "connecting" === local.state;
+                            },
+                            children: "Reconnect"
+                        });
+                    }
+                })
+            ];
+        }
+    }));
+};
+const connectionstatus_ConnectionStatus = ConnectionStatus;
+export { ConnectionStatus, connectionstatus_ConnectionStatus as default };

package/dist/components/connectionstatus/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ConnectionStatus";
+export type { ConnectionState, ConnectionStatusProps, } from "./ConnectionStatus";

package/dist/components/connectionstatus/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ConnectionStatus_js_7001fb3d__ from "./ConnectionStatus.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ConnectionStatus_js_7001fb3d__["default"];
+export { __webpack_exports__default as default };

package/dist/components/copy-button/CopyButton.d.ts

@@ -0,0 +1,11 @@
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export interface CopyButtonProps extends IComponentBaseProps {
+    text: string;
+    title?: string;
+    onCopy?: () => void;
+    children?: JSX.Element;
+    copiedToken?: string | Component;
+}
+declare const CopyButton: Component<CopyButtonProps>;
+export default CopyButton;

package/dist/components/copy-button/CopyButton.js

@@ -0,0 +1,70 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
+const CopyButton = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "text",
+        "title",
+        "class",
+        "className",
+        "onCopy",
+        "children",
+        "dataTheme",
+        "copiedToken"
+    ]);
+    const [copied, setCopied] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const copy = async ()=>{
+        await navigator.clipboard.writeText(local.text);
+        setCopied(true);
+        local.onCopy?.();
+        setTimeout(()=>setCopied(false), 2000);
+    };
+    const getContent = ()=>{
+        if (local.children) return local.children;
+        if (!copied()) return "Copy";
+    };
+    const getCopiedContent = ()=>{
+        if ("string" == typeof local.copiedToken) return local.copiedToken;
+        if (local.copiedToken) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(local.copiedToken, {});
+        return "Copied!";
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        type: "button",
+        size: "sm",
+        variant: "ghost",
+        onClick: copy,
+        get title () {
+            return local.title || "Copy to clipboard";
+        },
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(copied() ? "text-success" : "", local.class, local.className);
+        }
+    }, others, {
+        get children () {
+            return [
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return !copied();
+                    },
+                    get children () {
+                        return getContent();
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return copied();
+                    },
+                    get children () {
+                        return getCopiedContent();
+                    }
+                })
+            ];
+        }
+    }));
+};
+const copy_button_CopyButton = CopyButton;
+export { copy_button_CopyButton as default };

package/dist/components/copy-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CopyButton";
+export type { CopyButtonProps } from "./CopyButton";

package/dist/components/copy-button/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__CopyButton_js_a4459a93__ from "./CopyButton.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__CopyButton_js_a4459a93__["default"];
+export { __webpack_exports__default as default };

package/dist/components/countdown/Countdown.d.ts

@@ -0,0 +1,8 @@
+import "./countdown.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type CountdownProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLSpanElement> & {
+    value: number;
+};
+declare const Countdown: (props: CountdownProps) => JSX.Element;
+export default Countdown;

package/dist/components/countdown/Countdown.js

@@ -0,0 +1,37 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./countdown.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span role=timer><span>");
+const Countdown = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "value"
+    ]);
+    const displayedValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>Math.min(99, Math.max(0, local.value)));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("countdown", local.class, local.className);
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = `--value: ${displayedValue()}`, _v$2 = displayedValue();
+            _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$2, _v$, _p$.e);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-content", _p$.t = _v$2);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        return _el$;
+    })();
+};
+const countdown_Countdown = Countdown;
+export { countdown_Countdown as default };

package/dist/components/countdown/countdown.css

@@ -0,0 +1,58 @@
+@layer components {
+  .countdown {
+      display: inline-flex;
+    }
+
+  .countdown.countdown {
+      line-height: 1em;
+    }
+
+  .countdown > * {
+      visibility: hidden;
+      position: relative;
+      display: inline-block;
+      overflow-y: clip;
+      transition: width 0.4s ease-out 0.2s;
+      height: 1em;
+      --value-v: calc(mod(max(0, var(--value)), 1000));
+      --value-hundreds: calc(round(to-zero, var(--value-v) / 100, 1));
+      --value-tens: calc(round(to-zero, mod(var(--value-v), 100) / 10, 1));
+      --value-ones: calc(mod(var(--value-v), 100));
+      --show-hundreds: clamp(clamp(0, var(--digits, 1) - 2, 1), var(--value-hundreds), 1);
+      --show-tens: clamp(
+          clamp(0, var(--digits, 1) - 1, 1),
+          var(--value-tens) + var(--show-hundreds),
+          1
+        );
+      --first-digits: calc(round(to-zero, var(--value-v) / 10, 1));
+      width: calc(1ch + var(--show-tens) * 1ch + var(--show-hundreds) * 1ch);
+      direction: ltr;
+    }
+
+  .countdown > *:before,
+    .countdown > *:after {
+      visibility: visible;
+      position: absolute;
+      overflow-x: clip;
+      --tw-content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
+      content: var(--tw-content);
+      font-variant-numeric: tabular-nums;
+      white-space: pre;
+      text-align: end;
+      direction: rtl;
+      transition: all 1s cubic-bezier(1, 0, 0, 1), width 0.2s ease-out 0.2s, opacity 0.2s ease-out 0.2s;
+    }
+
+  .countdown > *:before {
+      width: calc(1ch + var(--show-hundreds) * 1ch);
+      top: calc(var(--first-digits) * -1em);
+      inset-inline-end: 0;
+      opacity: var(--show-tens);
+    }
+
+  .countdown > *:after {
+      width: 1ch;
+      top: calc(var(--value-ones) * -1em);
+      inset-inline-start: 0;
+    }
+}

package/dist/components/countdown/index.d.ts

@@ -0,0 +1 @@
+export { default, type CountdownProps } from "./Countdown";

package/dist/components/countdown/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Countdown_js_02e08ce9__ from "./Countdown.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Countdown_js_02e08ce9__["default"];
+export { __webpack_exports__default as default };

package/dist/components/diff/Diff.d.ts

@@ -0,0 +1,8 @@
+import "./diff.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type DiffProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+    secondItem: JSX.Element;
+};
+declare const Diff: (props: DiffProps) => JSX.Element;
+export default Diff;

package/dist/components/diff/Diff.js

@@ -0,0 +1,29 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./diff.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=diff-item-1></div><div class=diff-item-2></div><div class=diff-resizer>");
+const Diff = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children",
+        "secondItem",
+        "className"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const resolvedSecondItem = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.secondItem);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("diff aspect-[16/9]", local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, resolvedChildren);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, resolvedSecondItem);
+        return _el$;
+    })();
+};
+const diff_Diff = Diff;
+export { diff_Diff as default };

package/dist/components/diff/diff.css

@@ -0,0 +1,162 @@
+@layer components {
+  .diff {
+      position: relative;
+      display: grid;
+      width: 100%;
+      overflow: hidden;
+      webkit-user-select: none;
+      user-select: none;
+      grid-template-rows: 1fr 1.8rem 1fr;
+      direction: ltr;
+      container-type: inline-size;
+      grid-template-columns: auto 1fr;
+    }
+
+  .diff:focus-visible,
+    .diff:has(.diff-item-1:focus-visible) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 1px;
+      outline-color: var(--color-base-content);
+    }
+
+  .diff:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 1px;
+      outline-color: var(--color-base-content);
+    }
+
+  .diff:focus-visible .diff-resizer {
+      min-width: 95cqi;
+      max-width: 95cqi;
+    }
+
+  .diff:has(.diff-item-1:focus-visible) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 1px;
+    }
+
+  .diff:has(.diff-item-1:focus-visible) .diff-resizer {
+      min-width: 5cqi;
+      max-width: 5cqi;
+    }
+
+  @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) {
+    .diff:focus .diff-resizer {
+      min-width: 5cqi;
+      max-width: 5cqi;
+    }
+    .diff:has(.diff-item-1:focus) .diff-resizer {
+      min-width: 95cqi;
+      max-width: 95cqi;
+    }
+    }
+
+  .diff-item-2 {
+      position: relative;
+      grid-column-start: 1;
+      grid-row: span 3 / span 3;
+      grid-row-start: 1;
+    }
+
+  .diff-item-2:after {
+      pointer-events: none;
+      position: absolute;
+      top: calc(1/2 * 100%);
+      right: 1px;
+      bottom: calc(0.25rem * 0);
+      z-index: 2;
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-base-100);
+      width: 1.2rem;
+      height: 1.8rem;
+      border: 2px solid var(--color-base-100);
+      border: 0.5px solid #0000001f;
+      content: "";
+      outline: 1px solid var(--color-base-content);
+      outline-offset: -3px;
+      translate: 50% -50%;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .diff-item-2:after {
+      background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent);
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .diff-item-2:after {
+      outline: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
+    }
+    }
+
+  .diff-item-2 > * {
+      pointer-events: none;
+      position: absolute;
+      top: calc(0.25rem * 0);
+      bottom: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      height: 100%;
+      width: 100cqi;
+      max-width: none;
+      object-fit: cover;
+      object-position: center;
+    }
+
+  @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) {
+    .diff-item-2:after {
+      --tw-content: none;
+      content: var(--tw-content);
+    }
+    }
+
+  .diff-item-1 {
+      position: relative;
+      z-index: 1;
+      grid-column-start: 1;
+      grid-row: span 3 / span 3;
+      grid-row-start: 1;
+      overflow: hidden;
+      border-right: 2px solid var(--color-base-100);
+    }
+
+  .diff-item-1:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  .diff-item-1 > * {
+      pointer-events: none;
+      position: absolute;
+      top: calc(0.25rem * 0);
+      bottom: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      height: 100%;
+      width: 100cqi;
+      max-width: none;
+      object-fit: cover;
+      object-position: center;
+    }
+
+  .diff-resizer {
+      position: relative;
+      isolation: isolate;
+      z-index: 2;
+      grid-column-start: 1;
+      grid-row-start: 2;
+      height: calc(0.25rem * 3);
+      width: 50cqi;
+      max-width: calc(100cqi - 1rem);
+      min-width: 1rem;
+      resize: horizontal;
+      overflow: hidden;
+      opacity: 0%;
+      transform: scaleY(5) translate(0.32rem, 50%);
+      cursor: ew-resize;
+      transform-origin: 100% 100%;
+      clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem));
+      transition: min-width 0.3s ease-out, max-width 0.3s ease-out;
+    }
+}

package/dist/components/diff/index.d.ts

@@ -0,0 +1 @@
+export { default, type DiffProps } from "./Diff";

package/dist/components/diff/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Diff_js_9a2e042c__ from "./Diff.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Diff_js_9a2e042c__["default"];
+export { __webpack_exports__default as default };

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,21 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+type ElementType = keyof JSX.IntrinsicElements;
+type ColorType = "default" | "neutral" | "primary" | "secondary" | "accent" | "success" | "warning" | "info" | "error";
+type PositionType = "center" | "start" | "end";
+type DividerBaseProps = {
+    text?: string;
+    horizontal?: boolean;
+    color?: ColorType;
+    position?: PositionType;
+    as?: ElementType;
+    children?: JSX.Element;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
+export type DividerProps<E extends ElementType = "div"> = Omit<PropsOf<E>, keyof DividerBaseProps> & DividerBaseProps & IComponentBaseProps;
+declare const Divider: <E extends ElementType = "div">(props: DividerProps<E>) => JSX.Element;
+export default Divider;