@wow-two-beta/ui-vue 0.0.2

package/dist/chunks/ModalContent.vue_vue_type_script_setup_true_lang-CLACSqKg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContent.vue_vue_type_script_setup_true_lang-CLACSqKg.js","sources":["../../src/presentation/overlays/modal/Modal.vue","../../src/presentation/overlays/modal/ModalContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { inject, type ComputedRef, type InjectionKey, type Ref, type ShallowRef } from 'vue';\n\n/** Defines the ARIA dialog role a `Modal` exposes. */\nexport const ModalRole = {\n  /** Refers to a standard dialog. */\n  Dialog: 'dialog',\n  /** Refers to an alert dialog that interrupts to convey an urgent message. */\n  AlertDialog: 'alertdialog',\n} as const;\n\nexport type ModalRole = (typeof ModalRole)[keyof typeof ModalRole];\n\n/**\n * The value shared with `ModalTrigger` / `ModalContent`.\n *\n * React's context held plain values re-created on every render; here the\n * reactive fields stay refs so a child reads the live value without the root\n * re-rendering it.\n */\nexport interface ModalContextValue {\n  /** The resolved open state. Writable — an assignment routes through `setOpen`. */\n  open: Ref<boolean>;\n  setOpen: (open: boolean) => void;\n  /** The trigger element — the focus-return target when the modal closes. */\n  triggerEl: ShallowRef<HTMLElement | null>;\n  titleId: string;\n  descriptionId: string;\n  role: ComputedRef<ModalRole>;\n  dismissOnOutsideClick: ComputedRef<boolean>;\n  dismissOnEscape: ComputedRef<boolean>;\n}\n\nexport const modalContextKey: InjectionKey<ModalContextValue> = Symbol('wow-two.modal');\n\nexport function useModalContext(): ModalContextValue {\n  const context = inject(modalContextKey, null);\n  if (!context) throw new Error('Modal.* must be used inside <Modal>');\n  return context;\n}\n\n/**\n * The prop surface of `Modal`.\n *\n * `open` and `isOpen` are the same controlled state under two names: `open` is\n * the `v-model:open` binding target, `isOpen` the house boolean spelling that\n * mirrors the rest of the port. `open` wins when both are set. React's\n * `onOpenChange` is the `open-change` emit; `update:open` fires alongside it so\n * `v-model:open` works.\n */\nexport interface ModalProps {\n  /** The open state, controlled. The `v-model:open` binding target. */\n  open?: boolean;\n\n  /** The open state, controlled — the house spelling of `open`; `open` wins when both are set. */\n  isOpen?: boolean;\n\n  /** The initial open state when uncontrolled. Default `false`. */\n  defaultOpen?: boolean;\n\n  /** The outside-click dismissal toggle. Default `true`. */\n  dismissOnOutsideClick?: boolean;\n\n  /** The Escape dismissal toggle. Default `true`. */\n  dismissOnEscape?: boolean;\n\n  /** The ARIA dialog role. Internal — `AlertModal` overrides this. */\n  role?: ModalRole;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, provide, shallowRef } from 'vue';\nimport { useControlled, useId } from '../../../foundation/hooks';\n\n/**\n * State + a11y-id owner for a Modal tree. Renders only its slot — React\n * returned a bare context Provider, which has no element of its own.\n */\ndefineOptions({ name: 'Modal', inheritAttrs: false });\n\n/** The Modal tree — `ModalTrigger` and `ModalContent`. React's `children`. */\ndefineSlots<{ default(): unknown }>();\n\n/**\n * `open: undefined` / `isOpen: undefined` are load-bearing: Vue coerces an\n * absent `Boolean` prop to `false` unless the declaration *owns* a `default`\n * key, which would make the modal read as explicitly-closed-and-controlled and\n * strand the uncontrolled path. Declaring the default as `undefined` keeps the\n * three states React had — absent / `true` / `false`.\n */\nconst props = withDefaults(defineProps<ModalProps>(), {\n  open: undefined,\n  isOpen: undefined,\n  defaultOpen: false,\n  dismissOnOutsideClick: true,\n  dismissOnEscape: true,\n  role: 'dialog',\n});\n\nconst emit = defineEmits<{\n  /** The `v-model:open` half. */\n  'update:open': [open: boolean];\n  /** Replaces React's `onOpenChange`. */\n  'open-change': [open: boolean];\n}>();\n\nconst controlled = useControlled<boolean>({\n  controlled: () => (props.open !== undefined ? props.open : props.isOpen),\n  default: () => props.defaultOpen,\n  onChange: (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n});\n\nconst triggerEl = shallowRef<HTMLElement | null>(null);\nconst titleId = useId('modal-title');\nconst descriptionId = useId('modal-description');\n\nprovide(modalContextKey, {\n  open: controlled.value,\n  setOpen: controlled.setValue,\n  triggerEl,\n  titleId,\n  descriptionId,\n  role: computed(() => props.role),\n  dismissOnOutsideClick: computed(() => props.dismissOnOutsideClick),\n  dismissOnEscape: computed(() => props.dismissOnEscape),\n});\n</script>\n\n<template>\n  <slot />\n</template>\n","<script lang=\"ts\">\nimport type {\n  SurfaceElevation,\n  SurfacePadding,\n  SurfaceRadius,\n  SurfaceTone,\n  SurfaceVariant,\n} from '../../../foundation/utils';\n\n/**\n * Represents the prop surface of `ModalContent`.\n *\n * React declared the surface axes by `extends SurfaceVariants`; they are\n * spelled out here because the SFC compiler's type resolver cannot follow a\n * `VariantProps<typeof …>` base and fails the build on it. The aliases below\n * are the canonical ones from `foundation/utils`, already locked against the\n * `surfaceVariants` config there, so the two cannot drift.\n */\nexport interface ModalContentProps {\n  /** The backdrop-hide toggle — disables the default backdrop when true. */\n  hideBackdrop?: boolean;\n\n  /** The backdrop-blur toggle. */\n  isBlurred?: boolean;\n\n  /** The visual recipe. Default `elevated`. */\n  variant?: SurfaceVariant;\n\n  /** The color tone the recipe is tinted with. */\n  tone?: SurfaceTone;\n\n  /** The corner rounding. Default `lg`. */\n  radius?: SurfaceRadius;\n\n  /** The inner spacing step. Default `xl`. */\n  padding?: SurfacePadding;\n\n  /** The shadow depth. */\n  elevation?: SurfaceElevation;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, provide, useAttrs, useTemplateRef } from 'vue';\nimport { cn, surfaceVariants } from '../../../foundation/utils';\nimport {\n  DismissableLayer,\n  FocusScope,\n  Portal,\n  Presence,\n  ScrollLockProvider,\n} from '../../../foundation/primitives';\nimport Backdrop from '../backdrop/Backdrop.vue';\nimport { overlayChromeContextKey } from '../OverlayChrome';\nimport { useModalContext } from './Modal.vue';\n\n/* The portalled dialog surface — scrim, focus trap, scroll lock, and the panel that carries the a11y contract. */\ndefineOptions({ name: 'ModalContent', inheritAttrs: false });\n\n/** The panel content — chrome subcomponents and the dialog body. React's `children`. */\ndefineSlots<{ default(): unknown }>();\n\nconst props = defineProps<ModalContentProps>();\n\nconst attrs = useAttrs();\nconst context = useModalContext();\nconst el = useTemplateRef<HTMLDivElement>('el');\n\n/* Refs lifted to setup consts so the template auto-unwraps them (a plain injected object does not). */\nconst isOpen = context.open;\nconst role = context.role;\nconst dismissOnEscape = context.dismissOnEscape;\n\nfunction close(): void {\n  context.setOpen(false);\n  requestAnimationFrame(() => context.triggerEl.value?.focus());\n}\n\nprovide(overlayChromeContextKey, {\n  titleId: context.titleId,\n  descriptionId: context.descriptionId,\n  close,\n});\n\nconst classes = computed(() =>\n  cn(\n    'relative w-full max-w-lg',\n    'motion-safe:group-data-[state=open]:animate-(--animate-pop-in)',\n    'motion-safe:group-data-[state=closed]:animate-(--animate-pop-out)',\n    surfaceVariants({\n      variant: props.variant ?? 'elevated',\n      tone: props.tone,\n      radius: props.radius ?? 'lg',\n      padding: props.padding ?? 'xl',\n      elevation: props.elevation,\n    }),\n    attrs.class as string | undefined,\n  ),\n);\n\n/** Everything but `class`, which is re-applied through `cn` above. */\nconst rest = computed(() => {\n  const { class: _class, ...others } = attrs;\n  return others;\n});\n\n/** Outside-click dismissal — `.self` is React's `e.target !== e.currentTarget` guard. */\nfunction handleOutsideClick(): void {\n  if (context.dismissOnOutsideClick.value) context.setOpen(false);\n}\n\nfunction handleEscape(): void {\n  context.setOpen(false);\n}\n\ndefineExpose({ el });\n</script>\n\n<template>\n  <Portal>\n    <!-- Lock follows open state, not mount — Content can mount closed. -->\n    <ScrollLockProvider :is-enabled=\"isOpen\">\n      <!-- The scrim runs on `Backdrop`'s own `Presence` (its `isOpen` prop) so the\n           fade-out plays before it unmounts. React wrapped it in a second, outer\n           `Presence`, whose injected `data-state` the inner one then overwrote —\n           passing the state straight in is the same intent without the masking. -->\n      <Backdrop\n        v-if=\"!props.hideBackdrop\"\n        is-inline\n        :is-open=\"isOpen\"\n        :is-blurred=\"props.isBlurred\"\n      />\n      <!-- Outside-click dismissal lives on the centering wrapper (it covers the\n           backdrop): a click on the padding (`.self`) = outside. The wrapper is the\n           Presence-animated node — `Presence` injects `data-state` + `ref` onto it and\n           watches *its own* animations (no subtree walk), so the wrapper carries a\n           (transparent) fade and the visible pop lands on the panel via\n           `group-data-[state=*]`. Both share the same token timing, so the wrapper fade\n           gates unmount correctly. -->\n      <Presence :is-present=\"isOpen\">\n        <div\n          :class=\"\n            cn(\n              'group fixed inset-0 z-modal grid place-items-center overflow-y-auto p-4',\n              'motion-safe:data-[state=open]:animate-(--animate-fade-in)',\n              'motion-safe:data-[state=closed]:animate-(--animate-fade-out)',\n            )\n          \"\n          @click.self=\"handleOutsideClick\"\n        >\n          <FocusScope as-child trapped loop>\n            <DismissableLayer\n              :is-escape-disabled=\"!dismissOnEscape\"\n              is-outside-click-disabled\n              :on-escape=\"handleEscape\"\n            >\n              <div\n                ref=\"el\"\n                :role=\"role\"\n                aria-modal=\"true\"\n                :aria-labelledby=\"context.titleId\"\n                :aria-describedby=\"context.descriptionId\"\n                v-bind=\"rest\"\n                :class=\"classes\"\n              >\n                <slot />\n              </div>\n            </DismissableLayer>\n          </FocusScope>\n        </div>\n      </Presence>\n    </ScrollLockProvider>\n  </Portal>\n</template>\n"],"names":["_renderSlot","_createBlock","_unref","Portal","_createVNode","ScrollLockProvider","Backdrop","_createElementVNode","_normalizeClass","FocusScope","DismissableLayer","_mergeProps"],"mappings":"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"}

package/dist/chunks/NavItem.vue_vue_type_script_setup_true_lang-CGBo2TiV.js

@@ -0,0 +1,86 @@
+import { defineComponent, useAttrs, useTemplateRef, computed, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, renderSlot, createCommentVNode, normalizeClass } from "vue";
+import { S as Size } from "./StyleTokens-Bkz7Dm5L.js";
+import { c as cn } from "./cn-CzDCF-Ah.js";
+import { P as Primitive } from "./Primitive-Cm3ECaVw.js";
+import { d as dataAttr } from "./dataAttr-7BR67dTj.js";
+import { S as Slottable } from "./Slot-D2lIitvV.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "text-muted-foreground group-data-[active]:text-current"
+};
+const _hoisted_2 = {
+  key: 2,
+  class: "flex-1 truncate text-left"
+};
+const SIZE = {
+  xs: "h-7 px-1.5 text-xs gap-1.5",
+  sm: "h-8 px-2 text-sm gap-2",
+  md: "h-9 px-2.5 text-sm gap-2.5",
+  lg: "h-11 px-3 text-base gap-3",
+  xl: "h-12 px-3.5 text-base gap-3.5"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "NavItem", inheritAttrs: false },
+  __name: "NavItem",
+  props: {
+    asChild: { type: Boolean, default: false },
+    isActive: { type: Boolean, default: void 0 },
+    size: { default: Size.Md }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const inner = useTemplateRef("inner");
+    const classes = computed(
+      () => cn(
+        "group inline-flex w-full items-center rounded-md font-medium text-foreground transition-colors",
+        "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-[active]:bg-primary-soft data-[active]:text-primary-soft-foreground",
+        SIZE[props.size],
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    const trailingClasses = computed(() => cn("shrink-0", props.asChild && "ms-auto"));
+    const el = computed(() => inner.value?.$el ?? null);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({
+        ref_key: "inner",
+        ref: inner,
+        as: "a",
+        "as-child": props.asChild,
+        "aria-current": props.isActive ? "page" : void 0,
+        "data-active": unref(dataAttr)(props.isActive)
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          _ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [
+            renderSlot(_ctx.$slots, "icon")
+          ])) : createCommentVNode("", true),
+          props.asChild ? (openBlock(), createBlock(unref(Slottable), { key: 1 }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          })) : (openBlock(), createElementBlock("span", _hoisted_2, [
+            renderSlot(_ctx.$slots, "default")
+          ])),
+          _ctx.$slots.trailing ? (openBlock(), createElementBlock("span", {
+            key: 3,
+            class: normalizeClass(trailingClasses.value)
+          }, [
+            renderSlot(_ctx.$slots, "trailing")
+          ], 2)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["as-child", "aria-current", "data-active", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=NavItem.vue_vue_type_script_setup_true_lang-CGBo2TiV.js.map

package/dist/chunks/NavItem.vue_vue_type_script_setup_true_lang-CGBo2TiV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.vue_vue_type_script_setup_true_lang-CGBo2TiV.js","sources":["../../src/presentation/nav/navItem/NavItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Size } from '../../../foundation/utils';\n\nexport interface NavItemProps {\n  /** The escape hatch to render the child element instead of an `<a>` (router Link). */\n  asChild?: boolean;\n\n  /** The active state (visual + `aria-current=\"page\"`). */\n  isActive?: boolean;\n\n  /** The visual size. Default `md`. */\n  size?: Size;\n}\n\nconst SIZE: Record<Size, string> = {\n  xs: 'h-7 px-1.5 text-xs gap-1.5',\n  sm: 'h-8 px-2 text-sm gap-2',\n  md: 'h-9 px-2.5 text-sm gap-2.5',\n  lg: 'h-11 px-3 text-base gap-3',\n  xl: 'h-12 px-3.5 text-base gap-3.5',\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs, useTemplateRef, type ComponentPublicInstance } from 'vue';\nimport { cn, dataAttr, Size as SizeToken } from '../../../foundation/utils';\nimport { Primitive, Slottable } from '../../../foundation/primitives';\n\n/**\n * Sidebar / nav row — icon + label + trailing slot + active state. Default `<a>`;\n * pass `asChild` to forward to a router Link. Sets `aria-current=\"page\"` when `isActive`.\n */\ndefineOptions({ name: 'NavItem', inheritAttrs: false });\n\ndefineSlots<{\n  /** The visual label — React's `children`. */\n  default(): unknown;\n\n  /** The leading icon. React's `icon` prop. */\n  icon?(): unknown;\n\n  /** The trailing slot — typically a count badge or status dot. React's `trailing` prop. */\n  trailing?(): unknown;\n}>();\n\n/** `isActive` defaults to `undefined`, not `false` — an absent optional boolean must stay absent. */\nconst props = withDefaults(defineProps<NavItemProps>(), {\n  asChild: false,\n  isActive: undefined,\n  size: SizeToken.Md,\n});\n\nconst attrs = useAttrs();\nconst inner = useTemplateRef<ComponentPublicInstance>('inner');\n\nconst classes = computed(() =>\n  cn(\n    'group inline-flex w-full items-center rounded-md font-medium text-foreground transition-colors',\n    'hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n    'data-[active]:bg-primary-soft data-[active]:text-primary-soft-foreground',\n    SIZE[props.size],\n    attrs.class as string | undefined,\n  ),\n);\n\n/** Everything but `class`, which is re-applied through `cn` above. */\nconst rest = computed(() => {\n  const { class: _class, ...others } = attrs;\n  return others;\n});\n\n/*\n * Under `as-child` the consumer's element (a router Link) becomes the row, and\n * `Slottable` marks it as the merge target so the icon / trailing spans compose\n * *inside* it. React additionally re-wrapped the consumer element's own children\n * in the `flex-1 truncate` label span (`cloneElement`); a template cannot reach\n * into a slot child's children, so the label rides as a bare node there and the\n * trailing span takes `ms-auto` to keep the same right-aligned layout. The `<a>`\n * path renders the label span exactly as React did.\n */\nconst trailingClasses = computed(() => cn('shrink-0', props.asChild && 'ms-auto'));\n\n/** `Primitive` renders the real element, so its `$el` is this component's root. */\nconst el = computed(() => (inner.value?.$el ?? null) as HTMLElement | null);\n\ndefineExpose({ el });\n</script>\n\n<template>\n  <Primitive\n    ref=\"inner\"\n    as=\"a\"\n    :as-child=\"props.asChild\"\n    :aria-current=\"props.isActive ? 'page' : undefined\"\n    :data-active=\"dataAttr(props.isActive)\"\n    v-bind=\"rest\"\n    :class=\"classes\"\n  >\n    <span v-if=\"$slots.icon\" class=\"text-muted-foreground group-data-[active]:text-current\">\n      <slot name=\"icon\" />\n    </span>\n    <Slottable v-if=\"props.asChild\"><slot /></Slottable>\n    <span v-else class=\"flex-1 truncate text-left\"><slot /></span>\n    <span v-if=\"$slots.trailing\" :class=\"trailingClasses\"><slot name=\"trailing\" /></span>\n  </Primitive>\n</template>\n"],"names":["_openBlock","_createBlock","_unref","_mergeProps","$slots","_createElementBlock","_renderSlot"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,OAA6B;AAAA,EACjC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;;;;;;;;AA0BA,UAAM,QAAQ;AAMd,UAAM,QAAQ,SAAA;AACd,UAAM,QAAQ,eAAwC,OAAO;AAE7D,UAAM,UAAU;AAAA,MAAS,MACvB;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,MAAM,IAAI;AAAA,QACf,MAAM;AAAA,MAAA;AAAA,IACR;AAIF,UAAM,OAAO,SAAS,MAAM;AAC1B,YAAM,EAAE,OAAO,QAAQ,GAAG,WAAW;AACrC,aAAO;AAAA,IACT,CAAC;AAWD,UAAM,kBAAkB,SAAS,MAAM,GAAG,YAAY,MAAM,WAAW,SAAS,CAAC;AAGjF,UAAM,KAAK,SAAS,MAAO,MAAM,OAAO,OAAO,IAA2B;AAE1E,aAAa,EAAE,IAAI;;AAIjB,aAAAA,aAAAC,YAeYC,kBAfZC,WAeY;AAAA,iBAdN;AAAA,QAAJ,KAAI;AAAA,QACJ,IAAG;AAAA,QACF,YAAU,MAAM;AAAA,QAChB,gBAAc,MAAM,oBAAoB;AAAA,QACxC,eAAaD,MAAA,QAAA,EAAS,MAAM,QAAQ;AAAA,MAAA,GAC7B,KAAA,OAAI,EACX,OAAO,QAAA,MAAA,CAAO,GAAA;AAAA,yBAEf,MAEO;AAAA,UAFKE,KAAAA,OAAO,QAAnBJ,aAAAK,mBAEO,QAFP,YAEO;AAAA,YADLC,WAAoB,KAAA,QAAA,MAAA;AAAA,UAAA;UAEL,MAAM,wBAAvBL,YAAoDC,MAAA,SAAA,GAAA,EAAA,KAAA,KAAA;AAAA,6BAApB,MAAQ;AAAA,cAARI,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;iBACxCN,UAAA,GAAAK,mBAA8D,QAA9D,YAA8D;AAAA,YAAfC,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAC3CF,KAAAA,OAAO,yBAAnBC,mBAAqF,QAAA;AAAA;YAAvD,sBAAO,gBAAA,KAAe;AAAA,UAAA;YAAEC,WAAwB,KAAA,QAAA,UAAA;AAAA,UAAA;;;;;;;"}