@iris-ui-kit/vue 0.2.2 → 0.2.3

package/dist/index.js

@@ -6596,10 +6596,82 @@ var IrisTabs = defineComponent({
     return () => slots.default?.();
   }
 });
+
+// src/primitives/tabs/styles.ts
+var STYLE_ID = "iris-tabs-styles";
+var CSS4 = `
+:where(.iris-tabs-list) {
+  display: flex;
+  gap: 2px;
+}
+:where(.iris-tabs-list[data-orientation="horizontal"]) {
+  flex-direction: row;
+  border-bottom: 1px solid var(--iris-border);
+}
+:where(.iris-tabs-list[data-orientation="vertical"]) {
+  flex-direction: column;
+  border-inline-end: 1px solid var(--iris-border);
+}
+:where(.iris-tabs-trigger) {
+  padding: 8px var(--iris-padding-md);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  opacity: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--iris-muted);
+  transition: color 120ms ease, border-color 120ms ease;
+}
+:where(.iris-tabs-trigger[data-orientation="horizontal"]) {
+  margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
+}
+:where(.iris-tabs-trigger[data-orientation="vertical"]) {
+  margin-inline-end: -1px;
+  border-inline-end: 2px solid transparent;
+}
+:where(.iris-tabs-trigger[data-state="active"]) {
+  color: var(--iris-primary);
+}
+:where(.iris-tabs-trigger[data-state="active"][data-orientation="horizontal"]) {
+  border-bottom-color: var(--iris-primary);
+}
+:where(.iris-tabs-trigger[data-state="active"][data-orientation="vertical"]) {
+  border-inline-end-color: var(--iris-primary);
+}
+:where(.iris-tabs-trigger[data-disabled]) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+:where(.iris-tabs-trigger:focus-visible) {
+  outline: 2px solid var(--iris-focus-ring, var(--iris-primary));
+  outline-offset: 2px;
+}
+`.trim();
+var installed4 = false;
+function installTabsStyles() {
+  if (installed4) return;
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) {
+    installed4 = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CSS4;
+  document.head.appendChild(style);
+  installed4 = true;
+}
+
+// src/primitives/tabs/TabsList.ts
 var IrisTabsList = defineComponent({
   name: "IrisTabsList",
   inheritAttrs: false,
   setup(_, { slots, attrs }) {
+    installTabsStyles();
     const ctx = inject(TabsContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisTabsList must be inside an IrisTabs");
@@ -6615,14 +6687,8 @@ var IrisTabsList = defineComponent({
         "aria-orientation": ctx.orientation.value,
         "data-iris-tabs-list": "",
         "data-orientation": ctx.orientation.value,
-        style: {
-          display: "flex",
-          flexDirection: ctx.orientation.value === "horizontal" ? "row" : "column",
-          gap: "2px",
-          borderBottom: ctx.orientation.value === "horizontal" ? "1px solid var(--iris-border)" : "none",
-          borderInlineEnd: ctx.orientation.value === "vertical" ? "1px solid var(--iris-border)" : "none",
-          ...attrs.style ?? {}
-        }
+        class: ["iris-tabs-list", attrs.class],
+        style: attrs.style
       },
       slots.default?.()
     );
@@ -6637,6 +6703,7 @@ var IrisTabsTrigger = defineComponent({
     asChild: { type: Boolean, default: false }
   },
   setup(props, { slots, attrs }) {
+    installTabsStyles();
     const ctx = inject(TabsContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisTabsTrigger must be inside an IrisTabs");
@@ -6685,7 +6752,9 @@ var IrisTabsTrigger = defineComponent({
         "data-disabled": isDisabled.value ? "" : void 0,
         disabled: isDisabled.value ? true : void 0,
         onClick,
-        onKeydown: onKeyDown
+        onKeydown: onKeyDown,
+        class: ["iris-tabs-trigger", attrs.class],
+        style: attrs.style
       };
       if (props.asChild) {
         const root = findFirstElement(slots.default?.());
@@ -6696,37 +6765,17 @@ var IrisTabsTrigger = defineComponent({
           return null;
         }
         const merged = mergeSlotProps(
-          { ...triggerProps, ...attrs },
+          { ...attrs, ...triggerProps },
           root.props ?? {}
         );
         return h(root.type, merged, root.children);
       }
-      const colors = isActive.value ? { background: "transparent", color: "var(--iris-primary)" } : { background: "transparent", color: "var(--iris-muted)" };
-      const borderActive = ctx.orientation.value === "horizontal" ? { borderBottom: `2px solid ${isActive.value ? "var(--iris-primary)" : "transparent"}` } : {
-        borderInlineEnd: `2px solid ${isActive.value ? "var(--iris-primary)" : "transparent"}`
-      };
       return h(
         "button",
         {
           type: "button",
           ...attrs,
-          ...triggerProps,
-          style: {
-            padding: "8px var(--iris-padding-md)",
-            fontSize: "14px",
-            fontWeight: "500",
-            fontFamily: "inherit",
-            cursor: isDisabled.value ? "not-allowed" : "pointer",
-            opacity: isDisabled.value ? "0.5" : "1",
-            border: "none",
-            outline: "none",
-            marginBottom: ctx.orientation.value === "horizontal" ? "-1px" : void 0,
-            marginInlineEnd: ctx.orientation.value === "vertical" ? "-1px" : void 0,
-            transition: "color 120ms ease, border-color 120ms ease",
-            ...colors,
-            ...borderActive,
-            ...attrs.style ?? {}
-          }
+          ...triggerProps
         },
         slots.default?.()
       );