@pathscale/ui 0.0.162 → 0.0.163

package/dist/components/button/Button.js

@@ -0,0 +1,205 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./btn.css";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+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__loading_Loading_js_1fa096bd__ from "../loading/Loading.js";
+const VoidElementList = [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "keygen",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+];
+const Button = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "shape",
+        "size",
+        "variant",
+        "color",
+        "glass",
+        "startIcon",
+        "endIcon",
+        "wide",
+        "fullWidth",
+        "responsive",
+        "animation",
+        "loading",
+        "active",
+        "disabled",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "as",
+        "aria-label",
+        "aria-describedby",
+        "aria-pressed",
+        "aria-expanded",
+        "aria-controls",
+        "aria-haspopup",
+        "aria-role"
+    ]);
+    const normalizeAriaValue = (value)=>"boolean" == typeof value ? String(value) : value;
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("btn", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)((local.startIcon && !local.loading || local.endIcon) && "gap-2", {
+            "btn-xl": "xl" === local.size,
+            "btn-lg": "lg" === local.size,
+            "btn-md": "md" === local.size,
+            "btn-sm": "sm" === local.size,
+            "btn-xs": "xs" === local.size,
+            "btn-circle": "circle" === local.shape,
+            "btn-square": "square" === local.shape,
+            "btn-soft": "soft" === local.variant,
+            "btn-dash": "dash" === local.variant,
+            "btn-outline": "outline" === local.variant,
+            "btn-link": "link" === local.variant,
+            "btn-neutral": "neutral" === local.color,
+            "btn-primary": "primary" === local.color,
+            "btn-secondary": "secondary" === local.color,
+            "btn-accent": "accent" === local.color,
+            "btn-info": "info" === local.color,
+            "btn-success": "success" === local.color,
+            "btn-warning": "warning" === local.color,
+            "btn-error": "error" === local.color,
+            "btn-ghost": "ghost" === local.color,
+            glass: local.glass,
+            "btn-wide": local.wide,
+            "btn-block": local.fullWidth,
+            "btn-responsive": local.responsive,
+            "no-animation": !local.animation,
+            "btn-active": local.active,
+            "btn-disabled": local.disabled,
+            "cursor-not-allowed": local.disabled
+        }), local.class, local.className);
+    const Tag = local.as || "button";
+    if (VoidElementList.includes(Tag)) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        component: Tag
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get disabled () {
+            return local.disabled;
+        },
+        get ["aria-label"] () {
+            return local["aria-label"];
+        },
+        get ["aria-describedby"] () {
+            return local["aria-describedby"];
+        },
+        get ["aria-pressed"] () {
+            return normalizeAriaValue(local["aria-pressed"]);
+        },
+        get ["aria-expanded"] () {
+            return normalizeAriaValue(local["aria-expanded"]);
+        },
+        get ["aria-controls"] () {
+            return local["aria-controls"];
+        },
+        get ["aria-haspopup"] () {
+            return normalizeAriaValue(local["aria-haspopup"]);
+        },
+        get ["aria-disabled"] () {
+            return local.disabled;
+        },
+        get role () {
+            return local["aria-role"];
+        }
+    }));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        component: Tag
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get disabled () {
+            return local.disabled;
+        },
+        get ["aria-label"] () {
+            return local["aria-label"];
+        },
+        get ["aria-describedby"] () {
+            return local["aria-describedby"];
+        },
+        get ["aria-pressed"] () {
+            return normalizeAriaValue(local["aria-pressed"]);
+        },
+        get ["aria-expanded"] () {
+            return normalizeAriaValue(local["aria-expanded"]);
+        },
+        get ["aria-controls"] () {
+            return local["aria-controls"];
+        },
+        get ["aria-haspopup"] () {
+            return normalizeAriaValue(local["aria-haspopup"]);
+        },
+        get ["aria-disabled"] () {
+            return local.disabled;
+        },
+        get role () {
+            return local["aria-role"];
+        },
+        get children () {
+            return [
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return local.loading;
+                    },
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__loading_Loading_js_1fa096bd__["default"], {
+                            get size () {
+                                return local.size;
+                            },
+                            get color () {
+                                return local.color;
+                            },
+                            variant: "spinner"
+                        });
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return local.startIcon && !local.loading;
+                    },
+                    get children () {
+                        return local.startIcon;
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>local.children),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return local.endIcon;
+                    },
+                    get children () {
+                        return local.endIcon;
+                    }
+                })
+            ];
+        }
+    }));
+};
+const button_Button = Button;
+export { button_Button as default };

package/dist/components/button/btn.css

@@ -0,0 +1,429 @@
+@layer components {
+  .btn {
+      display: inline-flex;
+      flex-shrink: 0;
+      cursor: pointer;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: center;
+      gap: calc(0.25rem * 1.5);
+      text-align: center;
+      vertical-align: middle;
+      outline-offset: 2px;
+      webkit-user-select: none;
+      user-select: none;
+      padding-inline: var(--btn-p);
+      color: var(--btn-fg);
+      --tw-prose-links: var(--btn-fg);
+      height: var(--size);
+      font-size: var(--fontsize, 0.875rem);
+      font-weight: 600;
+      outline-color: var(--btn-color, var(--color-base-content));
+      transition-property: color, background-color, border-color, box-shadow;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      transition-duration: 0.2s;
+      border-start-start-radius: var(--join-ss, var(--radius-field));
+      border-start-end-radius: var(--join-se, var(--radius-field));
+      border-end-start-radius: var(--join-es, var(--radius-field));
+      border-end-end-radius: var(--join-ee, var(--radius-field));
+      background-color: var(--btn-bg);
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--btn-noise);
+      border-width: var(--border);
+      border-style: solid;
+      border-color: var(--btn-border);
+      text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
+      touch-action: manipulation;
+      box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
+      --size: calc(var(--size-field, 0.25rem) * 10);
+      --btn-bg: var(--btn-color, var(--color-base-200));
+      --btn-fg: var(--color-base-content);
+      --btn-p: 1rem;
+      --btn-border: var(--btn-bg);
+      --btn-shadow: 0 3px 2px -2px var(--btn-bg),
+        0 4px 3px -2px var(--btn-bg);
+      --btn-noise: var(--fx-noise);
+    }
+
+  :where(.btn) {
+      width: unset;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn {
+      --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn {
+      --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
+        0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
+    }
+    }
+
+  @media (hover: hover) {
+    .btn:hover {
+      --btn-bg: var(--btn-color, var(--color-base-200));
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .btn:hover {
+      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
+    }
+    }
+    }
+
+  .btn:focus-visible,
+    .btn:has(:focus-visible) {
+      outline-width: 2px;
+      outline-style: solid;
+      isolation: isolate;
+    }
+
+  .btn:active:not(.btn-active) {
+      translate: 0 0.5px;
+      --btn-bg: var(--btn-color, var(--color-base-200));
+      --btn-border: var(--btn-color, var(--color-base-200));
+      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn:active:not(.btn-active) {
+      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn:active:not(.btn-active) {
+      --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
+    }
+    }
+
+  .btn:is(input[type="checkbox"], input[type="radio"]) {
+      appearance: none;
+    }
+
+  .btn:is(input[type="checkbox"], input[type="radio"])[aria-label]::after {
+      --tw-content: attr(aria-label);
+      content: var(--tw-content);
+    }
+
+  .btn:where(input:checked:not(.filter .btn)) {
+      --btn-color: var(--color-primary);
+      --btn-fg: var(--color-primary-content);
+      isolation: isolate;
+    }
+
+  .btn:disabled {
+      pointer-events: none;
+      --btn-border: #0000;
+      --btn-noise: none;
+      --btn-fg: var(--color-base-content);
+    }
+
+  .btn:disabled:not(.btn-link, .btn-ghost) {
+      background-color: var(--color-base-content);
+      box-shadow: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn:disabled:not(.btn-link, .btn-ghost) {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn:disabled {
+      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  .btn[disabled] {
+      pointer-events: none;
+      --btn-border: #0000;
+      --btn-noise: none;
+      --btn-fg: var(--color-base-content);
+    }
+
+  .btn[disabled]:not(.btn-link, .btn-ghost) {
+      background-color: var(--color-base-content);
+      box-shadow: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn[disabled]:not(.btn-link, .btn-ghost) {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn[disabled] {
+      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  .btn-disabled {
+      pointer-events: none;
+      --btn-border: #0000;
+      --btn-noise: none;
+      --btn-fg: var(--color-base-content);
+    }
+
+  .btn-disabled:not(.btn-link, .btn-ghost) {
+      background-color: var(--color-base-content);
+      box-shadow: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn-disabled:not(.btn-link, .btn-ghost) {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn-disabled {
+      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  .btn-active {
+      --btn-bg: var(--btn-color, var(--color-base-200));
+      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
+      isolation: isolate;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn-active {
+      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
+    }
+    }
+
+  .btn-circle {
+      border-radius: calc(infinity * 1px);
+      padding-inline: calc(0.25rem * 0);
+      width: var(--size);
+      height: var(--size);
+    }
+
+  .btn-square {
+      padding-inline: calc(0.25rem * 0);
+      width: var(--size);
+      height: var(--size);
+    }
+
+  .btn-wide {
+      width: 100%;
+      max-width: calc(0.25rem * 64);
+    }
+
+  .btn-block {
+      width: 100%;
+    }
+
+  .btn-dash {
+      border-style: dashed;
+    }
+
+  .btn-dash:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-fg: var(--btn-color);
+      --btn-border: var(--btn-color);
+      --btn-noise: none;
+    }
+
+  @media (hover: none) {
+    .btn-dash:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-fg: var(--btn-color);
+      --btn-border: var(--btn-color);
+      --btn-noise: none;
+    }
+    }
+
+  .btn-link {
+      text-decoration-line: underline;
+      outline-color: currentcolor;
+      --btn-border: #0000;
+      --btn-bg: #0000;
+      --btn-noise: none;
+      --btn-shadow: "";
+    }
+
+  .btn-link:not(.btn-disabled, .btn:disabled, .btn[disabled]) {
+      --btn-fg: var(--btn-color, var(--color-primary));
+    }
+
+  .btn-link:is(.btn-active, :hover, :active:focus, :focus-visible) {
+      --btn-border: #0000;
+      --btn-bg: #0000;
+    }
+
+  .btn-ghost:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn)) {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-border: #0000;
+      --btn-noise: none;
+    }
+
+  .btn-ghost:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn)):not(:disabled, [disabled], .btn-disabled) {
+      outline-color: currentcolor;
+      --btn-fg: var(--btn-color, currentColor);
+    }
+
+  @media (hover: none) {
+    .btn-ghost:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+      outline-color: currentcolor;
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-fg: var(--btn-color, currentColor);
+      --btn-border: #0000;
+      --btn-noise: none;
+    }
+    }
+
+  .btn-outline:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-fg: var(--btn-color);
+      --btn-border: var(--btn-color);
+      --btn-noise: none;
+    }
+
+  @media (hover: none) {
+    .btn-outline:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-fg: var(--btn-color);
+      --btn-border: var(--btn-color);
+      --btn-noise: none;
+    }
+    }
+
+  .btn-soft:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) {
+      --btn-shadow: "";
+      --btn-fg: var(--btn-color, var(--color-base-content));
+      --btn-bg: var(--btn-color, var(--color-base-content));
+      --btn-border: var(--btn-color, var(--color-base-content));
+      --btn-noise: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn-soft:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) {
+      --btn-bg: color-mix(
+          in oklab,
+          var(--btn-color, var(--color-base-content)) 8%,
+          var(--color-base-100)
+        );
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .btn-soft:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) {
+      --btn-border: color-mix(
+          in oklab,
+          var(--btn-color, var(--color-base-content)) 10%,
+          var(--color-base-100)
+        );
+    }
+    }
+
+  @media (hover: none) {
+    .btn-soft:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+      --btn-shadow: "";
+      --btn-fg: var(--btn-color, var(--color-base-content));
+      --btn-bg: var(--btn-color, var(--color-base-content));
+      --btn-border: var(--btn-color, var(--color-base-content));
+      --btn-noise: none;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .btn-soft:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+      --btn-bg: color-mix(
+            in oklab,
+            var(--btn-color, var(--color-base-content)) 8%,
+            var(--color-base-100)
+          );
+    }
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .btn-soft:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+      --btn-border: color-mix(
+            in oklab,
+            var(--btn-color, var(--color-base-content)) 10%,
+            var(--color-base-100)
+          );
+    }
+    }
+    }
+
+  .btn-lg {
+      --fontsize: 1.125rem;
+      --btn-p: 1.25rem;
+      --size: calc(var(--size-field, 0.25rem) * 12);
+    }
+
+  .btn-md {
+      --fontsize: 0.875rem;
+      --btn-p: 1rem;
+      --size: calc(var(--size-field, 0.25rem) * 10);
+    }
+
+  .btn-sm {
+      --fontsize: 0.75rem;
+      --btn-p: 0.75rem;
+      --size: calc(var(--size-field, 0.25rem) * 8);
+    }
+
+  .btn-xl {
+      --fontsize: 1.375rem;
+      --btn-p: 1.5rem;
+      --size: calc(var(--size-field, 0.25rem) * 14);
+    }
+
+  .btn-xs {
+      --fontsize: 0.6875rem;
+      --btn-p: 0.5rem;
+      --size: calc(var(--size-field, 0.25rem) * 6);
+    }
+
+  .btn-accent {
+      --btn-color: var(--color-accent);
+      --btn-fg: var(--color-accent-content);
+    }
+
+  .btn-error {
+      --btn-color: var(--color-error);
+      --btn-fg: var(--color-error-content);
+    }
+
+  .btn-info {
+      --btn-color: var(--color-info);
+      --btn-fg: var(--color-info-content);
+    }
+
+  .btn-neutral {
+      --btn-color: var(--color-neutral);
+      --btn-fg: var(--color-neutral-content);
+    }
+
+  .btn-primary {
+      --btn-color: var(--color-primary);
+      --btn-fg: var(--color-primary-content);
+    }
+
+  .btn-secondary {
+      --btn-color: var(--color-secondary);
+      --btn-fg: var(--color-secondary-content);
+    }
+
+  .btn-success {
+      --btn-color: var(--color-success);
+      --btn-fg: var(--color-success-content);
+    }
+
+  .btn-warning {
+      --btn-color: var(--color-warning);
+      --btn-fg: var(--color-warning-content);
+    }
+}

package/dist/components/button/index.js

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

package/dist/components/calendar/Calendar.d.ts

@@ -1,4 +1,5 @@
 import "cally";
+import "./input.css";
 import { type JSX } from "solid-js";
 import type { ComponentSize, IComponentBaseProps } from "../types";
 declare module "solid-js" {