@pathscale/ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 pathscale
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+# @pathscale/ui
+
+Highly opinionated SolidJS component library — batteries and kitchen sink
+included, but optimized and shiny.
+
+## Building
+
+To build this package, use the following command
+
+```sh
+bun run build
+```

package/dist/Avatar-CzIirpVq.d.ts

@@ -0,0 +1,33 @@
+import { Component, ComponentProps } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from './classes-B_S9K-9I.js';
+
+declare const avatarVariants: {
+    (props?: (ConfigVariants<{
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        shape: {
+            circle: string;
+            rounded: string;
+        };
+        variant: {
+            filled: string;
+            outlined: string;
+            ghost: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "shape" | "variant")[];
+};
+
+type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+type AvatarProps = AvatarVariantProps & ClassProps & ComponentProps<"img"> & {
+    src?: string;
+    dataSrc?: string;
+    alt?: string;
+    text?: string;
+};
+declare const Avatar: Component<AvatarProps>;
+
+export { Avatar as A, type AvatarProps as a, avatarVariants as b };

package/dist/Button-B50OLXuV.d.ts

@@ -0,0 +1,63 @@
+import * as solid_js from 'solid-js';
+import { ValidComponent } from 'solid-js';
+import { PolymorphicProps, PolymorphicButtonSharedProps, PolymorphicButtonElementProps } from './components/polymorphic/index.js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from './classes-B_S9K-9I.js';
+
+declare const buttonVariants: {
+    (props?: (ConfigVariants<{
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        color: {
+            inverse: string;
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            accent: string;
+            positive: string;
+            destructive: string;
+        };
+        align: {
+            start: string;
+            center: string;
+            end: string;
+        };
+        shape: {
+            circle: string;
+            rounded: string;
+        };
+        spacing: {
+            0: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        loading: {
+            true: string;
+            false: string;
+        };
+        stretched: {
+            true: string;
+            false: string;
+        };
+        variant: {
+            fill: string[];
+            gray: string[];
+            ghost: string[];
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "shape" | "variant" | "loading" | "align" | "color" | "spacing" | "stretched")[];
+};
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+type ButtonSharedProps<T extends ValidComponent = "button"> = PolymorphicButtonSharedProps<T> & ClassProps;
+type ButtonElementProps = PolymorphicButtonElementProps & ButtonSharedProps & {
+    "aria-busy": "true" | undefined;
+};
+type ButtonProps<T extends ValidComponent = "button"> = Partial<ButtonVariantProps> & Partial<ButtonSharedProps<T>>;
+declare const Button: <T extends ValidComponent = "button">(props: PolymorphicProps<T, ButtonProps<T>>) => solid_js.JSX.Element;
+
+export { Button as B, type ButtonElementProps as a, type ButtonProps as b, type ButtonSharedProps as c, type ButtonVariantProps as d };

package/dist/Input-BQbTzjIO.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps, JSX } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from './classes-B_S9K-9I.js';
+
+declare const inputVariants: {
+    (props?: (ConfigVariants<{
+        color: {
+            danger: string;
+            success: string;
+            warning: string;
+        };
+        rounded: {
+            true: string;
+            false: string;
+        };
+        expanded: {
+            true: string;
+            false: string;
+        };
+        loading: {
+            true: string;
+            false: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("rounded" | "loading" | "color" | "expanded")[];
+};
+
+type InputProps = Partial<VariantProps<typeof inputVariants> & ClassProps & ComponentProps<"input">> & {
+    leftIcon?: JSX.Element;
+    rightIcon?: JSX.Element;
+    passwordReveal?: boolean;
+};
+declare const Input: (props: InputProps) => JSX.Element;
+
+export { Input as I, type InputProps as a };

package/dist/Textarea-Cpdk7m6S.d.ts

@@ -0,0 +1,37 @@
+import { Component, ComponentProps } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from './classes-B_S9K-9I.js';
+
+declare const textareaVariants: {
+    (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;
+        };
+        resize: {
+            none: string;
+            both: string;
+            x: string;
+            y: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "loading" | "color" | "resize")[];
+};
+
+type TextareaProps = VariantProps<typeof textareaVariants> & ClassProps & ComponentProps<"textarea"> & {
+    hasCounter?: boolean;
+};
+declare const Textarea: Component<TextareaProps>;
+
+export { Textarea as T, type TextareaProps as a };

package/dist/chunk/2JGZSAW5.js

@@ -0,0 +1,107 @@
+import { cva } from './HKS7ET6T.js';
+import { template, insert, createComponent, spread, mergeProps as mergeProps$1, effect, className } from 'solid-js/web';
+import { mergeProps, splitProps, createSignal, createEffect, untrack, createMemo, Show } from 'solid-js';
+
+// src/components/Avatar/Avatar.styles.ts
+var avatarVariants = cva(
+  [
+    "flex items-center justify-center mx-1",
+    "font-medium outline-none select-none transition active:transition-none",
+    "not-disabled:cursor-pointer",
+    "disabled:cursor-not-allowed disabled:opacity-25",
+    "aria-busy:cursor-wait"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-sm",
+        md: "size-16 text-base",
+        lg: "size-24 text-lg"
+      },
+      shape: {
+        circle: "rounded-full overflow-hidden",
+        rounded: "rounded-lg overflow-hidden"
+      },
+      variant: {
+        filled: "bg-gray-200 text-gray-800",
+        outlined: "border-2 border-gray-300 text-gray-800",
+        ghost: "text-gray-800"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle",
+      variant: "filled"
+    }
+  }
+);
+
+// src/components/Avatar/utils.ts
+function parseCaption(alt) {
+  if (!alt) return "";
+  const parts = alt.split(" ");
+  if (parts.length >= 2 && parts[0] && parts[1]) {
+    return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`;
+  }
+  return "";
+}
+
+// src/components/Avatar/Avatar.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<img class="size-full object-cover">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<figure>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<figcaption>`);
+var Avatar = (rawProps) => {
+  const props = mergeProps({
+    alt: "User Avatar"
+  }, rawProps);
+  const [variantProps, otherProps] = splitProps(props, ["class", ...avatarVariants.variantKeys]);
+  const [source, setSource] = createSignal(props.src || props.dataSrc);
+  createEffect(() => {
+    untrack(() => {
+      if (import.meta.env.PROD && props.dataSrc) {
+        setSource(props.dataSrc);
+      }
+    });
+  });
+  const styles = createMemo(() => ({
+    background: untrack(() => source() ? "" : props.class ?? "bg-blue-500"),
+    text: untrack(() => source() ? "" : props.text ?? "text-white")
+  }));
+  const caption = createMemo(() => parseCaption(props.alt));
+  return (() => {
+    var _el$ = _tmpl$2();
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return source();
+      },
+      get fallback() {
+        return (() => {
+          var _el$3 = _tmpl$3();
+          insert(_el$3, caption);
+          effect(() => className(_el$3, styles().text));
+          return _el$3;
+        })();
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        spread(_el$2, mergeProps$1({
+          get src() {
+            return source();
+          },
+          get ["data-src"]() {
+            return props.dataSrc;
+          }
+        }, otherProps), false, false);
+        return _el$2;
+      }
+    }));
+    effect(() => className(_el$, avatarVariants(variantProps)));
+    return _el$;
+  })();
+};
+var Avatar_default = Avatar;
+
+// src/components/Avatar/index.ts
+var Avatar_default2 = Avatar_default;
+
+export { Avatar_default2 as Avatar_default };

package/dist/chunk/4RCWSX7S.jsx

@@ -0,0 +1,101 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/Avatar/Avatar.tsx
+import {
+  createSignal,
+  createMemo,
+  createEffect,
+  mergeProps,
+  splitProps,
+  Show,
+  untrack
+} from "solid-js";
+
+// src/components/Avatar/Avatar.styles.ts
+var avatarVariants = cva(
+  [
+    "flex items-center justify-center mx-1",
+    "font-medium outline-none select-none transition active:transition-none",
+    "not-disabled:cursor-pointer",
+    "disabled:cursor-not-allowed disabled:opacity-25",
+    "aria-busy:cursor-wait"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-sm",
+        md: "size-16 text-base",
+        lg: "size-24 text-lg"
+      },
+      shape: {
+        circle: "rounded-full overflow-hidden",
+        rounded: "rounded-lg overflow-hidden"
+      },
+      variant: {
+        filled: "bg-gray-200 text-gray-800",
+        outlined: "border-2 border-gray-300 text-gray-800",
+        ghost: "text-gray-800"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle",
+      variant: "filled"
+    }
+  }
+);
+
+// src/components/Avatar/utils.ts
+function parseCaption(alt) {
+  if (!alt) return "";
+  const parts = alt.split(" ");
+  if (parts.length >= 2 && parts[0] && parts[1]) {
+    return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`;
+  }
+  return "";
+}
+
+// src/components/Avatar/Avatar.tsx
+var Avatar = (rawProps) => {
+  const props = mergeProps({ alt: "User Avatar" }, rawProps);
+  const [variantProps, otherProps] = splitProps(props, [
+    "class",
+    ...avatarVariants.variantKeys
+  ]);
+  const [source, setSource] = createSignal(props.src || props.dataSrc);
+  createEffect(() => {
+    untrack(() => {
+      if (import.meta.env.PROD && props.dataSrc) {
+        setSource(props.dataSrc);
+      }
+    });
+  });
+  const styles = createMemo(() => ({
+    background: untrack(() => source() ? "" : props.class ?? "bg-blue-500"),
+    text: untrack(() => source() ? "" : props.text ?? "text-white")
+  }));
+  const caption = createMemo(() => parseCaption(props.alt));
+  return <figure class={avatarVariants(variantProps)}>
+      <Show
+    when={source()}
+    fallback={<figcaption class={styles().text}>{caption()}</figcaption>}
+  >
+        <img
+    src={source()}
+    data-src={props.dataSrc}
+    class="size-full object-cover"
+    {...otherProps}
+  />
+      </Show>
+    </figure>;
+};
+var Avatar_default = Avatar;
+
+// src/components/Avatar/index.ts
+var Avatar_default2 = Avatar_default;
+
+export {
+  Avatar_default2 as Avatar_default
+};

package/dist/chunk/EB7KXR65.js

@@ -0,0 +1,102 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, spread, mergeProps, insert, createComponent, effect, className } from 'solid-js/web';
+import { splitProps, createSignal, createMemo, Show } from 'solid-js';
+
+// src/components/textarea/Textarea.styles.ts
+var textareaVariants = cva(
+  [
+    "block w-full rounded-md border bg-white px-3 py-2 text-sm",
+    "text-gray-900 placeholder-gray-400",
+    "focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm py-1.5",
+        md: "text-base py-2",
+        lg: "text-lg py-3"
+      },
+      color: {
+        primary: "border-blue-500",
+        info: "border-cyan-500",
+        success: "border-green-500",
+        warning: "border-yellow-500",
+        danger: "border-red-500"
+      },
+      loading: {
+        true: "opacity-50 cursor-wait",
+        false: ""
+      },
+      resize: {
+        none: "resize-none",
+        both: "resize",
+        x: "resize-x",
+        y: "resize-y"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      loading: false,
+      resize: "y"
+    }
+  }
+);
+
+// src/components/textarea/Textarea.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<small> / `);
+var _tmpl$2 = /* @__PURE__ */ template(`<div class="relative w-full"><textarea>`);
+var Textarea = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(props, ["hasCounter", "value", "onInput", "onFocus", "onBlur", "maxLength"], ["class", ...textareaVariants.variantKeys]);
+  const [isFocused, setFocused] = createSignal(false);
+  const valueLength = createMemo(() => typeof localProps.value === "string" ? localProps.value.length : 0);
+  const showCounter = createMemo(() => localProps.maxLength && localProps.hasCounter);
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+    _el$2.addEventListener("blur", (e) => {
+      setFocused(false);
+      typeof localProps.onBlur === "function" && localProps.onBlur(e);
+    });
+    _el$2.addEventListener("focus", (e) => {
+      setFocused(true);
+      typeof localProps.onFocus === "function" && localProps.onFocus(e);
+    });
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return textareaVariants(variantProps);
+      },
+      get value() {
+        return localProps.value;
+      },
+      get maxLength() {
+        return localProps.maxLength;
+      },
+      get onInput() {
+        return localProps.onInput;
+      },
+      get ["aria-invalid"]() {
+        return variantProps.color === "danger" ? "true" : void 0;
+      }
+    }, otherProps), false, false);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return showCounter();
+      },
+      get children() {
+        var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild;
+        insert(_el$3, valueLength, _el$4);
+        insert(_el$3, () => localProps.maxLength, null);
+        effect(() => className(_el$3, classes("absolute bottom-1 right-2 text-xs text-gray-500 transition-opacity", isFocused() ? "opacity-100" : "opacity-0")));
+        return _el$3;
+      }
+    }), null);
+    return _el$;
+  })();
+};
+var Textarea_default = Textarea;
+
+// src/components/textarea/index.ts
+var textarea_default = Textarea_default;
+
+export { textarea_default };

package/dist/chunk/G6RG4LR7.js

@@ -0,0 +1,87 @@
+import { createComponent, Dynamic, mergeProps } from 'solid-js/web';
+import { splitProps, createMemo, untrack, createSignal } from 'solid-js';
+
+// src/components/polymorphic/Polymorphic.tsx
+var Polymorphic = (props) => {
+  const [localProps, otherProps] = splitProps(props, ["as"]);
+  const cached = createMemo(() => localProps.as ?? "div");
+  return createMemo(() => {
+    const component = cached();
+    switch (typeof component) {
+      case "function":
+        return untrack(() => component(otherProps));
+      case "string":
+        return createComponent(Dynamic, mergeProps({
+          component
+        }, otherProps));
+    }
+  });
+};
+var Polymorphic_default = Polymorphic;
+
+// src/lib/iterable.ts
+function chain(callbacks) {
+  return (...args) => {
+    for (const callback of callbacks) callback?.(...args);
+  };
+}
+
+// src/lib/refs/mergeRefs.ts
+function mergeRefs(...refs) {
+  return chain(refs);
+}
+function createTagName(props) {
+  return createMemo(
+    () => props.element()?.tagName.toLowerCase() ?? props.fallback
+  );
+}
+
+// src/lib/tag/createIsButton.ts
+var BUTTON_INPUT_TYPES = [
+  "button",
+  "color",
+  "file",
+  "image",
+  "reset",
+  "submit"
+];
+function isButton(tagName, type) {
+  if (tagName === "button") {
+    return true;
+  }
+  if (tagName === "input" && type !== void 0) {
+    return BUTTON_INPUT_TYPES.indexOf(type) !== -1;
+  }
+  return false;
+}
+function createIsButton(props) {
+  const tagName = createTagName({
+    element: props.element,
+    fallback: "button"
+  });
+  return createMemo(() => isButton(tagName(), props.type));
+}
+var PolymorphicButton = (props) => {
+  const [ref, setRef] = createSignal(null);
+  const [localProps, otherProps] = splitProps(props, ["ref", "type"]);
+  const isButton2 = createIsButton({
+    element: ref,
+    type: localProps.type
+  });
+  return createComponent(Polymorphic_default, mergeProps({
+    as: "button",
+    ref(r$) {
+      var _ref$ = mergeRefs(setRef, localProps.ref);
+      typeof _ref$ === "function" && _ref$(r$);
+    },
+    get type() {
+      return isButton2() ? "button" : void 0;
+    },
+    get role() {
+      return !isButton2() ? "button" : void 0;
+    }
+  }, otherProps));
+};
+var PolymorphicButton_default = PolymorphicButton;
+
+export { PolymorphicButton_default, Polymorphic_default };