npm - @ptlm-azulejo/tabs - Versions diffs - 0.0.1-alpha.192 - Mend

@ptlm-azulejo/tabs 0.0.1-alpha.192

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +4 -0
package/README.md +133 -0
package/dist/index.js +246 -0
package/dist/index.umd.cjs +1 -0
package/dist/packages/Tabs/index.d.ts +3 -0
package/dist/packages/Tabs/index.d.ts.map +1 -0
package/dist/packages/Tabs/src/index.vue.d.ts +54 -0
package/dist/packages/Tabs/src/index.vue.d.ts.map +1 -0
package/dist/packages/Tabs/src/types.d.ts +46 -0
package/dist/packages/Tabs/src/types.d.ts.map +1 -0
package/dist/packages/Tabs/src/useTabs.d.ts +15 -0
package/dist/packages/Tabs/src/useTabs.d.ts.map +1 -0
package/dist/style.css +3 -0
package/package.json +56 -0

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,4 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

package/README.md ADDED Viewed

@@ -0,0 +1,133 @@
+# Tabs
+The `AzTabs` component organizes related content into multiple sections, allowing users to switch between views without leaving the current page. Tabs can display labels, icons, and notification badges.
+## Installation
+```bash
+npm install @ptlm-azulejo/tabs @ptlm-azulejo/themes
+# or
+yarn add @ptlm-azulejo/tabs @ptlm-azulejo/themes
+```
+`@ptlm-azulejo/tabs` depends on `@ptlm-azulejo/divider` and `@ptlm-azulejo/number-badge` (installed automatically).
+`@ptlm-azulejo/themes` is an optional peer — install it so brand tokens resolve at runtime.
+## Styles & theming
+Import a brand preset and the component styles, then set the brand class on the root element:
+```js
+import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
+import '@ptlm-azulejo/tabs/style.css'
+```
+```html
+<html class="preset-lm" data-theme="dark">
+```
+> Without a preset **and** the `.preset-*` class, the component renders uncolored.
+> See the [themes package](../themes/README.md) for brand switching, dark mode,
+> and custom brands.
+## Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `tabs` | `TabItem[]` | — | Tab definitions. Each item supports `label`, `id`, `icon`, `badge`, and `disabled`. |
+| `modelValue` | `string \| number` | `0` | Active tab (`v-model`). A string must match a tab `id`; a number is an index. |
+| `description` | `string` | — | Accessible name for the tab list (`aria-label`). |
+| `size` | `'s' \| 'm'` | `'m'` | Tab size. |
+| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Horizontal alignment of the tab list. |
+| `rounded` | `'none' \| 's' \| 'm' \| 'l' \| 'full'` | `'m'` | Border radius of each tab button. |
+| `divider` | `boolean` | `true` | Renders a divider below the tab list. |
+| `ui` | `TabsUi` | `{}` | Tailwind class overrides per structural part. Merged via `cn()` (conflicting utilities win). |
+### TabItem
+| Property | Type | Description |
+| --- | --- | --- |
+| `label` | `string` | Text displayed in the tab. |
+| `id` | `string` | Unique id used when `modelValue` is a string. |
+| `icon` | `Component \| string` | Optional icon before the label. Use a Vue component, or an Azulejo icon class string (`'az az-ui-home'`). |
+| `badge` | `number` | Optional numeric badge after the label. |
+| `disabled` | `boolean` | Disables the tab. |
+### TabsUi parts
+`root`, `list`, `item`, `tab`, `tabSelected`, `icon`, `label`, `badge`, `divider`
+## Events
+| Name | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `string \| number` | Emitted when the selected tab changes. |
+## Basic usage
+```vue
+<script setup>
+import { ref } from 'vue'
+import { AzTabs } from '@ptlm-azulejo/tabs'
+const selected = ref('overview')
+const tabs = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'orders', label: 'Orders' },
+  { id: 'settings', label: 'Settings' },
+]
+</script>
+<template>
+  <AzTabs v-model="selected" :tabs="tabs" description="Product sections" />
+</template>
+```
+## Index-based model
+```vue
+<script setup>
+import { ref } from 'vue'
+import { AzTabs } from '@ptlm-azulejo/tabs'
+const selected = ref(0)
+const tabs = [
+  { label: 'Overview' },
+  { label: 'Orders' },
+  { label: 'Settings' },
+]
+</script>
+<template>
+  <AzTabs v-model="selected" :tabs="tabs" />
+</template>
+```
+## Icons, badges, and alignment
+```vue
+<script setup>
+import { ref } from 'vue'
+import { AzTabs } from '@ptlm-azulejo/tabs'
+import '@ptlm-azulejo/icons/style.css'
+const selected = ref('home')
+const tabs = [
+  { id: 'home', label: 'Home', icon: 'az az-ui-home' },
+  { id: 'alerts', label: 'Alerts', icon: 'az az-ui-notification', badge: 8 },
+  { id: 'settings', label: 'Settings', icon: 'az az-ui-settings', disabled: true },
+]
+</script>
+<template>
+  <AzTabs v-model="selected" :tabs="tabs" align="center" rounded="m" />
+</template>
+```
+`align` accepts `left` (default), `center`, or `right`.
+`rounded` accepts `none`, `s`, `m` (default), `l`, or `full`.
+## Accessibility
+- Uses WAI-ARIA `tablist` / `tab` roles.
+- Keyboard: `ArrowLeft` / `ArrowRight`, `Home`, `End` (skips disabled tabs).
+- Use `description` to label the tab list for assistive tech.

package/dist/index.js ADDED Viewed

@@ -0,0 +1,246 @@
+import { Fragment as M, computed as p, createBlock as R, createCommentVNode as j, createElementBlock as x, createElementVNode as C, createVNode as F, defineComponent as O, normalizeClass as u, openBlock as g, ref as P, renderList as U, resolveDynamicComponent as q, toDisplayString as G, toRef as A, unref as h } from "vue";
+import { AzDivider as J } from "@ptlm-azulejo/divider";
+import { AzNumberBadge as Q } from "@ptlm-azulejo/number-badge";
+import "@ptlm-azulejo/divider/style.css";
+import "@ptlm-azulejo/number-badge/style.css";
+import { clsx as W } from "clsx";
+import { extendTailwindMerge as X } from "tailwind-merge";
+var Y = X({ extend: { theme: {
+  color: [
+    "accent",
+    "on-accent",
+    "accent-hover",
+    "accent-subtle",
+    "accent-subtle-hover",
+    "accent-strong",
+    "accent-strong-hover",
+    "fg",
+    "fg-accent",
+    "surface",
+    "surface-muted",
+    "edge",
+    "danger",
+    "danger-hover"
+  ],
+  radius: ["btn"]
+} } });
+function f(...a) {
+  return Y(W(a));
+}
+function B(a, y, r) {
+  var o;
+  return typeof r == "string" ? (o = y.id) !== null && o !== void 0 ? o : String(a) : a;
+}
+function Z(a) {
+  function y(e, t) {
+    const s = B(e, t, a.modelValue.value);
+    return a.modelValue.value === s;
+  }
+  function r() {
+    const e = a.modelValue.value, t = a.tabs.value;
+    return typeof e == "string" ? t.findIndex((s) => s.id === e) : typeof e == "number" && e >= 0 && e < t.length ? e : -1;
+  }
+  function o() {
+    return a.tabs.value.map((e, t) => t).filter((e) => {
+      var t;
+      return !(!((t = a.tabs.value[e]) === null || t === void 0) && t.disabled);
+    });
+  }
+  function n() {
+    const e = o();
+    if (e.length === 0)
+      return -1;
+    const t = r();
+    return e.includes(t) ? t : e[0];
+  }
+  function z(e) {
+    const t = n();
+    return t < 0 ? -1 : e === t ? 0 : -1;
+  }
+  function k(e) {
+    const t = a.tabs.value[e];
+    if (!t || t.disabled)
+      return;
+    const s = B(e, t, a.modelValue.value);
+    s !== a.modelValue.value && a.onSelect(s);
+  }
+  function I(e, t) {
+    var s;
+    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "Home" && e.key !== "End")
+      return;
+    const d = o();
+    if (d.length === 0)
+      return;
+    const m = d.indexOf(t);
+    let b = null;
+    if (e.key === "ArrowRight") {
+      if (e.preventDefault(), m < 0)
+        return;
+      b = (m + 1) % d.length;
+    } else if (e.key === "ArrowLeft") {
+      if (e.preventDefault(), m < 0)
+        return;
+      b = (m - 1 + d.length) % d.length;
+    } else
+      e.key === "Home" ? (e.preventDefault(), b = 0) : e.key === "End" && (e.preventDefault(), b = d.length - 1);
+    if (b === null)
+      return;
+    const w = d[b];
+    k(w), (s = a.focusIndex) === null || s === void 0 || s.call(a, w);
+  }
+  function _(e) {
+    return String(e);
+  }
+  return {
+    isSelected: y,
+    getTabIndex: z,
+    select: k,
+    onKeydown: I,
+    formatBadge: _
+  };
+}
+var ee = ["aria-label"], te = [
+  "aria-selected",
+  "aria-disabled",
+  "disabled",
+  "tabindex",
+  "onClick",
+  "onKeydown"
+], ae = /* @__PURE__ */ O({
+  __name: "index",
+  props: {
+    description: {},
+    size: { default: "m" },
+    divider: {
+      type: Boolean,
+      default: !0
+    },
+    align: { default: "left" },
+    rounded: { default: "m" },
+    modelValue: { default: 0 },
+    tabs: {},
+    ui: { default: () => ({}) }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: y }) {
+    const r = {
+      root: "relative w-full bg-[color:var(--color-background-primary)] font-sans",
+      list: [
+        "m-0 flex list-none overflow-x-auto p-0",
+        "gap-[length:var(--spacing-100)]",
+        "py-[length:var(--spacing-100)] px-[calc(var(--spacing)*0.5)]",
+        "md:overflow-hidden"
+      ].join(" "),
+      item: "",
+      tab: [
+        "group relative flex cursor-pointer items-center justify-center border-none bg-transparent no-underline outline-none font-sans",
+        "text-[color:var(--color-text-tertiary)] gap-[calc(var(--spacing)*0.5)]",
+        "hover:not-disabled:bg-[color-mix(in_srgb,var(--color-text-primary)_5%,transparent)]",
+        "focus-visible:outline focus-visible:outline-[length:var(--border-m)] focus-visible:outline-[color:var(--color-text-accent)] focus-visible:outline-offset-[length:var(--border-m)]",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
+      ].join(" "),
+      tabSelected: [
+        "font-semibold text-[color:var(--color-text-accent)]",
+        "bg-[color:var(--color-background-accent)]",
+        "hover:not-disabled:bg-[color-mix(in_srgb,var(--color-background-accent)_88%,#000)]"
+      ].join(" "),
+      icon: ["inline-flex size-[1em] shrink-0 items-center justify-center leading-none text-current", "[&_svg]:block [&_svg]:size-full"].join(" "),
+      label: "pointer-events-none whitespace-nowrap",
+      badge: "inline-flex shrink-0 items-center",
+      divider: ""
+    }, o = {
+      size: {
+        s: {
+          root: "h-10",
+          tab: "text-sm h-[length:var(--spacing-300)] px-3",
+          icon: "text-[length:calc(var(--spacing)*1.25)]"
+        },
+        m: {
+          root: "h-14",
+          tab: "text-base h-[length:var(--spacing-500)] px-4",
+          icon: "text-[length:var(--spacing-300)]"
+        }
+      },
+      align: {
+        left: { list: "justify-start" },
+        center: { list: "justify-center" },
+        right: { list: "justify-end" }
+      },
+      rounded: {
+        none: { tab: "rounded-none" },
+        s: { tab: "rounded-[length:var(--border-radius-s)]" },
+        m: { tab: "rounded-[length:var(--border-radius-m)]" },
+        l: { tab: "rounded-[length:var(--border-radius-l)]" },
+        full: { tab: "rounded-full" }
+      }
+    }, n = a, z = y, k = A(n, "tabs"), I = A(n, "modelValue"), _ = P([]), e = (l, c) => {
+      _.value[c] = l;
+    }, { isSelected: t, getTabIndex: s, select: d, onKeydown: m } = Z({
+      tabs: k,
+      modelValue: I,
+      onSelect: (l) => z("update:modelValue", l),
+      focusIndex: (l) => {
+        var c;
+        return (c = _.value[l]) === null || c === void 0 ? void 0 : c.focus();
+      }
+    }), b = p(() => f(r.root, o.size[n.size].root, n.ui.root)), w = p(() => f(r.list, o.align[n.align].list, n.ui.list)), D = (l, c) => f(r.tab, o.size[n.size].tab, o.rounded[n.rounded].tab, n.ui.tab, t(l, c) && r.tabSelected, t(l, c) && n.ui.tabSelected), $ = (l) => f(r.icon, o.size[n.size].icon, l, n.ui.icon), T = p(() => f(r.label, n.ui.label)), E = p(() => f(r.badge, n.ui.badge)), K = p(() => f(r.divider, n.ui.divider)), N = p(() => f(r.item, n.ui.item)), L = (l) => typeof l == "number", H = (l) => typeof l == "string";
+    return (l, c) => (g(), x("nav", {
+      "data-testid": "tabs",
+      class: u(b.value)
+    }, [C("ul", {
+      role: "tablist",
+      "data-testid": "tabs-list",
+      class: u(w.value),
+      "aria-label": a.description
+    }, [(g(!0), x(M, null, U(a.tabs, (i, v) => {
+      var S;
+      return g(), x("li", {
+        key: (S = i.id) !== null && S !== void 0 ? S : v,
+        role: "presentation",
+        "data-testid": "tabs-item",
+        class: u(N.value)
+      }, [C("button", {
+        ref_for: !0,
+        ref: (V) => e(V, v),
+        type: "button",
+        role: "tab",
+        "data-testid": "tabs-tab",
+        class: u(D(v, i)),
+        "aria-selected": h(t)(v, i),
+        "aria-disabled": i.disabled || void 0,
+        disabled: i.disabled,
+        tabindex: h(s)(v),
+        onClick: (V) => h(d)(v),
+        onKeydown: (V) => h(m)(V, v)
+      }, [
+        H(i.icon) ? (g(), x("i", {
+          key: 0,
+          "data-testid": "tabs-icon",
+          class: u($(i.icon)),
+          "aria-hidden": "true"
+        }, null, 2)) : i.icon ? (g(), R(q(i.icon), {
+          key: 1,
+          "data-testid": "tabs-icon",
+          class: u($()),
+          "aria-hidden": "true"
+        }, null, 8, ["class"])) : j("", !0),
+        C("div", {
+          "data-testid": "tabs-label",
+          class: u(T.value)
+        }, [C("span", null, G(i.label), 1)], 2),
+        L(i.badge) ? (g(), x("span", {
+          key: 2,
+          "data-testid": "tabs-badge",
+          class: u(E.value)
+        }, [F(h(Q), { label: i.badge }, null, 8, ["label"])], 2)) : j("", !0)
+      ], 42, te)], 2);
+    }), 128))], 10, ee), a.divider ? (g(), R(h(J), {
+      key: 0,
+      "data-testid": "tabs-divider",
+      class: u(K.value)
+    }, null, 8, ["class"])) : j("", !0)], 2));
+  }
+}), ce = ae;
+export {
+  ce as AzTabs
+};

package/dist/index.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/packages/Tabs/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { default as AzTabs } from './src/index.vue';
+export type { TabItem, TabsSize, TabsAlign, TabsRounded, TabsModelValue, TabsUi, } from './src/types';
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/Tabs/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACnD,YAAY,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,cAAc,EACd,MAAM,GACP,MAAM,aAAa,CAAA"}

package/dist/packages/Tabs/src/index.vue.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+import { TabItem, TabsAlign, TabsModelValue, TabsRounded, TabsSize, TabsUi } from './types';
+type __VLS_Props = {
+    /**
+     * Accessible name for the tab list (`aria-label`).
+     */
+    description?: string;
+    /**
+     * Size of the tabs. `m` is the default Mozaic medium size.
+     */
+    size?: TabsSize;
+    /**
+     * When true, a divider is rendered below the tab list.
+     */
+    divider?: boolean;
+    /**
+     * Horizontal alignment of the tab list: `left`, `center`, or `right`.
+     */
+    align?: TabsAlign;
+    /**
+     * Border radius of each tab button.
+     * Maps to theme tokens: `s` / `m` / `l`, plus `none` and `full`. Defaults to `m`.
+     */
+    rounded?: TabsRounded;
+    /**
+     * Currently active tab (`v-model`).
+     * - `number` — index of the tab
+     * - `string` — must match a tab `id`
+     */
+    modelValue?: TabsModelValue;
+    /**
+     * Tab definitions used to render the tab list.
+     */
+    tabs: TabItem[];
+    /**
+     * Tailwind class overrides per structural part.
+     * Merged with `defaultTabsUi` via `cn()` — conflicting utilities win.
+     */
+    ui?: TabsUi;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value?: TabsModelValue | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value?: TabsModelValue | undefined) => any) | undefined;
+}>, {
+    rounded: TabsRounded;
+    size: TabsSize;
+    divider: boolean;
+    align: TabsAlign;
+    modelValue: TabsModelValue;
+    ui: TabsUi;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=index.vue.d.ts.map

package/dist/packages/Tabs/src/index.vue.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../src/index.vue"],"names":[],"mappings":"AAwQA,OAAO,iCAAiC,CAAA;AACxC,OAAO,sCAAsC,CAAA;AAG7C,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAmEhG,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAA;IACf;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC;AAkOJ,QAAA,MAAM,YAAY;;;;;aAlPJ,WAAW;UAbd,QAAQ;aAIL,OAAO;WAIT,SAAS;gBAWJ,cAAc;QAStB,MAAM;6EAuOb,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/packages/Tabs/src/types.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { Component } from 'vue';
+export interface TabItem {
+    /**
+     * Unique identifier for the tab. Required when `modelValue` is a string.
+     */
+    id?: string;
+    /**
+     * Icon rendered before the label.
+     * Pass a Vue component, or an Azulejo icon class string (e.g. `'az az-ui-home'`).
+     */
+    icon?: Component | string;
+    /**
+     * Numeric notification badge shown after the label.
+     */
+    badge?: number;
+    /**
+     * Visible tab label.
+     */
+    label: string;
+    /**
+     * When true, the tab cannot be selected.
+     */
+    disabled?: boolean;
+}
+export type TabsSize = 's' | 'm';
+/**
+ * Horizontal alignment of the tab list within the available width.
+ */
+export type TabsAlign = 'left' | 'center' | 'right';
+/**
+ * Border radius of each tab button, mapped to theme `--border-radius-*` tokens.
+ */
+export type TabsRounded = 'none' | 's' | 'm' | 'l' | 'full';
+export type TabsModelValue = string | number;
+export interface TabsUi {
+    root?: string;
+    list?: string;
+    item?: string;
+    tab?: string;
+    tabSelected?: string;
+    icon?: string;
+    label?: string;
+    badge?: string;
+    divider?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/packages/Tabs/src/types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAA;AAEhC;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEnD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAA;AAE3D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAA;AAE5C,MAAM,WAAW,MAAM;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB"}

package/dist/packages/Tabs/src/useTabs.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+import { TabItem, TabsModelValue } from './types';
+export declare function useTabs(options: {
+    tabs: Ref<TabItem[]>;
+    modelValue: Ref<TabsModelValue | undefined>;
+    onSelect: (value: TabsModelValue) => void;
+    focusIndex?: (index: number) => void;
+}): {
+    isSelected: (index: number, tab: TabItem) => boolean;
+    getTabIndex: (index: number) => number;
+    select: (index: number) => void;
+    onKeydown: (event: KeyboardEvent, index: number) => void;
+    formatBadge: (badge: number) => string;
+};
+//# sourceMappingURL=useTabs.d.ts.map

package/dist/packages/Tabs/src/useTabs.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useTabs.d.ts","sourceRoot":"","sources":["../../../../src/useTabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAMtD,wBAAgB,OAAO,CAAC,OAAO,EAAE;IAC/B,IAAI,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC,CAAA;IACpB,UAAU,EAAE,GAAG,CAAC,cAAc,GAAG,SAAS,CAAC,CAAA;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC;wBAC4B,MAAM,OAAO,OAAO,KAAG,OAAO;yBAoC7B,MAAM,KAAG,MAAM;oBAMpB,MAAM,KAAG,IAAI;uBAUV,aAAa,SAAS,MAAM,KAAG,IAAI;yBAuCjC,MAAM,KAAG,MAAM;EAW5C"}

package/dist/style.css ADDED Viewed

@@ -0,0 +1,3 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after{--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 transparent;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 transparent;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 transparent;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 transparent;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 transparent;--tw-outline-style:solid}::-ms-backdrop{--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 transparent;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 transparent;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 transparent;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 transparent;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 transparent;--tw-outline-style:solid}::backdrop{--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 transparent;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 transparent;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 transparent;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 transparent;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 transparent;--tw-outline-style:solid}}}.pointer-events-none{pointer-events:none}.relative{position:relative}.m-0{margin:0}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.size-\[1em\]{width:1em;height:1em}.h-10{height:calc(var(--spacing,.25rem) * 10)}.h-14{height:calc(var(--spacing,.25rem) * 14)}.h-\[length\:var\(--spacing-300\)\]{height:var(--spacing-300)}.h-\[length\:var\(--spacing-500\)\]{height:var(--spacing-500)}.w-full{width:100%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-\[calc\(var\(--spacing\)\*0\.5\)\]{gap:calc(var(--spacing) * .5)}.gap-\[length\:var\(--spacing-100\)\]{gap:var(--spacing-100)}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-\[length\:var\(--border-radius-l\)\]{border-radius:var(--border-radius-l)}.rounded-\[length\:var\(--border-radius-m\)\]{border-radius:var(--border-radius-m)}.rounded-\[length\:var\(--border-radius-s\)\]{border-radius:var(--border-radius-s)}.rounded-full{border-radius:2147483647px}.rounded-none{border-radius:0}.border-none{--tw-border-style:none;border-style:none}.bg-\[color\:var\(--color-background-accent\)\]{background-color:var(--color-background-accent)}.bg-\[color\:var\(--color-background-primary\)\]{background-color:var(--color-background-primary)}.bg-transparent{background-color:transparent}.p-0{padding:0}.px-3{padding-inline:calc(var(--spacing,.25rem) * 3)}.px-4{padding-inline:calc(var(--spacing,.25rem) * 4)}.px-\[calc\(var\(--spacing\)\*0\.5\)\]{padding-inline:calc(var(--spacing) * .5)}.py-\[length\:var\(--spacing-100\)\]{padding-block:var(--spacing-100)}.font-sans{font-family:var(--font-family,ui-sans-serif, system-ui, sans-serif)}.text-base{font-size:var(--font-size-05);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}.text-sm{font-size:var(--font-size-04);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.text-\[length\:calc\(var\(--spacing\)\*1\.25\)\]{font-size:calc(var(--spacing) * 1.25)}.text-\[length\:var\(--spacing-300\)\]{font-size:var(--spacing-300)}.leading-none{--tw-leading:1;line-height:1}.font-semibold{--tw-font-weight:var(--font-weight-semi-bold);font-weight:var(--font-weight-semi-bold)}.whitespace-nowrap{white-space:nowrap}.text-\[color\:var\(--color-text-accent\)\]{color:var(--color-text-accent)}.text-\[color\:var\(--color-text-tertiary\)\]{color:var(--color-text-tertiary)}.text-current{color:currentColor}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-edge{--tw-ring-color:var(--color-border-primary)}.outline,.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.outline-edge{outline-color:var(--color-border-primary)}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.hover\:not-disabled\:bg-\[color-mix\(in_srgb\,var\(--color-background-accent\)_88\%\,\#000\)\]:hover:not(:disabled){background-color:var(--color-background-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:not-disabled\:bg-\[color-mix\(in_srgb\,var\(--color-background-accent\)_88\%\,\#000\)\]:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-background-accent) 88%,#000)}}.hover\:not-disabled\:bg-\[color-mix\(in_srgb\,var\(--color-text-primary\)_5\%\,transparent\)\]:hover:not(:disabled){background-color:var(--color-text-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:not-disabled\:bg-\[color-mix\(in_srgb\,var\(--color-text-primary\)_5\%\,transparent\)\]:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-text-primary) 5%,transparent)}}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--border-m\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--border-m)}.focus-visible\:outline-offset-\[length\:var\(--border-m\)\]:focus-visible{outline-offset:var(--border-m)}.focus-visible\:outline-\[color\:var\(--color-text-accent\)\]:focus-visible{outline-color:var(--color-text-accent)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (hover:hover){.disabled\:hover\:bg-transparent:disabled:hover{background-color:transparent}}@media (min-width:48rem){.md\:overflow-hidden{overflow:hidden}}.\[\&_svg\]\:block svg{display:block}.\[\&_svg\]\:size-full svg{width:100%;height:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 transparent}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 transparent}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 transparent}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 transparent}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 transparent}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
+/*$vite$:1*/

package/package.json ADDED Viewed

@@ -0,0 +1,56 @@
+{
+  "name": "@ptlm-azulejo/tabs",
+  "version": "0.0.1-alpha.192",
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest --run --passWithNoTests",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "dist/*"
+  ],
+  "dependencies": {
+    "@ptlm-azulejo/divider": "^0.0.1-alpha.32",
+    "@ptlm-azulejo/number-badge": "^0.0.1-alpha.33",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.0"
+  },
+  "devDependencies": {
+    "@ptlm-azulejo/themes": "*",
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-interactions": "^7.0.0",
+    "@storybook/test": "^7.0.0",
+    "@storybook/vue3": "^7.0.0",
+    "@storybook/vue3-vite": "^7.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "storybook": "^7.0.0",
+    "tailwindcss": "^4.0.0",
+    "vue": "^3.3.4"
+  },
+  "peerDependencies": {
+    "@ptlm-azulejo/themes": ">=1.0.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@ptlm-azulejo/themes": {
+      "optional": true
+    }
+  }
+}