@pathscale/ui 0.0.4 → 0.0.6

package/dist/{Checkbox-BjaweaOH.d.ts → Checkbox-CzeDsQLA.d.ts}

@@ -14,26 +14,18 @@ declare const checkboxVariants: {
             warning: string;
             danger: string;
         };
-        checked: {
-            true: string;
-            false: string;
-        };
-        indeterminate: {
-            true: string;
-            false: string;
-        };
     }> & ClassProps) | undefined): string;
-    variantKeys: ("size" | "color" | "checked" | "indeterminate")[];
+    variantKeys: ("size" | "color")[];
 };
 
 type CheckboxProps = VariantProps<typeof checkboxVariants> & ClassProps & Omit<ComponentProps<"input">, "onChange" | "onFocus" | "onBlur"> & {
     indeterminate?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
     label?: JSX.Element;
     onChange?: JSX.EventHandlerUnion<HTMLInputElement, Event>;
     onFocus?: JSX.EventHandlerUnion<HTMLInputElement, FocusEvent>;
     onBlur?: JSX.EventHandlerUnion<HTMLInputElement, FocusEvent>;
-    "aria-label"?: string;
-    "aria-describedby"?: string;
 };
 declare const Checkbox: Component<CheckboxProps>;
 

package/dist/{Input-BQbTzjIO.d.ts → Input-X4gwIB-F.d.ts}

@@ -20,8 +20,16 @@ declare const inputVariants: {
             true: string;
             false: string;
         };
+        hasLeftIcon: {
+            true: string;
+            false: string;
+        };
+        hasRightIcon: {
+            true: string;
+            false: string;
+        };
     }> & ClassProps) | undefined): string;
-    variantKeys: ("rounded" | "loading" | "color" | "expanded")[];
+    variantKeys: ("rounded" | "loading" | "color" | "expanded" | "hasLeftIcon" | "hasRightIcon")[];
 };
 
 type InputProps = Partial<VariantProps<typeof inputVariants> & ClassProps & ComponentProps<"input">> & {

package/dist/{Switch-3IXS_68H.d.ts → Switch-B6dN2G97.d.ts}

@@ -31,17 +31,17 @@ declare const checkVariants: {
             lg: string;
         };
         color: {
-            blue: string;
-            green: string;
-            red: string;
-            yellow: string;
+            primary: string;
+            success: string;
+            danger: string;
+            warning: string;
             gray: string;
         };
         passiveColor: {
-            blue: string;
-            green: string;
-            red: string;
-            yellow: string;
+            primary: string;
+            success: string;
+            danger: string;
+            warning: string;
             gray: string;
         };
         rounded: {
@@ -52,8 +52,12 @@ declare const checkVariants: {
             true: string;
             false: string;
         };
+        disabled: {
+            true: string;
+            false: string;
+        };
     }> & ClassProps) | undefined): string;
-    variantKeys: ("size" | "rounded" | "outlined" | "color" | "passiveColor")[];
+    variantKeys: ("size" | "rounded" | "outlined" | "color" | "disabled" | "passiveColor")[];
 };
 
 type SwitchProps = {

package/dist/chunk/{4TWLQ3IA.js → 5KABSQPM.js}

@@ -1,5 +1,5 @@
 import { cva } from './HKS7ET6T.js';
-import { template, spread, insert, createComponent, effect, className } from 'solid-js/web';
+import { template, spread, insert, createComponent, memo, effect, className } from 'solid-js/web';
 import { splitProps, Show } from 'solid-js';
 
 // src/components/tooltip/Tooltip.styles.ts
@@ -64,6 +64,7 @@ var tooltipVariants = cva(
 // src/components/tooltip/Tooltip.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<span class="relative inline-block group">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div class=block>`);
 var Tooltip = (props) => {
   const [local, variantProps, otherProps] = splitProps(props, ["label", "delay", "always", "children"], ["type", "size", "position", "rounded", "dashed", "multilined", "animated"]);
   return (() => {
@@ -77,7 +78,14 @@ var Tooltip = (props) => {
       get children() {
         var _el$2 = _tmpl$();
         _el$2.style.setProperty("pointer-events", "none");
-        insert(_el$2, () => local.label);
+        insert(_el$2, (() => {
+          var _c$ = memo(() => !!variantProps.multilined);
+          return () => _c$() ? local.label.split("\n").map((line, index) => (() => {
+            var _el$3 = _tmpl$3();
+            insert(_el$3, line);
+            return _el$3;
+          })()) : 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$);

package/dist/chunk/{GLEAR2TS.jsx → 5R7S7TXL.jsx}

@@ -21,7 +21,7 @@ var switchVariants = cva(
         lg: "text-lg"
       },
       disabled: {
-        true: "opacity-50 cursor-not-allowed",
+        true: "opacity-50",
         false: ""
       },
       rounded: {
@@ -44,7 +44,7 @@ var switchVariants = cva(
 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"
+    "after:content-[''] after:absolute after:bg-white after:transition-transform after:duration-700 after:ease-in-out after:shadow-sm"
   ].join(" "),
   {
     variants: {
@@ -54,37 +54,52 @@ var checkVariants = cva(
         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"
+        primary: "peer-checked:bg-blue-500",
+        success: "peer-checked:bg-green-500",
+        danger: "peer-checked:bg-red-500",
+        warning: "peer-checked:bg-yellow-400",
+        gray: "peer-checked:bg-gray-400"
       },
       passiveColor: {
-        blue: "bg-blue-200",
-        green: "bg-green-200",
-        red: "bg-red-200",
-        yellow: "bg-yellow-200",
-        gray: "bg-gray-300"
+        primary: "bg-blue-500",
+        success: "bg-green-500",
+        danger: "bg-red-500",
+        warning: "bg-yellow-400",
+        gray: "bg-gray-400"
       },
       rounded: {
         true: "rounded-full after:rounded-full",
         false: "rounded-md after:rounded-sm"
       },
       outlined: {
-        true: "ring-2 ring-inset ring-white",
+        true: "bg-transparent ring border-current",
+        false: ""
+      },
+      disabled: {
+        true: "bg-gray-200 border border-gray-300 after:bg-gray-100",
         false: ""
       }
     },
     defaultVariants: {
       size: "md",
-      color: "blue",
+      color: "primary",
       passiveColor: "gray",
       rounded: true,
       outlined: false
     }
   }
 );
+var switchLabelClass = cva("control-label", {
+  variants: {
+    disabled: {
+      true: "text-gray-400 dark:text-gray-500",
+      false: "text-gray-800 dark:text-gray-200"
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
 
 // src/components/switch/Switch.tsx
 var Switch = (props) => {
@@ -101,7 +116,7 @@ var Switch = (props) => {
       "aria-label",
       "aria-describedby"
     ],
-    ["size", "rounded", "outlined", "color", "passiveColor"]
+    ["size", "rounded", "outlined", "color", "passiveColor", "disabled"]
   );
   const isControlled = localProps.checked !== void 0;
   const [internalChecked, setInternalChecked] = createSignal(
@@ -117,10 +132,12 @@ var Switch = (props) => {
       color: variantProps.color,
       passiveColor: variantProps.passiveColor,
       rounded: variantProps.rounded,
-      outlined: variantProps.outlined
+      outlined: variantProps.outlined,
+      disabled: localProps.disabled
     })
   );
   const handleChange = (e) => {
+    if (localProps.disabled) return;
     const next = e.currentTarget.checked;
     untrack(() => {
       if (!isControlled) setInternalChecked(next);
@@ -147,7 +164,9 @@ var Switch = (props) => {
   />
 
       <span class={checkClasses()} />
-      <span class="control-label">{localProps.children}</span>
+      <span class={switchLabelClass({ disabled: localProps.disabled })}>
+        {localProps.children}
+      </span>
     </label>;
 };
 var Switch_default = Switch;

package/dist/chunk/{P2L6LFLS.js → 6B7HOWQD.js}

@@ -13,7 +13,7 @@ var switchVariants = cva(
         lg: "text-lg"
       },
       disabled: {
-        true: "opacity-50 cursor-not-allowed",
+        true: "opacity-50",
         false: ""
       },
       rounded: {
@@ -36,7 +36,7 @@ var switchVariants = cva(
 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"
+    "after:content-[''] after:absolute after:bg-white after:transition-transform after:duration-700 after:ease-in-out after:shadow-sm"
   ].join(" "),
   {
     variants: {
@@ -46,42 +46,57 @@ var checkVariants = cva(
         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"
+        primary: "peer-checked:bg-blue-500",
+        success: "peer-checked:bg-green-500",
+        danger: "peer-checked:bg-red-500",
+        warning: "peer-checked:bg-yellow-400",
+        gray: "peer-checked:bg-gray-400"
       },
       passiveColor: {
-        blue: "bg-blue-200",
-        green: "bg-green-200",
-        red: "bg-red-200",
-        yellow: "bg-yellow-200",
-        gray: "bg-gray-300"
+        primary: "bg-blue-500",
+        success: "bg-green-500",
+        danger: "bg-red-500",
+        warning: "bg-yellow-400",
+        gray: "bg-gray-400"
       },
       rounded: {
         true: "rounded-full after:rounded-full",
         false: "rounded-md after:rounded-sm"
       },
       outlined: {
-        true: "ring-2 ring-inset ring-white",
+        true: "bg-transparent ring border-current",
+        false: ""
+      },
+      disabled: {
+        true: "bg-gray-200 border border-gray-300 after:bg-gray-100",
         false: ""
       }
     },
     defaultVariants: {
       size: "md",
-      color: "blue",
+      color: "primary",
       passiveColor: "gray",
       rounded: true,
       outlined: false
     }
   }
 );
+var switchLabelClass = cva("control-label", {
+  variants: {
+    disabled: {
+      true: "text-gray-400 dark:text-gray-500",
+      false: "text-gray-800 dark:text-gray-200"
+    }
+  },
+  defaultVariants: {
+    disabled: 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 _tmpl$ = /* @__PURE__ */ template(`<label role=switch><input type=checkbox class="sr-only peer"aria-hidden=true><span></span><span>`);
 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 [localProps, variantProps, otherProps] = splitProps(props, ["children", "checked", "defaultChecked", "onChange", "name", "required", "disabled", "aria-label", "aria-describedby"], ["size", "rounded", "outlined", "color", "passiveColor", "disabled"]);
   const isControlled = localProps.checked !== void 0;
   const [internalChecked, setInternalChecked] = createSignal(localProps.defaultChecked ?? false);
   const checkedValue = createMemo(() => untrack(() => isControlled ? localProps.checked : internalChecked()));
@@ -91,9 +106,11 @@ var Switch = (props) => {
     color: variantProps.color,
     passiveColor: variantProps.passiveColor,
     rounded: variantProps.rounded,
-    outlined: variantProps.outlined
+    outlined: variantProps.outlined,
+    disabled: localProps.disabled
   }));
   const handleChange = (e) => {
+    if (localProps.disabled) return;
     const next = e.currentTarget.checked;
     untrack(() => {
       if (!isControlled) setInternalChecked(next);
@@ -119,19 +136,23 @@ var Switch = (props) => {
     }, 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();
+      var _v$ = switchClasses(), _v$2 = checkedValue(), _v$3 = localProps["aria-label"], _v$4 = localProps["aria-describedby"], _v$5 = checkClasses(), _v$6 = switchLabelClass({
+        disabled: localProps.disabled
+      });
       _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);
+      _v$6 !== _p$.n && className(_el$4, _p$.n = _v$6);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
-      i: void 0
+      i: void 0,
+      n: void 0
     });
     return _el$;
   })();

package/dist/chunk/DGI3XY32.jsx

@@ -0,0 +1,157 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/input/Input.tsx
+import {
+  createSignal,
+  mergeProps,
+  Show as Show2,
+  splitProps
+} from "solid-js";
+
+// src/components/input/Input.styles.ts
+var inputWrapperClass = "relative flex items-center";
+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: ""
+      },
+      hasLeftIcon: {
+        true: "pl-10",
+        false: "pl-4"
+      },
+      hasRightIcon: {
+        true: "pr-10",
+        false: "pr-4"
+      }
+    },
+    defaultVariants: {
+      color: void 0,
+      rounded: false,
+      expanded: true,
+      loading: false,
+      hasLeftIcon: false,
+      hasRightIcon: false
+    }
+  }
+);
+var iconLeftClass = "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400";
+var iconRightClass = "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400";
+var iconButtonClass = "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500";
+
+// src/components/input/EyeIcon.tsx
+import { Show } from "solid-js";
+var EyeIcon = (props) => {
+  return <Show when={props.invisible} fallback={<EyeOpen />}>
+      <EyeInvisible />
+    </Show>;
+};
+var EyeInvisible = () => <svg
+  viewBox="64 64 896 896"
+  tabIndex="-1"
+  width="1em"
+  height="1em"
+  fill="currentColor"
+  aria-hidden="true"
+>
+    <path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z" />
+    <path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z" />
+  </svg>;
+var EyeOpen = () => <svg
+  viewBox="64 64 896 896"
+  tabIndex="-1"
+  width="1em"
+  height="1em"
+  fill="currentColor"
+  aria-hidden="true"
+>
+    <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" />
+  </svg>;
+var EyeIcon_default = EyeIcon;
+
+// 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",
+      "value",
+      "onInput",
+      "placeholder",
+      "name"
+    ],
+    ["color", "rounded", "expanded", "loading", "hasLeftIcon", "hasRightIcon"]
+  );
+  const [showPassword, setShowPassword] = createSignal(false);
+  const resolvedType = () => localProps.passwordReveal && showPassword() ? "text" : localProps.type ?? "text";
+  const inputClass = inputVariants({
+    ...variantProps,
+    hasLeftIcon: !!localProps.leftIcon,
+    hasRightIcon: !!(localProps.rightIcon || localProps.passwordReveal),
+    class: localProps.class
+  });
+  return <div class={inputWrapperClass}>
+      <Show2 when={localProps.leftIcon}>
+        <span class={iconLeftClass}>{localProps.leftIcon}</span>
+      </Show2>
+
+      <input
+    type={resolvedType()}
+    class={inputClass}
+    aria-invalid={variantProps.color === "danger" ? "true" : void 0}
+    value={localProps.value}
+    onInput={localProps.onInput}
+    placeholder={localProps.placeholder}
+    name={localProps.name}
+  />
+
+      <Show2 when={localProps.passwordReveal && !localProps.rightIcon}>
+        <button
+    type="button"
+    onClick={() => setShowPassword((p) => !p)}
+    class={iconButtonClass}
+  >
+          <EyeIcon_default invisible={showPassword()} />
+        </button>
+      </Show2>
+
+      <Show2 when={localProps.rightIcon && !localProps.passwordReveal}>
+        <span class={iconRightClass}>{localProps.rightIcon}</span>
+      </Show2>
+    </div>;
+};
+var Input_default = Input;
+
+// src/components/input/index.ts
+var input_default = Input_default;
+
+export {
+  EyeIcon_default,
+  input_default
+};