@pathscale/ui 0.0.1 → 0.0.2

package/dist/chunk/6SBH3KSM.jsx

@@ -0,0 +1,96 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/select/Select.tsx
+import {
+  splitProps,
+  Show,
+  createMemo,
+  untrack
+} from "solid-js";
+
+// src/components/select/Select.styles.ts
+var selectVariants = cva(
+  [
+    "relative inline-flex items-center appearance-none",
+    "border outline-none",
+    "transition bg-white text-black",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm px-2 py-1",
+        md: "text-base px-3 py-2",
+        lg: "text-lg px-4 py-2"
+      },
+      color: {
+        primary: "border-gray-300 focus:border-primary",
+        info: "border-blue-300 focus:border-blue-500",
+        success: "border-green-300 focus:border-green-500",
+        warning: "border-yellow-300 focus:border-yellow-500",
+        danger: "border-red-300 focus:border-red-500"
+      },
+      loading: {
+        true: "cursor-wait opacity-75",
+        false: ""
+      },
+      expanded: {
+        true: "w-full",
+        false: "w-fit"
+      },
+      rounded: {
+        true: "rounded",
+        false: "rounded-none"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      loading: false,
+      expanded: false,
+      rounded: false
+    }
+  }
+);
+
+// src/components/select/Select.tsx
+var Select = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(
+    props,
+    ["placeholder", "value", "nativeSize", "onChange", "onBlur", "onFocus"],
+    ["class", ...selectVariants.variantKeys]
+  );
+  const empty = createMemo(
+    () => untrack(() => localProps.value === null || localProps.value === void 0)
+  );
+  const selectClasses = createMemo(
+    () => classes(selectVariants(variantProps), variantProps.class)
+  );
+  return <select
+    class={selectClasses()}
+    size={localProps.nativeSize}
+    value={localProps.value}
+    onChange={localProps.onChange}
+    onFocus={localProps.onFocus}
+    onBlur={localProps.onBlur}
+    {...otherProps}
+  >
+      <Show when={localProps.placeholder && empty()}>
+        <option value="" disabled hidden>
+          {localProps.placeholder}
+        </option>
+      </Show>
+      {props.children}
+    </select>;
+};
+var Select_default = Select;
+
+// src/components/select/index.ts
+var select_default = Select_default;
+
+export {
+  select_default
+};

package/dist/chunk/CJZGTNJZ.js

@@ -0,0 +1,115 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { delegateEvents, template, spread, mergeProps, insert, createComponent, effect, setAttribute, className } from 'solid-js/web';
+import { splitProps, createMemo, untrack, Show } from 'solid-js';
+
+// src/components/tag/Tag.styles.ts
+var tagVariants = cva(
+  [
+    "inline-flex items-center gap-2 px-3 py-1 text-sm rounded",
+    "transition select-none"
+  ],
+  {
+    variants: {
+      size: {
+        normal: "text-xs px-2 py-0.5",
+        medium: "text-sm px-3 py-1",
+        large: "text-base px-4 py-2"
+      },
+      type: {
+        primary: "bg-blue-500 text-white",
+        info: "bg-sky-500 text-white",
+        success: "bg-green-500 text-white",
+        warning: "bg-yellow-500 text-black",
+        danger: "bg-red-500 text-white",
+        dark: "bg-zinc-800 text-white",
+        light: "bg-gray-100 text-black"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: ""
+      },
+      closable: {
+        true: "pr-1",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "normal"
+    }
+  }
+);
+
+// src/components/tag/Tag.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button class="ml-2 text-xs text-white hover:opacity-80">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div role=group><span role=status><span class=truncate>`);
+var Tag = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(props, ["closable", "attached", "onClose", "ariaCloseLabel", "closeIcon", "children", "type"], ["class", ...tagVariants.variantKeys]);
+  const isAttachedClosable = createMemo(() => untrack(() => localProps.attached && localProps.closable));
+  const isClosable = createMemo(() => untrack(() => localProps.closable && !localProps.attached));
+  const tagClasses = createMemo(() => classes(tagVariants({
+    ...variantProps,
+    closable: localProps.closable
+  }), variantProps.class));
+  const attachedButtonClasses = createMemo(() => tagVariants({
+    ...variantProps,
+    class: "ml-1 text-xs hover:opacity-80"
+  }));
+  const handleClose = (e) => {
+    untrack(() => {
+      if (typeof localProps.onClose === "function") {
+        localProps.onClose(e);
+      }
+    });
+  };
+  return (() => {
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return tagClasses();
+      }
+    }, otherProps), false, true);
+    insert(_el$3, () => localProps.children);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return isClosable();
+      },
+      get children() {
+        var _el$4 = _tmpl$();
+        _el$4.$$click = handleClose;
+        insert(_el$4, () => localProps.closeIcon ?? "\xD7");
+        effect(() => setAttribute(_el$4, "aria-label", localProps.ariaCloseLabel ?? "Remove tag"));
+        return _el$4;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isAttachedClosable();
+      },
+      get children() {
+        var _el$5 = _tmpl$2();
+        _el$5.$$click = handleClose;
+        insert(_el$5, () => localProps.closeIcon ?? "\xD7");
+        effect((_p$) => {
+          var _v$ = localProps.ariaCloseLabel ?? "Remove tag", _v$2 = attachedButtonClasses();
+          _v$ !== _p$.e && setAttribute(_el$5, "aria-label", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$5;
+      }
+    }), null);
+    effect(() => className(_el$, isAttachedClosable() ? "tags has-addons" : void 0));
+    return _el$;
+  })();
+};
+var Tag_default = Tag;
+delegateEvents(["click"]);
+
+// src/components/tag/index.ts
+var tag_default = Tag_default;
+
+export { tag_default };

package/dist/chunk/DBQ7IOPU.js

@@ -0,0 +1,189 @@
+import { cva } from './HKS7ET6T.js';
+import { delegateEvents, template, spread, mergeProps, insert, createComponent, memo, effect, className } from 'solid-js/web';
+import { splitProps, createMemo, Show, For } from 'solid-js';
+
+// src/components/pagination/Pagination.styles.ts
+var paginationItemVariants = cva(
+  [
+    "inline-flex items-center justify-center font-medium transition-colors",
+    "select-none border border-transparent",
+    // border shown only when needed
+    "disabled:opacity-50 disabled:pointer-events-none"
+  ],
+  {
+    variants: {
+      active: {
+        true: "bg-blue-500 text-white hover:bg-blue-600",
+        false: "bg-transparent text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "rounded"
+      },
+      simple: {
+        true: "border-none bg-transparent hover:bg-transparent text-gray-700 dark:text-gray-300",
+        false: ""
+      },
+      size: {
+        sm: "text-xs px-2 py-1",
+        md: "text-sm px-3 py-1.5",
+        lg: "text-base px-4 py-2"
+      },
+      disabled: {
+        true: "opacity-50 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      active: false,
+      rounded: false,
+      simple: false,
+      size: "md",
+      disabled: false
+    }
+  }
+);
+var paginationInfoVariants = cva(
+  "inline-block font-medium transition-colors",
+  {
+    variants: {
+      simple: {
+        true: "text-sm text-gray-600 dark:text-gray-300 px-2",
+        false: "text-sm text-gray-700 dark:text-gray-200 px-2"
+      }
+    },
+    defaultVariants: {
+      simple: false
+    }
+  }
+);
+var paginationContainerVariants = cva(
+  "flex items-center gap-1 flex-wrap",
+  {
+    variants: {
+      align: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end"
+      },
+      wrap: {
+        true: "flex-wrap",
+        false: "flex-nowrap"
+      }
+    },
+    defaultVariants: {
+      align: "start",
+      wrap: true
+    }
+  }
+);
+
+// src/components/pagination/Pagination.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<nav><button>&laquo;</button><button>&raquo;`);
+var _tmpl$3 = /* @__PURE__ */ template(`<button>`);
+var Pagination = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["total", "perPage", "current", "onChange", "rangeBefore", "rangeAfter", "simple", "children"], ["rounded", "size", "disabled", "active", "simple"]);
+  const perPage = () => local.perPage ?? 20;
+  const pageCount = createMemo(() => Math.ceil(local.total / perPage()));
+  const hasPrev = createMemo(() => local.current > 1);
+  const hasNext = createMemo(() => local.current < pageCount());
+  const pagesInRange = createMemo(() => {
+    const before = local.rangeBefore ?? 1;
+    const after = local.rangeAfter ?? 1;
+    const start = Math.max(1, local.current - before);
+    const end = Math.min(local.current + after, pageCount());
+    return Array.from({
+      length: end - start + 1
+    }, (_, i) => start + i);
+  });
+  const changePage = (page) => {
+    if (page >= 1 && page <= pageCount() && page !== local.current) {
+      local.onChange(page);
+    }
+  };
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return paginationContainerVariants({
+          align: "start",
+          wrap: true
+        });
+      }
+    }, otherProps), false, true);
+    _el$2.$$click = () => changePage(local.current - 1);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return pageCount() > 1;
+      },
+      get children() {
+        return [createComponent(Show, {
+          get when() {
+            return local.simple;
+          },
+          get children() {
+            var _el$3 = _tmpl$();
+            insert(_el$3, (() => {
+              var _c$ = memo(() => perPage() === 1);
+              return () => _c$() ? `${(local.current - 1) * perPage() + 1} / ${local.total}` : `${(local.current - 1) * perPage() + 1}-${Math.min(local.current * perPage(), local.total)} / ${local.total}`;
+            })());
+            effect(() => className(_el$3, paginationInfoVariants({
+              simple: true
+            })));
+            return _el$3;
+          }
+        }), createComponent(Show, {
+          get when() {
+            return !local.simple;
+          },
+          get children() {
+            return createComponent(For, {
+              get each() {
+                return pagesInRange();
+              },
+              children: (page) => (() => {
+                var _el$5 = _tmpl$3();
+                _el$5.$$click = () => changePage(page);
+                insert(_el$5, page);
+                effect(() => className(_el$5, paginationItemVariants({
+                  ...variantProps,
+                  active: page === local.current
+                })));
+                return _el$5;
+              })()
+            });
+          }
+        })];
+      }
+    }), _el$4);
+    _el$4.$$click = () => changePage(local.current + 1);
+    effect((_p$) => {
+      var _v$ = paginationItemVariants({
+        ...variantProps,
+        disabled: !hasPrev()
+      }), _v$2 = !hasPrev(), _v$3 = paginationItemVariants({
+        ...variantProps,
+        disabled: !hasNext()
+      }), _v$4 = !hasNext();
+      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+      _v$4 !== _p$.o && (_el$4.disabled = _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$;
+  })();
+};
+var Pagination_default = Pagination;
+delegateEvents(["click"]);
+
+// src/components/pagination/index.ts
+var pagination_default = Pagination_default;
+
+export { pagination_default };

package/dist/chunk/DNTGSCVF.jsx

@@ -0,0 +1,100 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/tooltip/Tooltip.tsx
+import {
+  splitProps,
+  Show
+} from "solid-js";
+
+// src/components/tooltip/Tooltip.styles.ts
+var tooltipVariants = cva(
+  [
+    "absolute z-10 px-3 py-1 text-white text-sm",
+    "opacity-0 group-hover:opacity-100",
+    "pointer-events-none transition-opacity duration-200",
+    "max-w-xs break-words",
+    "after:content-[''] after:absolute after:w-2 after:h-2 after:rotate-45 after:bg-inherit"
+  ].join(" "),
+  {
+    variants: {
+      type: {
+        info: "bg-blue-500",
+        success: "bg-green-500",
+        warning: "bg-yellow-500",
+        danger: "bg-red-500",
+        primary: "bg-indigo-500",
+        gray: "bg-gray-700"
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      rounded: {
+        true: "rounded",
+        false: "rounded-none"
+      },
+      dashed: {
+        true: "border border-white border-dashed",
+        false: ""
+      },
+      multilined: {
+        true: "whitespace-pre-wrap",
+        false: "whitespace-nowrap"
+      },
+      animated: {
+        true: "transition-opacity duration-300 ease-in-out",
+        false: ""
+      },
+      position: {
+        top: "bottom-full left-1/2 -translate-x-1/2 mb-1 after:top-full after:left-1/2 after:-translate-x-1/2 after:-mt-1",
+        bottom: "top-full left-1/2 -translate-x-1/2 mt-1 after:bottom-full after:left-1/2 after:-translate-x-1/2 after:-mb-1",
+        left: "right-full top-1/2 -translate-y-1/2 mr-1 after:left-full after:top-1/2 after:-translate-y-1/2 after:-ml-1",
+        right: "left-full top-1/2 -translate-y-1/2 ml-1 after:right-full after:top-1/2 after:-translate-y-1/2 after:-mr-1"
+      }
+    },
+    defaultVariants: {
+      type: "primary",
+      size: "md",
+      rounded: true,
+      dashed: false,
+      multilined: false,
+      animated: true,
+      position: "top"
+    }
+  }
+);
+
+// src/components/tooltip/Tooltip.tsx
+var Tooltip = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    ["label", "delay", "always", "children"],
+    ["type", "size", "position", "rounded", "dashed", "multilined", "animated"]
+  );
+  return <span class="relative inline-block group" {...otherProps}>
+      {local.children}
+      <Show when={local.label}>
+        <span
+    class={tooltipVariants(variantProps)}
+    style={{
+      "transition-delay": `${local.delay ?? 0}ms`,
+      opacity: local.always ? 1 : void 0,
+      "pointer-events": "none"
+    }}
+  >
+          {local.label}
+        </span>
+      </Show>
+    </span>;
+};
+var Tooltip_default = Tooltip;
+
+// src/components/tooltip/index.ts
+var tooltip_default = Tooltip_default;
+
+export {
+  tooltip_default
+};

package/dist/chunk/ELRAUORW.jsx

@@ -0,0 +1,179 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/pagination/Pagination.tsx
+import {
+  splitProps,
+  createMemo,
+  Show,
+  For
+} from "solid-js";
+
+// src/components/pagination/Pagination.styles.ts
+var paginationItemVariants = cva(
+  [
+    "inline-flex items-center justify-center font-medium transition-colors",
+    "select-none border border-transparent",
+    // border shown only when needed
+    "disabled:opacity-50 disabled:pointer-events-none"
+  ],
+  {
+    variants: {
+      active: {
+        true: "bg-blue-500 text-white hover:bg-blue-600",
+        false: "bg-transparent text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "rounded"
+      },
+      simple: {
+        true: "border-none bg-transparent hover:bg-transparent text-gray-700 dark:text-gray-300",
+        false: ""
+      },
+      size: {
+        sm: "text-xs px-2 py-1",
+        md: "text-sm px-3 py-1.5",
+        lg: "text-base px-4 py-2"
+      },
+      disabled: {
+        true: "opacity-50 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      active: false,
+      rounded: false,
+      simple: false,
+      size: "md",
+      disabled: false
+    }
+  }
+);
+var paginationInfoVariants = cva(
+  "inline-block font-medium transition-colors",
+  {
+    variants: {
+      simple: {
+        true: "text-sm text-gray-600 dark:text-gray-300 px-2",
+        false: "text-sm text-gray-700 dark:text-gray-200 px-2"
+      }
+    },
+    defaultVariants: {
+      simple: false
+    }
+  }
+);
+var paginationContainerVariants = cva(
+  "flex items-center gap-1 flex-wrap",
+  {
+    variants: {
+      align: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end"
+      },
+      wrap: {
+        true: "flex-wrap",
+        false: "flex-nowrap"
+      }
+    },
+    defaultVariants: {
+      align: "start",
+      wrap: true
+    }
+  }
+);
+
+// src/components/pagination/Pagination.tsx
+var Pagination = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    [
+      "total",
+      "perPage",
+      "current",
+      "onChange",
+      "rangeBefore",
+      "rangeAfter",
+      "simple",
+      "children"
+    ],
+    ["rounded", "size", "disabled", "active", "simple"]
+  );
+  const perPage = () => local.perPage ?? 20;
+  const pageCount = createMemo(() => Math.ceil(local.total / perPage()));
+  const hasPrev = createMemo(() => local.current > 1);
+  const hasNext = createMemo(() => local.current < pageCount());
+  const pagesInRange = createMemo(() => {
+    const before = local.rangeBefore ?? 1;
+    const after = local.rangeAfter ?? 1;
+    const start = Math.max(1, local.current - before);
+    const end = Math.min(local.current + after, pageCount());
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  });
+  const changePage = (page) => {
+    if (page >= 1 && page <= pageCount() && page !== local.current) {
+      local.onChange(page);
+    }
+  };
+  return <nav
+    class={paginationContainerVariants({ align: "start", wrap: true })}
+    {...otherProps}
+  >
+      <button
+    class={paginationItemVariants({
+      ...variantProps,
+      disabled: !hasPrev()
+    })}
+    onClick={() => changePage(local.current - 1)}
+    disabled={!hasPrev()}
+  >
+        &laquo;
+      </button>
+
+      <Show when={pageCount() > 1}>
+        <Show when={local.simple}>
+          <span class={paginationInfoVariants({ simple: true })}>
+            {perPage() === 1 ? `${(local.current - 1) * perPage() + 1} / ${local.total}` : `${(local.current - 1) * perPage() + 1}-${Math.min(
+    local.current * perPage(),
+    local.total
+  )} / ${local.total}`}
+          </span>
+        </Show>
+
+        <Show when={!local.simple}>
+          <For each={pagesInRange()}>
+            {(page) => <button
+    class={paginationItemVariants({
+      ...variantProps,
+      active: page === local.current
+    })}
+    onClick={() => changePage(page)}
+  >
+                {page}
+              </button>}
+          </For>
+        </Show>
+      </Show>
+      <button
+    class={paginationItemVariants({
+      ...variantProps,
+      disabled: !hasNext()
+    })}
+    onClick={() => changePage(local.current + 1)}
+    disabled={!hasNext()}
+  >
+        &raquo;
+      </button>
+    </nav>;
+};
+var Pagination_default = Pagination;
+
+// src/components/pagination/index.ts
+var pagination_default = Pagination_default;
+
+export {
+  pagination_default
+};