@outs-tand-ing/ui 0.0.4 → 0.2.0

package/dist/components/AccessWrapper.vue.d.ts

@@ -0,0 +1,18 @@
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_6) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    footer?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=AccessWrapper.vue.d.ts.map

package/dist/components/AccessWrapper.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessWrapper.vue.d.ts","sourceRoot":"","sources":["../../src/components/AccessWrapper.vue"],"names":[],"mappings":"AAwJA,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,CAAE;AAC/D,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/BrandLogo.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/BrandLogo.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrandLogo.vue.d.ts","sourceRoot":"","sources":["../../src/components/BrandLogo.vue"],"names":[],"mappings":"AAYA,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B,CAAC;AA6BF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"BrandLogo.vue.d.ts","sourceRoot":"","sources":["../../src/components/BrandLogo.vue"],"names":[],"mappings":"AAYA,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACjC,CAAC;AA6BF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/ScrollableArea.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    axis?: 'x' | 'y' | 'both';
+    fadeColor?: string;
+    wrapperClass?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    axis: "x" | "y" | "both";
+    fadeColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScrollableArea.vue.d.ts.map

package/dist/components/ScrollableArea.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableArea.vue.d.ts","sourceRoot":"","sources":["../../src/components/ScrollableArea.vue"],"names":[],"mappings":"AA0FA,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC;AAoJJ,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU;UAhKL,GAAG,GAAG,GAAG,GAAG,MAAM;eACb,MAAM;6EAkKpB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
-export { default as PinkBox } from './components/PinkBox.vue';
 export { default as BrandLogo } from './components/BrandLogo.vue';
+export { default as AccessWrapper } from './components/AccessWrapper.vue';
+export { default as ScrollableArea } from './components/ScrollableArea.vue';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAA"}

package/dist/index.js

@@ -1,53 +1,154 @@
-import { defineComponent as s, openBlock as _, createElementBlock as i, toDisplayString as p, normalizeClass as u } from "vue";
-const l = /* @__PURE__ */ s({
-  __name: "PinkBox",
-  props: {
-    label: { type: String, required: !1 }
-  },
-  setup(n, { expose: t }) {
-    t();
-    const e = {};
-    return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
-  }
-}), a = (n, t) => {
-  const e = n.__vccOpts || n;
-  for (const [o, r] of t)
-    e[o] = r;
-  return e;
-}, d = { class: "bg-pink-500 text-white rounded-lg p-4 font-medium" };
-function f(n, t, e, o, r, c) {
-  return _(), i(
-    "div",
-    d,
-    p(e.label ?? "PinkBox"),
-    1
-    /* TEXT */
-  );
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, onMounted as c, onUnmounted as l, openBlock as u, ref as d, renderSlot as f } from "vue";
+//#region src/components/BrandLogo.vue?vue&type=script&setup=true&lang.ts
+var p = /* @__PURE__ */ a({
+	__name: "BrandLogo",
+	props: { size: {
+		type: String,
+		required: !1
+	} },
+	setup(e, { expose: t }) {
+		t();
+		let n = {};
+		return Object.defineProperty(n, "__isScriptSetup", {
+			enumerable: !1,
+			value: !0
+		}), n;
+	}
+}), m = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+//#region src/components/BrandLogo.vue
+function h(e, t, r, i, a, s) {
+	return u(), n("span", { class: o(["font-posterama", {
+		"text-base": r.size === "xs",
+		"text-xl": r.size === "sm",
+		"text-3xl": !r.size || r.size === "md",
+		"text-5xl": r.size === "lg"
+	}]) }, "OUTSTANDING", 2);
+}
+var g = /* @__PURE__ */ m(p, [["render", h], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/BrandLogo.vue"]]), _ = /* @__PURE__ */ a({
+	__name: "AccessWrapper",
+	setup(e, { expose: t }) {
+		t();
+		let n = d(null), r = d(!0), i = () => r.value = document.documentElement.scrollHeight > window.innerHeight + 2;
+		c(() => {
+			if (i(), window.addEventListener("scroll", i, { passive: !0 }), window.addEventListener("resize", i, { passive: !0 }), n.value) {
+				let e = n.value.offsetHeight;
+				document.documentElement.style.setProperty("--access-footer-h", `${e}px`);
+			}
+		}), l(() => {
+			window.removeEventListener("scroll", i), window.removeEventListener("resize", i);
+		});
+		let a = {
+			footerRef: n,
+			canScroll: r,
+			update: i,
+			BrandLogo: g
+		};
+		return Object.defineProperty(a, "__isScriptSetup", {
+			enumerable: !1,
+			value: !0
+		}), a;
+	}
+}), v = { class: "min-h-screen bg-gray-50 flex flex-col" }, y = { class: "pt-[var(--access-pt)] pb-4 flex flex-col items-center gap-4" }, b = { href: "/" }, x = { class: "flex-1 flex items-center justify-center p-4 pb-[var(--access-footer-h)]" }, S = {
+	ref: "footerRef",
+	class: "fixed bottom-0 left-0 right-0 z-10"
+}, C = { class: "bg-gray-50" };
+function w(e, t, a, s, c, l) {
+	return u(), n("div", v, [
+		r("div", y, [r("a", b, [i(s.BrandLogo, { class: "text-gray-900" })]), f(e.$slots, "header")]),
+		r("div", x, [f(e.$slots, "default")]),
+		r("div", S, [r("div", {
+			class: o(["pointer-events-none h-10 transition-opacity duration-200", s.canScroll ? "opacity-100" : "opacity-0"]),
+			style: { background: "linear-gradient(to top, var(--color-surface, #f9fafb), transparent)" }
+		}, null, 2), r("div", C, [f(e.$slots, "footer")])], 512)
+	]);
 }
-const g = /* @__PURE__ */ a(l, [["render", f], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/PinkBox.vue"]]), m = /* @__PURE__ */ s({
-  __name: "BrandLogo",
-  props: {
-    size: { type: String, required: !1 }
-  },
-  setup(n, { expose: t }) {
-    t();
-    const e = {};
-    return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
-  }
+var T = /* @__PURE__ */ m(_, [["render", w], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/AccessWrapper.vue"]]), E = /* @__PURE__ */ a({
+	__name: "ScrollableArea",
+	props: {
+		axis: {
+			type: String,
+			required: !1,
+			default: "y"
+		},
+		fadeColor: {
+			type: String,
+			required: !1,
+			default: "white"
+		},
+		wrapperClass: {
+			type: String,
+			required: !1
+		}
+	},
+	setup(t, { expose: n }) {
+		n();
+		let r = t, i = e(() => r.axis === "x" ? "overflow-x-auto overflow-y-hidden" : r.axis === "both" ? "overflow-auto" : "overflow-y-auto overflow-x-hidden"), a = (e) => ({ background: `linear-gradient(${e}, ${r.fadeColor}, transparent)` }), o = d(null), s = d(!1), u = d(!1), f = d(!1), p = d(!1), m = () => {
+			let e = o.value;
+			e && (r.axis !== "x" && (s.value = e.scrollTop > 2, u.value = e.scrollTop + e.clientHeight < e.scrollHeight - 2), r.axis !== "y" && (f.value = e.scrollLeft > 2, p.value = e.scrollLeft + e.clientWidth < e.scrollWidth - 2));
+		}, h = m, g = null;
+		c(() => {
+			m(), o.value && (g = new ResizeObserver(m), g.observe(o.value));
+		}), l(() => g?.disconnect());
+		let _ = {
+			props: r,
+			scrollerClass: i,
+			fadeStyle: a,
+			scroller: o,
+			canScrollUp: s,
+			canScrollDown: u,
+			canScrollLeft: f,
+			canScrollRight: p,
+			update: m,
+			onScroll: h,
+			get ro() {
+				return g;
+			},
+			set ro(e) {
+				g = e;
+			}
+		};
+		return Object.defineProperty(_, "__isScriptSetup", {
+			enumerable: !1,
+			value: !0
+		}), _;
+	}
 });
-function x(n, t, e, o, r, c) {
-  return _(), i(
-    "span",
-    {
-      class: u(["font-posterama text-gray-900", { "text-xl": e.size === "sm", "text-3xl": !e.size || e.size === "md", "text-5xl": e.size === "lg" }])
-    },
-    "OUTSTANDING",
-    2
-    /* CLASS */
-  );
+//#endregion
+//#region src/components/ScrollableArea.vue
+function D(e, i, a, c, l, d) {
+	return u(), n("div", { class: o(["relative overflow-hidden", a.wrapperClass]) }, [
+		r("div", {
+			ref: "scroller",
+			class: o(["size-full hide-scroll", c.scrollerClass]),
+			onScroll: i[0] ||= (...e) => c.onScroll && c.onScroll(...e)
+		}, [f(e.$slots, "default")], 34),
+		a.axis === "x" ? t("v-if", !0) : (u(), n("div", {
+			key: 0,
+			class: o(["pointer-events-none absolute left-0 right-0 top-0 h-10 transition-opacity duration-200", c.canScrollUp ? "opacity-100" : "opacity-0"]),
+			style: s(c.fadeStyle("to bottom"))
+		}, null, 6)),
+		a.axis === "x" ? t("v-if", !0) : (u(), n("div", {
+			key: 1,
+			class: o(["pointer-events-none absolute left-0 right-0 bottom-0 h-10 transition-opacity duration-200", c.canScrollDown ? "opacity-100" : "opacity-0"]),
+			style: s(c.fadeStyle("to top"))
+		}, null, 6)),
+		a.axis === "y" ? t("v-if", !0) : (u(), n("div", {
+			key: 2,
+			class: o(["pointer-events-none absolute top-0 bottom-0 left-0 w-10 transition-opacity duration-200", c.canScrollLeft ? "opacity-100" : "opacity-0"]),
+			style: s(c.fadeStyle("to right"))
+		}, null, 6)),
+		a.axis === "y" ? t("v-if", !0) : (u(), n("div", {
+			key: 3,
+			class: o(["pointer-events-none absolute top-0 bottom-0 right-0 w-10 transition-opacity duration-200", c.canScrollRight ? "opacity-100" : "opacity-0"]),
+			style: s(c.fadeStyle("to left"))
+		}, null, 6))
+	], 2);
 }
-const B = /* @__PURE__ */ a(m, [["render", x], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/BrandLogo.vue"]]);
-export {
-  B as BrandLogo,
-  g as PinkBox
-};
+var O = /* @__PURE__ */ m(E, [["render", D], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/ScrollableArea.vue"]]);
+//#endregion
+export { T as AccessWrapper, g as BrandLogo, O as ScrollableArea };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outs-tand-ing/ui",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "description": "Shared Vue components, icons, and design tokens for Outs",
   "type": "module",
   "sideEffects": [
@@ -13,7 +13,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./typography.css": "./src/assets/typography.css"
+    "./typography.css": "./src/assets/typography.css",
+    "./components.css": "./src/assets/components.css"
   },
   "files": [
     "dist",
@@ -41,12 +42,12 @@
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitejs/plugin-vue": "^6.0.5",
     "eslint": "^10.1.0",
-    "eslint-plugin-vue": "^10.1.0",
+    "eslint-plugin-vue": "^10.8.0",
     "typescript": "^6.0.2",
-    "typescript-eslint": "^8.32.0",
-    "vite": "^6.3.0",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.3",
     "vue": "^3.5.31",
     "vue-tsc": "^3.2.6"
   }

package/src/assets/components.css

@@ -0,0 +1,66 @@
+/* ── Scroll-fade: vertical ── */
+@utility scroll-fade {
+  --sf-size: 1.5rem;
+  --sf-top: 0;
+  --sf-bottom: 0;
+  --sf-color: var(--color-surface);
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    height: var(--sf-size);
+    position: sticky;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &::before {
+    top: var(--sf-top);
+    background: linear-gradient(to bottom, var(--sf-color), transparent);
+    margin-bottom: calc(-1 * var(--sf-size));
+  }
+
+  &::after {
+    bottom: var(--sf-bottom);
+    background: linear-gradient(to top, var(--sf-color), transparent);
+    margin-top: calc(-1 * var(--sf-size));
+  }
+}
+
+/* ── Scroll-fade: horizontal ── */
+@utility scroll-fade-x {
+  --sf-size: 1.5rem;
+  --sf-color: var(--color-surface);
+
+  &::before,
+  &::after {
+    content: '';
+    flex-shrink: 0;
+    width: var(--sf-size);
+    position: sticky;
+    top: 0;
+    align-self: stretch;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &::before {
+    left: 0;
+    background: linear-gradient(to right, var(--sf-color), transparent);
+    margin-right: calc(-1 * var(--sf-size));
+  }
+
+  &::after {
+    right: 0;
+    background: linear-gradient(to left, var(--sf-color), transparent);
+    margin-left: calc(-1 * var(--sf-size));
+  }
+}
+
+/* ── Scroll-fade modifiers (work with both axes) ── */
+@utility sf-size-* {
+  --sf-size: --value(--spacing);
+}

package/src/assets/typography.css

@@ -5,3 +5,43 @@
   font-style: normal;
   font-display: swap;
 }
+
+.text-trim {
+  text-box: trim-both cap alphabetic;
+}
+
+@utility text-trim-start {
+  text-box: trim-start cap alphabetic;
+}
+
+@utility text-trim-end {
+  text-box: trim-end cap alphabetic;
+}
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+    color: var(--color-text-primary);
+    font-weight: 900;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    transition: color 200ms ease, font-family 200ms ease;
+  }
+
+  h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
+
+  h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
+
+  h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); letter-spacing: -0.01em; }
+
+  h4 { font-size: 1.25rem; letter-spacing: 0; font-weight: 700; }
+
+  h5 { font-size: 1rem; letter-spacing: 0; font-weight: 700; }
+
+  h6 { font-size: 0.875rem; letter-spacing: 0; font-weight: 600; color: var(--color-text-secondary); }
+}

package/src/components/AccessWrapper.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="min-h-screen bg-gray-50 flex flex-col">
+    <div class="pt-[var(--access-pt)] pb-4 flex flex-col items-center gap-4">
+      <a href="/"><BrandLogo class="text-gray-900" /></a>
+      <slot name="header" />
+    </div>
+    <div class="flex-1 flex items-center justify-center p-4 pb-[var(--access-footer-h)]">
+      <slot />
+    </div>
+    <div ref="footerRef" class="fixed bottom-0 left-0 right-0 z-10">
+      <div
+        class="pointer-events-none h-10 transition-opacity duration-200"
+        :class="canScroll ? 'opacity-100' : 'opacity-0'"
+        :style="{ background: 'linear-gradient(to top, var(--color-surface, #f9fafb), transparent)' }"
+      />
+      <div class="bg-gray-50">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import BrandLogo from './BrandLogo.vue'
+
+const footerRef = ref<HTMLElement | null>(null)
+const canScroll = ref(true)
+
+const update = () => (canScroll.value = document.documentElement.scrollHeight > window.innerHeight + 2)
+
+onMounted(() => {
+  update()
+  window.addEventListener('scroll', update, { passive: true })
+  window.addEventListener('resize', update, { passive: true })
+  if (footerRef.value) {
+    const h = footerRef.value.offsetHeight
+    document.documentElement.style.setProperty('--access-footer-h', `${h}px`)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', update)
+  window.removeEventListener('resize', update)
+})
+</script>

package/src/components/BrandLogo.vue

@@ -1,9 +1,9 @@
 <template>
-  <span class="font-posterama text-gray-900" :class="{ 'text-xl': size === 'sm', 'text-3xl': !size || size === 'md', 'text-5xl': size === 'lg' }">OUTSTANDING</span>
+  <span class="font-posterama" :class="{ 'text-base': size === 'xs', 'text-xl': size === 'sm', 'text-3xl': !size || size === 'md', 'text-5xl': size === 'lg' }">OUTSTANDING</span>
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
 }>()
 </script>

package/src/components/ScrollableArea.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="relative overflow-hidden" :class="wrapperClass">
+    <div ref="scroller" class="size-full hide-scroll" :class="scrollerClass" @scroll="onScroll">
+      <slot />
+    </div>
+    <div
+      v-if="axis !== 'x'"
+      class="pointer-events-none absolute left-0 right-0 top-0 h-10 transition-opacity duration-200"
+      :class="canScrollUp ? 'opacity-100' : 'opacity-0'"
+      :style="fadeStyle('to bottom')"
+    />
+    <div
+      v-if="axis !== 'x'"
+      class="pointer-events-none absolute left-0 right-0 bottom-0 h-10 transition-opacity duration-200"
+      :class="canScrollDown ? 'opacity-100' : 'opacity-0'"
+      :style="fadeStyle('to top')"
+    />
+    <div
+      v-if="axis !== 'y'"
+      class="pointer-events-none absolute top-0 bottom-0 left-0 w-10 transition-opacity duration-200"
+      :class="canScrollLeft ? 'opacity-100' : 'opacity-0'"
+      :style="fadeStyle('to right')"
+    />
+    <div
+      v-if="axis !== 'y'"
+      class="pointer-events-none absolute top-0 bottom-0 right-0 w-10 transition-opacity duration-200"
+      :class="canScrollRight ? 'opacity-100' : 'opacity-0'"
+      :style="fadeStyle('to left')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    axis?: 'x' | 'y' | 'both'
+    fadeColor?: string
+    wrapperClass?: string
+  }>(),
+  { axis: 'y', fadeColor: 'white' },
+)
+
+const scrollerClass = computed(() => {
+  if (props.axis === 'x') return 'overflow-x-auto overflow-y-hidden'
+  if (props.axis === 'both') return 'overflow-auto'
+  return 'overflow-y-auto overflow-x-hidden'
+})
+
+const fadeStyle = (direction: string) => ({
+  background: `linear-gradient(${direction}, ${props.fadeColor}, transparent)`,
+})
+
+const scroller = ref<HTMLElement | null>(null)
+const canScrollUp = ref(false)
+const canScrollDown = ref(false)
+const canScrollLeft = ref(false)
+const canScrollRight = ref(false)
+
+const update = () => {
+  const el = scroller.value
+  if (!el) return
+  if (props.axis !== 'x') {
+    canScrollUp.value = el.scrollTop > 2
+    canScrollDown.value = el.scrollTop + el.clientHeight < el.scrollHeight - 2
+  }
+  if (props.axis !== 'y') {
+    canScrollLeft.value = el.scrollLeft > 2
+    canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 2
+  }
+}
+
+const onScroll = update
+
+let ro: ResizeObserver | null = null
+onMounted(() => {
+  update()
+  if (scroller.value) {
+    ro = new ResizeObserver(update)
+    ro.observe(scroller.value)
+  }
+})
+onUnmounted(() => ro?.disconnect())
+</script>

package/src/index.ts

@@ -1,2 +1,3 @@
-export { default as PinkBox } from './components/PinkBox.vue'
 export { default as BrandLogo } from './components/BrandLogo.vue'
+export { default as AccessWrapper } from './components/AccessWrapper.vue'
+export { default as ScrollableArea } from './components/ScrollableArea.vue'

package/dist/components/PinkBox.vue.d.ts

@@ -1,7 +0,0 @@
-type __VLS_Props = {
-    label?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
-//# sourceMappingURL=PinkBox.vue.d.ts.map

package/dist/components/PinkBox.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PinkBox.vue.d.ts","sourceRoot":"","sources":["../../src/components/PinkBox.vue"],"names":[],"mappings":"AAcA,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AA6BF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/src/components/PinkBox.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  label?: string
-}>()
-</script>
-
-<template>
-  <div class="bg-pink-500 text-white rounded-lg p-4 font-medium">
-    {{ label ?? 'PinkBox' }}
-  </div>
-</template>