@pathscale/ui 0.0.1

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

@@ -0,0 +1,72 @@
+import { JSX, Component } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from '../../classes-B_S9K-9I.js';
+
+declare const switchVariants: {
+    (props?: (ConfigVariants<{
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+        rounded: {
+            true: string;
+            false: string;
+        };
+        outlined: {
+            true: string;
+            false: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "disabled" | "rounded" | "outlined")[];
+};
+declare const checkVariants: {
+    (props?: (ConfigVariants<{
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        color: {
+            blue: string;
+            green: string;
+            red: string;
+            yellow: string;
+            gray: string;
+        };
+        passiveColor: {
+            blue: string;
+            green: string;
+            red: string;
+            yellow: string;
+            gray: string;
+        };
+        rounded: {
+            true: string;
+            false: string;
+        };
+        outlined: {
+            true: string;
+            false: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "rounded" | "outlined" | "color" | "passiveColor")[];
+};
+
+type SwitchProps = {
+    children?: JSX.Element;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+} & VariantProps<typeof switchVariants> & VariantProps<typeof checkVariants> & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "onChange">;
+declare const Switch: Component<SwitchProps>;
+
+export { type SwitchProps, Switch as default };

package/dist/components/switch/index.js

@@ -0,0 +1,144 @@
+import { cva } from '../../chunk/HKS7ET6T.js';
+import { template, spread, mergeProps, insert, effect, className, setAttribute } from 'solid-js/web';
+import { splitProps, createSignal, createMemo, untrack } from 'solid-js';
+
+// src/components/switch/Switch.styles.ts
+var switchVariants = cva(
+  "switch inline-flex items-center gap-2 select-none",
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      },
+      rounded: {
+        true: "",
+        false: ""
+      },
+      outlined: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      rounded: true,
+      outlined: false
+    }
+  }
+);
+var checkVariants = cva(
+  [
+    "relative transition-colors duration-200",
+    "after:content-[''] after:absolute after:bg-white after:transition-transform after:duration-700 after:ease-in-out"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "w-8 h-4 after:w-3 after:h-3 after:left-0.5 after:top-0.5 peer-checked:after:translate-x-4",
+        md: "w-10 h-6 after:w-4 after:h-4 after:left-1 after:top-1 peer-checked:after:translate-x-4",
+        lg: "w-12 h-7 after:w-5 after:h-5 after:left-1 after:top-1 peer-checked:after:translate-x-5"
+      },
+      color: {
+        blue: "peer-checked:bg-blue-500",
+        green: "peer-checked:bg-green-500",
+        red: "peer-checked:bg-red-500",
+        yellow: "peer-checked:bg-yellow-400",
+        gray: "peer-checked:bg-gray-500"
+      },
+      passiveColor: {
+        blue: "bg-blue-200",
+        green: "bg-green-200",
+        red: "bg-red-200",
+        yellow: "bg-yellow-200",
+        gray: "bg-gray-300"
+      },
+      rounded: {
+        true: "rounded-full after:rounded-full",
+        false: "rounded-md after:rounded-sm"
+      },
+      outlined: {
+        true: "ring-2 ring-inset ring-white",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "blue",
+      passiveColor: "gray",
+      rounded: true,
+      outlined: false
+    }
+  }
+);
+
+// src/components/switch/Switch.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<label role=switch><input type=checkbox class="sr-only peer"aria-hidden=true><span></span><span class=control-label>`);
+var Switch = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(props, ["children", "checked", "defaultChecked", "onChange", "name", "required", "disabled", "aria-label", "aria-describedby"], ["size", "rounded", "outlined", "color", "passiveColor"]);
+  const isControlled = localProps.checked !== void 0;
+  const [internalChecked, setInternalChecked] = createSignal(localProps.defaultChecked ?? false);
+  const checkedValue = createMemo(() => untrack(() => isControlled ? localProps.checked : internalChecked()));
+  const switchClasses = createMemo(() => switchVariants(variantProps));
+  const checkClasses = createMemo(() => checkVariants({
+    size: variantProps.size,
+    color: variantProps.color,
+    passiveColor: variantProps.passiveColor,
+    rounded: variantProps.rounded,
+    outlined: variantProps.outlined
+  }));
+  const handleChange = (e) => {
+    const next = e.currentTarget.checked;
+    untrack(() => {
+      if (!isControlled) setInternalChecked(next);
+      localProps.onChange?.(next);
+    });
+  };
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+    _el$2.addEventListener("change", handleChange);
+    spread(_el$2, mergeProps({
+      get checked() {
+        return checkedValue();
+      },
+      get name() {
+        return localProps.name;
+      },
+      get required() {
+        return localProps.required;
+      },
+      get disabled() {
+        return localProps.disabled;
+      }
+    }, otherProps), false, false);
+    insert(_el$4, () => localProps.children);
+    effect((_p$) => {
+      var _v$ = switchClasses(), _v$2 = checkedValue(), _v$3 = localProps["aria-label"], _v$4 = localProps["aria-describedby"], _v$5 = checkClasses();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$, "aria-checked", _p$.t = _v$2);
+      _v$3 !== _p$.a && setAttribute(_el$, "aria-label", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$, "aria-describedby", _p$.o = _v$4);
+      _v$5 !== _p$.i && className(_el$3, _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    });
+    return _el$;
+  })();
+};
+var Switch_default = Switch;
+
+// src/components/switch/index.ts
+var switch_default = Switch_default;
+
+export { switch_default as default };

package/dist/components/switch/index.jsx

@@ -0,0 +1,159 @@
+import {
+  cva
+} from "../../chunk/P7WPLZNA.jsx";
+
+// src/components/switch/Switch.tsx
+import {
+  createSignal,
+  splitProps,
+  createMemo,
+  untrack
+} from "solid-js";
+
+// src/components/switch/Switch.styles.ts
+var switchVariants = cva(
+  "switch inline-flex items-center gap-2 select-none",
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      },
+      rounded: {
+        true: "",
+        false: ""
+      },
+      outlined: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      rounded: true,
+      outlined: false
+    }
+  }
+);
+var checkVariants = cva(
+  [
+    "relative transition-colors duration-200",
+    "after:content-[''] after:absolute after:bg-white after:transition-transform after:duration-700 after:ease-in-out"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "w-8 h-4 after:w-3 after:h-3 after:left-0.5 after:top-0.5 peer-checked:after:translate-x-4",
+        md: "w-10 h-6 after:w-4 after:h-4 after:left-1 after:top-1 peer-checked:after:translate-x-4",
+        lg: "w-12 h-7 after:w-5 after:h-5 after:left-1 after:top-1 peer-checked:after:translate-x-5"
+      },
+      color: {
+        blue: "peer-checked:bg-blue-500",
+        green: "peer-checked:bg-green-500",
+        red: "peer-checked:bg-red-500",
+        yellow: "peer-checked:bg-yellow-400",
+        gray: "peer-checked:bg-gray-500"
+      },
+      passiveColor: {
+        blue: "bg-blue-200",
+        green: "bg-green-200",
+        red: "bg-red-200",
+        yellow: "bg-yellow-200",
+        gray: "bg-gray-300"
+      },
+      rounded: {
+        true: "rounded-full after:rounded-full",
+        false: "rounded-md after:rounded-sm"
+      },
+      outlined: {
+        true: "ring-2 ring-inset ring-white",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "blue",
+      passiveColor: "gray",
+      rounded: true,
+      outlined: false
+    }
+  }
+);
+
+// src/components/switch/Switch.tsx
+var Switch = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(
+    props,
+    [
+      "children",
+      "checked",
+      "defaultChecked",
+      "onChange",
+      "name",
+      "required",
+      "disabled",
+      "aria-label",
+      "aria-describedby"
+    ],
+    ["size", "rounded", "outlined", "color", "passiveColor"]
+  );
+  const isControlled = localProps.checked !== void 0;
+  const [internalChecked, setInternalChecked] = createSignal(
+    localProps.defaultChecked ?? false
+  );
+  const checkedValue = createMemo(
+    () => untrack(() => isControlled ? localProps.checked : internalChecked())
+  );
+  const switchClasses = createMemo(() => switchVariants(variantProps));
+  const checkClasses = createMemo(
+    () => checkVariants({
+      size: variantProps.size,
+      color: variantProps.color,
+      passiveColor: variantProps.passiveColor,
+      rounded: variantProps.rounded,
+      outlined: variantProps.outlined
+    })
+  );
+  const handleChange = (e) => {
+    const next = e.currentTarget.checked;
+    untrack(() => {
+      if (!isControlled) setInternalChecked(next);
+      localProps.onChange?.(next);
+    });
+  };
+  return <label
+    class={switchClasses()}
+    role="switch"
+    aria-checked={checkedValue()}
+    aria-label={localProps["aria-label"]}
+    aria-describedby={localProps["aria-describedby"]}
+  >
+      <input
+    type="checkbox"
+    class="sr-only peer"
+    checked={checkedValue()}
+    onChange={handleChange}
+    name={localProps.name}
+    required={localProps.required}
+    disabled={localProps.disabled}
+    aria-hidden="true"
+    {...otherProps}
+  />
+
+      <span class={checkClasses()} />
+      <span class="control-label">{localProps.children}</span>
+    </label>;
+};
+var Switch_default = Switch;
+
+// src/components/switch/index.ts
+var switch_default = Switch_default;
+export {
+  switch_default as default
+};

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

@@ -0,0 +1,42 @@
+import { JSX, Component } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from '../../classes-B_S9K-9I.js';
+
+declare const tabsNavVariants: {
+    (props?: (ConfigVariants<{
+        type: {
+            basic: string;
+            boxed: string;
+            toggle: string;
+            "toggle-rounded": string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        alignment: {
+            left: string;
+            center: string;
+            right: string;
+        };
+        expanded: {
+            true: string;
+            false: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("type" | "size" | "alignment" | "expanded")[];
+};
+
+type TabItem = {
+    label: string;
+    content: JSX.Element;
+    disabled?: boolean;
+};
+type TabsProps = {
+    items: TabItem[];
+    value?: number;
+    onChange?: (index: number) => void;
+} & VariantProps<typeof tabsNavVariants>;
+declare const Tabs: Component<TabsProps>;
+
+export { type TabsProps, Tabs as default };

package/dist/components/tabs/index.js

@@ -0,0 +1,166 @@
+import { cva } from '../../chunk/HKS7ET6T.js';
+import { delegateEvents, template, spread, insert, createComponent, effect, className } from 'solid-js/web';
+import { splitProps, createSignal, createMemo, For, Show } 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 _tmpl$ = /* @__PURE__ */ template(`<div><nav><ul class="flex gap-0"></ul></nav><div class=pt-4>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<li><button>`);
+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 (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    spread(_el$, otherProps, false, true);
+    insert(_el$3, createComponent(For, {
+      get each() {
+        return local.items;
+      },
+      children: (tab, i) => (() => {
+        var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild;
+        _el$6.$$click = () => handleChange(i());
+        insert(_el$6, () => tab.label);
+        effect(() => className(_el$6, tabTriggerVariants({
+          type: variantProps.type ?? "basic",
+          size: variantProps.size ?? "md",
+          active: i() === active(),
+          disabled: tab.disabled
+        })));
+        return _el$5;
+      })()
+    }));
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return local.items[active()];
+      },
+      get children() {
+        return local.items[active()]?.content;
+      }
+    }));
+    effect(() => className(_el$2, tabsNavVariants(variantProps)));
+    return _el$;
+  })();
+};
+var Tabs_default = Tabs;
+delegateEvents(["click"]);
+
+// src/components/tabs/index.ts
+var tabs_default = Tabs_default;
+
+export { tabs_default as default };