@pathscale/ui 0.1.0

package/dist/chunk/WB6NEEQV.jsx

@@ -0,0 +1,107 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/textarea/Textarea.tsx
+import {
+  createMemo,
+  createSignal,
+  splitProps,
+  Show
+} from "solid-js";
+
+// src/components/textarea/Textarea.styles.ts
+var textareaVariants = cva(
+  [
+    "block w-full rounded-md border bg-white px-3 py-2 text-sm",
+    "text-gray-900 placeholder-gray-400",
+    "focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm py-1.5",
+        md: "text-base py-2",
+        lg: "text-lg py-3"
+      },
+      color: {
+        primary: "border-blue-500",
+        info: "border-cyan-500",
+        success: "border-green-500",
+        warning: "border-yellow-500",
+        danger: "border-red-500"
+      },
+      loading: {
+        true: "opacity-50 cursor-wait",
+        false: ""
+      },
+      resize: {
+        none: "resize-none",
+        both: "resize",
+        x: "resize-x",
+        y: "resize-y"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      loading: false,
+      resize: "y"
+    }
+  }
+);
+
+// src/components/textarea/Textarea.tsx
+var Textarea = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(
+    props,
+    ["hasCounter", "value", "onInput", "onFocus", "onBlur", "maxLength"],
+    ["class", ...textareaVariants.variantKeys]
+  );
+  const [isFocused, setFocused] = createSignal(false);
+  const valueLength = createMemo(
+    () => typeof localProps.value === "string" ? localProps.value.length : 0
+  );
+  const showCounter = createMemo(
+    () => localProps.maxLength && localProps.hasCounter
+  );
+  return <div class="relative w-full">
+      <textarea
+    class={textareaVariants(variantProps)}
+    value={localProps.value}
+    maxLength={localProps.maxLength}
+    onInput={localProps.onInput}
+    onFocus={(e) => {
+      setFocused(true);
+      typeof localProps.onFocus === "function" && localProps.onFocus(e);
+    }}
+    onBlur={(e) => {
+      setFocused(false);
+      typeof localProps.onBlur === "function" && localProps.onBlur(e);
+    }}
+    aria-invalid={variantProps.color === "danger" ? "true" : void 0}
+    {...otherProps}
+  />
+
+      <Show when={showCounter()}>
+        <small
+    class={classes(
+      "absolute bottom-1 right-2 text-xs text-gray-500 transition-opacity",
+      isFocused() ? "opacity-100" : "opacity-0"
+    )}
+  >
+          {valueLength()} / {localProps.maxLength}
+        </small>
+      </Show>
+    </div>;
+};
+var Textarea_default = Textarea;
+
+// src/components/textarea/index.ts
+var textarea_default = Textarea_default;
+
+export {
+  textarea_default
+};

package/dist/chunk/YZ3ID3UY.jsx

@@ -0,0 +1,226 @@
+import {
+  PolymorphicButton_default
+} from "./KACNXPUM.jsx";
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/button/Button.tsx
+import {
+  mergeProps,
+  splitProps
+} from "solid-js";
+
+// src/components/button/Button.styles.ts
+var buttonVariants = cva(
+  [
+    "inline-flex items-center font-medium outline-none select-none",
+    "not-disabled:cursor-pointer",
+    "disabled:cursor-not-allowed disabled:opacity-25",
+    "aria-busy:cursor-wait",
+    "transition active:transition-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm leading-tight",
+        md: "text-base leading-tight",
+        lg: "text-lg leading-tight"
+      },
+      color: {
+        inverse: "",
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        accent: "",
+        positive: "",
+        destructive: ""
+      },
+      align: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end"
+      },
+      shape: {
+        circle: "rounded-full",
+        rounded: "rounded-lg"
+      },
+      spacing: {
+        0: "gap-0 p-0",
+        xs: "gap-1.5 px-1.5 py-1.5",
+        sm: "gap-1.5 px-2 py-2",
+        md: "gap-1.5 px-3 py-2",
+        lg: "gap-1.5 px-3.5 py-2.5"
+      },
+      loading: {
+        true: "",
+        false: ""
+      },
+      stretched: {
+        true: "w-full",
+        false: "w-fit"
+      },
+      variant: {
+        fill: [
+          "not-disabled:hover:opacity-75 not-disabled:active:opacity-50",
+          "aria-[current]:opacity-75 data-expanded:opacity-75 data-open:opacity-75",
+          "focus-visible:opacity-75"
+        ],
+        gray: [
+          "bg-bg-primary not-disabled:hover:bg-bg-secondary not-disabled:active:bg-bg-secondary not-disabled:active:opacity-75",
+          "aria-[current]:bg-bg-secondary data-expanded:bg-bg-secondary data-open:bg-bg-secondary",
+          "focus-visible:bg-bg-secondary"
+        ],
+        ghost: [
+          "not-disabled:hover:bg-bg-primary not-disabled:active:bg-bg-primary not-disabled:active:opacity-75",
+          "aria-[current]:bg-bg-primary data-expanded:bg-bg-primary data-open:bg-bg-primary",
+          "focus-visible:bg-bg-primary"
+        ]
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "fill",
+        color: "inverse",
+        class: "bg-bg-inverse text-fg-inverse"
+      },
+      {
+        variant: "fill",
+        color: "primary",
+        class: "bg-bg-primary text-fg-body"
+      },
+      {
+        variant: "fill",
+        color: "secondary",
+        class: "bg-bg-secondary text-fg-body"
+      },
+      {
+        variant: "fill",
+        color: "tertiary",
+        class: "bg-bg-tertiary text-fg-body"
+      },
+      {
+        variant: "fill",
+        color: "accent",
+        class: "bg-bg-accent text-light"
+      },
+      {
+        variant: "fill",
+        color: "positive",
+        class: "bg-bg-positive text-light"
+      },
+      {
+        variant: "fill",
+        color: "destructive",
+        class: "bg-bg-destructive text-light"
+      },
+      {
+        variant: "gray",
+        color: "inverse",
+        class: "text-fg-inverse"
+      },
+      {
+        variant: "gray",
+        color: "primary",
+        class: "text-fg-primary"
+      },
+      {
+        variant: "gray",
+        color: "secondary",
+        class: "text-fg-secondary"
+      },
+      {
+        variant: "gray",
+        color: "tertiary",
+        class: "text-fg-tertiary"
+      },
+      {
+        variant: "gray",
+        color: "accent",
+        class: "text-fg-accent"
+      },
+      {
+        variant: "gray",
+        color: "positive",
+        class: "text-fg-positive"
+      },
+      {
+        variant: "gray",
+        color: "destructive",
+        class: "text-fg-destructive"
+      },
+      {
+        variant: "ghost",
+        color: "inverse",
+        class: "text-fg-inverse"
+      },
+      {
+        variant: "ghost",
+        color: "primary",
+        class: "text-fg-primary"
+      },
+      {
+        variant: "ghost",
+        color: "secondary",
+        class: "text-fg-secondary"
+      },
+      {
+        variant: "ghost",
+        color: "tertiary",
+        class: "text-fg-tertiary"
+      },
+      {
+        variant: "ghost",
+        color: "accent",
+        class: "text-fg-accent"
+      },
+      {
+        variant: "ghost",
+        color: "positive",
+        class: "text-fg-positive"
+      },
+      {
+        variant: "ghost",
+        color: "destructive",
+        class: "text-fg-destructive"
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      align: "center",
+      shape: "rounded",
+      spacing: "md",
+      variant: "fill",
+      loading: false,
+      stretched: false
+    }
+  }
+);
+
+// src/components/button/Button.tsx
+var Button = (props) => {
+  const defaultedProps = mergeProps(
+    {
+      color: "primary"
+    },
+    props
+  );
+  const [variantProps, otherProps] = splitProps(defaultedProps, [
+    "class",
+    ...buttonVariants.variantKeys
+  ]);
+  return <PolymorphicButton_default
+    class={buttonVariants(variantProps)}
+    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
+};

package/dist/classes-B_S9K-9I.d.ts

@@ -0,0 +1,13 @@
+type ClassArgs = string | number | boolean | null | undefined | ClassArgs[];
+type ClassProps = {
+    class?: ClassArgs;
+};
+type OmitUndefined<T> = T extends undefined ? never : T;
+type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
+type ConfigSchema = Record<string, Record<string, ClassArgs>>;
+type ConfigVariants<T extends ConfigSchema> = {
+    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
+};
+type VariantProps<Component extends (...args: []) => unknown> = Omit<OmitUndefined<Parameters<Component>[0]>, "class">;
+
+export type { ConfigVariants as C, VariantProps as V, ClassProps as a };

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

@@ -0,0 +1,8 @@
+import { A as Avatar } from '../../Avatar-CzIirpVq.js';
+export { a as AvatarProps, b as avatarVariants } from '../../Avatar-CzIirpVq.js';
+import 'solid-js';
+import '../../classes-B_S9K-9I.js';
+
+
+
+export { Avatar as default };

package/dist/components/avatar/index.js

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

package/dist/components/avatar/index.jsx

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

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

@@ -0,0 +1,9 @@
+import { B as Button } from '../../Button-BOYHKShy.js';
+export { a as ButtonElementProps, b as ButtonProps, c as ButtonSharedProps, d as ButtonVariantProps } from '../../Button-BOYHKShy.js';
+import 'solid-js';
+import '../polymorphic/index.js';
+import '../../classes-B_S9K-9I.js';
+
+
+
+export { Button as default };

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { button_default as default } from '../../chunk/3MUBOGZG.js';

package/dist/components/button/index.jsx

@@ -0,0 +1,8 @@
+import {
+  button_default
+} from "../../chunk/YZ3ID3UY.jsx";
+import "../../chunk/KACNXPUM.jsx";
+import "../../chunk/P7WPLZNA.jsx";
+export {
+  button_default as default
+};

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

@@ -0,0 +1,8 @@
+import { I as Input } from '../../Input-CvNxe1rq.js';
+export { a as InputProps } from '../../Input-CvNxe1rq.js';
+import 'solid-js';
+import '../../classes-B_S9K-9I.js';
+
+
+
+export { Input as default };

package/dist/components/input/index.js

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

package/dist/components/input/index.jsx

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

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

@@ -0,0 +1,35 @@
+import * as solid_js from 'solid-js';
+import { ValidComponent, ComponentProps, JSX, Ref } from 'solid-js';
+
+type OverrideProps<T, P> = Omit<T, keyof P> & P;
+
+type PolymorphicAttributes<T extends ValidComponent> = {
+    /**
+     * Component to render the polymorphic component as.
+     * @defaultValue `div`
+     */
+    as?: T | keyof JSX.HTMLElementTags;
+};
+type PolymorphicProps<T extends ValidComponent, P extends object> = OverrideProps<ComponentProps<T>, P & PolymorphicAttributes<T>>;
+/**
+ * Renders as a div by default and can be overridden with the `as` property.
+ */
+declare const Polymorphic: <ElementProps>(props: PolymorphicAttributes<ValidComponent> & ElementProps) => JSX.Element;
+
+type ElementOf<T> = T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : unknown;
+
+type PolymorphicButtonSharedProps<T extends ValidComponent = "button"> = {
+    ref: Ref<ElementOf<T>>;
+    type: string | undefined;
+};
+type PolymorphicButtonElementProps = PolymorphicButtonSharedProps & {
+    role: "button" | undefined;
+};
+type PolymorphicButtonProps<T extends ValidComponent = "button"> = Partial<PolymorphicButtonSharedProps<T>>;
+/**
+ * An accessible button that sets `type` and `role` properly based on
+ * if it's a native button.
+ */
+declare const PolymorphicButton: <T extends ValidComponent = "button">(props: PolymorphicProps<T, PolymorphicButtonProps<T>>) => solid_js.JSX.Element;
+
+export { Polymorphic, type PolymorphicAttributes, PolymorphicButton, type PolymorphicButtonElementProps, type PolymorphicButtonProps, type PolymorphicButtonSharedProps, type PolymorphicProps };

package/dist/components/polymorphic/index.js

@@ -0,0 +1 @@
+export { Polymorphic_default as Polymorphic, PolymorphicButton_default as PolymorphicButton } from '../../chunk/G6RG4LR7.js';

package/dist/components/polymorphic/index.jsx

@@ -0,0 +1,8 @@
+import {
+  PolymorphicButton_default,
+  Polymorphic_default
+} from "../../chunk/KACNXPUM.jsx";
+export {
+  Polymorphic_default as Polymorphic,
+  PolymorphicButton_default as PolymorphicButton
+};

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

@@ -0,0 +1,8 @@
+import { T as Textarea } from '../../Textarea-5_oQknZn.js';
+export { a as TextareaProps } from '../../Textarea-5_oQknZn.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/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-BOYHKShy.js';
+export { I as Input } from './Input-CvNxe1rq.js';
+export { T as Textarea } from './Textarea-5_oQknZn.js';
+import 'solid-js';
+import './classes-B_S9K-9I.js';
+import './components/polymorphic/index.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { Avatar_default as Avatar } from './chunk/VMEDFWWG.js';
+export { button_default as Button } from './chunk/3MUBOGZG.js';
+export { input_default as Input } from './chunk/UTRNHAP4.js';
+export { textarea_default as Textarea } from './chunk/EB7KXR65.js';

package/dist/index.jsx

@@ -0,0 +1,20 @@
+import {
+  Avatar_default
+} from "./chunk/HEJAQSH5.jsx";
+import {
+  button_default
+} from "./chunk/YZ3ID3UY.jsx";
+import "./chunk/KACNXPUM.jsx";
+import {
+  input_default
+} from "./chunk/NLD5D3P7.jsx";
+import {
+  textarea_default
+} from "./chunk/WB6NEEQV.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,60 @@
+{
+  "name": "@pathscale/ui",
+  "version": "0.1.0",
+  "description": "Highly opinionated SolidJS component library — batteries and kitchen sink included, but optimized and shiny.",
+  "keywords": ["solid", "solidjs"],
+  "homepage": "https://github.com/pathscale/ui",
+  "bugs": {
+    "url": "https://github.com/pathscale/ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pathscale/ui"
+  },
+  "license": "MIT",
+  "author": "pathscale",
+  "sideEffects": false,
+  "type": "module",
+  "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"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": ["./dist/index.d.ts"]
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist node_modules",
+    "dev": "vite serve playground --host",
+    "format": "biome format --write",
+    "lint": "biome lint --write"
+  },
+  "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"
+  }
+}