@pathscale/ui 0.0.1 → 0.0.3

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/DSTUGZW6.jsx

@@ -0,0 +1,81 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/timeline/Timeline.tsx
+import { For } from "solid-js";
+
+// src/components/timeline/Timeline.styles.ts
+var timelineWrapperClass = "relative";
+var timelineItemClass = cva(
+  "relative flex items-center gap-3 min-h-[48px]",
+  {
+    variants: {
+      state: {
+        default: "text-gray-500",
+        active: "text-green-500 font-medium",
+        error: "text-red-500 font-medium"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var timelineMarkerWrapperClass = "relative w-6 min-h-[48px] flex items-center justify-center";
+var timelineLineClass = "absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-px bg-gray-300 dark:bg-gray-600";
+var timelineMarkerClass = "absolute w-3 h-3 rounded-full border-2 border-white bg-gray-400 z-10";
+var timelineNumberClass = cva(
+  "absolute -left-4 top-1/2 -translate-y-1/2 text-xs font-semibold",
+  {
+    variants: {
+      state: {
+        default: "text-gray-500",
+        active: "text-green-500",
+        error: "text-red-500"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var timelineContentClass = "pt-0.5 text-sm";
+
+// src/components/timeline/Timeline.tsx
+var Timeline = (props) => {
+  return <ol class={timelineWrapperClass}>
+      <For each={props.stages}>
+        {(stage, index) => {
+    const state = stage.error === true ? "error" : stage.active === true ? "active" : "default";
+    return <li class={timelineItemClass({ state })}>
+              <div class={timelineMarkerWrapperClass}>
+                <div class={timelineLineClass} />
+                <span
+      class={classes(
+        timelineMarkerClass,
+        state === "active" && "bg-green-500",
+        state === "error" && "bg-red-500"
+      )}
+    />
+                <span class={timelineNumberClass({ state })}>
+                  {index() + 1}.
+                </span>
+              </div>
+              <div class={timelineContentClass}>
+                {props.renderStage ? props.renderStage(stage, index()) : stage.title}
+              </div>
+            </li>;
+  }}
+      </For>
+    </ol>;
+};
+var Timeline_default = Timeline;
+
+// src/components/timeline/index.ts
+var timeline_default = Timeline_default;
+
+export {
+  timeline_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
+};