@pathscale/ui 0.0.1

package/dist/components/tabs/index.jsx

@@ -0,0 +1,174 @@
+import {
+  cva
+} from "../../chunk/P7WPLZNA.jsx";
+
+// src/components/tabs/Tabs.tsx
+import {
+  createSignal,
+  splitProps,
+  For,
+  Show,
+  createMemo
+} from "solid-js";
+
+// src/components/tabs/Tabs.styles.ts
+var tabsNavVariants = cva(
+  "flex text-sm font-medium text-gray-600 dark:text-gray-300",
+  {
+    variants: {
+      type: {
+        basic: "",
+        boxed: "flex gap-2",
+        toggle: "inline-flex rounded-md p-1",
+        "toggle-rounded": "inline-flex rounded-full p-1"
+      },
+      size: {
+        sm: "text-xs gap-1",
+        md: "text-sm gap-2",
+        lg: "text-base gap-3"
+      },
+      alignment: {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end"
+      },
+      expanded: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      type: "basic",
+      size: "md",
+      alignment: "left",
+      expanded: false
+    }
+  }
+);
+var tabTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap font-medium text-sm transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "text-xs px-2 py-1",
+        md: "text-sm px-3 py-2",
+        lg: "text-base px-4 py-3"
+      },
+      type: {
+        basic: "border-b-2 transition-colors hover:text-blue-600",
+        boxed: "rounded-t px-4 py-2 hover:text-blue-600",
+        toggle: "border -ml-px px-4 py-2 transition-colors first:ml-0 first:rounded-l-md last:rounded-r-md",
+        "toggle-rounded": "border -ml-px first:ml-0 first:rounded-l-full last:rounded-r-full transition-colors"
+      },
+      active: {
+        true: "",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        type: "basic",
+        active: true,
+        class: "border-blue-600 text-blue-600"
+      },
+      {
+        type: "basic",
+        active: false,
+        class: "border-transparent text-gray-500 dark:text-gray-400"
+      },
+      {
+        type: "boxed",
+        active: true,
+        class: "border-x border-t border-b-0 border-gray-400 dark:border-gray-600 text-blue-600"
+      },
+      {
+        type: "boxed",
+        active: false,
+        class: "border-b border-transparent text-gray-500 dark:text-gray-400 hover:text-blue-600"
+      },
+      {
+        type: "toggle",
+        active: true,
+        class: "bg-blue-600 text-white border-blue-600"
+      },
+      {
+        type: "toggle",
+        active: false,
+        class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
+      },
+      {
+        type: "toggle-rounded",
+        active: true,
+        class: "bg-blue-600 text-white border-blue-600"
+      },
+      {
+        type: "toggle-rounded",
+        active: false,
+        class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
+      }
+    ],
+    defaultVariants: {
+      active: false,
+      disabled: false
+    }
+  }
+);
+
+// src/components/tabs/Tabs.tsx
+var Tabs = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    ["items", "value", "onChange"],
+    ["size", "type", "alignment", "expanded"]
+  );
+  const [internalActive, setInternalActive] = createSignal(local.value ?? 0);
+  const isControlled = () => local.value !== void 0;
+  const active = createMemo(
+    () => isControlled() ? local.value : internalActive()
+  );
+  const handleChange = (i) => {
+    const item = local.items[i];
+    if (!item || item.disabled) return;
+    if (!isControlled()) {
+      setInternalActive(i);
+    }
+    local.onChange?.(i);
+  };
+  return <div {...otherProps}>
+      <nav class={tabsNavVariants(variantProps)}>
+        <ul class="flex gap-0">
+          <For each={local.items}>
+            {(tab, i) => <li>
+                <button
+    class={tabTriggerVariants({
+      type: variantProps.type ?? "basic",
+      size: variantProps.size ?? "md",
+      active: i() === active(),
+      disabled: tab.disabled
+    })}
+    onClick={() => handleChange(i())}
+  >
+                  {tab.label}
+                </button>
+              </li>}
+          </For>
+        </ul>
+      </nav>
+      <div class="pt-4">
+        <Show when={local.items[active()]}>
+          {local.items[active()]?.content}
+        </Show>
+      </div>
+    </div>;
+};
+var Tabs_default = Tabs;
+
+// src/components/tabs/index.ts
+var tabs_default = Tabs_default;
+export {
+  tabs_default as default
+};

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

@@ -0,0 +1,42 @@
+import { ComponentProps, JSX, Component } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from '../../classes-B_S9K-9I.js';
+
+declare const tagVariants: {
+    (props?: (ConfigVariants<{
+        size: {
+            normal: string;
+            medium: string;
+            large: string;
+        };
+        type: {
+            primary: string;
+            info: string;
+            success: string;
+            warning: string;
+            danger: string;
+            dark: string;
+            light: string;
+        };
+        rounded: {
+            true: string;
+            false: string;
+        };
+        closable: {
+            true: string;
+            false: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "type" | "rounded" | "closable")[];
+};
+
+type TagProps = VariantProps<typeof tagVariants> & ClassProps & ComponentProps<"span"> & {
+    closable?: boolean;
+    attached?: boolean;
+    ariaCloseLabel?: string;
+    onClose?: (e: MouseEvent) => void;
+    closeIcon?: JSX.Element;
+    children?: JSX.Element;
+};
+declare const Tag: Component<TagProps>;
+
+export { type TagProps, Tag as default };

package/dist/components/tag/index.js

@@ -0,0 +1,115 @@
+import { cva, classes } from '../../chunk/HKS7ET6T.js';
+import { delegateEvents, template, spread, mergeProps, insert, createComponent, effect, setAttribute, className } from 'solid-js/web';
+import { splitProps, createMemo, untrack, Show } 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 _tmpl$ = /* @__PURE__ */ template(`<button type=button class="ml-2 text-xs text-white hover:opacity-80">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div role=group><span role=status><span class=truncate>`);
+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 (() => {
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return tagClasses();
+      }
+    }, otherProps), false, true);
+    insert(_el$3, () => localProps.children);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return isClosable();
+      },
+      get children() {
+        var _el$4 = _tmpl$();
+        _el$4.$$click = handleClose;
+        insert(_el$4, () => localProps.closeIcon ?? "\xD7");
+        effect(() => setAttribute(_el$4, "aria-label", localProps.ariaCloseLabel ?? "Remove tag"));
+        return _el$4;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isAttachedClosable();
+      },
+      get children() {
+        var _el$5 = _tmpl$2();
+        _el$5.$$click = handleClose;
+        insert(_el$5, () => localProps.closeIcon ?? "\xD7");
+        effect((_p$) => {
+          var _v$ = localProps.ariaCloseLabel ?? "Remove tag", _v$2 = attachedButtonClasses();
+          _v$ !== _p$.e && setAttribute(_el$5, "aria-label", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$5;
+      }
+    }), null);
+    effect(() => className(_el$, isAttachedClosable() ? "tags has-addons" : void 0));
+    return _el$;
+  })();
+};
+var Tag_default = Tag;
+delegateEvents(["click"]);
+
+// src/components/tag/index.ts
+var tag_default = Tag_default;
+
+export { tag_default as default };

package/dist/components/tag/index.jsx

@@ -0,0 +1,131 @@
+import {
+  classes,
+  cva
+} from "../../chunk/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 as default
+};

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

@@ -0,0 +1,8 @@
+import { T as Textarea } from '../../Textarea-Cpdk7m6S.js';
+export { a as TextareaProps } from '../../Textarea-Cpdk7m6S.js';
+import 'solid-js';
+import '../../classes-B_S9K-9I.js';
+
+
+
+export { Textarea as default };

package/dist/components/textarea/index.js

@@ -0,0 +1 @@
+export { textarea_default as default } from '../../chunk/EB7KXR65.js';

package/dist/components/textarea/index.jsx

@@ -0,0 +1,7 @@
+import {
+  textarea_default
+} from "../../chunk/WB6NEEQV.jsx";
+import "../../chunk/P7WPLZNA.jsx";
+export {
+  textarea_default as default
+};

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

@@ -0,0 +1,53 @@
+import { JSX, Component } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from '../../classes-B_S9K-9I.js';
+
+declare const tooltipVariants: {
+    (props?: (ConfigVariants<{
+        type: {
+            info: string;
+            success: string;
+            warning: string;
+            danger: string;
+            primary: string;
+            gray: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        rounded: {
+            true: string;
+            false: string;
+        };
+        dashed: {
+            true: string;
+            false: string;
+        };
+        multilined: {
+            true: string;
+            false: string;
+        };
+        animated: {
+            true: string;
+            false: string;
+        };
+        position: {
+            top: string;
+            bottom: string;
+            left: string;
+            right: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("type" | "size" | "rounded" | "dashed" | "multilined" | "animated" | "position")[];
+};
+
+type TooltipProps = {
+    label: string;
+    delay?: number;
+    always?: boolean;
+    children?: JSX.Element;
+} & VariantProps<typeof tooltipVariants> & JSX.HTMLAttributes<HTMLSpanElement>;
+declare const Tooltip: Component<TooltipProps>;
+
+export { type TooltipProps, Tooltip as default };

package/dist/components/tooltip/index.js

@@ -0,0 +1,103 @@
+import { cva } from '../../chunk/HKS7ET6T.js';
+import { template, spread, insert, createComponent, effect, className } from 'solid-js/web';
+import { splitProps, Show } from 'solid-js';
+
+// src/components/tooltip/Tooltip.styles.ts
+var tooltipVariants = cva(
+  [
+    "absolute z-10 px-3 py-1 text-white text-sm",
+    "opacity-0 group-hover:opacity-100",
+    "pointer-events-none transition-opacity duration-200",
+    "max-w-xs break-words",
+    "after:content-[''] after:absolute after:w-2 after:h-2 after:rotate-45 after:bg-inherit"
+  ].join(" "),
+  {
+    variants: {
+      type: {
+        info: "bg-blue-500",
+        success: "bg-green-500",
+        warning: "bg-yellow-500",
+        danger: "bg-red-500",
+        primary: "bg-indigo-500",
+        gray: "bg-gray-700"
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      rounded: {
+        true: "rounded",
+        false: "rounded-none"
+      },
+      dashed: {
+        true: "border border-white border-dashed",
+        false: ""
+      },
+      multilined: {
+        true: "whitespace-pre-wrap",
+        false: "whitespace-nowrap"
+      },
+      animated: {
+        true: "transition-opacity duration-300 ease-in-out",
+        false: ""
+      },
+      position: {
+        top: "bottom-full left-1/2 -translate-x-1/2 mb-1 after:top-full after:left-1/2 after:-translate-x-1/2 after:-mt-1",
+        bottom: "top-full left-1/2 -translate-x-1/2 mt-1 after:bottom-full after:left-1/2 after:-translate-x-1/2 after:-mb-1",
+        left: "right-full top-1/2 -translate-y-1/2 mr-1 after:left-full after:top-1/2 after:-translate-y-1/2 after:-ml-1",
+        right: "left-full top-1/2 -translate-y-1/2 ml-1 after:right-full after:top-1/2 after:-translate-y-1/2 after:-mr-1"
+      }
+    },
+    defaultVariants: {
+      type: "primary",
+      size: "md",
+      rounded: true,
+      dashed: false,
+      multilined: false,
+      animated: true,
+      position: "top"
+    }
+  }
+);
+
+// src/components/tooltip/Tooltip.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span class="relative inline-block group">`);
+var Tooltip = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["label", "delay", "always", "children"], ["type", "size", "position", "rounded", "dashed", "multilined", "animated"]);
+  return (() => {
+    var _el$ = _tmpl$2();
+    spread(_el$, otherProps, false, true);
+    insert(_el$, () => local.children, null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.label;
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        _el$2.style.setProperty("pointer-events", "none");
+        insert(_el$2, () => local.label);
+        effect((_p$) => {
+          var _v$ = tooltipVariants(variantProps), _v$2 = `${local.delay ?? 0}ms`, _v$3 = local.always ? 1 : void 0;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("transition-delay", _v$2) : _el$2.style.removeProperty("transition-delay"));
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("opacity", _v$3) : _el$2.style.removeProperty("opacity"));
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$2;
+      }
+    }), null);
+    return _el$;
+  })();
+};
+var Tooltip_default = Tooltip;
+
+// src/components/tooltip/index.ts
+var tooltip_default = Tooltip_default;
+
+export { tooltip_default as default };