bromcom-ui 2.12.1-test.0 → 3.0.0-preview.0

package/dist/collection/components/atoms/button/button.style.js

@@ -0,0 +1,89 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const buttonStyle = tv({
+  slots: {
+    base: "",
+    hostStyle: "bcm-button bcm-ui-element bcm-ui-action tw-w-fit tw-relative tw-inline-block",
+    containerStyle: ["bcm-button__container tw-button-reset", "tw-font-medium tw-no-underline", "tw-flex tw-items-center tw-justify-center tw-gap-2", "tw-rounded-[--bcm-button-radius] tw-border tw-border-solid"],
+    iconStyle: "",
+    textStyle: "empty:tw-hidden tw-flex tw-items-center tw-justify-center tw-gap-2",
+  },
+  variants: {
+    size: {
+      small: {
+        containerStyle: ["bcm-button__container-size-small", "tw-text-size-4 tw-py-px tw-px-2", "tw-min-h-6"],
+      },
+      medium: {
+        containerStyle: ["bcm-button__container-size-medium", "tw-text-size-5 tw-py-0.5 tw-px-3", "tw-min-h-8"],
+      },
+      large: {
+        containerStyle: ["bcm-button__container-size-large", "tw-text-size-6 tw-py-1 tw-px-3", "tw-min-h-10"],
+      },
+    },
+    kind: {
+      solid: {
+        containerStyle: "bcm-button__container-kind-solid",
+      },
+      ghost: {
+        containerStyle: "bcm-button__container-kind-ghost",
+      },
+      link: {
+        containerStyle: ["bcm-button__container-kind-link"],
+      },
+      outline: {
+        containerStyle: "bcm-button__container-kind-outline",
+      },
+    },
+    fullWidth: {
+      true: {
+        containerStyle: "full-width tw-w-full",
+        hostStyle: "full-width tw-w-full",
+      },
+    },
+    checked: {
+      true: {
+        containerStyle: "checked !tw-bg-[--bcm-button-bg-active]",
+      },
+    },
+    disabled: {
+      true: {
+        containerStyle: "disabled tw-cursor-not-allowed",
+      },
+      false: {
+        containerStyle: [
+          "tw-cursor-pointer",
+          "tw-bg-[--bcm-button-bg] tw-text-[--bcm-button-text] tw-border-[--bcm-button-border]",
+          "hover:tw-bg-[--bcm-button-bg-hover] hover:tw-text-[--bcm-button-text-hover] hover:tw-border-[--bcm-button-border-hover]",
+          "active:tw-bg-[--bcm-button-bg-active] active:tw-text-[--bcm-button-text-active] active:tw-border-[--bcm-button-border-active]",
+          "focus-visible:tw-ring",
+        ],
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      kind: ["solid", "ghost"],
+      class: {
+        containerStyle: "tw-bg-color-disabled tw-text-color-disabled tw-border-color-disabled",
+      },
+    },
+    {
+      disabled: true,
+      kind: ["link"],
+      class: {
+        containerStyle: "tw-text-color-disabled tw-border-transparent tw-bg-transparent",
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    kind: "solid",
+    fullWidth: false,
+    checked: false,
+    disabled: false,
+  },
+});

package/dist/collection/components/atoms/chip/chip-group.js

@@ -4,9 +4,8 @@
  */
 import { Generate } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
-import { CaptionTemplate, LabelTemplate } from "@bcm/template";
+import { CaptionTemplate } from "@bcm/template";
 import { Host, h } from "@stencil/core";
-import cs from "classnames";
 export class BcmChipGroup {
   constructor() {
     this._id = Generate.UID();
@@ -95,20 +94,9 @@ export class BcmChipGroup {
   }
   render() {
     const { label, required, noCaption, captionType, captionError, caption } = this;
-    const hostClasses = cs("bcm-chip-group");
-    return (h(Host, { class: hostClasses }, label && (h("div", null, h(LabelTemplate, { type: captionType, value: label, required: required }))), h("div", { class: "tw-flex tw-flex-wrap tw-gap-1" }, h("slot", null)), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    return (h(Host, { class: "bcm-chip-group [&_.bcm-chip]:tw-cursor-pointer" }, label && h("bcm-label", { type: captionType, value: label, required: required }), h("div", { class: "tw-flex tw-flex-wrap tw-gap-1" }, h("slot", null)), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   static get is() { return "bcm-chip-group"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["chip-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["chip-group.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {

package/dist/collection/components/atoms/chip/chip.css

@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
 .size-1 {
   font-size: 12px;
   line-height: 20px;
@@ -123,90 +122,15 @@
   margin-right: 8px;
 }
 
-* {
-  box-sizing: border-box;
-}
-
-.bcm-chip {
-  --bcm-chip-color: var(--bcm-new-ds-color-slate-700);
-  --bcm-chip-color-hover: var(--bcm-new-ds-color-slate-700);
-  --bcm-chip-color-focus: var(--bcm-new-ds-color-slate-700);
-  --bcm-chip-color-active: var(--bcm-new-ds-color-slate-700);
-  --bcm-chip-color-disabled: var(--bcm-new-ds-color-slate-300);
-  --bcm-chip-background-color: var(--bcm-new-ds-color-slate-100);
-  --bcm-chip-background-color-hover: var(--bcm-new-ds-color-slate-200);
-  --bcm-chip-background-color-focus: var(--bcm-new-ds-color-slate-300);
-  --bcm-chip-background-color-active: var(--bcm-new-ds-color-slate-400);
-  --bcm-chip-background-color-disabled: var(--bcm-new-ds-color-slate-100);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: fit-content;
-  height: fit-content;
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
-  padding: 0 8px;
-  gap: 4px;
-  color: var(--bcm-chip-color);
-  background-color: var(--bcm-chip-background-color);
-  border-radius: 100px;
-  transition: background-color 0.1s ease-in-out;
-  outline: none;
-}
-.bcm-chip:not(.bcm-chip--disabled):hover {
-  background-color: var(--bcm-chip-background-color-hover);
-}
-.bcm-chip:not(.bcm-chip--disabled):focus {
-  background-color: var(--bcm-chip-background-color-focus);
-  color: var(--bcm-chip-color-focus);
-}
-.bcm-chip:not(.bcm-chip--disabled):active {
-  background-color: var(--bcm-chip-background-color-active);
-  color: var(--bcm-chip-color-active);
-}
-.bcm-chip--disabled {
-  color: var(--bcm-chip-color-disabled);
-  background-color: var(--bcm-chip-background-color-disabled);
-}
-.bcm-chip--avatar {
-  padding-left: 2px;
-}
-.bcm-chip__type-dismissable-icon:hover {
-  cursor: pointer;
-  color: var(--bcm-chip-color-active);
-}
-.bcm-chip__size-small {
-  font-size: 10px;
-  line-height: calc(10px + 8px);
-}
-.bcm-chip__size-small .bcm-avatar {
-  width: 14px;
-  height: 14px;
-}
-.bcm-chip__size-small .bcm-chip--selected-icon {
-  width: 8px;
-}
-.bcm-chip__size-medium {
-  font-size: 12px;
-  line-height: calc(12px + 8px);
-}
-.bcm-chip__size-medium .bcm-avatar {
-  width: 16px;
-  height: 16px;
-}
-.bcm-chip__size-medium .bcm-chip--selected-icon {
-  width: 10px;
-}
-.bcm-chip__size-large {
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-}
-.bcm-chip__size-large .bcm-avatar {
-  width: 18px;
-  height: 18px;
-}
-.bcm-chip__size-large .bcm-chip--selected-icon {
-  width: 12px;
+:root {
+  --bcm-chip-text: var(--bcm-ui-color-text-default);
+  --bcm-chip-text-hover: var(--bcm-ui-color-text-default-hover);
+  --bcm-chip-text-active: var(--bcm-ui-color-text-default-active);
+  --bcm-chip-bg: var(--bcm-ui-color-background-default-default);
+  --bcm-chip-bg-hover: var(--bcm-ui-color-background-default-hover);
+  --bcm-chip-bg-active: var(--bcm-ui-color-background-default-active);
+  --bcm-chip-border: var(--bcm-ui-color-background-default-default);
+  --bcm-chip-border-hover: var(--bcm-ui-color-background-default-hover);
+  --bcm-chip-border-active: var(--bcm-ui-color-background-default-active);
+  --bcm-chip-radius: var(--bcm-ui-radius);
 }

package/dist/collection/components/atoms/chip/chip.js

@@ -2,15 +2,16 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from "@stencil/core";
-import cs from "classnames";
-import { ColorHelper } from "../../../helper/color-helper";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
 import { Generate } from "../../../helper/generate";
+import { chipStyle } from "./chip.style";
 export class BcmChip {
   constructor() {
     this._id = Generate.UID();
     this.type = "default";
-    this.size = "medium";
+    this.kind = "filled";
+    this.size = Bcm.Size.medium;
     this.avatar = undefined;
     this.icon = undefined;
     this.disabled = undefined;
@@ -19,24 +20,6 @@ export class BcmChip {
     this.value = undefined;
     this.data = [];
   }
-  // @ts-ignore
-  setColor() {
-    if (!this.color && !this.selected)
-      return;
-    const color = this.selected ? "indigo" : this.color; // Important: Find a solution for this in V3! ( selected ? this.color : "indigo" )
-    return {
-      "--bcm-chip-color": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-hover": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-focus": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-active": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-disabled": ColorHelper.dsColor("slate" + "-300"),
-      "--bcm-chip-background-color": ColorHelper.dsColor(color + "-100"),
-      "--bcm-chip-background-color-hover": ColorHelper.dsColor(color + "-200"),
-      "--bcm-chip-background-color-focus": ColorHelper.dsColor(color + "-300"),
-      "--bcm-chip-background-color-active": ColorHelper.dsColor(color + "-200"),
-      "--bcm-chip-background-color-disabled": ColorHelper.dsColor("slate" + "-100"),
-    };
-  }
   handleDismiss(e) {
     e.stopPropagation();
     e.preventDefault();
@@ -48,7 +31,6 @@ export class BcmChip {
     this.bcmChipAddable.emit(this.el);
   }
   listSelectedItems(e) {
-    // To be added to v3
     e.stopPropagation();
     e.preventDefault();
     if (e.detail) {
@@ -58,14 +40,48 @@ export class BcmChip {
     }
   }
   render() {
-    const { type, size, avatar, disabled, color } = this;
-    const hostClasses = cs("bcm-chip", `bcm-chip__type-${type}`, `bcm-chip__size-${size}`, {
-      "bcm-chip--disabled": disabled,
-      "bcm-chip--avatar": avatar,
+    const { type, size, avatar, disabled, color, kind, selected } = this;
+    const { hostStyle, avatarStyle, actionStyle } = chipStyle({
+      size,
+      disabled,
+      type,
+      kind,
+      avatar: avatar ? true : false,
     });
-    return (h(Host, { class: hostClasses, tabindex: "0", disabled: disabled, style: this.setColor(), onClick: e => this.bcmChipSelect.emit(e) }, h("div", { class: cs(this.selected ? "bcm-chip--selected-icon" : "tw-hidden tw-w-0") }, h("bcm-icon", { icon: "fal fa-check" })), avatar && h("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === "addable" && (h("span", { class: "bcm-chip__left" }, h("bcm-icon", { onClick: e => this.handleAddable(e), icon: "far fa-plus" }))), h("slot", null), type === "dismissable" && (h("span", { class: "bcm-chip__type-dismissable-icon" }, h("bcm-icon", { onClick: e => this.handleDismiss(e), icon: "fal fa-times" }))), this.data &&
-      this.data.length > 0 && ( // To be added to v3
-    h("bcm-list", { "onBcm-change": e => this.listSelectedItems(e), id: this._id + "-list", data: this.data, linkedComponent: this._id, searchable: true, highlight: true }))));
+    const tones = {
+      filled: {
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+        "100": ["bg", "border"],
+        "200": ["bg-hover", "border-hover"],
+        "300": ["bg-active", "border-active"],
+      },
+      outline: {
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+        "transparent": ["bg"],
+        "200": ["bg-hover"],
+        "300": ["bg-active", "border", "border-hover", "border-active"],
+      },
+      text: {
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+        "transparent": ["bg", "border"],
+        "200": ["bg-hover", "border-hover"],
+        "300": ["bg-active", "border-active"],
+      },
+    };
+    const dc = Generate.getTwColor({
+      color: selected ? "indigo" : color || "slate",
+      tones: tones[kind],
+      variable: `--bcm-chip`,
+    });
+    const style = Object.assign({}, dc);
+    return (h(Host, { class: hostStyle(), tabindex: "0", disabled: disabled, style: style, onClick: e => this.bcmChipSelect.emit(e) }, selected && h("i", { class: "fal fa-check" }), avatar && h("bcm-avatar", Object.assign({ class: avatarStyle() }, (color && { color }), (avatar && { image: avatar }))), type === "addable" && (h("div", { class: actionStyle(), onClick: e => this.handleAddable(e), title: "Add button" }, h("i", { class: "far fa-plus" }))), h("slot", null), type === "dismissable" && (h("div", { class: actionStyle(), onClick: e => this.handleDismiss(e), title: "Dismiss button" }, h("i", { class: "fal fa-times" }))), this.data &&
+      this.data.length > 0 && (h("bcm-list", { "onBcm-change": e => this.listSelectedItems(e), id: this._id + "-list", data: this.data, linkedComponent: this._id, searchable: true, highlight: true }))));
   }
   static get is() { return "bcm-chip"; }
   static get originalStyleUrls() {
@@ -82,7 +98,7 @@ export class BcmChip {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -100,10 +116,10 @@ export class BcmChip {
       },
       "type": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"dismissable\" | \"addable\" | \"checkable\"",
-          "resolved": "\"addable\" | \"checkable\" | \"default\" | \"dismissable\"",
+          "original": "\"default\" | \"dismissable\" | \"addable\"",
+          "resolved": "\"addable\" | \"default\" | \"dismissable\"",
           "references": {}
         },
         "required": false,
@@ -116,13 +132,36 @@ export class BcmChip {
         "reflect": false,
         "defaultValue": "\"default\""
       },
+      "kind": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"filled\" | \"outline\" | \"text\"",
+          "resolved": "\"filled\" | \"outline\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "kind",
+        "reflect": false,
+        "defaultValue": "\"filled\""
+      },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "\"small\" | \"medium\" | \"large\"",
+          "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -132,11 +171,11 @@ export class BcmChip {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "\"medium\""
+        "defaultValue": "Bcm.Size.medium"
       },
       "avatar": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -153,7 +192,7 @@ export class BcmChip {
       },
       "icon": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -170,7 +209,7 @@ export class BcmChip {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "false",
           "resolved": "boolean",
@@ -187,7 +226,7 @@ export class BcmChip {
       },
       "color": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -204,7 +243,7 @@ export class BcmChip {
       },
       "selected": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -222,7 +261,7 @@ export class BcmChip {
       },
       "value": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -239,7 +278,7 @@ export class BcmChip {
       },
       "data": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",

package/dist/collection/components/atoms/chip/chip.style.js

@@ -0,0 +1,99 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const chipStyle = tv({
+  slots: {
+    base: "",
+    hostStyle: ["bcm-chip bcm-ui-element bcm-ui-action tw-w-fit", "tw-inline-flex tw-items-center tw-gap-1 tw-px-2", "tw-rounded-[--bcm-chip-radius] tw-border tw-border-solid", "tw-outline-none"],
+    avatarStyle: "",
+    actionStyle: "",
+  },
+  variants: {
+    size: {
+      small: {
+        hostStyle: "bcm-chip__size-small tw-text-size-3 tw-leading-none tw-min-h-4",
+        avatarStyle: "!tw-w-3 !tw-h-3",
+      },
+      medium: {
+        hostStyle: "bcm-chip__size-medium tw-text-size-4 tw-py-0.5 tw-leading-none tw-min-h-6",
+        avatarStyle: "!tw-w-4 !tw-h-4",
+      },
+      large: {
+        hostStyle: "bcm-chip__size-large tw-text-size-5 tw-py-1  tw-leading-none tw-min-h-8",
+        avatarStyle: "!tw-w-6 !tw-h-6",
+      },
+    },
+    kind: {
+      filled: {
+        hostStyle: "bcm-chip__kind-filled",
+      },
+      outline: {
+        hostStyle: "bcm-chip__kind-outline",
+      },
+      text: {
+        hostStyle: "bcm-chip__kind-text",
+      },
+    },
+    type: {
+      default: {
+        hostStyle: "bcm-chip__type-default ",
+      },
+      addable: {
+        hostStyle: "bcm-chip__type-addable",
+      },
+      dismissable: {
+        hostStyle: "bcm-chip__type-dismissable",
+      },
+    },
+    avatar: {
+      true: {
+        hostStyle: "bcm-chip--avatar",
+        avatarStyle: "!-tw-ml-1",
+      },
+      false: {},
+    },
+    disabled: {
+      true: {
+        hostStyle: "bcm-chip--disabled disabled tw-cursor-not-allowed",
+      },
+      false: {
+        hostStyle: [
+          "tw-bg-[--bcm-chip-bg] tw-text-[--bcm-chip-text] tw-border-[--bcm-chip-border]",
+          "hover:tw-bg-[--bcm-chip-bg-hover] hover:tw-border-[--bcm-chip-border-hover]",
+          "active:tw-bg-[--bcm-chip-bg-active] active:tw-border-[--bcm-chip-border-active]",
+          "focus-visible:tw-ring",
+        ],
+        actionStyle: [
+          "tw-cursor-pointer",
+          "hover:tw-text-[--bcm-chip-text-hover]",
+          "active:tw-text-[--bcm-chip-text-active]",
+        ],
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      kind: ["filled", "outline"],
+      class: {
+        hostStyle: "tw-bg-color-disabled tw-text-color-disabled tw-border-color-disabled",
+      },
+    },
+    {
+      disabled: true,
+      kind: ["text"],
+      class: {
+        hostStyle: "tw-text-color-disabled tw-border-transparent tw-bg-transparent",
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+    type: "default",
+    avatar: false,
+    kind: "filled",
+  },
+});

package/dist/collection/components/atoms/divider/divider.js

@@ -2,55 +2,24 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
-import Bcm from '../../../models/bcm';
+import { Host, h } from "@stencil/core";
+import Bcm from "../../../models/bcm";
+import { dividerStyle } from "./divider.style";
 export class BcmDivider {
   constructor() {
-    this.hidden = false;
     this.direction = Bcm.Direction.horizontal;
   }
   render() {
-    const { hidden, direction } = this;
-    const hostClasses = cs('bcm-divider', 'bcm-divider__direction-' + direction, {
-      'hidden': hidden
-    });
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null))));
+    const { direction } = this;
+    const { base } = dividerStyle({ direction });
+    return h(Host, { class: base() });
   }
   static get is() { return "bcm-divider"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["divider.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["divider.css"]
-    };
-  }
   static get properties() {
     return {
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "direction": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "DirectionTypes",
           "resolved": "\"horizontal\" | \"vertical\"",

package/dist/collection/components/atoms/divider/divider.style.js

@@ -0,0 +1,19 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const dividerStyle = tv({
+  slots: {
+    base: "bcm-divider bcm-ui-element bcm-ui-divider tw-block tw-border-color-default",
+  },
+  variants: {
+    direction: {
+      horizontal: "bcm-divider__direction-horizontal tw-border-b tw-w-full tw-h-px tw-my-1",
+      vertical: "bcm-divider__direction-vertical tw-border-l tw-h-full tw-w-px tw-mx-1",
+    },
+  },
+  defaultVariants: {
+    direction: "horizontal",
+  },
+});