@pathscale/ui 0.0.1

package/dist/chunk/GA2HCFRS.jsx

@@ -0,0 +1,228 @@
+import {
+  PolymorphicButton_default
+} from "./KACNXPUM.jsx";
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/button/Button.tsx
+import {
+  mergeProps,
+  splitProps,
+  createMemo
+} 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
+  ]);
+  const classes = createMemo(() => buttonVariants(variantProps));
+  return <PolymorphicButton_default
+    class={classes()}
+    aria-busy={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/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/N7BXP7EI.jsx

@@ -0,0 +1,102 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/input/Input.tsx
+import {
+  createMemo,
+  createSignal,
+  mergeProps,
+  Show,
+  splitProps,
+  untrack
+} 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(
+    () => untrack(
+      () => localProps.passwordReveal && showPassword() ? "text" : defaultedProps.type
+    )
+  );
+  const classes = createMemo(() => inputVariants(variantProps));
+  const handlePasswordToggle = () => {
+    untrack(() => setShowPassword((prev) => !prev));
+  };
+  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={classes()}
+    type={computedType()}
+    aria-invalid={variantProps.color === "danger" ? "true" : void 0}
+    {...otherProps}
+  />
+
+      <Show when={localProps.passwordReveal && localProps.rightIcon}>
+        <button
+    type="button"
+    onClick={handlePasswordToggle}
+    class="absolute right-3 top-1/2 -translate-y-1/2 outline-none"
+    aria-label={showPassword() ? "Hide password" : "Show password"}
+  >
+          {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/NZZRKP74.js

@@ -0,0 +1,214 @@
+import { PolymorphicButton_default } from './G6RG4LR7.js';
+import { cva } from './HKS7ET6T.js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps, splitProps, createMemo } 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]);
+  const classes = createMemo(() => buttonVariants(variantProps));
+  return createComponent(PolymorphicButton_default, mergeProps$1({
+    get ["class"]() {
+      return classes();
+    },
+    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 };