@pathscale/ui 0.0.1 → 0.0.3

package/dist/chunk/XD34JKSU.jsx

@@ -0,0 +1,201 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/menu/Menu.tsx
+import {
+  splitProps
+} from "solid-js";
+
+// src/components/menu/Menu.styles.ts
+var menuWrapper = cva("bg-white border border-gray-200 rounded shadow", {
+  variants: {
+    inline: {
+      true: "flex space-x-4",
+      false: "block"
+    }
+  },
+  defaultVariants: {
+    inline: false
+  }
+});
+var listWrapper = cva("px-4 py-2", {
+  variants: {
+    label: {
+      true: "pt-6",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    label: false
+  }
+});
+var itemVariants = cva(
+  "px-4 py-2 cursor-pointer select-none transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-blue-100 font-semibold",
+        false: "hover:bg-blue-500"
+      },
+      expanded: {
+        true: "bg-gray-50 text-black",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed text-gray-700",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        active: true,
+        expanded: true,
+        class: "bg-blue-200"
+      }
+    ],
+    defaultVariants: {
+      active: false,
+      expanded: false,
+      disabled: false
+    }
+  }
+);
+var itemDetailWrapper = cva(
+  "ml-4 border-l border-gray-200 mt-1 pl-2"
+);
+
+// src/components/menu/Menu.tsx
+var Menu = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    ["class", "className", "children", "inline"],
+    Object.keys(menuWrapper.variantKeys ?? {})
+  );
+  return <div
+    class={classes(
+      menuWrapper({ inline: !!variantProps.inline }),
+      local.class,
+      local.className
+    )}
+    {...otherProps}
+  >
+      {local.children}
+    </div>;
+};
+var Menu_default = Menu;
+
+// src/components/menu/MenuList.tsx
+import {
+  splitProps as splitProps2,
+  Show
+} from "solid-js";
+var MenuList = (props) => {
+  const [local, variantProps, otherProps] = splitProps2(
+    props,
+    ["class", "children", "label"],
+    Object.keys(listWrapper.variantKeys ?? {})
+  );
+  return <div
+    class={classes(
+      listWrapper({ label: !!local.label }),
+      local.class
+    )}
+    {...otherProps}
+  >
+        <Show when={local.label}>
+          <div class="px-4 pb-2 font-medium text-gray-700">{local.label}</div>
+        </Show>
+        <div class="flex flex-col">{local.children}</div>
+      </div>;
+};
+var MenuList_default = MenuList;
+
+// src/components/menu/MenuItem.tsx
+import {
+  splitProps as splitProps3,
+  Show as Show2,
+  createSignal,
+  createMemo
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+var MenuItem = (props) => {
+  const [local, variantProps, rest] = splitProps3(
+    props,
+    [
+      "class",
+      "className",
+      "label",
+      "active",
+      "expanded",
+      "disabled",
+      "tag",
+      "to",
+      "target",
+      "children"
+    ],
+    Object.keys(itemVariants.variantKeys ?? {})
+  );
+  const hasChildren = createMemo(() => !!local.children);
+  const isControlled = createMemo(() => local.expanded !== void 0);
+  const [internalExpanded, setInternalExpanded] = createSignal(false);
+  const isExpanded = createMemo(
+    () => isControlled() ? !!local.expanded : internalExpanded()
+  );
+  const toggleExpand = () => {
+    if (!isControlled() && hasChildren() && !local.disabled) {
+      setInternalExpanded((prev) => !prev);
+    }
+  };
+  const onKeyDown = (e) => {
+    if (local.disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggleExpand();
+    }
+  };
+  const tagName = local.to ? "a" : local.tag ?? "div";
+  const focusableProps = !local.to && !local.disabled ? { tabIndex: 0 } : {};
+  return <Dynamic
+    component={tagName}
+    class={classes(local.class, local.className, "w-full")}
+    href={local.to}
+    target={local.target}
+    aria-disabled={local.disabled}
+    onClick={toggleExpand}
+    onKeyDown={onKeyDown}
+    {...focusableProps}
+    {...rest}
+  >
+      <div
+    class={itemVariants({
+      active: !!local.active,
+      expanded: isExpanded(),
+      disabled: !!local.disabled
+    })}
+  >
+        <div class="flex items-center justify-between">
+          <span>{local.label}</span>
+          <Show2 when={hasChildren()}>
+            <span class="ml-2 text-gray-500">
+              {isExpanded() ? "\u25BE" : "\u25B8"}
+            </span>
+          </Show2>
+        </div>
+      </div>
+
+      <Show2 when={isExpanded()}>
+        <div class={itemDetailWrapper()}>
+          {local.children}
+        </div>
+      </Show2>
+    </Dynamic>;
+};
+var MenuItem_default = MenuItem;
+
+export {
+  Menu_default,
+  MenuList_default,
+  MenuItem_default
+};

package/dist/chunk/{GA2HCFRS.jsx → YAQK2KFY.jsx}

@@ -1,17 +1,7 @@
-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(
   [
@@ -199,30 +189,6 @@ var buttonVariants = cva(
   }
 );
 
-// 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
+  buttonVariants
 };

package/dist/chunk/YMO6RPS6.js

@@ -0,0 +1,26 @@
+import { buttonVariants } from './TFLJI242.js';
+import { PolymorphicButton_default } from './G6RG4LR7.js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps, splitProps, createMemo } from 'solid-js';
+
+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 };

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

@@ -1,42 +1,7 @@
-import { Component } from 'solid-js';
+import { P as Progress } from '../../Progress-gN0xqhAF.js';
+import 'solid-js';
+import '../../classes-B_S9K-9I.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 };
+export { Progress as default };

package/dist/components/Progress/index.js

@@ -1,278 +1 @@
-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 };
+export { progress_default as default } from '../../chunk/GMIXRYN3.js';