@pathscale/ui 0.0.11 → 0.0.13

package/README.md

@@ -10,3 +10,56 @@ To build this package, use the following command
 ```sh
 bun run build
 ```
+
+# Components Checklist
+
+## Actions
+- [x] Button  
+- [ ] Dropdown (A)
+- [ ] Modal  
+- [ ] Swap  
+
+## Data Display
+- [x] Accordion  
+- [x] Avatar  
+- [x] Badge  
+- [ ] Card  
+- [ ] Carousel  
+- [ ] Chat Bubble  
+- [x] Collapse  
+- [ ] Countdown  
+- [ ] Diff  
+- [ ] Kbd  
+- [ ] Stats  
+- [ ] Table  
+- [ ] Timeline  
+
+## Navigation
+- [ ] Bottom Navigation  
+- [x] Breadcrumbs  
+- [ ] Link  
+- [x] Menu
+- [ ] Navbar (A)
+- [x] Pagination  
+- [x] Steps
+- [ ] Tabs  
+
+## Feedback
+- [ ] Alert  
+- [x] Loading  
+- [ ] Progress  
+- [ ] Radial Progress  
+- [ ] Skeleton  
+- [x] Tooltip  
+- [ ] Toast  
+
+## Data Input
+- [x] Checkbox  
+- [x] File Input  
+- [x] Input  
+- [ ] Radio  
+- [ ] Range  
+- [ ] Rating  
+- [x] Select  
+- [x] Textarea  
+- [x] Toggle  

package/dist/{Autocomplete-BLKN_nG8.d.ts → Autocomplete-gLkjMHrc.d.ts}

@@ -13,7 +13,7 @@ declare const inputBoxClass: {
             lg: string;
         };
     }> & ClassProps) | undefined): string;
-    variantKeys: ("state" | "size")[];
+    variantKeys: ("size" | "state")[];
 };
 
 type AutocompleteProps = {

package/dist/Avatar-Dkd_kPlV.d.ts

@@ -0,0 +1,40 @@
+import { JSX } from 'solid-js';
+import { I as IComponentBaseProps, C as ComponentSize, a as ComponentShape, b as ComponentColor } from './types-CUG9pToa.js';
+
+type ElementType$1 = keyof JSX.IntrinsicElements;
+type AvatarGroupBaseProps = {
+    /** Custom container tag */
+    as?: ElementType$1;
+    /** Extra classes */
+    class?: string;
+    className?: string;
+    children: JSX.Element[];
+} & IComponentBaseProps;
+type PropsOf$1<E extends ElementType$1> = JSX.IntrinsicElements[E];
+type AvatarGroupProps<E extends ElementType$1 = "div"> = Omit<PropsOf$1<E>, keyof AvatarGroupBaseProps> & AvatarGroupBaseProps;
+
+type ElementType = keyof JSX.IntrinsicElements;
+type AvatarBaseProps = {
+    src?: string;
+    letters?: string;
+    size?: ComponentSize | number;
+    shape?: ComponentShape;
+    color?: Exclude<ComponentColor, "ghost">;
+    border?: boolean;
+    borderColor?: Exclude<ComponentColor, "ghost">;
+    online?: boolean;
+    offline?: boolean;
+    innerClass?: string;
+    as?: ElementType;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+    children?: JSX.Element;
+};
+type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
+type AvatarProps<E extends ElementType = "div"> = Omit<PropsOf<E>, "color"> & AvatarBaseProps & IComponentBaseProps;
+declare const _default: (<E extends ElementType = "div">(props: AvatarProps<E>) => JSX.Element) & {
+    Group: <E extends keyof JSX.IntrinsicElements = "div">(props: AvatarGroupProps<E>) => JSX.Element;
+};
+
+export { type AvatarProps as A, _default as _ };

package/dist/CollapseTitle-BNxog3is.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'solid-js';
+import { I as IComponentBaseProps } from './types-CUG9pToa.js';
+
+type CollapseContentProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare function CollapseContent(props: CollapseContentProps): JSX.Element;
+
+type CollapseTitleProps<T extends HTMLElement = HTMLDivElement> = JSX.HTMLAttributes<T> & IComponentBaseProps;
+declare function CollapseTitle(props: CollapseTitleProps): JSX.Element;
+type SummaryProps = JSX.HTMLAttributes<HTMLElement> & IComponentBaseProps;
+declare function Summary(props: SummaryProps): JSX.Element;
+
+export { CollapseContent as C, Summary as S, CollapseTitle as a };

package/dist/{Field-DfUn85_1.d.ts → Field-DI2PA30N.d.ts}

@@ -25,7 +25,7 @@ declare const fieldWrapper: {
             false: string;
         };
     }> & ClassProps) | undefined): string;
-    variantKeys: ("size" | "horizontal" | "type" | "grouped" | "groupMultiline")[];
+    variantKeys: ("type" | "size" | "horizontal" | "grouped" | "groupMultiline")[];
 };
 
 type FieldProps = {

package/dist/Mask-CPb596Mg.d.ts

@@ -0,0 +1,16 @@
+import { Component, JSX } from 'solid-js';
+import { I as IComponentBaseProps } from './types-CUG9pToa.js';
+
+type MaskProps = JSX.ImgHTMLAttributes<HTMLImageElement> & IComponentBaseProps & {
+    variant?: "squircle" | "heart" | "hexagon" | "hexagon-2" | "decagon" | "pentagon" | "diamond" | "square" | "circle" | "star" | "star-2" | "triangle" | "triangle-2" | "triangle-3" | "triangle-4" | "half-1" | "half-2";
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+declare function maskClassName({ className, variant, }?: Pick<MaskProps, "className" | "variant">): string;
+type MaskComponent = Component<MaskProps> & {
+    className: typeof maskClassName;
+};
+declare const Mask: MaskComponent;
+
+export { Mask as M };

package/dist/Menu-DgO4SHmA.d.ts

@@ -0,0 +1,45 @@
+import * as solid_js from 'solid-js';
+import { JSX } from 'solid-js';
+import { I as IComponentBaseProps, C as ComponentSize } from './types-CUG9pToa.js';
+
+type MenuTitleProps = JSX.LiHTMLAttributes<HTMLLIElement> & IComponentBaseProps & {
+    class?: string;
+    className?: string;
+};
+
+type MenuItemProps = JSX.LiHTMLAttributes<HTMLLIElement> & IComponentBaseProps & {
+    focus?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+};
+
+type MenuDropdownProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+    label: JSX.Element;
+    open?: boolean;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+    children?: JSX.Element;
+    "data-theme"?: string;
+};
+
+type MenuDetailsProps = JSX.DetailsHtmlAttributes<HTMLDetailsElement> & IComponentBaseProps & {
+    label: JSX.Element;
+    open?: boolean;
+};
+
+type MenuProps = JSX.HTMLAttributes<HTMLUListElement> & IComponentBaseProps & {
+    vertical?: boolean;
+    horizontal?: boolean;
+    responsive?: boolean;
+    size?: ComponentSize;
+};
+declare const _default: ((props: MenuProps) => JSX.Element) & {
+    Title: solid_js.Component<MenuTitleProps>;
+    Item: solid_js.Component<MenuItemProps>;
+    Dropdown: solid_js.Component<MenuDropdownProps>;
+    Details: solid_js.Component<MenuDetailsProps>;
+    Menu: (props: MenuProps) => JSX.Element;
+};
+
+export { type MenuProps as M, _default as _ };

package/dist/{Progress-gN0xqhAF.d.ts → Progress-ChF4ior8.d.ts}

@@ -30,7 +30,7 @@ declare const progressWrapper: {
             circle: string;
         };
     }> & ClassProps) | undefined): string;
-    variantKeys: ("size" | "shape")[];
+    variantKeys: ("shape" | "size")[];
 };
 /**
  * The colored fill bar.
@@ -50,7 +50,7 @@ declare const progressFill: {
             ghost: string;
         };
     }> & ClassProps) | undefined): string;
-    variantKeys: ("variant" | "color")[];
+    variantKeys: ("color" | "variant")[];
 };
 
 interface ProgressProps extends VariantProps<typeof progressContainer>, VariantProps<typeof progressWrapper>, VariantProps<typeof progressFill>, Omit<ComponentProps<"div">, "class" | "color"> {

package/dist/Steps-Dk-UPL6r.d.ts

@@ -0,0 +1,38 @@
+import { JSX } from 'solid-js';
+import { b as ComponentColor, I as IComponentBaseProps } from './types-CUG9pToa.js';
+
+type ElementType$1 = keyof JSX.IntrinsicElements;
+type StepBaseProps = {
+    /** Label for the step indicator */
+    value?: string;
+    /** Color variant */
+    color?: "neutral" | ComponentColor;
+    /** Custom element tag */
+    as?: ElementType$1;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+    children?: JSX.Element;
+    "data-theme"?: string;
+};
+type PropsOf$1<E extends ElementType$1> = JSX.IntrinsicElements[E];
+type StepProps<E extends ElementType$1 = "li"> = Omit<PropsOf$1<E>, keyof StepBaseProps | "color"> & StepBaseProps & IComponentBaseProps;
+
+type ElementType = keyof JSX.IntrinsicElements;
+type StepsBaseProps = {
+    vertical?: boolean;
+    horizontal?: boolean;
+    as?: ElementType;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+    children?: JSX.Element;
+    "data-theme"?: string;
+};
+type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
+type StepsProps<E extends ElementType = "ul"> = Omit<PropsOf<E>, keyof StepsBaseProps> & StepsBaseProps & IComponentBaseProps;
+declare const _default: (<E extends ElementType = "ul">(props: StepsProps<E>) => JSX.Element) & {
+    Step: <E extends keyof JSX.IntrinsicElements = "li">(props: StepProps<E>) => JSX.Element;
+};
+
+export { _default as _ };

package/dist/{Tabs-BNR3p92D.d.ts → Tabs-WiUU0xsM.d.ts}

@@ -24,7 +24,7 @@ declare const tabsNavVariants: {
             false: string;
         };
     }> & ClassProps) | undefined): string;
-    variantKeys: ("size" | "type" | "expanded" | "alignment")[];
+    variantKeys: ("type" | "size" | "alignment" | "expanded")[];
 };
 
 type TabItem = {

package/dist/chunk/2OJYONJ3.js

@@ -0,0 +1,40 @@
+import { CollapseTitle, CollapseContent } from './2VQ2762Z.js';
+import { clsx } from './HUHXQCKK.js';
+import { twMerge } from './STFCLC5R.js';
+import { template, spread, mergeProps, insert, effect, className, setAttribute, style } from 'solid-js/web';
+import { splitProps } from 'solid-js';
+
+var _tmpl$ = /* @__PURE__ */ template(`<div><input type=radio>`);
+var Accordion = (props) => {
+  const [local, others] = splitProps(props, ["name", "icon", "dataTheme", "class", "className", "style"]);
+  const classes = () => twMerge("collapse", clsx({
+    "collapse-arrow": local.icon === "arrow",
+    "collapse-plus": local.icon === "plus"
+  }), local.class, local.className);
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    spread(_el$2, mergeProps({
+      get name() {
+        return local.name ?? "accordion";
+      }
+    }, others), false, false);
+    insert(_el$, () => props.children, null);
+    effect((_p$) => {
+      var _v$ = classes(), _v$2 = local.dataTheme, _v$3 = local.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$, "data-theme", _p$.t = _v$2);
+      _p$.a = style(_el$, _v$3, _p$.a);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$;
+  })();
+};
+Accordion.Title = CollapseTitle;
+Accordion.Content = CollapseContent;
+var Accordion_default = Accordion;
+
+export { Accordion_default };

package/dist/chunk/2VQ2762Z.js

@@ -0,0 +1,80 @@
+import { clsx } from './HUHXQCKK.js';
+import { twMerge } from './STFCLC5R.js';
+import { template, spread, mergeProps, insert } from 'solid-js/web';
+
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function CollapseContent(props) {
+  const classes = twMerge("collapse-content", props.class);
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(props, {
+      "class": classes
+    }), false, false);
+    return _el$;
+  })();
+}
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<summary>`);
+var classesFn = ({
+  className
+}) => twMerge("collapse-title", className);
+function CollapseTitle(props) {
+  return (() => {
+    var _el$ = _tmpl$2();
+    spread(_el$, mergeProps(props, {
+      get ["class"]() {
+        return classesFn({
+          className: props.class
+        });
+      }
+    }), false, false);
+    return _el$;
+  })();
+}
+function Summary(props) {
+  return (() => {
+    var _el$2 = _tmpl$22();
+    spread(_el$2, mergeProps(props, {
+      get ["class"]() {
+        return classesFn({
+          className: props.class
+        });
+      }
+    }), false, false);
+    return _el$2;
+  })();
+}
+var _tmpl$3 = /* @__PURE__ */ template(`<details>`);
+function classesFn2({
+  className,
+  icon,
+  open
+}) {
+  return twMerge("collapse", className, clsx({
+    "collapse-arrow": icon === "arrow",
+    "collapse-plus": icon === "plus",
+    "collapse-open": open === true,
+    "collapse-close": open === false
+  }));
+}
+function CollapseDetails(props) {
+  const classes = classesFn2({
+    className: props.class,
+    icon: props.icon,
+    open: props.open
+  });
+  return (() => {
+    var _el$ = _tmpl$3();
+    spread(_el$, mergeProps(props, {
+      "class": classes,
+      get open() {
+        return props.open;
+      }
+    }), false, true);
+    insert(_el$, () => props.children);
+    return _el$;
+  })();
+}
+CollapseDetails.Title = Summary;
+
+export { CollapseContent, CollapseDetails, CollapseTitle, Summary };

package/dist/chunk/2XPPNBYK.js

@@ -0,0 +1,164 @@
+import { clsx } from './HUHXQCKK.js';
+import { twMerge } from './STFCLC5R.js';
+import { createComponent, Dynamic, mergeProps, template, effect, className, style, setAttribute, insert } from 'solid-js/web';
+import { splitProps, children } from 'solid-js';
+
+var VoidElementList = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "keygen", "meta", "param", "source", "track", "wbr"];
+var AvatarGroup = (props) => {
+  const [local, others] = splitProps(props, ["as", "class", "className", "children"]);
+  const Tag = local.as || "div";
+  const classes = () => twMerge("avatar-group -space-x-6", local.class, local.className);
+  const ariaLabel = `Group of ${local.children.length} avatar photos`;
+  if (VoidElementList.includes(Tag)) {
+    return createComponent(Dynamic, mergeProps({
+      component: Tag
+    }, others, {
+      "aria-label": ariaLabel,
+      get ["class"]() {
+        return classes();
+      }
+    }));
+  }
+  return createComponent(Dynamic, mergeProps({
+    component: Tag
+  }, others, {
+    "aria-label": ariaLabel,
+    get ["class"]() {
+      return classes();
+    },
+    get children() {
+      return local.children;
+    }
+  }));
+};
+var AvatarGroup_default = AvatarGroup;
+
+// src/components/avatar/Avatar.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><img>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><span>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var VoidElementList2 = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "keygen", "meta", "param", "source", "track", "wbr"];
+var Avatar = (props) => {
+  const [local, others] = splitProps(props, ["src", "letters", "size", "shape", "color", "border", "borderColor", "online", "offline", "innerClass", "as", "class", "className", "style", "children"]);
+  const Tag = local.as || "div";
+  const containerClass = () => twMerge("avatar", local.class, local.className, clsx({
+    "avatar-online": local.online,
+    "avatar-offline": local.offline,
+    "avatar-placeholder": !local.src
+  }));
+  const customSizeStyle = typeof local.size === "number" ? {
+    width: `${local.size}px`,
+    height: `${local.size}px`
+  } : void 0;
+  const baseInner = () => twMerge(local.innerClass);
+  const imgClasses = () => clsx(baseInner(), {
+    ring: local.border,
+    "ring-offset-base-100 ring-offset-2": local.border,
+    [`ring-${local.borderColor}`]: local.border && local.borderColor,
+    "rounded-full": local.shape === "circle",
+    "rounded-btn": local.shape === "square",
+    "w-32 h-32": local.size === "lg",
+    "w-24 h-24": local.size === "md",
+    "w-14 h-14": local.size === "sm",
+    "w-10 h-10": local.size === "xs"
+  });
+  const placeholderClasses = () => clsx(baseInner(), {
+    "bg-neutral-focus": !local.color,
+    "text-neutral-content": !local.color || local.color === "neutral",
+    [`bg-${local.color}`]: !!local.color,
+    [`text-${local.color}-content`]: !!local.color,
+    ring: local.border,
+    "ring-offset-base-100 ring-offset-2": local.border,
+    [`ring-${local.borderColor}`]: local.border && local.borderColor,
+    "rounded-full": local.shape === "circle",
+    "rounded-btn": local.shape === "square",
+    "w-32 h-32 text-3xl": local.size === "lg",
+    "w-24 h-24 text-xl": local.size === "md",
+    "w-14 h-14": local.size === "sm",
+    "w-10 h-10": local.size === "xs"
+  });
+  const resolved = children(() => local.children)();
+  const isStringChild = typeof resolved === "string";
+  const renderContents = () => {
+    return local.src ? (() => {
+      var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+      effect((_p$) => {
+        var _v$ = imgClasses(), _v$2 = customSizeStyle, _v$3 = local.src;
+        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+        _p$.t = style(_el$, _v$2, _p$.t);
+        _v$3 !== _p$.a && setAttribute(_el$2, "src", _p$.a = _v$3);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      });
+      return _el$;
+    })() : local.letters || isStringChild ? (() => {
+      var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild;
+      insert(_el$4, () => local.letters ?? resolved);
+      effect((_p$) => {
+        var _v$4 = placeholderClasses(), _v$5 = customSizeStyle;
+        _v$4 !== _p$.e && className(_el$3, _p$.e = _v$4);
+        _p$.t = style(_el$3, _v$5, _p$.t);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$3;
+    })() : (() => {
+      var _el$5 = _tmpl$3();
+      insert(_el$5, () => local.children);
+      effect((_p$) => {
+        var _v$6 = imgClasses(), _v$7 = customSizeStyle;
+        _v$6 !== _p$.e && className(_el$5, _p$.e = _v$6);
+        _p$.t = style(_el$5, _v$7, _p$.t);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$5;
+    })();
+  };
+  if (VoidElementList2.includes(Tag)) {
+    return createComponent(Dynamic, mergeProps({
+      component: Tag
+    }, others, {
+      get ["data-theme"]() {
+        return others["dataTheme"];
+      },
+      get ["class"]() {
+        return containerClass();
+      },
+      get style() {
+        return local.style;
+      }
+    }));
+  }
+  return createComponent(Dynamic, mergeProps({
+    component: Tag
+  }, others, {
+    get ["data-theme"]() {
+      return others["dataTheme"];
+    },
+    get ["class"]() {
+      return containerClass();
+    },
+    get style() {
+      return local.style;
+    },
+    get children() {
+      return renderContents();
+    }
+  }));
+};
+var Avatar_default = Object.assign(Avatar, {
+  Group: AvatarGroup_default
+});
+
+// src/components/avatar/index.ts
+var avatar_default = Avatar_default;
+
+export { avatar_default };

package/dist/chunk/3I23P4TJ.js

@@ -0,0 +1,33 @@
+import { clsx } from './HUHXQCKK.js';
+import { twMerge } from './STFCLC5R.js';
+import { template, spread, mergeProps, insert } from 'solid-js/web';
+import { splitProps } from 'solid-js';
+
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var Join = (props) => {
+  const [local, others] = splitProps(props, ["responsive", "vertical", "horizontal", "class", "className", "dataTheme", "style"]);
+  const classes = () => twMerge("join", clsx({
+    "join-vertical": !local.responsive && local.vertical,
+    "join-horizontal": !local.responsive && local.horizontal,
+    "join-vertical lg:join-horizontal": local.responsive
+  }), local.class, local.className);
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, {
+      get ["class"]() {
+        return classes();
+      },
+      get ["data-theme"]() {
+        return local.dataTheme;
+      },
+      get style() {
+        return local.style;
+      }
+    }), false, true);
+    insert(_el$, () => props.children);
+    return _el$;
+  })();
+};
+var Join_default = Join;
+
+export { Join_default };