npm - @ecoma-io/loom - Versions diffs - 0.2.0 → 0.3.0 - Mend

@ecoma-io/loom 0.2.0 → 0.3.0

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 (1365) hide show

package/dist/primitives/OtpInput/OtpInput.vue_vue_type_script_setup_true_lang.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"OtpInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/OtpInput/OtpInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * What a cell accepts, and what keyboard a phone raises for it. `numeric` is\n * digits only; `text` takes any character, for an alphanumeric backup code.\n */\nexport type OtpInputType = \"numeric\" | \"text\";\n\n/**\n * The one name this control publishes, and it replaces one Reka writes in\n * English of its own accord: `PinInputInput` labels every cell\n * `` `pin input ${index + 1} of ${length}` `` and exposes no prop for it.\n *\n * **One key, not \"Digit\" plus \"Character\" plus a joiner plus a position.** The\n * noun and the two numbers arrive together in one argument object, and the\n * variant — whether this row takes digits or any character — arrives with\n * them, because which word a language uses for a cell and where the position\n * sits relative to it are one decision rather than two. Four fragment keys\n * Loom then joined would be a sentence no translator could reorder.\n *\n * `index` is 1-based: it is a position a person is being read, not an offset\n * into an array, and handing over the 0-based one would make every override\n * write `index + 1` before it could say anything.\n */\nexport interface OtpInputLabels {\n /** One cell, named for what it takes and where it sits in the row. */\n readonly cell: LabelOf<{ index: number; length: number; type: OtpInputType }>;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const OTP_INPUT_LABELS: OtpInputLabels = {\n cell: ({ index, length, type }) =>\n `${type === \"numeric\" ? \"Digit\" : \"Character\"} ${String(index)} of ${String(length)}`,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { PinInputInput, PinInputRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * OtpInput — the row of single-character cells a one-time code or a short PIN\n * is typed into. Reach for it when the value really is a fixed-length code\n * that arrives out of band: the cells are what let `autocomplete=\"one-time-code\"`\n * offer the code the phone has just received, and `inputmode=\"numeric\"` is what\n * raises the digit keypad rather than the alphabet. Both are the reason this\n * exists at all rather than a TextField with a `maxlength` — and both are also\n * why anything a reader would want to read back, correct in the middle, or\n * paste in parts belongs in a TextField instead.\n *\n * Built on Reka UI's PinInput, which supplies the per-cell behaviour: typing\n * advances to the next cell, arrow keys move between them, Backspace on an\n * empty cell steps back and clears the one before it, and a pasted code is\n * distributed across the whole row rather than crammed into one cell.\n *\n * Two things are decided here that Reka leaves open.\n *\n * **The value is a scalar `string`.** Reka models it as an array of cells;\n * this exposes `\"1234\"`, exactly as Slider exposes a scalar where Reka models\n * an array — a code is what a host posts to an API and compares against, and\n * neither of those wants a six-element array. In numeric mode Reka's array is\n * even an array of *numbers*, which loses a leading zero the moment anyone\n * treats it as one value. The consequence is in `onUpdate`.\n *\n * **The row is one control, not `length` of them.** Reka names each cell and\n * leaves each one tabbable, which is how this control usually fails: six\n * inputs each announcing themselves in full, and six Tab presses to step over\n * a field a sighted user reads as one. The name of the thing being typed is\n * moved onto a labelled `role=\"group\"` so it is announced once on entering the\n * row, each cell is left with its position alone, and a roving tabindex makes\n * the row a single Tab stop.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`, and this control is the one where the resolved values\n * do not all land on the same node. The id of the row's hint or error line\n * describes the whole code and goes on the group; `required` and `invalid` are\n * states of the boxes being typed into and go on the cells, where the roles\n * that support them are — `role=\"group\"` supports neither. The row's id and\n * the name the code is submitted under both go to Reka's hidden input: `id` is\n * a declared prop of its root rather than a fallthrough attr, and that input is\n * the better target anyway, since `<label for>` associates only with a\n * labelable element and hands focus to the first cell from there.\n *\n * What a Field still cannot do here is *name* the row: its `<label>` reaches\n * the hidden input, which is `aria-hidden`, so no accessible name is computed\n * from it. Give the name with `ariaLabel` or `ariaLabelledby` as you would\n * outside a row.\n *\n * A row's `readonly` is deliberately ignored. There is nothing to read in an\n * uneditable code box that a line of text would not show better, and the cells\n * exist to be typed into. So the library's three resting appearances collapse\n * to two here: a cell goes straight from `background` to the disabled row's\n * drained fill, muted character and slackened rim, and the lifted `subtle` fill\n * that marks a value on show never appears on this control.\n */\nconst props = withDefaults(\n defineProps<{\n /** The code entered so far. Shorter than `length` while it is incomplete. */\n modelValue?: string;\n /** How many cells the code is typed into. */\n length?: number;\n /** What a cell accepts: digits only, or any character. */\n type?: OtpInputType;\n /** Renders every filled cell as a dot instead of its character, for a PIN typed in public. */\n mask?: boolean;\n /** Unavailable: dims the row and refuses every cell. Unset defers to a wrapping Field. */\n disabled?: boolean | undefined;\n /** Error state: paints the destructive border and ring, and sets `aria-invalid` on every cell. Unset defers to a wrapping Field's `error`. */\n invalid?: boolean | undefined;\n /** The accessible name of the whole row, when no visible element already labels it. */\n ariaLabel?: string;\n /** The id of the visible element that labels the row — a heading, or a field's own label. */\n ariaLabelledby?: string;\n /**\n * The name each cell gives itself, as any subset of `OtpInputLabels` — the\n * rest stay as the host's `provideLoomLabels` vocabulary left them, and\n * then as Loom's English.\n *\n * This is the per-instance correction, not the place to localise an\n * application: the case it exists for is a row whose cells are neither\n * digits nor characters in the reader's terms — the groups of a licence\n * key, say — where the noun has to say so however well the application is\n * translated.\n */\n labels?: LabelOverrides<OtpInputLabels>;\n }>(),\n {\n length: 6,\n type: \"numeric\",\n mask: false,\n // Not `false`, for either. `false` is a caller saying \"this row is fine /\n // enabled even though the field around it is not\"; absent is a caller\n // saying nothing, and only `undefined` survives to mean that past Vue's\n // absent-Boolean-casts-to-false rule — see TextField.vue, which carries\n // the full reasoning.\n disabled: undefined,\n invalid: undefined,\n },\n);\n\nconst emit = defineEmits<{\n /** The code so far, as one string. Fires on every cell that fills or clears. */\n \"update:modelValue\": [value: string];\n /** The finished code. Fires once, as the last empty cell takes its character. */\n complete: [value: string];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"otpInput\", OTP_INPUT_LABELS, () => props.labels);\n\n// Every fallthrough attribute lands on the group: an `aria-describedby`\n// pointing at an error line, a `data-testid`, an `id` — each describes the\n// control as a whole, and copying one onto `length` inputs would have a screen\n// reader repeat it on every cell. `class` is pulled out of that spread only so\n// it can go through `cn()`, which is what lets a caller's utility beat the\n// row's own instead of losing to whichever Tailwind emitted last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it. `name`,\n// `readonly` and `required` are absent from this object because there is no\n// prop to oppose the row with; the row's answer stands unopposed, which is\n// what is wanted.\nconst field = useFieldControl(() => ({\n id: attrs.id as string | undefined,\n describedBy: attrs[\"aria-describedby\"] as string | undefined,\n ariaLabelledby: props.ariaLabelledby,\n disabled: props.disabled,\n invalid: props.invalid,\n}));\n\n// Three of the resolved keys do not travel with the bag, because the bag lands\n// on the group and the group is the wrong node for all three.\n//\n// `name` would be a `name` on a `<div>`, which no form reads; Reka's own\n// hidden input carries the joined code, so the row's name is given to the root\n// as a prop instead.\n//\n// `aria-required` and `aria-invalid` are states of the boxes a reader types\n// into, and `role=\"group\"` supports neither — `aria-invalid` is a global so it\n// would at least be legal there, `aria-required` is not and would fail\n// `aria-allowed-attr`. Both are bound per cell below, off the same resolved\n// values, so the row's error reaches the element a screen reader is actually\n// sitting on.\n//\n// `id` stays in the bag and still does not land here: it is a declared prop of\n// Reka's root, so it is taken as a prop rather than falling through, and Reka\n// puts it on that same hidden input — which is the labelable node a\n// `<label for>` needs, and the one that hands focus to the first cell.\nconst groupFieldAttrs = computed(() => {\n // Removed from a copy rather than listed positively, so a key added to the\n // resolved bag later reaches this group without anyone remembering to come\n // back here.\n const group: Record<string, unknown> = { ...field.attrs };\n delete group.name;\n delete group[\"aria-required\"];\n delete group[\"aria-invalid\"];\n return group;\n});\n\n// The single source of truth for the code we know about: seeded from the prop,\n// then advanced on every update Reka reports. Feeding this back into Reka\n// rather than `props.modelValue` is what keeps the row usable for a host that\n// binds no `modelValue` at all — the same buffer Slider keeps, for the same\n// reason. An absent prop leaves it empty rather than sticking the row on one\n// value, so nothing here needs `optional()`.\nconst code = ref(props.modelValue ?? \"\");\nwatch(\n () => props.modelValue,\n (value) => {\n if (value !== undefined) code.value = value;\n },\n);\n\n// Longer than the row is the host's mistake to make, not ours to render: the\n// extra characters have no cell to live in.\nconst cells = computed(() => code.value.slice(0, props.length).split(\"\"));\n\n// Reka calls the digits-only mode \"number\". The prop says \"numeric\" because\n// nothing about the value is a number — a code with a leading zero is a\n// string, and this control never parses one.\nconst pinType = computed(() => (props.type === \"numeric\" ? \"number\" : \"text\"));\n\n// The row is one Tab stop. The stop is the first empty cell, which is also\n// where Reka's own `otp` handling redirects focus, or the last cell once the\n// code is full — so Tab lands where the next character goes.\nconst tabStopIndex = computed(() => Math.min(code.value.length, props.length - 1));\n\n// Typed wider than the declared emit on purpose: in numeric mode the array\n// really does come back holding numbers, and a cleared middle cell comes back\n// as a hole. Both are why a scalar is the exposed shape.\nfunction onUpdate(next: (string | number)[]) {\n // `join` is where the scalar is decided, and it closes gaps: Reka can hold a\n // cleared middle cell as a hole, a string cannot, so the cells after it\n // shift left. That is the only reading that keeps the model and the row\n // agreeing on one value — and it is what a single text input does when a\n // character in the middle is deleted.\n const value = next.join(\"\");\n // Reka reports the whole row on every write, including a write that changed\n // nothing a string can see — pasting the same code over itself is the\n // reachable one. Stopping here keeps one changed code to one emitted value,\n // and one filled code to one `complete`.\n if (value === code.value) return;\n code.value = value;\n emit(\"update:modelValue\", value);\n // Derived here rather than forwarded from Reka's own `complete`, which fires\n // from a deep watcher on its model — and that model is set twice for one\n // keystroke once the row is controlled, once by Reka and once by the value\n // coming back around. Forwarding it would announce one filled code twice.\n if (value.length === props.length) emit(\"complete\", value);\n}\n</script>\n\n<template>\n <PinInputRoot\n v-bind=\"{ ...groupAttrs, ...groupFieldAttrs, ...optional({ name: field.name }) }\"\n :model-value=\"cells\"\n :type=\"pinType\"\n :mask=\"mask\"\n :disabled=\"field.disabled\"\n otp\n role=\"group\"\n :aria-label=\"ariaLabelledby ? undefined : ariaLabel\"\n :aria-labelledby=\"ariaLabelledby || (!ariaLabel ? field.labelledBy : undefined)\"\n :data-invalid=\"field.invalid || undefined\"\n :class=\"cn('inline-flex items-center gap-2', attrs.class as string)\"\n @update:model-value=\"onUpdate\"\n >\n \n <PinInputInput\n v-for=\"cell in length\"\n :key=\"cell\"\n :index=\"cell - 1\"\n :tabindex=\"cell - 1 === tabStopIndex ? 0 : -1\"\n :aria-label=\"text.cell({ index: cell, length, type })\"\n :aria-required=\"field.required || undefined\"\n :aria-invalid=\"field.invalid || undefined\"\n :data-filled=\"cell <= code.length || undefined\"\n :class=\"\n cn(\n // Square, on the control scale's tallest step: a code cell is a\n // touch target before it is a form row, and 44px is the size a thumb\n // is aimed at. `tabular` keeps the six glyphs on one width so the\n // row does not breathe as it fills.\n 'tabular h-11 w-11 rounded-md border border-input bg-background text-center text-base text-foreground',\n 'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n // Rim-lit at rest; the ring blooms on the cell being typed into.\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n !field.invalid && 'focus-visible:shadow-halo',\n // A filled cell is legible as filled from its character — or its\n // mask dot — alone. The heavier border is a second, redundant cue,\n // and a weight rather than a hue, so it survives both a colour\n // deficiency and forced-colors.\n //\n // Withheld from an unavailable row, and only because the border is\n // also the third channel of the disabled state below: two rules\n // moving the same rim in opposite directions would leave a\n // half-filled disabled row with a heavier edge than an empty one,\n // which reads as the more available of the two. The cue is redundant\n // by construction, so the state wins it.\n !field.disabled && 'data-[filled]:border-border-strong',\n // Unavailable is a *colour* and a *weight*, never an opacity. A cell\n // holds one character — or one mask dot — and that is the entire\n // content of the control, so `opacity-50` here did not dim a code so\n // much as erase it: `--color-foreground` measures 14.09:1 on the\n // resting fill and 2.99:1 once composited at half alpha. The drained\n // fill carries the state instead, the character stays at a measured\n // 4.68:1, and the rim slackens from `input` to `border` so the state\n // is not told in hue alone.\n //\n // The fill and the text colour are `disabled:` variants rather than\n // plain classes, so each outranks the resting `bg-background\n // text-foreground` above on specificity rather than on where Tailwind\n // happened to emit it. The border cannot join them: a `disabled:`\n // variant would outrank the plain `border-destructive` below, and a\n // row that is both in error and unavailable has to keep saying so.\n 'disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground',\n field.disabled && 'border-border',\n field.invalid && 'border-destructive focus-visible:outline-destructive',\n )\n \"\n />\n </PinInputRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;AAkCA,IAAa,mBAAmC,EAC9C,OAAO,EAAE,OAAO,QAAQ,WACtB,GAAG,SAAS,YAAY,UAAU,YAAY,GAAG,OAAO,KAAK,EAAE,MAAM,OAAO,MAAM,IACtF;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,MAAM,QAAQ;EA6Cd,MAAM,OAAO;EAUb,MAAM,OAAO,UAAU,YAAY,wBAAwB,MAAM,MAAM;EASvE,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;EASlD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,gBAAgB,MAAM;GACtB,UAAU,MAAM;GAChB,SAAS,MAAM;EACjB,EAAE;EAoBF,MAAM,kBAAkB,eAAe;GAIrC,MAAM,QAAiC,EAAE,GAAG,MAAM,MAAM;GACxD,OAAO,MAAM;GACb,OAAO,MAAM;GACb,OAAO,MAAM;GACb,OAAO;EACT,CAAC;EAQD,MAAM,OAAO,IAAI,MAAM,cAAc,EAAE;EACvC,YACQ,MAAM,aACX,UAAU;GACT,IAAI,UAAU,KAAA,GAAW,KAAK,QAAQ;EACxC,CACF;EAIA,MAAM,QAAQ,eAAe,KAAK,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC;EAKxE,MAAM,UAAU,eAAgB,MAAM,SAAS,YAAY,WAAW,MAAO;EAK7E,MAAM,eAAe,eAAe,KAAK,IAAI,KAAK,MAAM,QAAQ,MAAM,SAAS,CAAC,CAAC;EAKjF,SAAS,SAAS,MAA2B;GAM3C,MAAM,QAAQ,KAAK,KAAK,EAAE;GAK1B,IAAI,UAAU,KAAK,OAAO;GAC1B,KAAK,QAAQ;GACb,KAAK,qBAAqB,KAAK;GAK/B,IAAI,MAAM,WAAW,MAAM,QAAQ,KAAK,YAAY,KAAK;EAC3D;;GAIE,OAAA,UAAA,GAAA,YAyEe,MAAA,YAAA,GAzEf,WAyEe;IAAA,GAxEA,MAAA,UAAA;IAAU,GAAK,gBAAA;IAAe,GAAK,MAAA,QAAA,CAAQ,CAAA,EAAA,MAAS,MAAA,KAAA,CAAK,CAAC,KAAI,CAAA;GAAA,GAAA;IAC1E,eAAa,MAAA;IACb,MAAM,QAAA;IACN,MAAM,QAAA;IACN,UAAU,MAAA,KAAA,CAAK,CAAC;IACjB,KAAA;IACA,MAAK;IACJ,cAAY,QAAA,iBAAiB,KAAA,IAAY,QAAA;IACzC,mBAAiB,QAAA,mBAAc,CAAM,QAAA,YAAY,MAAA,KAAA,CAAK,CAAC,aAAa,KAAA;IACpE,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;IAC/B,OAAO,MAAA,EAAA,CAAE,CAAA,kCAAmC,MAAA,KAAA,CAAK,CAAC,KAAK;IACvD,uBAAoB;;IASnB,SAAA,cAAsB,EADxB,UAAA,IAAA,GAAA,mBAoDE,UAAA,MAAA,WAnDe,QAAA,SAAR,SAAI;KADb,OAAA,UAAA,GAAA,YAoDE,MAAA,aAAA,GAAA;MAlDC,KAAK;MACL,OAAO,OAAI;MACX,UAAU,OAAI,MAAS,aAAA,QAAY,IAAA;MACnC,cAAY,MAAA,IAAA,CAAI,CAAC,KAAI;OAAA,OAAU;OAAI,QAAE,QAAA;OAAM,MAAE,QAAA;MAAI,CAAA;MACjD,iBAAe,MAAA,KAAA,CAAK,CAAC,YAAY,KAAA;MACjC,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;MAC/B,eAAa,QAAQ,KAAA,MAAK,UAAU,KAAA;MACpC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,wGAAA,sFAAA,qFAAiqB,CAAA,MAAA,KAAA,CAAK,CAAC,WAAO,6BAAwvB,CAAA,MAAA,KAAA,CAAK,CAAC,YAAQ,sCAAA,gFAA2rC,MAAA,KAAA,CAAK,CAAC,YAAQ,iBAA+B,MAAA,KAAA,CAAK,CAAC,WAAO,sDAAA,CAAA"}

package/dist/primitives/Pagination/Pagination.js DELETED Viewed

@@ -1,7 +0,0 @@
-import Pagination_vue_vue_type_script_setup_true_lang_default, { PAGINATION_LABELS, paginationVariants } from "./Pagination.vue_vue_type_script_setup_true_lang.js";
-//#region src/primitives/Pagination/Pagination.vue
-var Pagination_default = Pagination_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { PAGINATION_LABELS, Pagination_default as default, paginationVariants };
-//# sourceMappingURL=Pagination.js.map

package/dist/primitives/Pagination/Pagination.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/primitives/Pagination/Pagination.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * Everything this control publishes to assistive technology — including the six\n * names Reka would otherwise supply in English of its own accord.\n *\n * `first`, `previous`, `next`, `last` and `page` are not decoration. Reka's\n * `PaginationFirst` and its siblings write `aria-label=\"First Page\"` into their\n * own vnode props and expose no prop for it; `PaginationListItem` writes\n * `` `Page ${value}` ``. A binding on the Loom side arrives as a fallthrough\n * attribute, which Vue merges onto the root vnode *after* the render function\n * produced it, and `mergeProps` is last-write-wins for everything that is not\n * `class`, `style` or `on*`. So these replace Reka's rather than competing with\n * it — the same mechanism `DateRangePicker`'s cell triggers have relied on\n * since they landed, and `Pagination.test.ts` pins it by asserting the\n * *capitalisation* Loom uses and Reka does not.\n *\n * `page` and `position` take the numbers rather than a formatted string, so an\n * `ar-EG` host reaches `Intl.NumberFormat` for Eastern Arabic digits and a\n * language that orders \"of\" differently can order it differently. See\n * `LabelOf` in `src/lib/labels.ts`.\n */\nexport interface PaginationLabels {\n /**\n * The `<nav>` landmark's own name. A page commonly carries two of these —\n * above and below a table — and two `<nav>`s named the same thing are as\n * confusing to a screen reader as two named nothing, so give each one a name\n * that says which it is.\n */\n readonly nav: string;\n /** The button that jumps to page one. */\n readonly first: string;\n /** The button that steps back one page. */\n readonly previous: string;\n /** The button that steps on one page. */\n readonly next: string;\n /** The button that jumps to the last page. */\n readonly last: string;\n /** One numbered button in the `full` variant, named for the page it reaches. */\n readonly page: LabelOf<{ page: number }>;\n /** The position readout the `compact` and `simple` variants publish. */\n readonly position: LabelOf<{ page: number; pageCount: number }>;\n /** The ellipsis standing in for the pages the window had no room for. */\n readonly ellipsis: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it: a\n * consumer who never imports Pagination ships none of these bytes.\n *\n * Exported so a host can build a partial vocabulary against the real thing\n * rather than a transcription of it.\n */\nexport const PAGINATION_LABELS: PaginationLabels = {\n nav: \"Pagination\",\n first: \"First page\",\n previous: \"Previous page\",\n next: \"Next page\",\n last: \"Last page\",\n page: ({ page }) => `Page ${String(page)}`,\n position: ({ page, pageCount }) => `Page ${String(page)} of ${String(pageCount)}`,\n ellipsis: \"More pages\",\n};\n\n/**\n * How much of the paging apparatus is rendered. All three drive the same\n * model and carry the same semantics — they differ only in how much room the\n * navigation is worth on the surface it sits on.\n *\n * • `full` — the numbered row with ellipses, plus first/prev/next/last.\n * For a table where jumping to a known page is a real task.\n * • `compact` — prev, \"Page 3 of 12\", next. The position stays legible\n * without spending a whole row on it.\n * • `simple` — prev and next alone, for a feed nobody navigates by index.\n */\nexport type PaginationVariant = \"full\" | \"compact\" | \"simple\";\n\nexport const paginationVariants = cva(\"inline-flex items-center\", {\n // `satisfies` keeps the two halves honest: the union above is the name a\n // consumer imports and the documentation prints, the map below is the\n // classes. Adding a member to one and not the other stops compiling.\n variants: {\n variant: {\n // The numbered row is a run of same-size squares and reads as one strip\n // at gap-1; the compact form is a sentence between two controls and\n // needs the wider gap to stop reading as a third button.\n full: \"gap-1\",\n compact: \"gap-2\",\n simple: \"gap-1\",\n } satisfies Record<PaginationVariant, string>,\n },\n defaultVariants: { variant: \"full\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick } from \"vue\";\nimport {\n PaginationRoot,\n PaginationList,\n PaginationListItem,\n PaginationFirst,\n PaginationPrev,\n PaginationNext,\n PaginationLast,\n PaginationEllipsis,\n} from \"reka-ui\";\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"@lucide/vue\";\nimport { buttonVariants } from \"../Button/Button.vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\n\n/**\n * Pagination — moving through a paged result set, one page at a time or by\n * jumping to a numbered one.\n *\n * It renders **buttons, never links**. Loom cannot know whether a consumer's\n * pages are addressable URLs, and an `<a>` with no `href` is not a link at\n * all — it is a div that lies to a screen reader and drops out of the tab\n * order. A product whose pages are real, crawlable URLs wants its own\n * `<a href>` row instead of this component; nothing here can be made to\n * produce one.\n *\n * Reach for a different control when the list is not paged: an infinite feed\n * wants a \"load more\" button, and a long list a reader scans rather than\n * indexes wants a virtualised scroller.\n *\n * Built on Reka UI's Pagination, which owns the arithmetic — the page count,\n * the sliding window of numbers around the current page, and where the\n * ellipses fall. That window is fiddly enough at the boundaries that\n * recomputing it here would only be a second, subtly different answer.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * The current page, 1-based. Leave it unset to let the component keep its\n * own page and simply report changes.\n */\n page?: number;\n /** How many items exist in total, across every page. */\n total: number;\n /** How many items one page holds. With `total`, this is what fixes the page count. */\n itemsPerPage?: number;\n /** How much of the control renders: the numbered row, a position readout, or arrows alone. */\n variant?: PaginationVariant;\n /** How many numbers sit either side of the current page, in the `full` variant. */\n siblingCount?: number;\n /** Pins page 1 and the last page into the numbered row, with ellipses standing in for the gap. */\n showEdges?: boolean;\n /** Unavailable: every control dims and refuses to move the page. */\n disabled?: boolean;\n /**\n * Names for everything this control says out loud, as any subset of\n * `PaginationLabels` — the rest stay as the host's `provideLoomLabels`\n * vocabulary left them, and then as Loom's English.\n *\n * This is the per-instance correction, not the place to localise an\n * application: the case it exists for is the two paginations above and\n * below one table, which must not share `labels.nav`.\n */\n labels?: LabelOverrides<PaginationLabels>;\n }>(),\n {\n itemsPerPage: 10,\n variant: \"full\",\n siblingCount: 1,\n // Reka defaults this off, which drops the ellipses entirely and lets the\n // numbered row float free of both ends. The anchored form is what people\n // mean by a full pagination, so Loom turns it on.\n showEdges: true,\n disabled: false,\n },\n);\n\nconst emit = defineEmits<{\n /** The 1-based page the reader asked for. A controlled host decides whether to honour it. */\n \"update:page\": [page: number];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"pagination\", PAGINATION_LABELS, () => props.labels);\n\n// The root renders the `<nav>`, so every fallthrough attribute belongs on it —\n// there is no second node they could sensibly describe. `class` is pulled out\n// of that spread and merged through `cn()` instead: spreading it alongside the\n// nav's own `:class` only concatenates the two lists, so a caller's `gap-2`\n// would win or lose depending on which utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: navAttrs } = useSplitAttrs();\n\n// The edge controls keep the dim, and they are the one place in this component\n// where it is still the right answer: their whole content is a chevron marked\n// `aria-hidden`, so there is no text for the alpha to take down with it and the\n// name a screen reader announces is an `aria-label` no paint can reach. WCAG\n// exempts an inactive control from 1.4.11 besides. Prev and First sit disabled\n// on page 1 for as long as a reader is on it, which is the other half of the\n// argument: a faded chevron is the conventional reading of \"no further this\n// way\", where a drained plate would draw the eye to the control that cannot be\n// used.\nconst edgeClass = cn(\n buttonVariants({ variant: \"ghost\", size: \"icon-sm\" }),\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n);\n\n// The page buttons borrow Button's own variants rather than restating its\n// press language, so the row cannot drift from every other pressable thing in\n// the library. `min-w-8` with tabular figures is what keeps the row from\n// reflowing as the numbers under it grow a digit.\nfunction pageClass(selected: boolean): string {\n return cn(\n buttonVariants({ variant: selected ? \"primary\" : \"ghost\", size: \"sm\" }),\n \"min-w-8 px-2 tabular\",\n // No `opacity` here, unlike the edges above, because this button's content\n // *is* text — the page number, the one thing a reader needs from a pager\n // that is briefly out of service. `disabled:opacity-50` composited the\n // ghost variant's `--color-muted-foreground` down to 2.05:1 and the current\n // page's white-on-primary label down to 2.48:1; halving the alpha more than\n // halves the contrast. Unavailability is painted in measured colours\n // instead.\n //\n // The two branches drain to different wells on purpose, which is Chip's\n // rule applied to a row of numbers: an unselected page falls to the neutral\n // well at 4.67:1, and the current page keeps the primary wash it already wears\n // at 6.84:1. Which page a reader is on is information, and a disabled pager\n // that forgets it has answered the question by refusing to answer it.\n selected\n ? \"disabled:cursor-not-allowed disabled:bg-primary-muted disabled:text-primary disabled:shadow-none\"\n : \"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\",\n );\n}\n\n/** Which edge control stands in for which, when the one that was pressed goes away. */\nconst MIRROR: Record<string, string | undefined> = {\n first: \"last\",\n prev: \"next\",\n next: \"prev\",\n last: \"first\",\n};\n\n// Reka disables Prev/First at page 1 and Next/Last at the last page, and that\n// is the honest state: a control that looks unavailable and still fires is\n// worse than one that is not there at all. The cost is real, though — a\n// browser blurs a button the instant it becomes disabled, so a reader holding\n// Enter on Next arrives at the last page with focus dumped on `<body>` and\n// their place in the document gone.\n//\n// So the control that fired the change hands focus on: to the current page\n// button where the variant has one — which announces \"Page 12, current page\",\n// the very thing the reader was trying to find out — and to its mirror control\n// otherwise, which is the nearest thing still able to move the page.\n//\n// Only for a keyboard activation. `detail === 0` is what separates a click\n// synthesised by Enter or Space from a pointer click, and a pointer user has\n// no focus position to lose; moving focus for them would raise a ring nobody\n// asked for.\nlet pressed: HTMLButtonElement | null = null;\n\nfunction rememberKeyboardPress(event: MouseEvent): void {\n const target = event.target as HTMLElement | null;\n pressed = event.detail === 0 ? (target?.closest<HTMLButtonElement>(\"button\") ?? null) : null;\n}\n\nfunction handOffFocus(): void {\n const origin = pressed;\n pressed = null;\n if (!origin?.disabled) return;\n\n // Only rescue focus that was actually lost. A browser leaves `<body>`\n // focused after disabling the button; jsdom leaves the button itself. Any\n // other active element means the reader has already moved on, and stealing\n // focus back from them would be the worse bug.\n const active = document.activeElement;\n if (active !== origin && active !== document.body) return;\n\n const nav = origin.closest(\"nav\");\n if (!nav) return;\n\n const mirror = MIRROR[origin.getAttribute(\"data-edge\") ?? \"\"];\n const target =\n nav.querySelector<HTMLButtonElement>('[aria-current=\"page\"]:not([disabled])') ??\n (mirror\n ? nav.querySelector<HTMLButtonElement>(`[data-edge=\"${mirror}\"]:not([disabled])`)\n : null);\n target?.focus();\n}\n\nfunction onPageChange(value: number): void {\n emit(\"update:page\", value);\n // After the re-render rather than before it: the button that was pressed\n // only becomes disabled once the new page has been applied.\n void nextTick(handOffFocus);\n}\n</script>\n\n<template>\n <PaginationRoot\n v-slot=\"{ page: current, pageCount }\"\n v-bind=\"{ ...navAttrs, ...optional({ page }) }\"\n :total=\"total\"\n :items-per-page=\"itemsPerPage\"\n :sibling-count=\"siblingCount\"\n :show-edges=\"showEdges\"\n :disabled=\"disabled\"\n :aria-label=\"text.nav\"\n :class=\"cn(paginationVariants({ variant }), attrs.class as string)\"\n @click=\"rememberKeyboardPress\"\n @update:page=\"onPageChange\"\n >\n \n <PaginationFirst\n v-if=\"variant === 'full'\"\n data-edge=\"first\"\n :aria-label=\"text.first\"\n :class=\"edgeClass\"\n >\n <ChevronsLeft class=\"h-4 w-4\" aria-hidden=\"true\" />\n </PaginationFirst>\n\n <PaginationPrev data-edge=\"prev\" :aria-label=\"text.previous\" :class=\"edgeClass\">\n <ChevronLeft class=\"h-4 w-4\" aria-hidden=\"true\" />\n </PaginationPrev>\n\n <PaginationList v-if=\"variant === 'full'\" v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n \n <template\n v-for=\"(item, index) in items\"\n :key=\"item.type === 'page' ? `page-${item.value}` : `ellipsis-${index}`\"\n >\n <PaginationListItem\n v-if=\"item.type === 'page'\"\n :value=\"item.value\"\n :aria-label=\"text.page({ page: item.value })\"\n :class=\"pageClass(item.value === current)\"\n />\n \n <PaginationEllipsis\n v-else\n as=\"span\"\n class=\"inline-flex h-8 min-w-8 select-none items-center justify-center text-sm text-muted-foreground\"\n >\n <span aria-hidden=\"true\">…</span>\n <span class=\"sr-only\">{{ text.ellipsis }}</span>\n </PaginationEllipsis>\n </template>\n </PaginationList>\n\n \n \n <span\n v-if=\"variant !== 'full'\"\n role=\"status\"\n :class=\"variant === 'compact' ? 'px-1 text-sm tabular text-muted-foreground' : 'sr-only'\"\n >\n {{ text.position({ page: current, pageCount }) }}\n </span>\n\n <PaginationNext data-edge=\"next\" :aria-label=\"text.next\" :class=\"edgeClass\">\n <ChevronRight class=\"h-4 w-4\" aria-hidden=\"true\" />\n </PaginationNext>\n\n <PaginationLast\n v-if=\"variant === 'full'\"\n data-edge=\"last\"\n :aria-label=\"text.last\"\n :class=\"edgeClass\"\n >\n <ChevronsRight class=\"h-4 w-4\" aria-hidden=\"true\" />\n </PaginationLast>\n </PaginationRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/Pagination/Pagination.vue.d.ts DELETED Viewed

@@ -1,143 +0,0 @@
-import { type LabelOverrides } from "../../lib/labels";
-import type { LabelOf } from "../../lib/labels";
-/**
- * Everything this control publishes to assistive technology — including the six
- * names Reka would otherwise supply in English of its own accord.
- *
- * `first`, `previous`, `next`, `last` and `page` are not decoration. Reka's
- * `PaginationFirst` and its siblings write `aria-label="First Page"` into their
- * own vnode props and expose no prop for it; `PaginationListItem` writes
- * `` `Page ${value}` ``. A binding on the Loom side arrives as a fallthrough
- * attribute, which Vue merges onto the root vnode *after* the render function
- * produced it, and `mergeProps` is last-write-wins for everything that is not
- * `class`, `style` or `on*`. So these replace Reka's rather than competing with
- * it — the same mechanism `DateRangePicker`'s cell triggers have relied on
- * since they landed, and `Pagination.test.ts` pins it by asserting the
- * *capitalisation* Loom uses and Reka does not.
- *
- * `page` and `position` take the numbers rather than a formatted string, so an
- * `ar-EG` host reaches `Intl.NumberFormat` for Eastern Arabic digits and a
- * language that orders "of" differently can order it differently. See
- * `LabelOf` in `src/lib/labels.ts`.
- */
-export interface PaginationLabels {
-    /**
-     * The `<nav>` landmark's own name. A page commonly carries two of these —
-     * above and below a table — and two `<nav>`s named the same thing are as
-     * confusing to a screen reader as two named nothing, so give each one a name
-     * that says which it is.
-     */
-    readonly nav: string;
-    /** The button that jumps to page one. */
-    readonly first: string;
-    /** The button that steps back one page. */
-    readonly previous: string;
-    /** The button that steps on one page. */
-    readonly next: string;
-    /** The button that jumps to the last page. */
-    readonly last: string;
-    /** One numbered button in the `full` variant, named for the page it reaches. */
-    readonly page: LabelOf<{
-        page: number;
-    }>;
-    /** The position readout the `compact` and `simple` variants publish. */
-    readonly position: LabelOf<{
-        page: number;
-        pageCount: number;
-    }>;
-    /** The ellipsis standing in for the pages the window had no room for. */
-    readonly ellipsis: string;
-}
-/**
- * Loom's English, co-located with the component so it tree-shakes with it: a
- * consumer who never imports Pagination ships none of these bytes.
- *
- * Exported so a host can build a partial vocabulary against the real thing
- * rather than a transcription of it.
- */
-export declare const PAGINATION_LABELS: PaginationLabels;
-/**
- * How much of the paging apparatus is rendered. All three drive the same
- * model and carry the same semantics — they differ only in how much room the
- * navigation is worth on the surface it sits on.
- *
- *   • `full` — the numbered row with ellipses, plus first/prev/next/last.
- *     For a table where jumping to a known page is a real task.
- *   • `compact` — prev, "Page 3 of 12", next. The position stays legible
- *     without spending a whole row on it.
- *   • `simple` — prev and next alone, for a feed nobody navigates by index.
- */
-export type PaginationVariant = "full" | "compact" | "simple";
-export declare const paginationVariants: (props?: ({
-    variant?: "full" | "compact" | "simple" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    /**
-     * The current page, 1-based. Leave it unset to let the component keep its
-     * own page and simply report changes.
-     */
-    page?: number;
-    /** How many items exist in total, across every page. */
-    total: number;
-    /** How many items one page holds. With `total`, this is what fixes the page count. */
-    itemsPerPage?: number;
-    /** How much of the control renders: the numbered row, a position readout, or arrows alone. */
-    variant?: PaginationVariant;
-    /** How many numbers sit either side of the current page, in the `full` variant. */
-    siblingCount?: number;
-    /** Pins page 1 and the last page into the numbered row, with ellipses standing in for the gap. */
-    showEdges?: boolean;
-    /** Unavailable: every control dims and refuses to move the page. */
-    disabled?: boolean;
-    /**
-     * Names for everything this control says out loud, as any subset of
-     * `PaginationLabels` — the rest stay as the host's `provideLoomLabels`
-     * vocabulary left them, and then as Loom's English.
-     *
-     * This is the per-instance correction, not the place to localise an
-     * application: the case it exists for is the two paginations above and
-     * below one table, which must not share `labels.nav`.
-     */
-    labels?: LabelOverrides<PaginationLabels>;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:page": (page: number) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    /**
-     * The current page, 1-based. Leave it unset to let the component keep its
-     * own page and simply report changes.
-     */
-    page?: number;
-    /** How many items exist in total, across every page. */
-    total: number;
-    /** How many items one page holds. With `total`, this is what fixes the page count. */
-    itemsPerPage?: number;
-    /** How much of the control renders: the numbered row, a position readout, or arrows alone. */
-    variant?: PaginationVariant;
-    /** How many numbers sit either side of the current page, in the `full` variant. */
-    siblingCount?: number;
-    /** Pins page 1 and the last page into the numbered row, with ellipses standing in for the gap. */
-    showEdges?: boolean;
-    /** Unavailable: every control dims and refuses to move the page. */
-    disabled?: boolean;
-    /**
-     * Names for everything this control says out loud, as any subset of
-     * `PaginationLabels` — the rest stay as the host's `provideLoomLabels`
-     * vocabulary left them, and then as Loom's English.
-     *
-     * This is the per-instance correction, not the place to localise an
-     * application: the case it exists for is the two paginations above and
-     * below one table, which must not share `labels.nav`.
-     */
-    labels?: LabelOverrides<PaginationLabels>;
-}> & Readonly<{
-    "onUpdate:page"?: (page: number) => any;
-}>, {
-    disabled: boolean;
-    variant: PaginationVariant;
-    itemsPerPage: number;
-    siblingCount: number;
-    showEdges: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-//# sourceMappingURL=Pagination.vue.d.ts.map

package/dist/primitives/Pagination/Pagination.vue.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Pagination.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Pagination/Pagination.vue"],"names":[],"mappings":"AAiaA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzC,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,EAAE,gBAS/B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9D,eAAO,MAAM,kBAAkB;;8EAe7B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAsBd;;;OAGG;WACI,MAAM;IACb,wDAAwD;WACjD,MAAM;IACb,sFAAsF;mBACvE,MAAM;IACrB,8FAA8F;cACpF,iBAAiB;IAC3B,mFAAmF;mBACpE,MAAM;IACrB,kGAAkG;gBACtF,OAAO;IACnB,oEAAoE;eACzD,OAAO;IAClB;;;;;;;;OAQG;aACM,cAAc,CAAC,gBAAgB,CAAC;;;;IA1BzC;;;OAGG;WACI,MAAM;IACb,wDAAwD;WACjD,MAAM;IACb,sFAAsF;mBACvE,MAAM;IACrB,8FAA8F;cACpF,iBAAiB;IAC3B,mFAAmF;mBACpE,MAAM;IACrB,kGAAkG;gBACtF,OAAO;IACnB,oEAAoE;eACzD,OAAO;IAClB;;;;;;;;OAQG;aACM,cAAc,CAAC,gBAAgB,CAAC;;;;cAV9B,OAAO;aANR,iBAAiB;kBAFZ,MAAM;kBAIN,MAAM;eAET,OAAO;6EA2dnB,CAAC"}

package/dist/primitives/Pagination/Pagination.vue_vue_type_script_setup_true_lang.js DELETED Viewed

@@ -1,231 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { optional } from "../../lib/props.js";
-import { useLabels } from "../../lib/labels.js";
-import { useSplitAttrs } from "../../lib/attrs.js";
-import { buttonVariants } from "../Button/Button.vue_vue_type_script_setup_true_lang.js";
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "@lucide/vue";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
-import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from "reka-ui";
-import { cva } from "class-variance-authority";
-//#region src/primitives/Pagination/Pagination.vue?vue&type=script&setup=true&lang.ts
-/**
-* Pagination — moving through a paged result set, one page at a time or by
-* jumping to a numbered one.
-*
-* It renders **buttons, never links**. Loom cannot know whether a consumer's
-* pages are addressable URLs, and an `<a>` with no `href` is not a link at
-* all — it is a div that lies to a screen reader and drops out of the tab
-* order. A product whose pages are real, crawlable URLs wants its own
-* `<a href>` row instead of this component; nothing here can be made to
-* produce one.
-*
-* Reach for a different control when the list is not paged: an infinite feed
-* wants a "load more" button, and a long list a reader scans rather than
-* indexes wants a virtualised scroller.
-*
-* Built on Reka UI's Pagination, which owns the arithmetic — the page count,
-* the sliding window of numbers around the current page, and where the
-* ellipses fall. That window is fiddly enough at the boundaries that
-* recomputing it here would only be a second, subtly different answer.
-*/
-var _hoisted_1 = { class: "sr-only" };
-/**
-* Loom's English, co-located with the component so it tree-shakes with it: a
-* consumer who never imports Pagination ships none of these bytes.
-*
-* Exported so a host can build a partial vocabulary against the real thing
-* rather than a transcription of it.
-*/
-var PAGINATION_LABELS = {
-	nav: "Pagination",
-	first: "First page",
-	previous: "Previous page",
-	next: "Next page",
-	last: "Last page",
-	page: ({ page }) => `Page ${String(page)}`,
-	position: ({ page, pageCount }) => `Page ${String(page)} of ${String(pageCount)}`,
-	ellipsis: "More pages"
-};
-var paginationVariants = cva("inline-flex items-center", {
-	variants: { variant: {
-		full: "gap-1",
-		compact: "gap-2",
-		simple: "gap-1"
-	} },
-	defaultVariants: { variant: "full" }
-});
-var Pagination_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "Pagination",
-	props: {
-		page: {},
-		total: {},
-		itemsPerPage: { default: 10 },
-		variant: { default: "full" },
-		siblingCount: { default: 1 },
-		showEdges: {
-			type: Boolean,
-			default: true
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		labels: {}
-	},
-	emits: ["update:page"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const text = useLabels("pagination", PAGINATION_LABELS, () => props.labels);
-		const { attrs, rest: navAttrs } = useSplitAttrs();
-		const edgeClass = cn(buttonVariants({
-			variant: "ghost",
-			size: "icon-sm"
-		}), "disabled:cursor-not-allowed disabled:opacity-50");
-		function pageClass(selected) {
-			return cn(buttonVariants({
-				variant: selected ? "primary" : "ghost",
-				size: "sm"
-			}), "min-w-8 px-2 tabular", selected ? "disabled:cursor-not-allowed disabled:bg-primary-muted disabled:text-primary disabled:shadow-none" : "disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground");
-		}
-		/** Which edge control stands in for which, when the one that was pressed goes away. */
-		const MIRROR = {
-			first: "last",
-			prev: "next",
-			next: "prev",
-			last: "first"
-		};
-		let pressed = null;
-		function rememberKeyboardPress(event) {
-			const target = event.target;
-			pressed = event.detail === 0 ? target?.closest("button") ?? null : null;
-		}
-		function handOffFocus() {
-			const origin = pressed;
-			pressed = null;
-			if (!origin?.disabled) return;
-			const active = document.activeElement;
-			if (active !== origin && active !== document.body) return;
-			const nav = origin.closest("nav");
-			if (!nav) return;
-			const mirror = MIRROR[origin.getAttribute("data-edge") ?? ""];
-			(nav.querySelector("[aria-current=\"page\"]:not([disabled])") ?? (mirror ? nav.querySelector(`[data-edge="${mirror}"]:not([disabled])`) : null))?.focus();
-		}
-		function onPageChange(value) {
-			emit("update:page", value);
-			nextTick(handOffFocus);
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(PaginationRoot), mergeProps({
-				...unref(navAttrs),
-				...unref(optional)({ page: __props.page })
-			}, {
-				total: __props.total,
-				"items-per-page": __props.itemsPerPage,
-				"sibling-count": __props.siblingCount,
-				"show-edges": __props.showEdges,
-				disabled: __props.disabled,
-				"aria-label": unref(text).nav,
-				class: unref(cn)(unref(paginationVariants)({ variant: __props.variant }), unref(attrs).class),
-				onClick: rememberKeyboardPress,
-				"onUpdate:page": onPageChange
-			}), {
-				default: withCtx(({ page: current, pageCount }) => [
-					__props.variant === "full" ? (openBlock(), createBlock(unref(PaginationFirst), {
-						key: 0,
-						"data-edge": "first",
-						"aria-label": unref(text).first,
-						class: normalizeClass(unref(edgeClass))
-					}, {
-						default: withCtx(() => [createVNode(unref(ChevronsLeft), {
-							class: "h-4 w-4",
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					}, 8, ["aria-label", "class"])) : createCommentVNode("", true),
-					createVNode(unref(PaginationPrev), {
-						"data-edge": "prev",
-						"aria-label": unref(text).previous,
-						class: normalizeClass(unref(edgeClass))
-					}, {
-						default: withCtx(() => [createVNode(unref(ChevronLeft), {
-							class: "h-4 w-4",
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					}, 8, ["aria-label", "class"]),
-					__props.variant === "full" ? (openBlock(), createBlock(unref(PaginationList), {
-						key: 1,
-						class: "flex items-center gap-1"
-					}, {
-						default: withCtx(({ items }) => [(openBlock(true), createElementBlock(Fragment, null, renderList(items, (item, index) => {
-							return openBlock(), createElementBlock(Fragment, { key: item.type === "page" ? `page-${item.value}` : `ellipsis-${index}` }, [item.type === "page" ? (openBlock(), createBlock(unref(PaginationListItem), {
-								key: 0,
-								value: item.value,
-								"aria-label": unref(text).page({ page: item.value }),
-								class: normalizeClass(pageClass(item.value === current))
-							}, null, 8, [
-								"value",
-								"aria-label",
-								"class"
-							])) : (openBlock(), createBlock(unref(PaginationEllipsis), {
-								key: 1,
-								as: "span",
-								class: "inline-flex h-8 min-w-8 select-none items-center justify-center text-sm text-muted-foreground"
-							}, {
-								default: withCtx(() => [_cache[0] || (_cache[0] = createElementVNode("span", { "aria-hidden": "true" }, "…", -1)), createElementVNode("span", _hoisted_1, toDisplayString(unref(text).ellipsis), 1)]),
-								_: 1
-							}))], 64);
-						}), 128))]),
-						_: 2
-					}, 1024)) : createCommentVNode("", true),
-					__props.variant !== "full" ? (openBlock(), createElementBlock("span", {
-						key: 2,
-						role: "status",
-						class: normalizeClass(__props.variant === "compact" ? "px-1 text-sm tabular text-muted-foreground" : "sr-only")
-					}, toDisplayString(unref(text).position({
-						page: current,
-						pageCount
-					})), 3)) : createCommentVNode("", true),
-					createVNode(unref(PaginationNext), {
-						"data-edge": "next",
-						"aria-label": unref(text).next,
-						class: normalizeClass(unref(edgeClass))
-					}, {
-						default: withCtx(() => [createVNode(unref(ChevronRight), {
-							class: "h-4 w-4",
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					}, 8, ["aria-label", "class"]),
-					__props.variant === "full" ? (openBlock(), createBlock(unref(PaginationLast), {
-						key: 3,
-						"data-edge": "last",
-						"aria-label": unref(text).last,
-						class: normalizeClass(unref(edgeClass))
-					}, {
-						default: withCtx(() => [createVNode(unref(ChevronsRight), {
-							class: "h-4 w-4",
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					}, 8, ["aria-label", "class"])) : createCommentVNode("", true)
-				]),
-				_: 1
-			}, 16, [
-				"total",
-				"items-per-page",
-				"sibling-count",
-				"show-edges",
-				"disabled",
-				"aria-label",
-				"class"
-			]);
-		};
-	}
-});
-//#endregion
-export { PAGINATION_LABELS, Pagination_vue_vue_type_script_setup_true_lang_default as default, paginationVariants };
-//# sourceMappingURL=Pagination.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/Pagination/Pagination.vue_vue_type_script_setup_true_lang.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Pagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Pagination/Pagination.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * Everything this control publishes to assistive technology — including the six\n * names Reka would otherwise supply in English of its own accord.\n *\n * `first`, `previous`, `next`, `last` and `page` are not decoration. Reka's\n * `PaginationFirst` and its siblings write `aria-label=\"First Page\"` into their\n * own vnode props and expose no prop for it; `PaginationListItem` writes\n * `` `Page ${value}` ``. A binding on the Loom side arrives as a fallthrough\n * attribute, which Vue merges onto the root vnode *after* the render function\n * produced it, and `mergeProps` is last-write-wins for everything that is not\n * `class`, `style` or `on*`. So these replace Reka's rather than competing with\n * it — the same mechanism `DateRangePicker`'s cell triggers have relied on\n * since they landed, and `Pagination.test.ts` pins it by asserting the\n * *capitalisation* Loom uses and Reka does not.\n *\n * `page` and `position` take the numbers rather than a formatted string, so an\n * `ar-EG` host reaches `Intl.NumberFormat` for Eastern Arabic digits and a\n * language that orders \"of\" differently can order it differently. See\n * `LabelOf` in `src/lib/labels.ts`.\n */\nexport interface PaginationLabels {\n /**\n * The `<nav>` landmark's own name. A page commonly carries two of these —\n * above and below a table — and two `<nav>`s named the same thing are as\n * confusing to a screen reader as two named nothing, so give each one a name\n * that says which it is.\n */\n readonly nav: string;\n /** The button that jumps to page one. */\n readonly first: string;\n /** The button that steps back one page. */\n readonly previous: string;\n /** The button that steps on one page. */\n readonly next: string;\n /** The button that jumps to the last page. */\n readonly last: string;\n /** One numbered button in the `full` variant, named for the page it reaches. */\n readonly page: LabelOf<{ page: number }>;\n /** The position readout the `compact` and `simple` variants publish. */\n readonly position: LabelOf<{ page: number; pageCount: number }>;\n /** The ellipsis standing in for the pages the window had no room for. */\n readonly ellipsis: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it: a\n * consumer who never imports Pagination ships none of these bytes.\n *\n * Exported so a host can build a partial vocabulary against the real thing\n * rather than a transcription of it.\n */\nexport const PAGINATION_LABELS: PaginationLabels = {\n nav: \"Pagination\",\n first: \"First page\",\n previous: \"Previous page\",\n next: \"Next page\",\n last: \"Last page\",\n page: ({ page }) => `Page ${String(page)}`,\n position: ({ page, pageCount }) => `Page ${String(page)} of ${String(pageCount)}`,\n ellipsis: \"More pages\",\n};\n\n/**\n * How much of the paging apparatus is rendered. All three drive the same\n * model and carry the same semantics — they differ only in how much room the\n * navigation is worth on the surface it sits on.\n *\n * • `full` — the numbered row with ellipses, plus first/prev/next/last.\n * For a table where jumping to a known page is a real task.\n * • `compact` — prev, \"Page 3 of 12\", next. The position stays legible\n * without spending a whole row on it.\n * • `simple` — prev and next alone, for a feed nobody navigates by index.\n */\nexport type PaginationVariant = \"full\" | \"compact\" | \"simple\";\n\nexport const paginationVariants = cva(\"inline-flex items-center\", {\n // `satisfies` keeps the two halves honest: the union above is the name a\n // consumer imports and the documentation prints, the map below is the\n // classes. Adding a member to one and not the other stops compiling.\n variants: {\n variant: {\n // The numbered row is a run of same-size squares and reads as one strip\n // at gap-1; the compact form is a sentence between two controls and\n // needs the wider gap to stop reading as a third button.\n full: \"gap-1\",\n compact: \"gap-2\",\n simple: \"gap-1\",\n } satisfies Record<PaginationVariant, string>,\n },\n defaultVariants: { variant: \"full\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick } from \"vue\";\nimport {\n PaginationRoot,\n PaginationList,\n PaginationListItem,\n PaginationFirst,\n PaginationPrev,\n PaginationNext,\n PaginationLast,\n PaginationEllipsis,\n} from \"reka-ui\";\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"@lucide/vue\";\nimport { buttonVariants } from \"../Button/Button.vue\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\n\n/**\n * Pagination — moving through a paged result set, one page at a time or by\n * jumping to a numbered one.\n *\n * It renders **buttons, never links**. Loom cannot know whether a consumer's\n * pages are addressable URLs, and an `<a>` with no `href` is not a link at\n * all — it is a div that lies to a screen reader and drops out of the tab\n * order. A product whose pages are real, crawlable URLs wants its own\n * `<a href>` row instead of this component; nothing here can be made to\n * produce one.\n *\n * Reach for a different control when the list is not paged: an infinite feed\n * wants a \"load more\" button, and a long list a reader scans rather than\n * indexes wants a virtualised scroller.\n *\n * Built on Reka UI's Pagination, which owns the arithmetic — the page count,\n * the sliding window of numbers around the current page, and where the\n * ellipses fall. That window is fiddly enough at the boundaries that\n * recomputing it here would only be a second, subtly different answer.\n */\nconst props = withDefaults(\n defineProps<{\n /**\n * The current page, 1-based. Leave it unset to let the component keep its\n * own page and simply report changes.\n */\n page?: number;\n /** How many items exist in total, across every page. */\n total: number;\n /** How many items one page holds. With `total`, this is what fixes the page count. */\n itemsPerPage?: number;\n /** How much of the control renders: the numbered row, a position readout, or arrows alone. */\n variant?: PaginationVariant;\n /** How many numbers sit either side of the current page, in the `full` variant. */\n siblingCount?: number;\n /** Pins page 1 and the last page into the numbered row, with ellipses standing in for the gap. */\n showEdges?: boolean;\n /** Unavailable: every control dims and refuses to move the page. */\n disabled?: boolean;\n /**\n * Names for everything this control says out loud, as any subset of\n * `PaginationLabels` — the rest stay as the host's `provideLoomLabels`\n * vocabulary left them, and then as Loom's English.\n *\n * This is the per-instance correction, not the place to localise an\n * application: the case it exists for is the two paginations above and\n * below one table, which must not share `labels.nav`.\n */\n labels?: LabelOverrides<PaginationLabels>;\n }>(),\n {\n itemsPerPage: 10,\n variant: \"full\",\n siblingCount: 1,\n // Reka defaults this off, which drops the ellipses entirely and lets the\n // numbered row float free of both ends. The anchored form is what people\n // mean by a full pagination, so Loom turns it on.\n showEdges: true,\n disabled: false,\n },\n);\n\nconst emit = defineEmits<{\n /** The 1-based page the reader asked for. A controlled host decides whether to honour it. */\n \"update:page\": [page: number];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"pagination\", PAGINATION_LABELS, () => props.labels);\n\n// The root renders the `<nav>`, so every fallthrough attribute belongs on it —\n// there is no second node they could sensibly describe. `class` is pulled out\n// of that spread and merged through `cn()` instead: spreading it alongside the\n// nav's own `:class` only concatenates the two lists, so a caller's `gap-2`\n// would win or lose depending on which utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: navAttrs } = useSplitAttrs();\n\n// The edge controls keep the dim, and they are the one place in this component\n// where it is still the right answer: their whole content is a chevron marked\n// `aria-hidden`, so there is no text for the alpha to take down with it and the\n// name a screen reader announces is an `aria-label` no paint can reach. WCAG\n// exempts an inactive control from 1.4.11 besides. Prev and First sit disabled\n// on page 1 for as long as a reader is on it, which is the other half of the\n// argument: a faded chevron is the conventional reading of \"no further this\n// way\", where a drained plate would draw the eye to the control that cannot be\n// used.\nconst edgeClass = cn(\n buttonVariants({ variant: \"ghost\", size: \"icon-sm\" }),\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n);\n\n// The page buttons borrow Button's own variants rather than restating its\n// press language, so the row cannot drift from every other pressable thing in\n// the library. `min-w-8` with tabular figures is what keeps the row from\n// reflowing as the numbers under it grow a digit.\nfunction pageClass(selected: boolean): string {\n return cn(\n buttonVariants({ variant: selected ? \"primary\" : \"ghost\", size: \"sm\" }),\n \"min-w-8 px-2 tabular\",\n // No `opacity` here, unlike the edges above, because this button's content\n // *is* text — the page number, the one thing a reader needs from a pager\n // that is briefly out of service. `disabled:opacity-50` composited the\n // ghost variant's `--color-muted-foreground` down to 2.05:1 and the current\n // page's white-on-primary label down to 2.48:1; halving the alpha more than\n // halves the contrast. Unavailability is painted in measured colours\n // instead.\n //\n // The two branches drain to different wells on purpose, which is Chip's\n // rule applied to a row of numbers: an unselected page falls to the neutral\n // well at 4.67:1, and the current page keeps the primary wash it already wears\n // at 6.84:1. Which page a reader is on is information, and a disabled pager\n // that forgets it has answered the question by refusing to answer it.\n selected\n ? \"disabled:cursor-not-allowed disabled:bg-primary-muted disabled:text-primary disabled:shadow-none\"\n : \"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\",\n );\n}\n\n/** Which edge control stands in for which, when the one that was pressed goes away. */\nconst MIRROR: Record<string, string | undefined> = {\n first: \"last\",\n prev: \"next\",\n next: \"prev\",\n last: \"first\",\n};\n\n// Reka disables Prev/First at page 1 and Next/Last at the last page, and that\n// is the honest state: a control that looks unavailable and still fires is\n// worse than one that is not there at all. The cost is real, though — a\n// browser blurs a button the instant it becomes disabled, so a reader holding\n// Enter on Next arrives at the last page with focus dumped on `<body>` and\n// their place in the document gone.\n//\n// So the control that fired the change hands focus on: to the current page\n// button where the variant has one — which announces \"Page 12, current page\",\n// the very thing the reader was trying to find out — and to its mirror control\n// otherwise, which is the nearest thing still able to move the page.\n//\n// Only for a keyboard activation. `detail === 0` is what separates a click\n// synthesised by Enter or Space from a pointer click, and a pointer user has\n// no focus position to lose; moving focus for them would raise a ring nobody\n// asked for.\nlet pressed: HTMLButtonElement | null = null;\n\nfunction rememberKeyboardPress(event: MouseEvent): void {\n const target = event.target as HTMLElement | null;\n pressed = event.detail === 0 ? (target?.closest<HTMLButtonElement>(\"button\") ?? null) : null;\n}\n\nfunction handOffFocus(): void {\n const origin = pressed;\n pressed = null;\n if (!origin?.disabled) return;\n\n // Only rescue focus that was actually lost. A browser leaves `<body>`\n // focused after disabling the button; jsdom leaves the button itself. Any\n // other active element means the reader has already moved on, and stealing\n // focus back from them would be the worse bug.\n const active = document.activeElement;\n if (active !== origin && active !== document.body) return;\n\n const nav = origin.closest(\"nav\");\n if (!nav) return;\n\n const mirror = MIRROR[origin.getAttribute(\"data-edge\") ?? \"\"];\n const target =\n nav.querySelector<HTMLButtonElement>('[aria-current=\"page\"]:not([disabled])') ??\n (mirror\n ? nav.querySelector<HTMLButtonElement>(`[data-edge=\"${mirror}\"]:not([disabled])`)\n : null);\n target?.focus();\n}\n\nfunction onPageChange(value: number): void {\n emit(\"update:page\", value);\n // After the re-render rather than before it: the button that was pressed\n // only becomes disabled once the new page has been applied.\n void nextTick(handOffFocus);\n}\n</script>\n\n<template>\n <PaginationRoot\n v-slot=\"{ page: current, pageCount }\"\n v-bind=\"{ ...navAttrs, ...optional({ page }) }\"\n :total=\"total\"\n :items-per-page=\"itemsPerPage\"\n :sibling-count=\"siblingCount\"\n :show-edges=\"showEdges\"\n :disabled=\"disabled\"\n :aria-label=\"text.nav\"\n :class=\"cn(paginationVariants({ variant }), attrs.class as string)\"\n @click=\"rememberKeyboardPress\"\n @update:page=\"onPageChange\"\n >\n \n <PaginationFirst\n v-if=\"variant === 'full'\"\n data-edge=\"first\"\n :aria-label=\"text.first\"\n :class=\"edgeClass\"\n >\n <ChevronsLeft class=\"h-4 w-4\" aria-hidden=\"true\" />\n </PaginationFirst>\n\n <PaginationPrev data-edge=\"prev\" :aria-label=\"text.previous\" :class=\"edgeClass\">\n <ChevronLeft class=\"h-4 w-4\" aria-hidden=\"true\" />\n </PaginationPrev>\n\n <PaginationList v-if=\"variant === 'full'\" v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n \n <template\n v-for=\"(item, index) in items\"\n :key=\"item.type === 'page' ? `page-${item.value}` : `ellipsis-${index}`\"\n >\n <PaginationListItem\n v-if=\"item.type === 'page'\"\n :value=\"item.value\"\n :aria-label=\"text.page({ page: item.value })\"\n :class=\"pageClass(item.value === current)\"\n />\n \n <PaginationEllipsis\n v-else\n as=\"span\"\n class=\"inline-flex h-8 min-w-8 select-none items-center justify-center text-sm text-muted-foreground\"\n >\n <span aria-hidden=\"true\">…</span>\n <span class=\"sr-only\">{{ text.ellipsis }}</span>\n </PaginationEllipsis>\n </template>\n </PaginationList>\n\n \n \n <span\n v-if=\"variant !== 'full'\"\n role=\"status\"\n :class=\"variant === 'compact' ? 'px-1 text-sm tabular text-muted-foreground' : 'sr-only'\"\n >\n {{ text.position({ page: current, pageCount }) }}\n </span>\n\n <PaginationNext data-edge=\"next\" :aria-label=\"text.next\" :class=\"edgeClass\">\n <ChevronRight class=\"h-4 w-4\" aria-hidden=\"true\" />\n </PaginationNext>\n\n <PaginationLast\n v-if=\"variant === 'full'\"\n data-edge=\"last\"\n :aria-label=\"text.last\"\n :class=\"edgeClass\"\n >\n <ChevronsRight class=\"h-4 w-4\" aria-hidden=\"true\" />\n </PaginationLast>\n </PaginationRoot>\n</template>\n"],"mappings":"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"}

package/dist/primitives/Popover/Popover.js DELETED Viewed

@@ -1,7 +0,0 @@
-import Popover_vue_vue_type_script_setup_true_lang_default from "./Popover.vue_vue_type_script_setup_true_lang.js";
-//#region src/primitives/Popover/Popover.vue
-var Popover_default = Popover_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { Popover_default as default };
-//# sourceMappingURL=Popover.js.map

package/dist/primitives/Popover/Popover.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Popover.js","names":[],"sources":["../../../src/primitives/Popover/Popover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the panel prefers. It is a preference and not a\n * guarantee: Reka flips the panel to the opposite edge when it would collide\n * with the viewport, which is why a caller sets the side it *wants* rather\n * than the side it will get.\n *\n * The members mirror Reka's own `Side`. Nothing enforces that in this\n * declaration — the template binding does: give this union a member Reka does\n * not accept and `:side=\"side\"` stops type-checking. Declaring it here rather\n * than aliasing `PopoverContentProps[\"side\"]` is what puts the four values in\n * the generated props table, because the documentation reads syntax and an\n * indexed access type has none to read.\n */\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/** Where the panel sits along that edge. */\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n</script>\n\n<script setup lang=\"ts\">\nimport { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent, PopoverArrow } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * Popover — a floating panel anchored to a trigger, carrying secondary content\n * the user opts into: a filter set, a colour picker, a details card.\n *\n * The escape contract, which is the whole reason to reach for an overlay\n * primitive rather than an absolutely positioned div: opening moves focus into\n * the panel, Esc and an outside click both close it, closing returns focus to\n * the trigger, and the page behind keeps scrolling because a popover is not\n * modal. Focus is *not* trapped — Tab leaves the panel, which is correct for\n * content the user can walk past. `Dialog` is the one that traps.\n *\n * Reach for `DropdownMenu` when the panel is a list of commands, `Tooltip` for\n * a hint that must not take focus at all, and `Dialog` when the task has to\n * block the rest of the UI.\n */\nwithDefaults(\n defineProps<{\n /** Drive the panel from the host with `v-model:open`; omit it and the popover owns its own state. */\n open?: boolean | undefined;\n /** The edge of the trigger to anchor against, before collision flipping. */\n side?: PopoverSide;\n /** Where the panel sits along that edge — `start` keeps its leading edge flush with the trigger's. */\n align?: PopoverAlign;\n /** Gap in pixels between the trigger and the panel. */\n sideOffset?: number;\n /** Draw the pointer notch. Turn it off where the panel reads better flush against its trigger. */\n arrow?: boolean;\n }>(),\n // `open: undefined` is load-bearing, not a redundant default — it is what\n // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n // casting. `optional()` in the template is the other half; its docblock\n // carries the reasoning for both.\n { open: undefined, side: \"bottom\", align: \"center\", sideOffset: 6, arrow: true },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n <PopoverRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n \n <PopoverTrigger as-child>\n <slot name=\"trigger\" />\n </PopoverTrigger>\n\n <PopoverPortal>\n <PopoverContent\n :side=\"side\"\n :align=\"align\"\n :side-offset=\"sideOffset\"\n :class=\"\n cn(\n 'z-50 min-w-[12rem] max-w-[min(90vw,22rem)] rounded-md border border-border bg-popover p-3 text-sm text-popover-foreground shadow-md outline-none',\n // Scoped to the open state, never unconditional. Reka's Presence\n // keeps closed content mounted until an animationend arrives, and a\n // mount-only animation never fires a second one — so an\n // unconditional animation class strands an invisible panel over the\n // page, swallowing clicks. Scoped, the closed element computes\n // `animation-name: none` and Presence takes its immediate-unmount\n // branch instead. The origin below is what makes that scale grow\n // out of the trigger rather than out of the panel's own centre.\n 'data-[state=open]:animate-scale-in',\n )\n \"\n style=\"transform-origin: var(--reka-popper-transform-origin)\"\n >\n \n <slot />\n <PopoverArrow v-if=\"arrow\" class=\"fill-popover\" :width=\"12\" :height=\"6\" />\n </PopoverContent>\n </PopoverPortal>\n </PopoverRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/Popover/Popover.vue.d.ts DELETED Viewed

@@ -1,61 +0,0 @@
-/**
- * Which edge of the trigger the panel prefers. It is a preference and not a
- * guarantee: Reka flips the panel to the opposite edge when it would collide
- * with the viewport, which is why a caller sets the side it *wants* rather
- * than the side it will get.
- *
- * The members mirror Reka's own `Side`. Nothing enforces that in this
- * declaration — the template binding does: give this union a member Reka does
- * not accept and `:side="side"` stops type-checking. Declaring it here rather
- * than aliasing `PopoverContentProps["side"]` is what puts the four values in
- * the generated props table, because the documentation reads syntax and an
- * indexed access type has none to read.
- */
-export type PopoverSide = "top" | "right" | "bottom" | "left";
-/** Where the panel sits along that edge. */
-export type PopoverAlign = "start" | "center" | "end";
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    /** Drive the panel from the host with `v-model:open`; omit it and the popover owns its own state. */
-    open?: boolean | undefined;
-    /** The edge of the trigger to anchor against, before collision flipping. */
-    side?: PopoverSide;
-    /** Where the panel sits along that edge — `start` keeps its leading edge flush with the trigger's. */
-    align?: PopoverAlign;
-    /** Gap in pixels between the trigger and the panel. */
-    sideOffset?: number;
-    /** Draw the pointer notch. Turn it off where the panel reads better flush against its trigger. */
-    arrow?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    /** Drive the panel from the host with `v-model:open`; omit it and the popover owns its own state. */
-    open?: boolean | undefined;
-    /** The edge of the trigger to anchor against, before collision flipping. */
-    side?: PopoverSide;
-    /** Where the panel sits along that edge — `start` keeps its leading edge flush with the trigger's. */
-    align?: PopoverAlign;
-    /** Gap in pixels between the trigger and the panel. */
-    sideOffset?: number;
-    /** Draw the pointer notch. Turn it off where the panel reads better flush against its trigger. */
-    arrow?: boolean;
-}> & Readonly<{
-    "onUpdate:open"?: (value: boolean) => any;
-}>, {
-    open: boolean | undefined;
-    side: PopoverSide;
-    sideOffset: number;
-    align: PopoverAlign;
-    arrow: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    trigger?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=Popover.vue.d.ts.map

package/dist/primitives/Popover/Popover.vue.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Popover.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Popover/Popover.vue"],"names":[],"mappings":"AA4GA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,4CAA4C;AAC5C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;wBACjC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAiBd,qGAAqG;WAC9F,OAAO,GAAG,SAAS;IAC1B,4EAA4E;WACrE,WAAW;IAClB,sGAAsG;YAC9F,YAAY;IACpB,uDAAuD;iBAC1C,MAAM;IACnB,kGAAkG;YAC1F,OAAO;;;;IATf,qGAAqG;WAC9F,OAAO,GAAG,SAAS;IAC1B,4EAA4E;WACrE,WAAW;IAClB,sGAAsG;YAC9F,YAAY;IACpB,uDAAuD;iBAC1C,MAAM;IACnB,kGAAkG;YAC1F,OAAO;;;;UARR,OAAO,GAAG,SAAS;UAEnB,WAAW;gBAIL,MAAM;WAFX,YAAY;WAIZ,OAAO;;cAqKL,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAWzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}