@pathscale/ui 0.0.1 → 0.0.3

package/dist/chunk/LI3HCFL7.jsx

@@ -0,0 +1,132 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/tag/Tag.tsx
+import {
+  splitProps,
+  createMemo,
+  Show,
+  untrack
+} from "solid-js";
+
+// src/components/tag/Tag.styles.ts
+var tagVariants = cva(
+  [
+    "inline-flex items-center gap-2 px-3 py-1 text-sm rounded",
+    "transition select-none"
+  ],
+  {
+    variants: {
+      size: {
+        normal: "text-xs px-2 py-0.5",
+        medium: "text-sm px-3 py-1",
+        large: "text-base px-4 py-2"
+      },
+      type: {
+        primary: "bg-blue-500 text-white",
+        info: "bg-sky-500 text-white",
+        success: "bg-green-500 text-white",
+        warning: "bg-yellow-500 text-black",
+        danger: "bg-red-500 text-white",
+        dark: "bg-zinc-800 text-white",
+        light: "bg-gray-100 text-black"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: ""
+      },
+      closable: {
+        true: "pr-1",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "normal"
+    }
+  }
+);
+
+// src/components/tag/Tag.tsx
+var Tag = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(
+    props,
+    [
+      "closable",
+      "attached",
+      "onClose",
+      "ariaCloseLabel",
+      "closeIcon",
+      "children",
+      "type"
+    ],
+    ["class", ...tagVariants.variantKeys]
+  );
+  const isAttachedClosable = createMemo(
+    () => untrack(() => localProps.attached && localProps.closable)
+  );
+  const isClosable = createMemo(
+    () => untrack(() => localProps.closable && !localProps.attached)
+  );
+  const tagClasses = createMemo(
+    () => classes(
+      tagVariants({
+        ...variantProps,
+        closable: localProps.closable
+      }),
+      variantProps.class
+    )
+  );
+  const attachedButtonClasses = createMemo(
+    () => tagVariants({
+      ...variantProps,
+      class: "ml-1 text-xs hover:opacity-80"
+    })
+  );
+  const handleClose = (e) => {
+    untrack(() => {
+      if (typeof localProps.onClose === "function") {
+        localProps.onClose(e);
+      }
+    });
+  };
+  return <div
+    class={isAttachedClosable() ? "tags has-addons" : void 0}
+    role="group"
+  >
+      <span class={tagClasses()} role="status" {...otherProps}>
+        <span class="truncate">{localProps.children}</span>
+
+        <Show when={isClosable()}>
+          <button
+    type="button"
+    aria-label={localProps.ariaCloseLabel ?? "Remove tag"}
+    onClick={handleClose}
+    class="ml-2 text-xs text-white hover:opacity-80"
+  >
+            {localProps.closeIcon ?? "\xD7"}
+          </button>
+        </Show>
+      </span>
+
+      <Show when={isAttachedClosable()}>
+        <button
+    type="button"
+    aria-label={localProps.ariaCloseLabel ?? "Remove tag"}
+    onClick={handleClose}
+    class={attachedButtonClasses()}
+  >
+          {localProps.closeIcon ?? "\xD7"}
+        </button>
+      </Show>
+    </div>;
+};
+var Tag_default = Tag;
+
+// src/components/tag/index.ts
+var tag_default = Tag_default;
+
+export {
+  tag_default
+};

package/dist/chunk/MAX47D6F.js

@@ -0,0 +1,99 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, spread, mergeProps, insert, memo, effect, className } from 'solid-js/web';
+import { splitProps } from 'solid-js';
+
+// src/components/field/Field.styles.ts
+var fieldWrapper = cva(
+  "flex flex-col space-y-1",
+  {
+    variants: {
+      horizontal: {
+        true: "flex-row items-center space-x-2 space-y-0",
+        false: "flex-col"
+      },
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg"
+      },
+      type: {
+        default: "",
+        danger: "text-red-600"
+      },
+      grouped: {
+        true: "flex flex-wrap gap-2",
+        false: ""
+      },
+      groupMultiline: {
+        true: "flex-col",
+        false: "flex-row"
+      }
+    },
+    compoundVariants: [
+      { horizontal: true, grouped: true, class: "items-start" }
+    ],
+    defaultVariants: {
+      horizontal: false,
+      size: "md",
+      type: "default",
+      grouped: false,
+      groupMultiline: false
+    }
+  }
+);
+var labelStyles = cva("font-medium", {
+  variants: {
+    size: { sm: "text-sm", md: "text-base", lg: "text-lg" },
+    type: { default: "text-gray-800", danger: "text-red-600" }
+  },
+  defaultVariants: { size: "md", type: "default" }
+});
+var messageStyles = cva("mt-1 text-sm", {
+  variants: {
+    type: { default: "text-gray-600", danger: "text-red-600" }
+  },
+  defaultVariants: { type: "default" }
+});
+
+// src/components/field/Field.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
+var Field = (props) => {
+  const [local, variantProps, rest] = splitProps(props, ["label", "message", "className", "children"], ["horizontal", "size", "type", "grouped", "groupMultiline"]);
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes(fieldWrapper(variantProps), local.className);
+      }
+    }, rest), false, true);
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!local.label);
+      return () => _c$() && (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => local.label);
+        effect(() => className(_el$3, labelStyles(variantProps)));
+        return _el$3;
+      })();
+    })(), _el$2);
+    insert(_el$2, () => local.children);
+    insert(_el$, (() => {
+      var _c$2 = memo(() => !!local.message);
+      return () => _c$2() && (() => {
+        var _el$4 = _tmpl$3();
+        insert(_el$4, () => local.message);
+        effect(() => className(_el$4, messageStyles(variantProps)));
+        return _el$4;
+      })();
+    })(), null);
+    effect(() => className(_el$2, classes(variantProps.horizontal ? "flex items-center gap-2" : "")));
+    return _el$;
+  })();
+};
+var Field_default = Field;
+
+// src/components/field/index.ts
+var field_default = Field_default;
+
+export { field_default };

package/dist/chunk/{2JGZSAW5.js → MI773TMC.js}

@@ -2,7 +2,7 @@ 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
+// src/components/avatar/Avatar.styles.ts
 var avatarVariants = cva(
   [
     "flex items-center justify-center mx-1",
@@ -36,7 +36,7 @@ var avatarVariants = cva(
   }
 );
 
-// src/components/Avatar/utils.ts
+// src/components/avatar/utils.ts
 function parseCaption(alt) {
   if (!alt) return "";
   const parts = alt.split(" ");
@@ -46,7 +46,7 @@ function parseCaption(alt) {
   return "";
 }
 
-// src/components/Avatar/Avatar.tsx
+// 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>`);
@@ -101,7 +101,7 @@ var Avatar = (rawProps) => {
 };
 var Avatar_default = Avatar;
 
-// src/components/Avatar/index.ts
-var Avatar_default2 = Avatar_default;
+// src/components/avatar/index.ts
+var avatar_default = Avatar_default;
 
-export { Avatar_default2 as Avatar_default };
+export { avatar_default };

package/dist/chunk/MMTAND25.jsx

@@ -0,0 +1,126 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/breadcrumb/Breadcrumb.tsx
+import {
+  splitProps,
+  children,
+  createMemo,
+  untrack
+} from "solid-js";
+
+// src/components/breadcrumb/Breadcrumb.styles.ts
+var breadcrumbContainerVariants = cva(
+  ["flex", "items-center", "gap-2", "text-sm"],
+  {
+    variants: {
+      alignment: {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end"
+      },
+      size: {
+        sm: "text-xs gap-1",
+        md: "text-sm gap-2",
+        lg: "text-base gap-3"
+      },
+      separator: {
+        arrow: "breadcrumb-arrow",
+        dot: "breadcrumb-dot",
+        bullet: "breadcrumb-bullet",
+        succeeds: "breadcrumb-succeeds"
+      }
+    },
+    defaultVariants: {
+      alignment: "left",
+      size: "md"
+    }
+  }
+);
+var breadcrumbItemVariants = cva(
+  ["text-gray-600", "dark:text-gray-300"],
+  {
+    variants: {
+      active: {
+        true: "text-blue-600 font-semibold cursor-default",
+        false: "hover:underline"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+
+// src/components/breadcrumb/Breadcrumb.tsx
+var separatorMap = {
+  arrow: "\u2192",
+  dot: "\xB7",
+  bullet: "\u2022",
+  succeeds: "\xBB"
+};
+var Breadcrumb = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    ["children"],
+    ["alignment", "size", "separator"]
+  );
+  const resolvedChildren = children(() => local.children);
+  const items = createMemo(() => resolvedChildren.toArray());
+  const separator = createMemo(
+    () => untrack(() => {
+      const sep = variantProps.separator;
+      return sep && separatorMap[sep] ? separatorMap[sep] : "/";
+    })
+  );
+  const containerClasses = createMemo(
+    () => breadcrumbContainerVariants(variantProps)
+  );
+  const renderItems = createMemo(() => {
+    return items().reduce((acc, item, idx) => {
+      if (idx > 0) {
+        acc.push(
+          <li class="text-gray-400 select-none" aria-hidden="true">
+            {separator()}
+          </li>
+        );
+      }
+      acc.push(
+        <li>
+          <span aria-current={idx === items().length - 1 ? "page" : void 0}>
+            {item}
+          </span>
+        </li>
+      );
+      return acc;
+    }, []);
+  });
+  return <nav class={containerClasses()} aria-label="Breadcrumb" {...otherProps}>
+      <ol class="flex items-center flex-wrap gap-1">{renderItems()}</ol>
+    </nav>;
+};
+var Breadcrumb_default = Breadcrumb;
+
+// src/components/breadcrumb/BreadcrumbItem.tsx
+import { splitProps as splitProps2 } from "solid-js";
+var BreadcrumbItem = (props) => {
+  const [local, variantProps] = splitProps2(
+    props,
+    ["children", "href", "active"],
+    ["active"]
+  );
+  return <li class="flex items-center gap-1">
+      {local.href && !local.active ? <a href={local.href} class={breadcrumbItemVariants(variantProps)}>
+          {local.children}
+        </a> : <span class={breadcrumbItemVariants({ active: true })}>
+          {local.children}
+        </span>}
+    </li>;
+};
+var BreadcrumbItem_default = BreadcrumbItem;
+
+export {
+  Breadcrumb_default,
+  BreadcrumbItem_default
+};

package/dist/chunk/MXG3MBEN.jsx

@@ -0,0 +1,148 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/checkbox/Checkbox.tsx
+import {
+  splitProps,
+  Show,
+  createEffect,
+  createMemo,
+  untrack
+} from "solid-js";
+
+// src/components/checkbox/Checkbox.styles.ts
+var checkboxVariants = cva(
+  [
+    "relative inline-flex items-center gap-2 cursor-pointer",
+    "select-none",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg"
+      },
+      color: {
+        primary: "text-primary",
+        success: "text-green-600",
+        warning: "text-yellow-600",
+        danger: "text-red-600"
+      },
+      checked: {
+        true: "",
+        false: ""
+      },
+      indeterminate: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      checked: false,
+      indeterminate: false
+    }
+  }
+);
+
+// src/components/checkbox/Checkbox.tsx
+var Checkbox = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(
+    props,
+    [
+      "label",
+      "indeterminate",
+      "type",
+      "onChange",
+      "onFocus",
+      "onBlur",
+      "checked",
+      "disabled",
+      "aria-label",
+      "aria-describedby"
+    ],
+    ["class", ...checkboxVariants.variantKeys]
+  );
+  let inputRef;
+  const checkboxClasses = createMemo(() => checkboxVariants(variantProps));
+  const markerClasses = createMemo(
+    () => classes(
+      "inline-block w-4 h-4 border border-gray-400 rounded-sm peer-checked:bg-current",
+      localProps.indeterminate ? "bg-gray-400 relative" : ""
+    )
+  );
+  const handleChange = (e) => {
+    untrack(() => {
+      if (typeof localProps.onChange === "function") {
+        localProps.onChange(e);
+      }
+    });
+  };
+  const handleFocus = (e) => {
+    untrack(() => {
+      if (typeof localProps.onFocus === "function") {
+        localProps.onFocus(e);
+      }
+    });
+  };
+  const handleBlur = (e) => {
+    untrack(() => {
+      if (typeof localProps.onBlur === "function") {
+        localProps.onBlur(e);
+      }
+    });
+  };
+  createEffect(() => {
+    if (inputRef) {
+      untrack(() => {
+        inputRef.indeterminate = !!localProps.indeterminate;
+      });
+    }
+  });
+  return <label
+    class={checkboxClasses()}
+    role="checkbox"
+    aria-checked={localProps.indeterminate ? "mixed" : localProps.checked}
+    aria-label={localProps["aria-label"]}
+    aria-describedby={localProps["aria-describedby"]}
+  >
+      <input
+    ref={inputRef}
+    type="checkbox"
+    class="peer absolute opacity-0 w-4 h-4"
+    checked={localProps.checked}
+    disabled={localProps.disabled}
+    aria-hidden="true"
+    {...otherProps}
+    onChange={handleChange}
+    onFocus={handleFocus}
+    onBlur={handleBlur}
+  />
+
+      <span class={markerClasses()}>
+        <Show when={localProps.indeterminate}>
+          <span
+    class="absolute top-1/2 left-1/2 w-2 h-0.5 bg-white -translate-x-1/2 -translate-y-1/2"
+    aria-hidden="true"
+  />
+        </Show>
+      </span>
+
+      <Show when={localProps.label}>
+        <span class="ml-2">{localProps.label}</span>
+      </Show>
+    </label>;
+};
+var Checkbox_default = Checkbox;
+
+// src/components/checkbox/index.ts
+var checkbox_default = Checkbox_default;
+
+export {
+  checkbox_default
+};