@vinyasa/typography 1.0.20

package/README.md

@@ -0,0 +1,118 @@
+# @vinyasa/typography
+
+10 typography primitives: Text, Heading, Paragraph, Label, Caption, Link, Code, Kbd, Blockquote, MarkdownRenderer.
+
+## Installation
+
+```bash
+pnpm add @vinyasa/typography @vinyasa/layout @vinyasa/tokens react react-dom
+```
+
+`@vinyasa/tokens` and `@vinyasa/layout` are peer dependencies — this package's spacing props reuse the same token-derived scale `@vinyasa/layout` established, and `MarkdownRenderer` reuses `@vinyasa/layout`'s `Box` for its wrapper. Rendering requires a `VinyasaProvider` (from `@vinyasa/tokens`) above these components in the tree.
+
+## New tokens this package introduces
+
+`@vinyasa/tokens` gained one new color role and three larger font sizes to support headings:
+
+| Token         | Value                   | Used by                           |
+| ------------- | ----------------------- | --------------------------------- |
+| `fontSize2xl` | `1.5rem` (24px)         | `Heading` (`h2` default)          |
+| `fontSize3xl` | `1.875rem` (30px)       | `Heading` (`h1` default)          |
+| `fontSize4xl` | `2.25rem` (36px)        | `Heading` (`size="4xl"` override) |
+| `textMuted`   | `#6b7280` (`gray[500]`) | `Text` `color="muted"`, `Caption` |
+
+These extend the existing `fontSize` scale (`xs`–`xl` were already Tailwind's own type steps up to 20px) purely upward — no new scale, no new primitives beyond `textMuted`'s reuse of an already-existing gray.
+
+## Spacing
+
+Every component accepts the same margin/padding props as `@vinyasa/layout` — see [its README](../layout/README.md#spacing) for the full prop and token tables.
+
+## Usage
+
+### Text
+
+The one real recipe every other component in this package builds on.
+
+```tsx
+<Text size="lg" weight="medium" color="muted">
+	Body copy
+</Text>
+```
+
+`size`: `xs`/`sm`/`md`/`lg`/`xl`/`2xl`/`3xl`/`4xl`. `weight`: `regular`/`medium`/`semibold`/`bold`. `align`: `left`/`center`/`right`. `color`: `default`/`muted`/`primary`/`error`. `truncate`: boolean.
+
+### Heading
+
+```tsx
+<Heading as="h1">Page title</Heading>
+<Heading as="h3" size="lg">Visually smaller h3</Heading>
+```
+
+`as` (`h1`–`h6`, default `h2`) picks a sensible default `size` per level (`h1`→`3xl` … `h6`→`sm`) — pass `size` explicitly to decouple the visual size from the semantic level, same as Radix Themes' `Heading`.
+
+### Paragraph, Label, Caption
+
+Thin, fixed-prop wrappers over `Text` — not duplicated CSS.
+
+```tsx
+<Paragraph>Some long-form body text.</Paragraph>
+<Label htmlFor="email">Email address</Label>       {/* Text as="label" size="sm" weight="medium" */}
+<Caption>Last updated 2 hours ago</Caption>         {/* Text as="span" size="xs" color="muted" */}
+```
+
+### Link
+
+```tsx
+<Link href="/docs">Read the docs</Link>
+<Link href="https://example.com" target="_blank" rel="noreferrer">External link</Link>
+```
+
+Real anchor props (`href`, `target`, `rel`), plus `size`/`weight`/`truncate` from `Text`. `color` is narrowed to `primary`/`error`.
+
+### Code
+
+```tsx
+<Text>Run <Code>pnpm install</Code> first.</Text>
+<Code block>{`function greet() {\n  return "hi";\n}`}</Code>
+```
+
+`block` renders `<pre><code>` instead of inline `<code>`.
+
+### Kbd
+
+```tsx
+<Kbd>⌘</Kbd> + <Kbd>K</Kbd>;
+```
+
+### Blockquote
+
+```tsx
+<Blockquote>Design is not just what it looks like. Design is how it works.</Blockquote>
+```
+
+### MarkdownRenderer
+
+Wraps [`react-markdown`](https://github.com/remarkjs/react-markdown), mapping every markdown element to this package's own components (headings → `Heading`, paragraphs → `Paragraph`, links → `Link`, code → `Code`, blockquotes → `Blockquote`) so rendered markdown automatically picks up your theme.
+
+```tsx
+<MarkdownRenderer>{'# Title\n\nSome *text* with `inline code`.'}</MarkdownRenderer>
+```
+
+## Subpath imports
+
+Every component can be imported directly instead of through the package root, e.g.:
+
+```tsx
+import Text from '@vinyasa/typography/text';
+```
+
+## Development
+
+From the repository root:
+
+```bash
+pnpm --filter @vinyasa/typography build
+pnpm --filter @vinyasa/typography test
+pnpm --filter @vinyasa/typography lint
+pnpm storybook   # Typography/*
+```

package/dist/cjs/blockquote.cjs

@@ -0,0 +1,245 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    default: ()=>blockquote_Blockquote
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const tokens_namespaceObject = require("@vinyasa/tokens");
+const space = {
+    1: tokens_namespaceObject.themeContract.space1,
+    2: tokens_namespaceObject.themeContract.space2,
+    3: tokens_namespaceObject.themeContract.space3,
+    4: tokens_namespaceObject.themeContract.space4,
+    5: tokens_namespaceObject.themeContract.space5,
+    6: tokens_namespaceObject.themeContract.space6
+};
+const spacingPropertyMap = [
+    [
+        'm',
+        'margin'
+    ],
+    [
+        'mx',
+        'marginInline'
+    ],
+    [
+        'my',
+        'marginBlock'
+    ],
+    [
+        'mt',
+        'marginTop'
+    ],
+    [
+        'mr',
+        'marginRight'
+    ],
+    [
+        'mb',
+        'marginBottom'
+    ],
+    [
+        'ml',
+        'marginLeft'
+    ],
+    [
+        'p',
+        'padding'
+    ],
+    [
+        'px',
+        'paddingInline'
+    ],
+    [
+        'py',
+        'paddingBlock'
+    ],
+    [
+        'pt',
+        'paddingTop'
+    ],
+    [
+        'pr',
+        'paddingRight'
+    ],
+    [
+        'pb',
+        'paddingBottom'
+    ],
+    [
+        'pl',
+        'paddingLeft'
+    ]
+];
+const resolveSpacingStyle = (props)=>{
+    const style = {};
+    for (const [propKey, cssProperty] of spacingPropertyMap){
+        const value = props[propKey];
+        if (void 0 !== value) style[cssProperty] = space[value];
+    }
+    return style;
+};
+var blockquote = 'adxw6l0';
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function Blockquote_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else Blockquote_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys, key, i;
+    if ("u" > typeof Reflect && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (!(excluded.indexOf(key) >= 0)) {
+            if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+        }
+    }
+    return target;
+}
+const Blockquote = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children } = _ref1, rest = _object_without_properties(_ref1, [
+        "m",
+        "mt",
+        "mr",
+        "mb",
+        "ml",
+        "mx",
+        "my",
+        "p",
+        "pt",
+        "pr",
+        "pb",
+        "pl",
+        "px",
+        "py",
+        "className",
+        "style",
+        "children"
+    ]), [ref] = _rest;
+    const classes = className ? `${blockquote} ${className}` : blockquote;
+    const computedStyle = _object_spread({}, resolveSpacingStyle({
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py
+    }), style);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("blockquote", _object_spread_props(_object_spread({
+        ref: ref,
+        className: classes,
+        style: computedStyle
+    }, rest), {
+        children: children
+    }));
+});
+Blockquote.displayName = 'Blockquote';
+const blockquote_Blockquote = Blockquote;
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/blockquote.css

@@ -0,0 +1,36 @@
+.adxw6l0 {
+  color: var(--vinyasa-text-muted);
+  margin: 0;
+  font-style: italic;
+}
+
+.adxw6l0:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  border-left: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  padding-left: var(--vinyasa-space4);
+}
+
+.adxw6l0:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  border-left: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  padding-left: var(--vinyasa-space4);
+}
+
+.adxw6l0:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  border-left: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  padding-left: var(--vinyasa-space4);
+}
+
+.adxw6l0:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  border-right: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  padding-right: var(--vinyasa-space4);
+}
+
+.adxw6l0:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  border-right: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  padding-right: var(--vinyasa-space4);
+}
+
+.adxw6l0:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  border-right: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  padding-right: var(--vinyasa-space4);
+}
+