@pathscale/ui 0.0.1

package/dist/components/pagination/index.js

@@ -0,0 +1,189 @@
+import { cva } from '../../chunk/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 as default };

package/dist/components/pagination/index.jsx

@@ -0,0 +1,178 @@
+import {
+  cva
+} from "../../chunk/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 as default
+};

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

@@ -0,0 +1,35 @@
+import * as solid_js from 'solid-js';
+import { ValidComponent, ComponentProps, JSX, Ref } from 'solid-js';
+
+type OverrideProps<T, P> = Omit<T, keyof P> & P;
+
+type PolymorphicAttributes<T extends ValidComponent> = {
+    /**
+     * Component to render the polymorphic component as.
+     * @defaultValue `div`
+     */
+    as?: T | keyof JSX.HTMLElementTags;
+};
+type PolymorphicProps<T extends ValidComponent, P extends object> = OverrideProps<ComponentProps<T>, P & PolymorphicAttributes<T>>;
+/**
+ * Renders as a div by default and can be overridden with the `as` property.
+ */
+declare const Polymorphic: <ElementProps>(props: PolymorphicAttributes<ValidComponent> & ElementProps) => JSX.Element;
+
+type ElementOf<T> = T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : unknown;
+
+type PolymorphicButtonSharedProps<T extends ValidComponent = "button"> = {
+    ref: Ref<ElementOf<T>>;
+    type: string | undefined;
+};
+type PolymorphicButtonElementProps = PolymorphicButtonSharedProps & {
+    role: "button" | undefined;
+};
+type PolymorphicButtonProps<T extends ValidComponent = "button"> = Partial<PolymorphicButtonSharedProps<T>>;
+/**
+ * An accessible button that sets `type` and `role` properly based on
+ * if it's a native button.
+ */
+declare const PolymorphicButton: <T extends ValidComponent = "button">(props: PolymorphicProps<T, PolymorphicButtonProps<T>>) => solid_js.JSX.Element;
+
+export { Polymorphic, type PolymorphicAttributes, PolymorphicButton, type PolymorphicButtonElementProps, type PolymorphicButtonProps, type PolymorphicButtonSharedProps, type PolymorphicProps };

package/dist/components/polymorphic/index.js

@@ -0,0 +1 @@
+export { Polymorphic_default as Polymorphic, PolymorphicButton_default as PolymorphicButton } from '../../chunk/G6RG4LR7.js';

package/dist/components/polymorphic/index.jsx

@@ -0,0 +1,8 @@
+import {
+  PolymorphicButton_default,
+  Polymorphic_default
+} from "../../chunk/KACNXPUM.jsx";
+export {
+  Polymorphic_default as Polymorphic,
+  PolymorphicButton_default as PolymorphicButton
+};

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

@@ -0,0 +1,44 @@
+import { ComponentProps, JSX, Component } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from '../../classes-B_S9K-9I.js';
+
+declare const selectVariants: {
+    (props?: (ConfigVariants<{
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        color: {
+            primary: string;
+            info: string;
+            success: string;
+            warning: string;
+            danger: string;
+        };
+        loading: {
+            true: string;
+            false: string;
+        };
+        expanded: {
+            true: string;
+            false: string;
+        };
+        rounded: {
+            true: string;
+            false: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "color" | "loading" | "expanded" | "rounded")[];
+};
+
+type SelectProps = VariantProps<typeof selectVariants> & ClassProps & ComponentProps<"select"> & {
+    placeholder?: string;
+    nativeSize?: string | number;
+    value?: string | number | null;
+    onChange?: JSX.EventHandlerUnion<HTMLSelectElement, Event>;
+    onFocus?: JSX.EventHandlerUnion<HTMLSelectElement, FocusEvent>;
+    onBlur?: JSX.EventHandlerUnion<HTMLSelectElement, FocusEvent>;
+};
+declare const Select: Component<SelectProps>;
+
+export { type SelectProps, Select as default };

package/dist/components/select/index.js

@@ -0,0 +1,98 @@
+import { cva, classes } from '../../chunk/HKS7ET6T.js';
+import { template, spread, mergeProps, insert, createComponent, memo } from 'solid-js/web';
+import { splitProps, createMemo, untrack, Show } 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 _tmpl$ = /* @__PURE__ */ template(`<option value disabled hidden>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<select>`);
+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 (() => {
+    var _el$ = _tmpl$2();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return selectClasses();
+      },
+      get size() {
+        return localProps.nativeSize;
+      },
+      get value() {
+        return localProps.value;
+      },
+      get onChange() {
+        return localProps.onChange;
+      },
+      get onFocus() {
+        return localProps.onFocus;
+      },
+      get onBlur() {
+        return localProps.onBlur;
+      }
+    }, otherProps), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!localProps.placeholder)() && empty();
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        insert(_el$2, () => localProps.placeholder);
+        return _el$2;
+      }
+    }), null);
+    insert(_el$, () => props.children, null);
+    return _el$;
+  })();
+};
+var Select_default = Select;
+
+// src/components/select/index.ts
+var select_default = Select_default;
+
+export { select_default as default };

package/dist/components/select/index.jsx

@@ -0,0 +1,95 @@
+import {
+  classes,
+  cva
+} from "../../chunk/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 as default
+};