@pathscale/ui 1.2.0 → 1.2.2

package/dist/components/card/Card.classes.js

@@ -0,0 +1,25 @@
+const CLASSES = {
+    Root: {
+        base: "card",
+        variant: {
+            default: "card--default",
+            flat: "card--flat",
+            bordered: "card--bordered",
+            shadow: "card--shadow"
+        },
+        flag: {
+            isHoverable: "card--hoverable",
+            isPressable: "card--pressable"
+        }
+    },
+    Header: {
+        base: "card__header"
+    },
+    Body: {
+        base: "card__body"
+    },
+    Footer: {
+        base: "card__footer"
+    }
+};
+export { CLASSES };

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) + var(--card-padding, 1rem)));
+    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 };

package/dist/components/card/Card.js

@@ -1,73 +1,51 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./card.css";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import "./Card.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__CardActions_js_327b246f__ from "./CardActions.js";
-import * as __WEBPACK_EXTERNAL_MODULE__CardBody_js_3648715c__ from "./CardBody.js";
-import * as __WEBPACK_EXTERNAL_MODULE__CardImage_js_0ac1c65a__ from "./CardImage.js";
-import * as __WEBPACK_EXTERNAL_MODULE__CardTitle_js_a12d15c2__ from "./CardTitle.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__ from "./Card.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const DYNAMIC_MODIFIERS = {
-    side: {
-        true: "card-side",
-        xs: "card-side-xs",
-        sm: "card-side-sm",
-        md: "card-side-md",
-        lg: "card-side-lg"
-    }
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
-const Card = (props)=>{
+const CardRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "size",
-        "border",
-        "variant",
-        "imageFull",
-        "side",
-        "background",
-        "shadow",
-        "fullWidth",
+        "children",
         "class",
         "className",
         "dataTheme",
         "style",
-        "aria-label",
-        "aria-describedby",
-        "aria-labelledby",
-        "role"
+        "variant",
+        "isHoverable",
+        "isPressable",
+        "onKeyDown",
+        "role",
+        "tabIndex"
     ]);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("card", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-        "w-full": local.fullWidth,
-        "shadow-sm": "sm" === local.shadow,
-        "shadow-md": "md" === local.shadow,
-        "shadow-lg": "lg" === local.shadow,
-        "shadow-xl": "xl" === local.shadow,
-        "shadow-none": "none" === local.shadow,
-        "bg-base-100": "base-100" === local.background,
-        "bg-base-200": "base-200" === local.background,
-        "bg-base-300": "base-300" === local.background,
-        "bg-primary": "primary" === local.background,
-        "bg-secondary": "secondary" === local.background,
-        "bg-accent": "accent" === local.background,
-        "bg-neutral": "neutral" === local.background,
-        "bg-info": "info" === local.background,
-        "bg-success": "success" === local.background,
-        "bg-warning": "warning" === local.background,
-        "bg-error": "error" === local.background,
-        "card-xl": "xl" === local.size,
-        "card-lg": "lg" === local.size,
-        "card-md": "md" === local.size,
-        "card-sm": "sm" === local.size,
-        "card-xs": "xs" === local.size,
-        "card-dash": "dash" === local.variant,
-        "card-border": false !== local.border || "outline" === local.variant || "border" === local.variant,
-        "image-full": local.imageFull,
-        [DYNAMIC_MODIFIERS.side[local.side?.toString()] ?? ""]: !!local.side
-    }));
+    const variant = ()=>local.variant ?? "default";
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented || !local.isPressable) return;
+        if ("Enter" !== event.key && " " !== event.key) return;
+        if (event.target !== event.currentTarget) return;
+        event.preventDefault();
+        event.currentTarget.click();
+    };
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            class: classes,
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Root.variant[variant()], local.isHoverable && __WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Root.flag.isHoverable, local.isPressable && __WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Root.flag.isPressable, local.class, local.className)
+            }), {
+            "data-slot": "card",
+            get ["data-variant"] () {
+                return variant();
+            },
+            get ["data-hoverable"] () {
+                return local.isHoverable ? "true" : "false";
+            },
+            get ["data-pressable"] () {
+                return local.isPressable ? "true" : "false";
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -75,24 +53,98 @@ const Card = (props)=>{
                 return local.style;
             },
             get role () {
-                return local.role;
+                return local.role ?? (local.isPressable ? "button" : void 0);
             },
-            get ["aria-label"] () {
-                return local["aria-label"];
+            get tabIndex () {
+                return local.tabIndex ?? (local.isPressable ? 0 : void 0);
             },
-            get ["aria-describedby"] () {
-                return local["aria-describedby"];
+            onKeyDown: handleKeyDown
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const CardHeader = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Header.base, local.class, local.className)
+            }), {
+            "data-slot": "card-header",
+            get ["data-theme"] () {
+                return local.dataTheme;
             },
-            get ["aria-labelledby"] () {
-                return local["aria-labelledby"];
+            get style () {
+                return local.style;
             }
-        }), false, false);
-        return _el$;
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const CardBody = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$3 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Body.base, local.class, local.className)
+            }), {
+            "data-slot": "card-body",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const CardFooter = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Footer.base, local.class, local.className)
+            }), {
+            "data-slot": "card-footer",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$4;
     })();
 };
-Card.Actions = __WEBPACK_EXTERNAL_MODULE__CardActions_js_327b246f__["default"];
-Card.Body = __WEBPACK_EXTERNAL_MODULE__CardBody_js_3648715c__["default"];
-Card.Title = __WEBPACK_EXTERNAL_MODULE__CardTitle_js_a12d15c2__["default"];
-Card.Image = __WEBPACK_EXTERNAL_MODULE__CardImage_js_0ac1c65a__["default"];
+const Card = Object.assign(CardRoot, {
+    Root: CardRoot,
+    Header: CardHeader,
+    Body: CardBody,
+    Content: CardBody,
+    Footer: CardFooter
+});
 const card_Card = Card;
-export { card_Card as default };
+export { Card, CardBody, CardFooter, CardHeader, CardRoot, card_Card as default };

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

@@ -1 +1 @@
-export { default, type CardProps } from "./Card";
+export { default, Card, CardRoot, CardHeader, CardBody, CardFooter, type CardProps, type CardVariant, type CardRootProps, type CardHeaderProps, type CardBodyProps, type CardFooterProps, } from "./Card";

package/dist/components/card/index.js

@@ -1,3 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
+var __webpack_exports__Card = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.Card;
+var __webpack_exports__CardBody = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.CardBody;
+var __webpack_exports__CardFooter = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.CardFooter;
+var __webpack_exports__CardHeader = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.CardHeader;
+var __webpack_exports__CardRoot = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.CardRoot;
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"];
-export { __webpack_exports__default as default };
+export { __webpack_exports__Card as Card, __webpack_exports__CardBody as CardBody, __webpack_exports__CardFooter as CardFooter, __webpack_exports__CardHeader as CardHeader, __webpack_exports__CardRoot as CardRoot, __webpack_exports__default as default };

package/dist/components/chatbubble/ChatBubble.classes.d.ts

@@ -0,0 +1,24 @@
+export declare const CLASSES: {
+    readonly base: "chatbubble";
+    readonly align: {
+        readonly start: "chatbubble--start";
+        readonly end: "chatbubble--end";
+    };
+    readonly slot: {
+        readonly header: "chatbubble__header";
+        readonly footer: "chatbubble__footer";
+        readonly avatar: "chatbubble__avatar";
+        readonly message: "chatbubble__message";
+        readonly time: "chatbubble__time";
+    };
+    readonly color: {
+        readonly neutral: "chatbubble__message--neutral";
+        readonly primary: "chatbubble__message--primary";
+        readonly secondary: "chatbubble__message--secondary";
+        readonly accent: "chatbubble__message--accent";
+        readonly info: "chatbubble__message--info";
+        readonly success: "chatbubble__message--success";
+        readonly warning: "chatbubble__message--warning";
+        readonly error: "chatbubble__message--error";
+    };
+};

package/dist/components/chatbubble/ChatBubble.classes.js

@@ -0,0 +1,25 @@
+const CLASSES = {
+    base: "chatbubble",
+    align: {
+        start: "chatbubble--start",
+        end: "chatbubble--end"
+    },
+    slot: {
+        header: "chatbubble__header",
+        footer: "chatbubble__footer",
+        avatar: "chatbubble__avatar",
+        message: "chatbubble__message",
+        time: "chatbubble__time"
+    },
+    color: {
+        neutral: "chatbubble__message--neutral",
+        primary: "chatbubble__message--primary",
+        secondary: "chatbubble__message--secondary",
+        accent: "chatbubble__message--accent",
+        info: "chatbubble__message--info",
+        success: "chatbubble__message--success",
+        warning: "chatbubble__message--warning",
+        error: "chatbubble__message--error"
+    }
+};
+export { CLASSES };

package/dist/components/chatbubble/ChatBubble.css

@@ -0,0 +1,164 @@
+@layer components {
+  .chatbubble {
+    display: grid;
+    grid-auto-rows: min-content;
+    column-gap: calc(0.25rem * 3);
+    padding-block: calc(0.25rem * 1);
+    --mask-chatbubble: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
+  }
+
+  .chatbubble__header {
+    grid-row-start: 1;
+    display: flex;
+    gap: calc(0.25rem * 1);
+    font-size: 0.6875rem;
+  }
+
+  .chatbubble__footer {
+    grid-row-start: 3;
+    display: flex;
+    gap: calc(0.25rem * 1);
+    font-size: 0.6875rem;
+    opacity: 0.5;
+  }
+
+  .chatbubble__avatar {
+    grid-row: span 2 / span 2;
+    align-self: flex-end;
+  }
+
+  .chatbubble__message {
+    position: relative;
+    display: block;
+    width: fit-content;
+    border-radius: var(--radius-field);
+    background-color: var(--color-base-300);
+    padding-inline: calc(0.25rem * 4);
+    padding-block: calc(0.25rem * 2);
+    color: var(--color-base-content);
+    grid-row-end: 3;
+    min-height: 2rem;
+    min-width: 2.5rem;
+    max-width: 90%;
+  }
+
+  .chatbubble__message:before {
+    position: absolute;
+    bottom: 0;
+    height: calc(0.25rem * 3);
+    width: calc(0.25rem * 3);
+    background-color: inherit;
+    content: "";
+    mask-repeat: no-repeat;
+    mask-image: var(--mask-chatbubble);
+    mask-position: 0 -1px;
+    mask-size: 0.8125rem;
+  }
+
+  .chatbubble__time {
+    font-size: 0.75rem;
+    opacity: 0.5;
+  }
+
+  .chatbubble--end {
+    place-items: end;
+    grid-template-columns: 1fr auto;
+  }
+
+  .chatbubble--end .chatbubble__header {
+    grid-column-start: 1;
+  }
+
+  .chatbubble--end .chatbubble__footer {
+    grid-column-start: 1;
+  }
+
+  .chatbubble--end .chatbubble__avatar {
+    grid-column-start: 2;
+  }
+
+  .chatbubble--end .chatbubble__message {
+    grid-column-start: 1;
+    border-end-end-radius: 0;
+  }
+
+  .chatbubble--end .chatbubble__message:before {
+    transform: rotateY(180deg);
+    inset-inline-start: 100%;
+  }
+
+  [dir="rtl"] .chatbubble--end .chatbubble__message:before {
+    transform: rotateY(0deg);
+  }
+
+  .chatbubble--start {
+    place-items: start;
+    grid-template-columns: auto 1fr;
+  }
+
+  .chatbubble--start .chatbubble__header {
+    grid-column-start: 2;
+  }
+
+  .chatbubble--start .chatbubble__footer {
+    grid-column-start: 2;
+  }
+
+  .chatbubble--start .chatbubble__avatar {
+    grid-column-start: 1;
+  }
+
+  .chatbubble--start .chatbubble__message {
+    grid-column-start: 2;
+    border-end-start-radius: 0;
+  }
+
+  .chatbubble--start .chatbubble__message:before {
+    transform: rotateY(0deg);
+    inset-inline-start: -0.75rem;
+  }
+
+  [dir="rtl"] .chatbubble--start .chatbubble__message:before {
+    transform: rotateY(180deg);
+  }
+
+  .chatbubble__message--neutral {
+    background-color: var(--color-base-300);
+    color: var(--color-base-content);
+  }
+
+  .chatbubble__message--primary {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+
+  .chatbubble__message--secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-content);
+  }
+
+  .chatbubble__message--accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .chatbubble__message--info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .chatbubble__message--success {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+
+  .chatbubble__message--warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+
+  .chatbubble__message--error {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
+  }
+}

package/dist/components/chatbubble/ChatBubble.d.ts

@@ -1,4 +1,4 @@
-import "./chat.css";
+import "./ChatBubble.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type ChatBubbleProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {