@taylorvance/tv-shared-ui 0.1.0

package/README.md

@@ -0,0 +1,70 @@
+# `@taylorvance/tv-shared-ui`
+
+Shared React UI primitives for Taylor Vance portfolio projects.
+
+## Current exports
+
+- `BrandBadge`
+- `TvProgramsMark`
+- `TVPROGRAMS_MARK_SVG_URL`
+- `TVPROGRAMS_MARK_PNG_URL`
+- `TVPROGRAMS_URL`
+- `TVPROGRAMS_HOSTNAME`
+- `TVPROGRAMS_DEFAULT_LABEL`
+- `brandBadgeClassNames`
+
+## Design goals
+
+- Keep primitives small and stable.
+- Stay CSS-agnostic by default.
+- Work in utility-class and plain-CSS apps.
+- Prefer composition and slot hooks over opinionated app styling.
+
+## `BrandBadge`
+
+Quick default usage:
+
+```tsx
+import { BrandBadge } from '@taylorvance/tv-shared-ui';
+
+export function Footer() {
+  return <BrandBadge />;
+}
+```
+
+Consumer-owned styling:
+
+```tsx
+import { BrandBadge } from '@taylorvance/tv-shared-ui';
+
+export function Footer() {
+  return (
+    <BrandBadge
+      className="brand-badge"
+      iconClassName="brand-badge-icon"
+      labelClassName="brand-badge-label"
+      unstyled
+    />
+  );
+}
+```
+
+## Logo assets
+
+React component:
+
+```tsx
+import { TvProgramsMark } from '@taylorvance/tv-shared-ui';
+```
+
+URL exports:
+
+```tsx
+import { TVPROGRAMS_MARK_SVG_URL } from '@taylorvance/tv-shared-ui';
+```
+
+Raw asset subpaths:
+
+```tsx
+import tvMarkUrl from '@taylorvance/tv-shared-ui/tv.svg';
+```

package/assets/tv.svg

@@ -0,0 +1,11 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 998.000000 998.000000" preserveAspectRatio="xMidYMid meet">
+	<metadata>Created by potrace 1.11, written by Peter Selinger 2001-2013</metadata>
+	<g transform="translate(0.000000,998.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
+		<path d="M7844 6005 c-472 -1180 -861 -2145 -864 -2145 -3 0 -379 932 -834
+			2070 l-828 2070 -2419 0 -2419 0 0 -500 0 -500 1000 0 1000 0 0 -2500 0 -2500
+			500 0 500 0 0 2500 0 2500 582 -2 582 -3 1165 -2913 c641 -1601 1168 -2912
+			1171 -2912 3 0 595 1473 1315 3273 720 1799 1314 3286 1322 3304 l13 31 -418
+			167 c-229 92 -438 175 -464 186 l-46 18 -858 -2144z"
+		/>
+	</g>
+</svg>

package/dist/BrandBadge.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export declare const brandBadgeClassNames: {
+    readonly root: "tv-shared-brand-badge";
+    readonly icon: "tv-shared-brand-badge__icon";
+    readonly label: "tv-shared-brand-badge__label";
+};
+export type BrandBadgeProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> & {
+    icon?: ReactNode;
+    iconClassName?: string;
+    label?: ReactNode;
+    labelClassName?: string;
+    unstyled?: boolean;
+};
+export declare function BrandBadge({ className, href, icon, iconClassName, label, labelClassName, rel, style, target, unstyled, ...props }: BrandBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BrandBadge.d.ts.map

package/dist/BrandBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandBadge.d.ts","sourceRoot":"","sources":["../src/BrandBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA+BhF,eAAO,MAAM,oBAAoB;;;;CAIvB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAqB,EACrB,IAAI,EACJ,aAAa,EACb,KAAgC,EAChC,cAAc,EACd,GAAkB,EAClB,KAAK,EACL,MAAiB,EACjB,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,2CAyBjB"}

package/dist/BrandBadge.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TVPROGRAMS_DEFAULT_LABEL, TVPROGRAMS_URL, } from './constants.js';
+import { TvProgramsMark } from './TvProgramsMark.js';
+const DEFAULT_ROOT_STYLE = {
+    alignItems: 'center',
+    backgroundColor: '#ffffff',
+    border: '1px solid #d1d5db',
+    borderRadius: '999px',
+    boxShadow: '0 1px 2px rgba(15, 23, 42, 0.08)',
+    color: '#374151',
+    display: 'inline-flex',
+    fontFamily: 'inherit',
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    gap: '0.5rem',
+    lineHeight: 1,
+    padding: '0.45rem 0.8rem',
+    textDecoration: 'none',
+};
+const DEFAULT_ICON_STYLE = {
+    display: 'block',
+    flexShrink: 0,
+    height: '1rem',
+    width: '1rem',
+};
+export const brandBadgeClassNames = {
+    root: 'tv-shared-brand-badge',
+    icon: 'tv-shared-brand-badge__icon',
+    label: 'tv-shared-brand-badge__label',
+};
+export function BrandBadge({ className, href = TVPROGRAMS_URL, icon, iconClassName, label = TVPROGRAMS_DEFAULT_LABEL, labelClassName, rel = 'noreferrer', style, target = '_blank', unstyled = false, ...props }) {
+    const rootClassName = [brandBadgeClassNames.root, className].filter(Boolean).join(' ');
+    const iconSlotClassName = [brandBadgeClassNames.icon, iconClassName].filter(Boolean).join(' ');
+    const labelSlotClassName = [brandBadgeClassNames.label, labelClassName].filter(Boolean).join(' ');
+    const mergedStyle = unstyled ? style : { ...DEFAULT_ROOT_STYLE, ...style };
+    return (_jsxs("a", { className: rootClassName, href: href, rel: rel, style: mergedStyle, target: target, ...props, children: [_jsx("span", { "aria-hidden": "true", className: iconSlotClassName, style: unstyled ? undefined : DEFAULT_ICON_STYLE, children: icon ?? _jsx(TvProgramsMark, { className: iconSlotClassName, style: unstyled ? undefined : DEFAULT_ICON_STYLE }) }), _jsx("span", { className: labelSlotClassName, children: label })] }));
+}

package/dist/TvProgramsMark.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type TvProgramsMarkProps = Omit<ComponentPropsWithoutRef<'svg'>, 'children'> & {
+    title?: string;
+};
+export declare function TvProgramsMark({ title, ...props }: TvProgramsMarkProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TvProgramsMark.d.ts.map

package/dist/TvProgramsMark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TvProgramsMark.d.ts","sourceRoot":"","sources":["../src/TvProgramsMark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiBrB"}

package/dist/TvProgramsMark.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TvProgramsMark({ title, ...props }) {
+    const accessibleProps = title
+        ? { role: 'img' }
+        : { 'aria-hidden': true };
+    return (_jsxs("svg", { viewBox: "0 0 998 998", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...accessibleProps, ...props, children: [title ? _jsx("title", { children: title }) : null, _jsx("path", { d: "M7844 6005c-472-1180-861-2145-864-2145-3 0-379 932-834 2070L5318 8000H4809 2390v-500-500h1000 1000V4000 1500h500 500V4000 6500l582-2 582-3 1165-2913c641-1601 1168-2912 1171-2912 3 0 595 1473 1315 3273 720 1799 1314 3286 1322 3304l13 31-418 167c-229 92-438 175-464 186l-46 18-858-2144z" })] }));
+}

package/dist/assets.d.ts

@@ -0,0 +1,3 @@
+export declare const TVPROGRAMS_MARK_SVG_URL: string;
+export declare const TVPROGRAMS_MARK_PNG_URL: string;
+//# sourceMappingURL=assets.d.ts.map

package/dist/assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assets.d.ts","sourceRoot":"","sources":["../src/assets.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,QAAoD,CAAC;AACzF,eAAO,MAAM,uBAAuB,QAAoD,CAAC"}

package/dist/assets.js

@@ -0,0 +1,2 @@
+export const TVPROGRAMS_MARK_SVG_URL = new URL('../assets/tv.svg', import.meta.url).href;
+export const TVPROGRAMS_MARK_PNG_URL = new URL('../assets/tv.png', import.meta.url).href;

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TVPROGRAMS_URL = "https://tvprograms.tech";
+export declare const TVPROGRAMS_HOSTNAME = "tvprograms.tech";
+export declare const TVPROGRAMS_DEFAULT_LABEL = "tvprograms.tech";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,4BAA4B,CAAC;AACxD,eAAO,MAAM,mBAAmB,oBAAoB,CAAC;AACrD,eAAO,MAAM,wBAAwB,oBAAsB,CAAC"}

package/dist/constants.js

@@ -0,0 +1,3 @@
+export const TVPROGRAMS_URL = 'https://tvprograms.tech';
+export const TVPROGRAMS_HOSTNAME = 'tvprograms.tech';
+export const TVPROGRAMS_DEFAULT_LABEL = TVPROGRAMS_HOSTNAME;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { BrandBadge, brandBadgeClassNames, type BrandBadgeProps, } from './BrandBadge.js';
+export { TVPROGRAMS_MARK_PNG_URL, TVPROGRAMS_MARK_SVG_URL, } from './assets.js';
+export { TVPROGRAMS_DEFAULT_LABEL, TVPROGRAMS_HOSTNAME, TVPROGRAMS_URL, } from './constants.js';
+export { TvProgramsMark, type TvProgramsMarkProps, } from './TvProgramsMark.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,oBAAoB,EACpB,KAAK,eAAe,GACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,wBAAwB,EACxB,mBAAmB,EACnB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { BrandBadge, brandBadgeClassNames, } from './BrandBadge.js';
+export { TVPROGRAMS_MARK_PNG_URL, TVPROGRAMS_MARK_SVG_URL, } from './assets.js';
+export { TVPROGRAMS_DEFAULT_LABEL, TVPROGRAMS_HOSTNAME, TVPROGRAMS_URL, } from './constants.js';
+export { TvProgramsMark, } from './TvProgramsMark.js';

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@taylorvance/tv-shared-ui",
+  "version": "0.1.0",
+  "description": "Shared React UI primitives for Taylor Vance portfolio projects.",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tv.svg": "./assets/tv.svg",
+    "./tv.png": "./assets/tv.png"
+  },
+  "files": [
+    "dist",
+    "assets",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/build-ui-package.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0"
+  }
+}