@pathscale/ui 0.0.1

package/dist/components/tooltip/index.jsx

@@ -0,0 +1,99 @@
+import {
+  cva
+} from "../../chunk/P7WPLZNA.jsx";
+
+// src/components/tooltip/Tooltip.tsx
+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 Tooltip = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    ["label", "delay", "always", "children"],
+    ["type", "size", "position", "rounded", "dashed", "multilined", "animated"]
+  );
+  return <span class="relative inline-block group" {...otherProps}>
+      {local.children}
+      <Show when={local.label}>
+        <span
+    class={tooltipVariants(variantProps)}
+    style={{
+      "transition-delay": `${local.delay ?? 0}ms`,
+      opacity: local.always ? 1 : void 0,
+      "pointer-events": "none"
+    }}
+  >
+          {local.label}
+        </span>
+      </Show>
+    </span>;
+};
+var Tooltip_default = Tooltip;
+
+// src/components/tooltip/index.ts
+var tooltip_default = Tooltip_default;
+export {
+  tooltip_default as default
+};

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

@@ -0,0 +1,39 @@
+import { JSX, Component } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from '../../classes-B_S9K-9I.js';
+
+declare const uploadWrapperVariants: {
+    (props?: (ConfigVariants<{
+        style: {
+            boxed: string;
+            button: string;
+        };
+        color: {
+            primary: string;
+            success: string;
+            info: string;
+            warning: string;
+            danger: string;
+            gray: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("style" | "color" | "size")[];
+};
+
+type UploadProps = {
+    icon?: JSX.Element;
+    label?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    accept?: string;
+    dragDrop?: boolean;
+    name?: string;
+    onChange?: (files: File | File[]) => void;
+} & VariantProps<typeof uploadWrapperVariants> & JSX.InputHTMLAttributes<HTMLInputElement>;
+declare const Upload: Component<UploadProps>;
+
+export { type UploadProps, Upload as default };

package/dist/components/upload/index.js

@@ -0,0 +1,98 @@
+import { cva, classes } from '../../chunk/HKS7ET6T.js';
+import { template, className, spread, mergeProps, insert, createComponent, effect } from 'solid-js/web';
+import { splitProps, Show } from 'solid-js';
+
+// src/components/upload/Upload.styles.ts
+var uploadWrapperVariants = cva("", {
+  variants: {
+    style: {
+      boxed: "flex flex-col items-center justify-center border border-gray-300 rounded-md p-4 bg-white dark:bg-gray-800 text-gray-700 hover:text-gray-900 text-center",
+      button: "px-4 py-2 rounded inline-flex items-center gap-2 text-white transition-colors"
+    },
+    color: {
+      primary: "bg-blue-500 hover:bg-blue-600",
+      success: "bg-green-500 hover:bg-green-600",
+      info: "bg-sky-500 hover:bg-sky-600",
+      warning: "bg-yellow-500 hover:bg-yellow-600",
+      danger: "bg-red-500 hover:bg-red-600",
+      gray: ""
+      // usado solo en style="boxed"
+    },
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    style: "boxed",
+    color: "gray",
+    size: "md"
+  }
+});
+var fileInputClass = "absolute inset-0 w-full h-full opacity-0 cursor-pointer";
+var fileIconClass = "w-6 h-6";
+var fileLabelClass = "font-medium";
+
+// src/components/upload/Upload.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><label class="cursor-pointer relative w-full h-full"><input type=file><div><span>`);
+var Upload = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["icon", "label", "multiple", "disabled", "accept", "dragDrop", "name", "onChange"], ["style", "color", "size"]);
+  const handleChange = (e) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    const result = local.multiple ? Array.from(files) : files[0];
+    if (result) {
+      local.onChange?.(result);
+    }
+  };
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$6 = _el$4.firstChild;
+    _el$3.addEventListener("change", handleChange);
+    className(_el$3, fileInputClass);
+    spread(_el$3, mergeProps({
+      get name() {
+        return local.name;
+      },
+      get multiple() {
+        return local.multiple;
+      },
+      get accept() {
+        return local.accept;
+      },
+      get disabled() {
+        return local.disabled;
+      }
+    }, otherProps), false, false);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return local.icon;
+      },
+      get children() {
+        var _el$5 = _tmpl$();
+        className(_el$5, fileIconClass);
+        insert(_el$5, () => local.icon);
+        return _el$5;
+      }
+    }), _el$6);
+    className(_el$6, fileLabelClass);
+    insert(_el$6, () => local.label);
+    effect((_p$) => {
+      var _v$ = uploadWrapperVariants(variantProps), _v$2 = classes(variantProps.style === "boxed" ? "flex flex-col items-center justify-center gap-2" : "flex flex-row items-center justify-center gap-2");
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+var Upload_default = Upload;
+
+// src/components/upload/index.ts
+var upload_default = Upload_default;
+
+export { upload_default as default };

package/dist/components/upload/index.jsx

@@ -0,0 +1,109 @@
+import {
+  classes,
+  cva
+} from "../../chunk/P7WPLZNA.jsx";
+
+// src/components/upload/Upload.tsx
+import { splitProps, Show } from "solid-js";
+
+// src/components/upload/Upload.styles.ts
+var uploadWrapperVariants = cva("", {
+  variants: {
+    style: {
+      boxed: "flex flex-col items-center justify-center border border-gray-300 rounded-md p-4 bg-white dark:bg-gray-800 text-gray-700 hover:text-gray-900 text-center",
+      button: "px-4 py-2 rounded inline-flex items-center gap-2 text-white transition-colors"
+    },
+    color: {
+      primary: "bg-blue-500 hover:bg-blue-600",
+      success: "bg-green-500 hover:bg-green-600",
+      info: "bg-sky-500 hover:bg-sky-600",
+      warning: "bg-yellow-500 hover:bg-yellow-600",
+      danger: "bg-red-500 hover:bg-red-600",
+      gray: ""
+      // usado solo en style="boxed"
+    },
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    style: "boxed",
+    color: "gray",
+    size: "md"
+  }
+});
+var fileInputClass = "absolute inset-0 w-full h-full opacity-0 cursor-pointer";
+var fileIconClass = "w-6 h-6";
+var fileLabelClass = "font-medium";
+
+// src/components/upload/Upload.tsx
+var Upload = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    [
+      "icon",
+      "label",
+      "multiple",
+      "disabled",
+      "accept",
+      "dragDrop",
+      "name",
+      "onChange"
+    ],
+    ["style", "color", "size"]
+  );
+  const handleChange = (e) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    const result = local.multiple ? Array.from(files) : files[0];
+    if (result) {
+      local.onChange?.(result);
+    }
+  };
+  const handleDrop = (e) => {
+    if (!local.dragDrop) return;
+    e.preventDefault();
+    const files = e.dataTransfer?.files;
+    if (!files || files.length === 0) return;
+    const result = local.multiple ? Array.from(files) : files[0];
+    if (result) {
+      local.onChange?.(result);
+    }
+  };
+  const handleDragOver = (e) => {
+    if (local.dragDrop) e.preventDefault();
+  };
+  return <div class={uploadWrapperVariants(variantProps)}>
+      <label class="cursor-pointer relative w-full h-full">
+        <input
+    type="file"
+    class={fileInputClass}
+    name={local.name}
+    multiple={local.multiple}
+    accept={local.accept}
+    disabled={local.disabled}
+    onChange={handleChange}
+    {...otherProps}
+  />
+        <div
+    class={classes(
+      variantProps.style === "boxed" ? "flex flex-col items-center justify-center gap-2" : "flex flex-row items-center justify-center gap-2"
+    )}
+  >
+          <Show when={local.icon}>
+            <span class={fileIconClass}>{local.icon}</span>
+          </Show>
+          <span class={fileLabelClass}>{local.label}</span>
+        </div>
+      </label>
+    </div>;
+};
+var Upload_default = Upload;
+
+// src/components/upload/index.ts
+var upload_default = Upload_default;
+export {
+  upload_default as default
+};

package/dist/index.css

@@ -0,0 +1,73 @@
+/* src/styles/base/index.css */
+@layer base {
+  html {
+    scrollbar-color: var(--color-bg-tertiary) transparent;
+  }
+  body {
+    color: var(--color-fg-body);
+    background: var(--color-bg-body);
+    overflow-x: clip;
+    touch-action: manipulation;
+  }
+  *::selection {
+    color: var(--color-fg-inverse);
+    background: var(--color-bg-accent);
+  }
+}
+
+/* src/styles/themes/dark.css */
+@layer theme {
+  [data-theme=dark] {
+    --color-bg-body: var(--color-zinc-900);
+    --color-bg-inverse: var(--color-zinc-100);
+    --color-bg-primary: var(--color-zinc-800);
+    --color-bg-secondary: var(--color-zinc-700);
+    --color-bg-tertiary: var(--color-zinc-600);
+    --color-bg-accent: var(--color-sky-600);
+    --color-bg-positive: var(--color-emerald-700);
+    --color-bg-destructive: var(--color-rose-800);
+    --color-fg-body: var(--color-zinc-100);
+    --color-fg-inverse: var(--color-zinc-900);
+    --color-fg-primary: var(--color-zinc-200);
+    --color-fg-secondary: var(--color-zinc-300);
+    --color-fg-tertiary: var(--color-zinc-400);
+    --color-fg-accent: var(--color-sky-500);
+    --color-fg-positive: var(--color-emerald-600);
+    --color-fg-destructive: var(--color-rose-700);
+  }
+}
+@layer base {
+  [data-theme=dark] {
+    color-scheme: only dark;
+  }
+}
+
+/* src/styles/themes/light.css */
+@layer theme {
+  [data-theme=light] {
+    --color-bg-body: var(--color-zinc-50);
+    --color-bg-inverse: var(--color-zinc-900);
+    --color-bg-primary: var(--color-zinc-200);
+    --color-bg-secondary: var(--color-zinc-300);
+    --color-bg-tertiary: var(--color-zinc-400);
+    --color-bg-accent: var(--color-sky-600);
+    --color-bg-positive: var(--color-emerald-700);
+    --color-bg-destructive: var(--color-rose-700);
+    --color-fg-body: var(--color-zinc-900);
+    --color-fg-inverse: var(--color-zinc-100);
+    --color-fg-primary: var(--color-zinc-800);
+    --color-fg-secondary: var(--color-zinc-700);
+    --color-fg-tertiary: var(--color-zinc-600);
+    --color-fg-accent: var(--color-sky-700);
+    --color-fg-positive: var(--color-emerald-800);
+    --color-fg-destructive: var(--color-rose-800);
+  }
+}
+@layer base {
+  [data-theme=light] {
+    color-scheme: only light;
+  }
+}
+
+/* src/index.css */
+@theme { --color-light: var(--color-zinc-100); --color-dark: var(--color-zinc-900); --color-bg-body: var(--color-bg-body); --color-bg-inverse: var(--color-bg-inverse); --color-bg-primary: var(--color-bg-primary); --color-bg-secondary: var(--color-bg-secondary); --color-bg-tertiary: var(--color-bg-tertiary); --color-bg-accent: var(--color-bg-accent); --color-bg-positive: var(--color-bg-positive); --color-bg-destructive: var(--color-bg-destructive); --color-fg-body: var(--color-fg-body); --color-fg-inverse: var(--color-fg-inverse); --color-fg-primary: var(--color-fg-primary); --color-fg-secondary: var(--color-fg-secondary); --color-fg-tertiary: var(--color-fg-tertiary); --color-fg-accent: var(--color-fg-accent); --color-fg-positive: var(--color-fg-positive); --color-fg-destructive: var(--color-fg-destructive); }

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { A as Avatar } from './Avatar-CzIirpVq.js';
+export { B as Button } from './Button-B50OLXuV.js';
+export { I as Input } from './Input-BQbTzjIO.js';
+export { T as Textarea } from './Textarea-Cpdk7m6S.js';
+import 'solid-js';
+import './classes-B_S9K-9I.js';
+import './components/polymorphic/index.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { button_default as Button } from './chunk/NZZRKP74.js';
+export { textarea_default as Textarea } from './chunk/EB7KXR65.js';
+export { Avatar_default as Avatar } from './chunk/2JGZSAW5.js';
+export { input_default as Input } from './chunk/T2DPPLBQ.js';

package/dist/index.jsx

@@ -0,0 +1,20 @@
+import {
+  input_default
+} from "./chunk/N7BXP7EI.jsx";
+import {
+  textarea_default
+} from "./chunk/WB6NEEQV.jsx";
+import {
+  Avatar_default
+} from "./chunk/4RCWSX7S.jsx";
+import {
+  button_default
+} from "./chunk/GA2HCFRS.jsx";
+import "./chunk/KACNXPUM.jsx";
+import "./chunk/P7WPLZNA.jsx";
+export {
+  Avatar_default as Avatar,
+  button_default as Button,
+  input_default as Input,
+  textarea_default as Textarea
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@pathscale/ui",
+  "version": "0.0.1",
+  "author": "pathscale",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pathscale/ui"
+  },
+  "main": "./dist/index.js",
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@tailwindcss/vite": "^4.1.6",
+    "@types/bun": "^1.2.12",
+    "esbuild-plugin-solid": "^0.6.0",
+    "tailwindcss": "^4.1.6",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-solid": "^2.11.6",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "solid": "./dist/index.jsx",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/components/*/index.d.ts",
+      "solid": "./dist/components/*/index.jsx",
+      "default": "./dist/components/*/index.js"
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/pathscale/ui/issues"
+  },
+  "description": "Highly opinionated SolidJS component library — batteries and kitchen sink included, but optimized and shiny.",
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/pathscale/ui",
+  "keywords": [
+    "solid",
+    "solidjs"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist node_modules",
+    "dev": "vite serve playground --host",
+    "format": "biome format --write",
+    "lint": "biome lint --write"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/index.d.ts"
+      ]
+    }
+  }
+}