@jig-ui/react 0.1.0

package/dist/typography/typography.d.ts

@@ -0,0 +1,71 @@
+import { SpacingProps } from '../spacing';
+import { PolymorphicProps } from '../polymorphic';
+/**
+ * The elements Typography is willing to render as. `with` chooses how the text
+ * looks; `as` chooses what it means, and the two are deliberately independent —
+ * a `heading01` preset on a `<p>` is a legitimate thing to want.
+ */
+export type TypographyElement = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'blockquote' | 'figcaption';
+/**
+ * The semantic text roles.
+ *
+ * A register rather than a colour: `danger` is not red, it is *danger*, and it
+ * resolves to a different red in each theme. Named `tone` rather than `color`
+ * because `Token`'s `color` prop names a hue, and 0006 D2 keeps those two
+ * ideas apart. Decided in apps/docs/decisions/0010-typography-tone.html (D2).
+ */
+export type TypographyTone = 'primary' | 'secondary' | 'muted' | 'accent' | 'danger' | 'inverse';
+/** The type presets. Exported so consumers building wrappers can name one. */
+export type TypeStyles = 'display01' | 'display02' | 'display03' | 'display04' | 'display05' | 'display06' | 'heading01' | 'heading02' | 'heading03' | 'heading04' | 'heading05' | 'heading06' | 'body01' | 'body02' | 'caption01' | 'caption02' | 'code01';
+/** Typography's own props. The element's own attributes are added by PolymorphicProps. */
+export interface TypographyOwnProps extends SpacingProps {
+    with?: TypeStyles;
+    /**
+     * Evens out the line lengths rather than filling each line before breaking,
+     * so a heading does not end on a single orphaned word. Meant for short text
+     * that wraps to a few lines — headings, standfirsts, captions; browsers cap
+     * `text-wrap: balance` at a handful of lines, so it does nothing for a
+     * paragraph.
+     */
+    balance?: boolean;
+    /**
+     * Which semantic text role the text takes. Sets the colour, and with it the
+     * hover colour of any `Link` inside — so a link in muted prose hovers to
+     * muted's own partner rather than to body copy's.
+     *
+     * **`inverse` needs an inverted surface.** It is the one role that is a
+     * context rather than a register: it paints light ink for a dark panel
+     * (`color.surfaces.inverse`), and on the ordinary body surface it renders
+     * text the same colour as the page. Nothing can check this — whether the
+     * background behind is inverted is not knowable from here, at render time or
+     * from computed style, because any ancestor may have painted it. 0010 D3
+     * exposed it anyway, and this note is the guard.
+     */
+    tone?: TypographyTone;
+}
+export type TypographyProps<E extends TypographyElement = 'div'> = PolymorphicProps<E, TypographyOwnProps>;
+/**
+ * Text.
+ *
+ * `with` chooses how it looks and `as` chooses what it means, independently —
+ * a `heading01` preset on a `<p>` is a legitimate thing to want, and headings
+ * should be levelled for the document outline rather than for their size.
+ *
+ * `tone` sets the semantic colour, and with it the hover colour of any `Link`
+ * inside, so a link in muted prose stays in that register.
+ *
+ * `balance` evens out line lengths so a heading does not end on a single
+ * orphaned word; it is capped at a few lines, so it does nothing for a
+ * paragraph.
+ *
+ * Takes the margin and padding props for spacing around it.
+ *
+ * @example
+ * <Typography as="h2" with="heading03" balance mb="400">
+ *   A heading that wraps evenly
+ * </Typography>
+ * <Typography as="p" tone="muted">
+ *   Supporting copy, with <Link href="/more">a link</Link> in it.
+ * </Typography>
+ */
+export declare function Typography<E extends TypographyElement = 'div'>({ with: typeStyle, balance, tone, as, className, children, ...props }: TypographyProps<E>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@jig-ui/react",
+  "version": "0.1.0",
+  "description": "Jig design system — React components",
+  "license": "MIT",
+  "author": "Nate Bridi",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/natebridi/jig.git",
+    "directory": "packages/components"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "default": "./dist/tokens.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./reset.css": "./dist/reset.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@phosphor-icons/core": "^2.1.1",
+    "@storybook/react-vite": "^10.5.7",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/css": "^1.20.0",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "@vanilla-extract/vite-plugin": "^5.2.1",
+    "jsdom": "^30.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "^10.5.7",
+    "typescript": "^6.0.2",
+    "vite": "8.0.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.10",
+    "@jig-ui/styles": "0.0.0",
+    "@jig-ui/tsconfig": "0.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "~1.7.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "generate:icons": "node scripts/generate-icons.mjs",
+    "check:icons": "node scripts/generate-icons.mjs && git diff --exit-code --stat -- src/icon/generated",
+    "dev": "vite build --watch",
+    "pack:local": "pnpm build && pnpm pack",
+    "test": "vitest run",
+    "test:packed": "node scripts/packed-consumer-test.mjs"
+  }
+}