@outs-tand-ing/ui 0.0.2 → 0.0.6

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    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;
+export default _default;
+//# sourceMappingURL=BrandLogo.vue.d.ts.map

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

@@ -0,0 +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,GAAG,IAAI,CAAA;CACjC,CAAC;AA6BF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default as PinkBox } from './components/PinkBox.vue';
+export { default as BrandLogo } from './components/BrandLogo.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"}
+{"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"}

package/dist/index.js

@@ -1,30 +1,53 @@
-import { defineComponent as s, openBlock as _, createElementBlock as i, toDisplayString as c } from "vue";
-const p = /* @__PURE__ */ s({
+import { defineComponent as r, openBlock as _, createElementBlock as i, toDisplayString as p, normalizeClass as u } from "vue";
+const l = /* @__PURE__ */ r({
   __name: "PinkBox",
   props: {
     label: { type: String, required: !1 }
   },
-  setup(t, { expose: o }) {
-    o();
+  setup(n, { expose: t }) {
+    t();
     const e = {};
     return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
   }
-}), a = (t, o) => {
-  const e = t.__vccOpts || t;
-  for (const [n, r] of o)
-    e[n] = r;
+}), a = (n, t) => {
+  const e = n.__vccOpts || n;
+  for (const [s, o] of t)
+    e[s] = o;
   return e;
-}, l = { class: "bg-pink-500 text-white rounded-lg p-4 font-medium" };
-function u(t, o, e, n, r, d) {
+}, d = { class: "bg-pink-500 text-white rounded-lg p-4 font-medium" };
+function f(n, t, e, s, o, c) {
   return _(), i(
     "div",
-    l,
-    c(e.label ?? "PinkBox"),
+    d,
+    p(e.label ?? "PinkBox"),
     1
     /* TEXT */
   );
 }
-const m = /* @__PURE__ */ a(p, [["render", u], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/PinkBox.vue"]]);
+const g = /* @__PURE__ */ a(l, [["render", f], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/PinkBox.vue"]]), m = /* @__PURE__ */ r({
+  __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;
+  }
+});
+function x(n, t, e, s, o, c) {
+  return _(), i(
+    "span",
+    {
+      class: u(["font-posterama", { "text-base": e.size === "xs", "text-xl": e.size === "sm", "text-3xl": !e.size || e.size === "md", "text-5xl": e.size === "lg" }])
+    },
+    "OUTSTANDING",
+    2
+    /* CLASS */
+  );
+}
+const B = /* @__PURE__ */ a(m, [["render", x], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/BrandLogo.vue"]]);
 export {
-  m as PinkBox
+  B as BrandLogo,
+  g as PinkBox
 };

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@outs-tand-ing/ui",
-  "version": "0.0.2",
+  "version": "0.0.6",
+  "description": "Shared Vue components, icons, and design tokens for Outs",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./typography.css": "./src/assets/typography.css"
   },
   "files": [
     "dist",

package/src/assets/typography.css

@@ -0,0 +1,47 @@
+@font-face {
+  font-family: 'Posterama';
+  src: url('./fonts/Posterama_1984_W04_Black.ttf') format('truetype');
+  font-weight: 900;
+  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/BrandLogo.vue

@@ -0,0 +1,9 @@
+<template>
+  <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?: 'xs' | 'sm' | 'md' | 'lg'
+}>()
+</script>

package/src/index.ts

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