@pathscale/ui 0.0.1

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/T2DPPLBQ.js

@@ -0,0 +1,100 @@
+import { cva } from './HKS7ET6T.js';
+import { delegateEvents, template, insert, createComponent, spread, mergeProps as mergeProps$1, effect, setAttribute } from 'solid-js/web';
+import { mergeProps, splitProps, createSignal, createMemo, untrack, 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(() => untrack(() => localProps.passwordReveal && showPassword() ? "text" : defaultedProps.type));
+  const classes = createMemo(() => inputVariants(variantProps));
+  const handlePasswordToggle = () => {
+    untrack(() => setShowPassword((prev) => !prev));
+  };
+  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 classes();
+      },
+      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 = handlePasswordToggle;
+        insert(_el$4, () => localProps.rightIcon);
+        effect(() => setAttribute(_el$4, "aria-label", showPassword() ? "Hide password" : "Show password"));
+        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/WB6NEEQV.jsx

@@ -0,0 +1,107 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/textarea/Textarea.tsx
+import {
+  createMemo,
+  createSignal,
+  splitProps,
+  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 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 <div class="relative w-full">
+      <textarea
+    class={textareaVariants(variantProps)}
+    value={localProps.value}
+    maxLength={localProps.maxLength}
+    onInput={localProps.onInput}
+    onFocus={(e) => {
+      setFocused(true);
+      typeof localProps.onFocus === "function" && localProps.onFocus(e);
+    }}
+    onBlur={(e) => {
+      setFocused(false);
+      typeof localProps.onBlur === "function" && localProps.onBlur(e);
+    }}
+    aria-invalid={variantProps.color === "danger" ? "true" : void 0}
+    {...otherProps}
+  />
+
+      <Show when={showCounter()}>
+        <small
+    class={classes(
+      "absolute bottom-1 right-2 text-xs text-gray-500 transition-opacity",
+      isFocused() ? "opacity-100" : "opacity-0"
+    )}
+  >
+          {valueLength()} / {localProps.maxLength}
+        </small>
+      </Show>
+    </div>;
+};
+var Textarea_default = Textarea;
+
+// src/components/textarea/index.ts
+var textarea_default = Textarea_default;
+
+export {
+  textarea_default
+};

package/dist/classes-B_S9K-9I.d.ts

@@ -0,0 +1,13 @@
+type ClassArgs = string | number | boolean | null | undefined | ClassArgs[];
+type ClassProps = {
+    class?: ClassArgs;
+};
+type OmitUndefined<T> = T extends undefined ? never : T;
+type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
+type ConfigSchema = Record<string, Record<string, ClassArgs>>;
+type ConfigVariants<T extends ConfigSchema> = {
+    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
+};
+type VariantProps<Component extends (...args: []) => unknown> = Omit<OmitUndefined<Parameters<Component>[0]>, "class">;
+
+export type { ConfigVariants as C, VariantProps as V, ClassProps as a };

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

@@ -0,0 +1,42 @@
+import { Component } from 'solid-js';
+
+declare const Progress$3: Component;
+
+interface ProgressValueProps {
+    value: number;
+    size?: "sm" | "md" | "lg";
+    shape?: "circle" | "rounded";
+    variant?: "filled" | "outlined" | "ghost";
+}
+declare const ProgressValue: Component<ProgressValueProps>;
+
+interface ProgressProps$2 {
+    value: number;
+    size?: "sm" | "md" | "lg";
+    shape?: "circle" | "rounded";
+    variant?: "filled" | "outlined" | "ghost";
+}
+declare const Progress$2: Component<ProgressProps$2>;
+
+interface ProgressProps$1 {
+    value: number;
+    size?: "sm" | "md" | "lg";
+    shape?: "circle" | "rounded";
+    variant?: "filled" | "outlined" | "ghost";
+    showValue?: boolean;
+    format?: "percent" | "raw";
+}
+declare const Progress$1: Component<ProgressProps$1>;
+
+interface ProgressProps {
+    value: number | null;
+    size?: "sm" | "md" | "lg";
+    shape?: "circle" | "rounded";
+    variant?: "filled" | "outlined" | "ghost";
+    showValue?: boolean;
+    format?: "percent" | "raw";
+    color?: "danger" | "success" | "info" | "warning" | "default";
+}
+declare const Progress: Component<ProgressProps>;
+
+export { Progress as ProgressColors, type ProgressProps as ProgressColorsProps, Progress$1 as ProgressPercent, type ProgressProps$1 as ProgressPercentProps, Progress$2 as ProgressSizes, type ProgressProps$2 as ProgressSizesProps, ProgressValue, type ProgressValueProps, Progress$3 as default };

package/dist/components/Progress/index.js

@@ -0,0 +1,278 @@
+import { cva } from '../../chunk/HKS7ET6T.js';
+import { template, insert, effect, className, createComponent } from 'solid-js/web';
+import { Show } from 'solid-js';
+
+// src/components/Progress/ProgressValue.styles.ts
+var progressWrapper = cva("mt-4 w-full max-w-md");
+var progressBar = cva("w-full h-5 relative overflow-hidden rounded-lg bg-gray-200");
+var progressFill = cva("h-full transition-all duration-300", {
+  variants: {
+    color: {
+      danger: "bg-red-500",
+      success: "bg-green-500",
+      info: "bg-blue-500",
+      warning: "bg-yellow-500",
+      default: "bg-gray-500"
+    }
+  },
+  defaultVariants: {
+    color: "default"
+  }
+});
+var progressLabel = cva("mt-2 text-right text-sm text-gray-700");
+var progressVariants = 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: "text-gray-800",
+        outlined: "border-2 border-gray-300 text-gray-800",
+        ghost: "text-gray-800"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "rounded",
+      variant: "filled"
+    }
+  }
+);
+
+// src/components/Progress/ProgressValue.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div><div></div></div><div>%`);
+var ProgressValue = (props) => {
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.firstChild;
+    insert(_el$4, () => props.value, _el$5);
+    effect((_p$) => {
+      var _v$ = `${progressWrapper()} ${progressVariants({
+        size: props.size,
+        shape: props.shape,
+        variant: props.variant
+      })}`, _v$2 = progressBar(), _v$3 = progressFill(), _v$4 = `${props.value}%`, _v$5 = progressLabel();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$3.style.setProperty("width", _v$4) : _el$3.style.removeProperty("width"));
+      _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    });
+    return _el$;
+  })();
+};
+var ProgressValue_default = ProgressValue;
+var _tmpl$2 = /* @__PURE__ */ template(`<div><div><div></div></div><div>%`);
+var Progress = ({
+  value,
+  size = "md",
+  shape = "rounded",
+  variant = "filled"
+}) => {
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.firstChild;
+    `${value}%` != null ? _el$3.style.setProperty("width", `${value}%`) : _el$3.style.removeProperty("width");
+    insert(_el$4, value, _el$5);
+    effect((_p$) => {
+      var _v$ = `${progressWrapper()} ${progressVariants({
+        size,
+        shape,
+        variant
+      })}`, _v$2 = progressBar(), _v$3 = progressFill(), _v$4 = progressLabel();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$;
+  })();
+};
+var ProgressSizes_default = Progress;
+var _tmpl$3 = /* @__PURE__ */ template(`<div><div><div>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div>`);
+var Progress2 = ({
+  value,
+  size = "md",
+  shape = "rounded",
+  variant = "filled",
+  showValue = false,
+  format = "raw"
+}) => {
+  const displayValue = () => {
+    return format === "percent" ? `${value}%` : value;
+  };
+  return (() => {
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    `${value}%` != null ? _el$3.style.setProperty("width", `${value}%`) : _el$3.style.removeProperty("width");
+    insert(_el$, showValue && (() => {
+      var _el$4 = _tmpl$22();
+      insert(_el$4, displayValue);
+      effect(() => className(_el$4, progressLabel()));
+      return _el$4;
+    })(), null);
+    effect((_p$) => {
+      var _v$ = `${progressWrapper()} ${progressVariants({
+        size,
+        shape,
+        variant
+      })}`, _v$2 = progressBar(), _v$3 = progressFill();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$;
+  })();
+};
+var ProgressPercent_default = Progress2;
+var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<div><div>`);
+var Progress3 = ({
+  value,
+  size = "md",
+  shape = "rounded",
+  variant = "filled",
+  showValue = false,
+  format = "raw",
+  color = "default"
+}) => {
+  const displayValue = () => format === "percent" && value != null ? `${value}%` : value;
+  return (() => {
+    var _el$ = _tmpl$23(), _el$2 = _el$.firstChild;
+    insert(_el$2, createComponent(Show, {
+      when: value != null,
+      get fallback() {
+        return (() => {
+          var _el$4 = _tmpl$4();
+          _el$4.style.setProperty("width", "100%");
+          effect(() => className(_el$4, `${progressFill({
+            color
+          })} animate-pulse`));
+          return _el$4;
+        })();
+      },
+      get children() {
+        var _el$3 = _tmpl$4();
+        `${value}%` != null ? _el$3.style.setProperty("width", `${value}%`) : _el$3.style.removeProperty("width");
+        effect(() => className(_el$3, progressFill({
+          color
+        })));
+        return _el$3;
+      }
+    }));
+    insert(_el$, showValue && value != null && (() => {
+      var _el$5 = _tmpl$4();
+      insert(_el$5, displayValue);
+      effect(() => className(_el$5, progressLabel()));
+      return _el$5;
+    })(), null);
+    effect((_p$) => {
+      var _v$ = `${progressWrapper()} ${progressVariants({
+        size,
+        shape,
+        variant
+      })}`, _v$2 = progressBar();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+var ProgressColors_default = Progress3;
+
+// src/components/Progress/Progress.tsx
+var _tmpl$5 = /* @__PURE__ */ template(`<section><div class=p-4><h1 class="text-2xl font-semibold mb-4">Progress Component Demo</h1></div><div class="mt-4 flex flex-col gap-4"></div><div class=mt-4></div><div class="mt-4 flex flex-col gap-4">`);
+var Progress4 = () => {
+  return (() => {
+    var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
+    insert(_el$2, createComponent(ProgressValue_default, {
+      value: 40,
+      size: "sm",
+      shape: "circle",
+      variant: "filled"
+    }), null);
+    insert(_el$2, createComponent(ProgressValue_default, {
+      value: 70,
+      size: "md",
+      shape: "rounded",
+      variant: "outlined"
+    }), null);
+    insert(_el$2, createComponent(ProgressValue_default, {
+      value: 90,
+      size: "lg",
+      shape: "circle",
+      variant: "ghost"
+    }), null);
+    insert(_el$4, createComponent(ProgressSizes_default, {
+      value: 20,
+      size: "sm"
+    }), null);
+    insert(_el$4, createComponent(ProgressSizes_default, {
+      value: 30,
+      size: "md"
+    }), null);
+    insert(_el$4, createComponent(ProgressSizes_default, {
+      value: 50,
+      size: "lg"
+    }), null);
+    insert(_el$5, createComponent(ProgressPercent_default, {
+      value: 80,
+      showValue: true,
+      format: "percent"
+    }));
+    insert(_el$6, createComponent(ProgressColors_default, {
+      value: 40,
+      color: "danger"
+    }), null);
+    insert(_el$6, createComponent(ProgressColors_default, {
+      value: 60,
+      color: "success"
+    }), null);
+    insert(_el$6, createComponent(ProgressColors_default, {
+      value: 80,
+      color: "info"
+    }), null);
+    insert(_el$6, createComponent(ProgressColors_default, {
+      value: 100,
+      color: "warning"
+    }), null);
+    return _el$;
+  })();
+};
+var Progress_default = Progress4;
+
+export { ProgressColors_default as ProgressColors, ProgressPercent_default as ProgressPercent, ProgressSizes_default as ProgressSizes, ProgressValue_default as ProgressValue, Progress_default as default };