@pathscale/ui 1.1.34 → 1.1.35

package/dist/components/button/Button.css

@@ -64,7 +64,10 @@
     }
   }
 
-  .button svg:not([data-slot="spinner"] svg) {
+  .button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     pointer-events: none;
     margin-block: 0.125rem;
     height: 1rem;
@@ -73,6 +76,12 @@
     align-self: center;
   }
 
+  .button__icon > * {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
   .button--sm {
     height: 2.25rem;
     padding-inline: 0.75rem;

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

@@ -9,6 +9,8 @@ type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled">
     fullWidth?: boolean;
     isDisabled?: boolean;
     isPending?: boolean;
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
     className?: string;
 };
 declare const Button: (props: ButtonProps) => JSX.Element;

package/dist/components/button/Button.js

@@ -2,7 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Button.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=button__spinner data-slot=spinner aria-hidden=true>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
+import * as __WEBPACK_EXTERNAL_MODULE__button_group_context_js_9dfe2267__ from "../button-group/context.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=button__spinner data-slot=spinner aria-hidden=true>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="button__icon button__icon--start"data-slot=button-start-icon>'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="button__icon button__icon--end"data-slot=button-end-icon>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
 const VARIANT_CLASS_MAP = {
     primary: "button--primary",
     secondary: "button--secondary",
@@ -28,14 +29,18 @@ const Button = (props)=>{
         "fullWidth",
         "isDisabled",
         "isPending",
+        "startIcon",
+        "endIcon",
         "type"
     ]);
-    const variant = ()=>local.variant ?? "primary";
-    const size = ()=>local.size ?? "md";
-    const disabled = ()=>Boolean(local.isDisabled) || Boolean(local.isPending);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("button", VARIANT_CLASS_MAP[variant()], SIZE_CLASS_MAP[size()], local.isIconOnly && "button--icon-only", local.fullWidth && "button--full-width", local.class, local.className);
+    const buttonGroupContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(__WEBPACK_EXTERNAL_MODULE__button_group_context_js_9dfe2267__.ButtonGroupContext);
+    const variant = ()=>local.variant ?? buttonGroupContext?.variant() ?? "primary";
+    const size = ()=>local.size ?? buttonGroupContext?.size() ?? "md";
+    const fullWidth = ()=>local.fullWidth ?? buttonGroupContext?.fullWidth();
+    const disabled = ()=>Boolean(local.isDisabled ?? buttonGroupContext?.isDisabled()) || Boolean(local.isPending);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("button", VARIANT_CLASS_MAP[variant()], SIZE_CLASS_MAP[size()], local.isIconOnly && "button--icon-only", fullWidth() && "button--full-width", local.class, local.className);
     return (()=>{
-        var _el$ = _tmpl$2();
+        var _el$ = _tmpl$4();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get type () {
                 return local.type ?? "button";
@@ -62,7 +67,27 @@ const Button = (props)=>{
                 return _tmpl$();
             }
         }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.startIcon;
+            },
+            get children () {
+                var _el$3 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.startIcon);
+                return _el$3;
+            }
+        }), null);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.endIcon;
+            },
+            get children () {
+                var _el$4 = _tmpl$3();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.endIcon);
+                return _el$4;
+            }
+        }), null);
         return _el$;
     })();
 };

package/dist/components/button-group/ButtonGroup.css

@@ -0,0 +1,117 @@
+@layer components {
+  .button-group {
+    display: inline-flex;
+    height: auto;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+  }
+
+  .button-group--horizontal {
+    flex-direction: row;
+  }
+
+  .button-group--vertical {
+    flex-direction: column;
+  }
+
+  .button-group .button {
+    border-radius: 0;
+  }
+
+  .button-group--horizontal .button:first-child {
+    border-start-start-radius: 1.5rem;
+    border-end-start-radius: 1.5rem;
+  }
+
+  .button-group--horizontal .button:last-child {
+    border-start-end-radius: 1.5rem;
+    border-end-end-radius: 1.5rem;
+  }
+
+  .button-group--horizontal .button:first-child:last-child {
+    border-radius: 1.5rem;
+  }
+
+  .button-group--vertical .button:first-child {
+    border-top-left-radius: 1.5rem;
+    border-top-right-radius: 1.5rem;
+  }
+
+  .button-group--vertical .button:last-child {
+    border-bottom-left-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+  }
+
+  .button-group--vertical .button:first-child:last-child {
+    border-radius: 1.5rem;
+  }
+
+  .button-group .button:active,
+  .button-group .button[data-pressed="true"] {
+    transform: none;
+  }
+
+  .button-group .button:focus-visible,
+  .button-group .button[data-focus-visible="true"] {
+    outline-offset: -1px;
+  }
+
+  .button-group__separator {
+    background-color: currentColor;
+    opacity: 0.15;
+    border-radius: 4px;
+    position: absolute;
+    pointer-events: none;
+    transition: opacity 150ms var(--ease-smooth);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button-group__separator {
+      transition: none;
+    }
+  }
+
+  .button-group--horizontal .button-group__separator {
+    left: -1px;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  .button-group--vertical .button-group__separator {
+    left: 25%;
+    top: -1px;
+    width: 50%;
+    height: 1px;
+  }
+
+  .button-group--horizontal .button--outline:first-child {
+    border-inline-end-width: 0;
+  }
+
+  .button-group--horizontal .button--outline:last-child {
+    border-inline-start-width: 0;
+  }
+
+  .button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
+    border-inline-width: 0;
+  }
+
+  .button-group--vertical .button--outline:first-child {
+    border-bottom-width: 0;
+  }
+
+  .button-group--vertical .button--outline:last-child {
+    border-top-width: 0;
+  }
+
+  .button-group--vertical .button--outline:not(:first-child):not(:last-child) {
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
+
+  .button-group--full-width {
+    width: 100%;
+  }
+}

package/dist/components/button-group/ButtonGroup.d.ts

@@ -0,0 +1,23 @@
+import "./ButtonGroup.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { ButtonSize, ButtonVariant } from "../button";
+import type { IComponentBaseProps } from "../types";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export type ButtonGroupRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    orientation?: ButtonGroupOrientation;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    isDisabled?: boolean;
+    fullWidth?: boolean;
+};
+export type ButtonGroupSeparatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps;
+declare const ButtonGroupRoot: ParentComponent<ButtonGroupRootProps>;
+declare const ButtonGroupSeparator: Component<ButtonGroupSeparatorProps>;
+declare const ButtonGroup: ParentComponent<ButtonGroupRootProps> & {
+    Root: ParentComponent<ButtonGroupRootProps>;
+    Separator: Component<ButtonGroupSeparatorProps>;
+};
+export default ButtonGroup;
+export { ButtonGroup, ButtonGroupRoot, ButtonGroupSeparator };
+export type { ButtonGroupRootProps as ButtonGroupProps };

package/dist/components/button-group/ButtonGroup.js

@@ -0,0 +1,91 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ButtonGroup.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__ from "./context.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const ORIENTATION_CLASS_MAP = {
+    horizontal: "button-group--horizontal",
+    vertical: "button-group--vertical"
+};
+const ButtonGroupRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "orientation",
+        "size",
+        "variant",
+        "isDisabled",
+        "fullWidth",
+        "role"
+    ]);
+    const orientation = ()=>local.orientation ?? "horizontal";
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__.ButtonGroupContext.Provider, {
+        value: {
+            size: ()=>local.size,
+            variant: ()=>local.variant,
+            isDisabled: ()=>local.isDisabled,
+            fullWidth: ()=>local.fullWidth
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("button-group", ORIENTATION_CLASS_MAP[orientation()], local.fullWidth && "button-group--full-width", local.class, local.className);
+                },
+                "data-slot": "button-group",
+                get ["data-orientation"] () {
+                    return orientation();
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                },
+                get role () {
+                    return local.role ?? "group";
+                },
+                get ["aria-disabled"] () {
+                    return local.isDisabled ? "true" : void 0;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const ButtonGroupSeparator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            "aria-hidden": "true",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("button-group__separator", local.class, local.className);
+            },
+            "data-slot": "button-group-separator",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, false);
+        return _el$2;
+    })();
+};
+const ButtonGroup = Object.assign(ButtonGroupRoot, {
+    Root: ButtonGroupRoot,
+    Separator: ButtonGroupSeparator
+});
+const button_group_ButtonGroup = ButtonGroup;
+export { ButtonGroup, ButtonGroupRoot, ButtonGroupSeparator, button_group_ButtonGroup as default };

package/dist/components/button-group/context.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonSize, ButtonVariant } from "../button";
+export type ButtonGroupContextValue = {
+    size: () => ButtonSize | undefined;
+    variant: () => ButtonVariant | undefined;
+    isDisabled: () => boolean | undefined;
+    fullWidth: () => boolean | undefined;
+};
+export declare const ButtonGroupContext: import("solid-js").Context<ButtonGroupContextValue | undefined>;

package/dist/components/button-group/context.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+const ButtonGroupContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+export { ButtonGroupContext };

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

@@ -0,0 +1 @@
+export { default, ButtonGroup, ButtonGroupRoot, ButtonGroupSeparator, type ButtonGroupProps, type ButtonGroupRootProps, type ButtonGroupSeparatorProps, type ButtonGroupOrientation, } from "./ButtonGroup";

package/dist/components/button-group/index.js

@@ -0,0 +1,6 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__ from "./ButtonGroup.js";
+var __webpack_exports__ButtonGroup = __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__.ButtonGroup;
+var __webpack_exports__ButtonGroupRoot = __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__.ButtonGroupRoot;
+var __webpack_exports__ButtonGroupSeparator = __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__.ButtonGroupSeparator;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__["default"];
+export { __webpack_exports__ButtonGroup as ButtonGroup, __webpack_exports__ButtonGroupRoot as ButtonGroupRoot, __webpack_exports__ButtonGroupSeparator as ButtonGroupSeparator, __webpack_exports__default as default };

package/dist/components/card/Card.css

@@ -0,0 +1,110 @@
+@layer components {
+  .card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: hidden;
+    border-radius: var(--card-radius, calc(var(--radius-box, 0.75rem) * 2));
+    padding: var(--card-padding, 1rem);
+    color: var(--card-fg, var(--color-base-content));
+    background-color: var(--card-bg, var(--color-base-100));
+    border: 1px solid var(--card-border, transparent);
+    box-shadow:
+      var(
+        --card-shadow,
+        0 8px 24px -18px rgb(0 0 0 / 0.45),
+        0 6px 14px -10px rgb(0 0 0 / 0.28)
+      );
+    transition:
+      background-color 160ms ease,
+      border-color 160ms ease,
+      box-shadow 200ms ease,
+      transform 200ms ease;
+  }
+
+  .card:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  .card--default {
+    --card-bg: var(--color-base-100);
+    --card-border: transparent;
+    --card-shadow:
+      0 8px 24px -18px rgb(0 0 0 / 0.45),
+      0 6px 14px -10px rgb(0 0 0 / 0.28);
+    --card-hover-shadow:
+      0 16px 30px -20px rgb(0 0 0 / 0.5),
+      0 8px 18px -12px rgb(0 0 0 / 0.35);
+  }
+
+  .card--flat {
+    --card-bg: var(--color-base-200);
+    --card-border: transparent;
+    --card-shadow: none;
+    --card-hover-shadow: none;
+  }
+
+  .card--bordered {
+    --card-bg: var(--color-base-100);
+    --card-border: var(--color-base-300);
+    --card-shadow: none;
+    --card-hover-shadow:
+      0 6px 20px -16px rgb(0 0 0 / 0.4),
+      0 5px 12px -10px rgb(0 0 0 / 0.28);
+  }
+
+  .card--shadow {
+    --card-bg: var(--color-base-100);
+    --card-border: transparent;
+    --card-shadow:
+      0 20px 40px -24px rgb(0 0 0 / 0.55),
+      0 12px 20px -14px rgb(0 0 0 / 0.35);
+    --card-hover-shadow:
+      0 26px 44px -26px rgb(0 0 0 / 0.6),
+      0 14px 24px -15px rgb(0 0 0 / 0.4);
+  }
+
+  .card--hoverable,
+  .card--pressable {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .card--hoverable:hover,
+    .card--pressable:hover {
+      box-shadow: var(--card-hover-shadow, var(--card-shadow));
+      transform: translateY(-1px);
+    }
+  }
+
+  .card--pressable:active,
+  .card--pressable[data-pressed="true"] {
+    transform: scale(0.99);
+  }
+
+  .card__header,
+  .card__body,
+  .card__footer {
+    display: flex;
+    width: 100%;
+  }
+
+  .card__header {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .card__body {
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .card__footer {
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+}

package/dist/components/card/Card.d.ts

@@ -1,29 +1,29 @@
-import "./card.css";
-import { type JSX } from "solid-js";
-import type { ComponentSize, ComponentVariant, ComponentColor, IComponentBaseProps } from "../types";
-import CardActions from "./CardActions";
-import CardBody from "./CardBody";
-import CardImage from "./CardImage";
-import CardTitle from "./CardTitle";
-export type CardProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
-    size?: ComponentSize;
-    border?: boolean;
-    variant?: Exclude<ComponentVariant, "soft"> | "border";
-    imageFull?: boolean;
-    side?: ComponentSize | boolean;
-    background?: ComponentColor | "base-100" | "base-200" | "base-300";
-    shadow?: "none" | "sm" | "md" | "lg" | "xl";
-    fullWidth?: boolean;
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-    "aria-labelledby"?: string;
-    role?: string;
+import "./Card.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type CardVariant = "default" | "flat" | "bordered" | "shadow";
+type CardContextlessProps<T extends HTMLElement> = Omit<JSX.HTMLAttributes<T>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
 };
-declare const Card: {
-    (props: CardProps): JSX.Element;
-    Actions: typeof CardActions;
-    Body: typeof CardBody;
-    Title: typeof CardTitle;
-    Image: typeof CardImage;
+export type CardRootProps = CardContextlessProps<HTMLDivElement> & {
+    variant?: CardVariant;
+    isHoverable?: boolean;
+    isPressable?: boolean;
+};
+export type CardHeaderProps = CardContextlessProps<HTMLDivElement>;
+export type CardBodyProps = CardContextlessProps<HTMLDivElement>;
+export type CardFooterProps = CardContextlessProps<HTMLDivElement>;
+declare const CardRoot: ParentComponent<CardRootProps>;
+declare const CardHeader: Component<CardHeaderProps>;
+declare const CardBody: Component<CardBodyProps>;
+declare const CardFooter: Component<CardFooterProps>;
+declare const Card: ParentComponent<CardRootProps> & {
+    Root: ParentComponent<CardRootProps>;
+    Header: Component<CardHeaderProps>;
+    Body: Component<CardBodyProps>;
+    Content: Component<CardBodyProps>;
+    Footer: Component<CardFooterProps>;
 };
 export default Card;
+export { Card, CardRoot, CardHeader, CardBody, CardFooter };
+export type { CardRootProps as CardProps };