@pathscale/ui 0.1.0

package/dist/chunk/HEJAQSH5.jsx

@@ -0,0 +1,100 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/Avatar/Avatar.tsx
+import {
+  createSignal,
+  createMemo,
+  createEffect,
+  mergeProps,
+  splitProps,
+  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 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(() => {
+    if (import.meta.env.PROD && props.dataSrc) {
+      setSource(props.dataSrc);
+    }
+  });
+  const backgroundColor = createMemo(
+    () => source() ? "" : props.class ?? "bg-blue-500"
+  );
+  const textColor = createMemo(
+    () => source() ? "" : props.text ?? "text-white"
+  );
+  const caption = createMemo(() => parseCaption(props.alt));
+  return <figure class={avatarVariants(variantProps)}>
+      <Show
+    when={source()}
+    fallback={<figcaption class="text-lg">{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/HKS7ET6T.js

@@ -0,0 +1,56 @@
+// src/lib/style/classes.ts
+function classes(...args) {
+  return args.flat().filter(Boolean).join(" ");
+}
+function falsyToString(value) {
+  return typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+}
+function cva(base, config) {
+  const fn = (props) => {
+    if (config?.variants == null) return classes(base, props?.class);
+    const { variants, defaultVariants } = config;
+    const getVariantClassNames = Object.keys(variants).map((variant) => {
+      const variantProp = props?.[variant];
+      const defaultVariantProp = defaultVariants?.[variant];
+      if (variantProp === null) return null;
+      const variantKey = falsyToString(variantProp) || falsyToString(
+        defaultVariantProp
+      );
+      return variants[variant]?.[variantKey];
+    });
+    const propsWithoutUndefined = Object.entries(props || {}).reduce(
+      (acc, [key, value]) => {
+        if (value !== void 0) {
+          acc[key] = value;
+        }
+        return acc;
+      },
+      {}
+    );
+    const getCompoundVariantClassNames = config?.compoundVariants?.reduce(
+      (acc, { class: cvClass, ...compoundVariantOptions }) => {
+        const isMatch = Object.entries(compoundVariantOptions).every(
+          ([key, value]) => {
+            const currentValue = {
+              ...defaultVariants,
+              ...propsWithoutUndefined
+            }[key];
+            return Array.isArray(value) ? value.includes(currentValue) : currentValue === value;
+          }
+        );
+        return isMatch ? [...acc, cvClass] : acc;
+      },
+      []
+    );
+    return classes(
+      base,
+      getVariantClassNames,
+      getCompoundVariantClassNames,
+      props?.class
+    );
+  };
+  fn.variantKeys = config?.variants ? Object.keys(config.variants) : [];
+  return fn;
+}
+
+export { classes, cva };

package/dist/chunk/KACNXPUM.jsx

@@ -0,0 +1,103 @@
+// src/components/polymorphic/Polymorphic.tsx
+import {
+  createMemo,
+  splitProps,
+  untrack
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+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 <Dynamic
+          component={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);
+}
+
+// src/lib/tag/createIsButton.ts
+import { createMemo as createMemo3 } from "solid-js";
+
+// src/lib/tag/createTagName.ts
+import { createMemo as createMemo2 } from "solid-js";
+function createTagName(props) {
+  return createMemo2(
+    () => 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 createMemo3(() => isButton(tagName(), props.type));
+}
+
+// src/components/polymorphic/PolymorphicButton.tsx
+import {
+  createSignal,
+  splitProps as splitProps2
+} from "solid-js";
+var PolymorphicButton = (props) => {
+  const [ref, setRef] = createSignal(null);
+  const [localProps, otherProps] = splitProps2(props, [
+    "ref",
+    "type"
+  ]);
+  const isButton2 = createIsButton({
+    element: ref,
+    type: localProps.type
+  });
+  return <Polymorphic_default
+    as="button"
+    ref={mergeRefs(setRef, localProps.ref)}
+    type={isButton2() ? "button" : void 0}
+    role={!isButton2() ? "button" : void 0}
+    {...otherProps}
+  />;
+};
+var PolymorphicButton_default = PolymorphicButton;
+
+export {
+  Polymorphic_default,
+  PolymorphicButton_default
+};

package/dist/chunk/NLD5D3P7.jsx

@@ -0,0 +1,94 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/input/Input.tsx
+import {
+  createMemo,
+  createSignal,
+  mergeProps,
+  Show,
+  splitProps
+} from "solid-js";
+
+// src/components/input/Input.styles.ts
+var inputVariants = cva(
+  [
+    "block w-full appearance-none outline-none bg-transparent",
+    "border transition-colors duration-200",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      color: {
+        danger: "border-red-500 text-red-600",
+        success: "border-green-500 text-green-600",
+        warning: "border-orange-500 text-orange-600"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "rounded-md"
+      },
+      expanded: {
+        true: "w-full",
+        false: "w-fit"
+      },
+      loading: {
+        true: "opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      color: void 0,
+      rounded: false,
+      expanded: true,
+      loading: false
+    }
+  }
+);
+
+// src/components/input/Input.tsx
+var Input = (props) => {
+  const defaultedProps = mergeProps({ type: "text" }, props);
+  const [localProps, variantProps, otherProps] = splitProps(
+    defaultedProps,
+    ["type", "passwordReveal", "leftIcon", "rightIcon"],
+    ["class", ...inputVariants.variantKeys]
+  );
+  const [showPassword, setShowPassword] = createSignal(false);
+  const computedType = createMemo(
+    () => localProps.passwordReveal && showPassword() ? "text" : defaultedProps.type
+  );
+  return <div class="relative flex items-center">
+      <Show when={localProps.leftIcon}>
+        <span class="absolute left-3 top-1/2 -translate-y-1/2">
+          {localProps.leftIcon}
+        </span>
+      </Show>
+
+      <input
+    class={inputVariants(variantProps)}
+    type={computedType()}
+    aria-invalid={variantProps.color === "danger" ? "true" : void 0}
+    {...otherProps}
+  />
+
+      <Show when={localProps.passwordReveal && localProps.rightIcon}>
+        <button
+    type="button"
+    onClick={() => setShowPassword((prev) => !prev)}
+    class="absolute right-3 top-1/2 -translate-y-1/2 outline-none"
+  >
+          {localProps.rightIcon}
+        </button>
+      </Show>
+    </div>;
+};
+var Input_default = Input;
+
+// src/components/input/index.ts
+var input_default = Input_default;
+
+export {
+  input_default
+};

package/dist/chunk/P7WPLZNA.jsx

@@ -0,0 +1,59 @@
+// src/lib/style/classes.ts
+function classes(...args) {
+  return args.flat().filter(Boolean).join(" ");
+}
+function falsyToString(value) {
+  return typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+}
+function cva(base, config) {
+  const fn = (props) => {
+    if (config?.variants == null) return classes(base, props?.class);
+    const { variants, defaultVariants } = config;
+    const getVariantClassNames = Object.keys(variants).map((variant) => {
+      const variantProp = props?.[variant];
+      const defaultVariantProp = defaultVariants?.[variant];
+      if (variantProp === null) return null;
+      const variantKey = falsyToString(variantProp) || falsyToString(
+        defaultVariantProp
+      );
+      return variants[variant]?.[variantKey];
+    });
+    const propsWithoutUndefined = Object.entries(props || {}).reduce(
+      (acc, [key, value]) => {
+        if (value !== void 0) {
+          acc[key] = value;
+        }
+        return acc;
+      },
+      {}
+    );
+    const getCompoundVariantClassNames = config?.compoundVariants?.reduce(
+      (acc, { class: cvClass, ...compoundVariantOptions }) => {
+        const isMatch = Object.entries(compoundVariantOptions).every(
+          ([key, value]) => {
+            const currentValue = {
+              ...defaultVariants,
+              ...propsWithoutUndefined
+            }[key];
+            return Array.isArray(value) ? value.includes(currentValue) : currentValue === value;
+          }
+        );
+        return isMatch ? [...acc, cvClass] : acc;
+      },
+      []
+    );
+    return classes(
+      base,
+      getVariantClassNames,
+      getCompoundVariantClassNames,
+      props?.class
+    );
+  };
+  fn.variantKeys = config?.variants ? Object.keys(config.variants) : [];
+  return fn;
+}
+
+export {
+  classes,
+  cva
+};

package/dist/chunk/UTRNHAP4.js

@@ -0,0 +1,95 @@
+import { cva } from './HKS7ET6T.js';
+import { delegateEvents, template, insert, createComponent, spread, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps, splitProps, createSignal, createMemo, Show } from 'solid-js';
+
+// src/components/input/Input.styles.ts
+var inputVariants = cva(
+  [
+    "block w-full appearance-none outline-none bg-transparent",
+    "border transition-colors duration-200",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      color: {
+        danger: "border-red-500 text-red-600",
+        success: "border-green-500 text-green-600",
+        warning: "border-orange-500 text-orange-600"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "rounded-md"
+      },
+      expanded: {
+        true: "w-full",
+        false: "w-fit"
+      },
+      loading: {
+        true: "opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      color: void 0,
+      rounded: false,
+      expanded: true,
+      loading: false
+    }
+  }
+);
+
+// src/components/input/Input.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span class="absolute left-3 top-1/2 -translate-y-1/2">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button type=button class="absolute right-3 top-1/2 -translate-y-1/2 outline-none">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div class="relative flex items-center"><input>`);
+var Input = (props) => {
+  const defaultedProps = mergeProps({
+    type: "text"
+  }, props);
+  const [localProps, variantProps, otherProps] = splitProps(defaultedProps, ["type", "passwordReveal", "leftIcon", "rightIcon"], ["class", ...inputVariants.variantKeys]);
+  const [showPassword, setShowPassword] = createSignal(false);
+  const computedType = createMemo(() => localProps.passwordReveal && showPassword() ? "text" : defaultedProps.type);
+  return (() => {
+    var _el$ = _tmpl$3(), _el$3 = _el$.firstChild;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return localProps.leftIcon;
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        insert(_el$2, () => localProps.leftIcon);
+        return _el$2;
+      }
+    }), _el$3);
+    spread(_el$3, mergeProps$1({
+      get ["class"]() {
+        return inputVariants(variantProps);
+      },
+      get type() {
+        return computedType();
+      },
+      get ["aria-invalid"]() {
+        return variantProps.color === "danger" ? "true" : void 0;
+      }
+    }, otherProps), false, false);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return localProps.passwordReveal && localProps.rightIcon;
+      },
+      get children() {
+        var _el$4 = _tmpl$2();
+        _el$4.$$click = () => setShowPassword((prev) => !prev);
+        insert(_el$4, () => localProps.rightIcon);
+        return _el$4;
+      }
+    }), null);
+    return _el$;
+  })();
+};
+var Input_default = Input;
+delegateEvents(["click"]);
+
+// src/components/input/index.ts
+var input_default = Input_default;
+
+export { input_default };

package/dist/chunk/VMEDFWWG.js

@@ -0,0 +1,102 @@
+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, 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 class=text-lg>`);
+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(() => {
+    if (import.meta.env.PROD && props.dataSrc) {
+      setSource(props.dataSrc);
+    }
+  });
+  createMemo(() => source() ? "" : props.class ?? "bg-blue-500");
+  createMemo(() => 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);
+          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 };