@pathscale/ui 0.1.0

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-BOYHKShy.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" | "color" | "align" | "shape" | "spacing" | "loading" | "stretched" | "variant")[];
+};
+
+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-CvNxe1rq.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: ("color" | "rounded" | "loading" | "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-5_oQknZn.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" | "color" | "loading" | "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/3MUBOGZG.js

@@ -0,0 +1,213 @@
+import { PolymorphicButton_default } from './G6RG4LR7.js';
+import { cva } from './HKS7ET6T.js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps, splitProps } from 'solid-js';
+
+// src/components/button/Button.styles.ts
+var buttonVariants = cva(
+  [
+    "inline-flex items-center font-medium outline-none select-none",
+    "not-disabled:cursor-pointer",
+    "disabled:cursor-not-allowed disabled:opacity-25",
+    "aria-busy:cursor-wait",
+    "transition active:transition-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm leading-tight",
+        md: "text-base leading-tight",
+        lg: "text-lg leading-tight"
+      },
+      color: {
+        inverse: "",
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        accent: "",
+        positive: "",
+        destructive: ""
+      },
+      align: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end"
+      },
+      shape: {
+        circle: "rounded-full",
+        rounded: "rounded-lg"
+      },
+      spacing: {
+        0: "gap-0 p-0",
+        xs: "gap-1.5 px-1.5 py-1.5",
+        sm: "gap-1.5 px-2 py-2",
+        md: "gap-1.5 px-3 py-2",
+        lg: "gap-1.5 px-3.5 py-2.5"
+      },
+      loading: {
+        true: "",
+        false: ""
+      },
+      stretched: {
+        true: "w-full",
+        false: "w-fit"
+      },
+      variant: {
+        fill: [
+          "not-disabled:hover:opacity-75 not-disabled:active:opacity-50",
+          "aria-[current]:opacity-75 data-expanded:opacity-75 data-open:opacity-75",
+          "focus-visible:opacity-75"
+        ],
+        gray: [
+          "bg-bg-primary not-disabled:hover:bg-bg-secondary not-disabled:active:bg-bg-secondary not-disabled:active:opacity-75",
+          "aria-[current]:bg-bg-secondary data-expanded:bg-bg-secondary data-open:bg-bg-secondary",
+          "focus-visible:bg-bg-secondary"
+        ],
+        ghost: [
+          "not-disabled:hover:bg-bg-primary not-disabled:active:bg-bg-primary not-disabled:active:opacity-75",
+          "aria-[current]:bg-bg-primary data-expanded:bg-bg-primary data-open:bg-bg-primary",
+          "focus-visible:bg-bg-primary"
+        ]
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "fill",
+        color: "inverse",
+        class: "bg-bg-inverse text-fg-inverse"
+      },
+      {
+        variant: "fill",
+        color: "primary",
+        class: "bg-bg-primary text-fg-body"
+      },
+      {
+        variant: "fill",
+        color: "secondary",
+        class: "bg-bg-secondary text-fg-body"
+      },
+      {
+        variant: "fill",
+        color: "tertiary",
+        class: "bg-bg-tertiary text-fg-body"
+      },
+      {
+        variant: "fill",
+        color: "accent",
+        class: "bg-bg-accent text-light"
+      },
+      {
+        variant: "fill",
+        color: "positive",
+        class: "bg-bg-positive text-light"
+      },
+      {
+        variant: "fill",
+        color: "destructive",
+        class: "bg-bg-destructive text-light"
+      },
+      {
+        variant: "gray",
+        color: "inverse",
+        class: "text-fg-inverse"
+      },
+      {
+        variant: "gray",
+        color: "primary",
+        class: "text-fg-primary"
+      },
+      {
+        variant: "gray",
+        color: "secondary",
+        class: "text-fg-secondary"
+      },
+      {
+        variant: "gray",
+        color: "tertiary",
+        class: "text-fg-tertiary"
+      },
+      {
+        variant: "gray",
+        color: "accent",
+        class: "text-fg-accent"
+      },
+      {
+        variant: "gray",
+        color: "positive",
+        class: "text-fg-positive"
+      },
+      {
+        variant: "gray",
+        color: "destructive",
+        class: "text-fg-destructive"
+      },
+      {
+        variant: "ghost",
+        color: "inverse",
+        class: "text-fg-inverse"
+      },
+      {
+        variant: "ghost",
+        color: "primary",
+        class: "text-fg-primary"
+      },
+      {
+        variant: "ghost",
+        color: "secondary",
+        class: "text-fg-secondary"
+      },
+      {
+        variant: "ghost",
+        color: "tertiary",
+        class: "text-fg-tertiary"
+      },
+      {
+        variant: "ghost",
+        color: "accent",
+        class: "text-fg-accent"
+      },
+      {
+        variant: "ghost",
+        color: "positive",
+        class: "text-fg-positive"
+      },
+      {
+        variant: "ghost",
+        color: "destructive",
+        class: "text-fg-destructive"
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      align: "center",
+      shape: "rounded",
+      spacing: "md",
+      variant: "fill",
+      loading: false,
+      stretched: false
+    }
+  }
+);
+
+// src/components/button/Button.tsx
+var Button = (props) => {
+  const defaultedProps = mergeProps({
+    color: "primary"
+  }, props);
+  const [variantProps, otherProps] = splitProps(defaultedProps, ["class", ...buttonVariants.variantKeys]);
+  return createComponent(PolymorphicButton_default, mergeProps$1({
+    get ["class"]() {
+      return buttonVariants(variantProps);
+    },
+    get ["aria-busy"]() {
+      return variantProps.loading ? "true" : void 0;
+    }
+  }, otherProps));
+};
+var Button_default = Button;
+
+// src/components/button/index.ts
+var button_default = Button_default;
+
+export { button_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 };