@tamagui/size 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/types/index.d.ts

@@ -0,0 +1,133 @@
+import { type FontSizeTokens, type GenericFont, type SizeTokens, type StyledContext, type TokensParsed, type Variable } from "@tamagui/web";
+export type TokenSize = SizeTokens | FontSizeTokens | number | true;
+export type TokenSizePolicy = {
+	size: Exclude<SizeTokens, true> | number;
+	space: Exclude<SizeTokens, true> | number;
+	radius: Exclude<SizeTokens, true> | number;
+	fontSize: Exclude<FontSizeTokens, true> | number;
+};
+export declare const defaultTokenSizePolicy: TokenSizePolicy;
+/**
+* Frame heights for controls, keyed like v2's size tokens.
+*
+* `size` on a control is a preset, not a length. A config's size scale is a
+* spacing scale: under v6 it is tailwind's, where `3` is 12px, so reading a
+* frame height straight off it produced a 12px-tall Button holding 16px text.
+* These are v2's size token values, so a migrating `size="4"` still means a
+* 44px control rather than silently becoming a 16px one.
+*
+* `true` is the unsized default and is just the `4` step, so there is no
+* separate default constant that can drift away from the ramp.
+*/
+export declare const controlSizes: {
+	readonly true: 44;
+	readonly 0: 0;
+	readonly "0-25": 2;
+	readonly "0-5": 4;
+	readonly "0-75": 8;
+	readonly 1: 20;
+	readonly "1-5": 24;
+	readonly 2: 28;
+	readonly "2-5": 32;
+	readonly 3: 36;
+	readonly "3-5": 40;
+	readonly 4: 44;
+	readonly "4-5": 48;
+	readonly 5: 52;
+	readonly 6: 64;
+	readonly 7: 74;
+	readonly 8: 84;
+	readonly 9: 94;
+	readonly 10: 104;
+	readonly 11: 124;
+	readonly 12: 144;
+	readonly 13: 164;
+	readonly 14: 184;
+	readonly 15: 204;
+	readonly 16: 224;
+	readonly 17: 224;
+	readonly 18: 244;
+	readonly 19: 264;
+	readonly 20: 284;
+};
+export type ControlSizeKey = keyof typeof controlSizes;
+/**
+* A control's frame height. Numbers stay literal pixel values, the same line
+* resolveTokenSize and getShapeSize already draw. A size key outside the ramp
+* (v6 carries larger ones like `24`) falls through to the config's size scale,
+* where the value is already a sane large length.
+*/
+export declare const resolveControlSize: (value: TokenSize, tokens: Pick<TokensParsed, "size">) => number | Variable;
+export declare const resolveSizeToken: <
+	Value,
+	Category extends keyof TokenSizePolicy
+>(value: Value, category: Category, policy?: TokenSizePolicy) => Exclude<Value, true> | TokenSizePolicy[Category];
+export type SizeContextValue<Value extends TokenSize = TokenSize> = {
+	size: Value | undefined;
+};
+export type CreatedSizeContext<Value extends TokenSize = TokenSize> = StyledContext<SizeContextValue<Value>, "size">;
+export declare const createSizeContext: <Value extends TokenSize = TokenSize>(defaultSize?: Value) => CreatedSizeContext<Value>;
+export declare const SizeContext: CreatedSizeContext;
+export type SizeResolverExtras = {
+	tokens: Pick<TokensParsed, "size" | "space" | "radius">;
+	font: GenericFont;
+	policy?: TokenSizePolicy;
+};
+export type ResolvedFrameMetric<Value extends TokenSize> = Value extends number ? Value : Value extends true ? number | Variable : Variable;
+export type ResolvedFontMetric<Value extends TokenSize> = Value extends number ? Value : number | Variable;
+/** the ramp yields plain numbers, so a frame height is never only a Variable */
+export type ResolvedControlMetric<Value extends TokenSize> = Value extends number ? Value : number | Variable;
+export type ResolvedTokenSize<Value extends TokenSize = TokenSize> = {
+	frame: {
+		size: ResolvedControlMetric<Value>;
+		space: ResolvedFrameMetric<Value>;
+		radius: ResolvedFrameMetric<Value>;
+	};
+	text: {
+		fontSize: ResolvedFontMetric<Value>;
+		lineHeight: Value extends number ? undefined : number | Variable | undefined;
+	};
+	icon: ResolvedFontMetric<Value>;
+};
+export declare const resolveTokenSize: <Value extends TokenSize>(value: Value, { tokens, font, policy }: SizeResolverExtras) => ResolvedTokenSize<Value>;
+export type SizeTableEntry = Readonly<{
+	frame: unknown;
+	text: unknown;
+	icon: unknown;
+}>;
+export type SizeTableDefinition = Readonly<Record<string, SizeTableEntry>>;
+export type SizeTableName<Table extends SizeTableDefinition> = Extract<keyof Table, string>;
+export type SizeTableSelection<
+	Table extends SizeTableDefinition,
+	Name extends SizeTableName<Table>
+> = Table[Name];
+export type SizeTablePart = keyof SizeTableEntry;
+export type SizeTableProjection<
+	Table extends SizeTableDefinition,
+	Part extends SizeTablePart
+> = { readonly [Name in SizeTableName<Table>] : Table[Name][Part] };
+export type SizeTableContextValue<Table extends SizeTableDefinition> = {
+	size: SizeTableName<Table>;
+};
+export type CreatedSizeTable<
+	Table extends SizeTableDefinition,
+	DefaultName extends SizeTableName<Table>
+> = {
+	values: Table;
+	names: readonly SizeTableName<Table>[];
+	defaultSize: DefaultName;
+	Context: StyledContext<SizeTableContextValue<Table>, "size">;
+	frame: SizeTableProjection<Table, "frame">;
+	text: SizeTableProjection<Table, "text">;
+	icon: SizeTableProjection<Table, "icon">;
+	resolve: {
+		(): SizeTableSelection<Table, DefaultName>;
+		<Name extends SizeTableName<Table>>(name: Name): SizeTableSelection<Table, Name>;
+	};
+};
+export declare const createSizeTable: <
+	const Table extends SizeTableDefinition,
+	const DefaultName extends SizeTableName<Table>
+>(values: Table, defaultSize: DefaultName) => CreatedSizeTable<Table, DefaultName>;
+
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAAA,cAEO,qBACA,kBACA,iBACA,oBACA,mBACA,gBACA;AAEP,YAAY,YAAY,aAAa,0BAA0B;AAE/D,YAAY,kBAAkB;CAC5B,MAAM,QAAQ,YAAY;CAC1B,OAAO,QAAQ,YAAY;CAC3B,QAAQ,QAAQ,YAAY;CAC5B,UAAU,QAAQ,gBAAgB;;AAMpC,OAAO,cAAM,wBAAwB;;;;;;;;;;;;;AAsBrC,OAAO,cAAM;UACX,MAAM;UACN,GAAG;UACH,QAAQ;UACR,OAAO;UACP,QAAQ;UACR,GAAG;UACH,OAAO;UACP,GAAG;UACH,OAAO;UACP,GAAG;UACH,OAAO;UACP,GAAG;UACH,OAAO;UACP,GAAG;UACH,GAAG;UACH,GAAG;UACH,GAAG;UACH,GAAG;UACH,IAAI;UACJ,IAAI;UACJ,IAAI;UACJ,IAAI;UACJ,IAAI;UACJ,IAAI;UACJ,IAAI;UACJ,IAAI;UACJ,IAAI;UACJ,IAAI;UACJ,IAAI;;AAGN,YAAY,8BAA8B;;;;;;;AAQ1C,OAAO,cAAM,qBACX,OAAO,WACP,QAAQ,KAAK,cAAc,qBACjB;AAMZ,OAAO,cAAM;CAAoB;CAAO,uBAAuB;EAC7D,OAAO,OACP,UAAU,UACV,SAAQ,oBACP,QAAQ,OAAO,QAAQ,gBAAgB;AAI1C,YAAY,iBAAiB,cAAc,YAAY,aAAa;CAClE,MAAM;;AAGR,YAAY,mBAAmB,cAAc,YAAY,aAAa,cACpE,iBAAiB,QACjB;AAGF,OAAO,cAAM,oBAAqB,cAAc,YAAY,WAC1D,cAAc,UACb,mBAAmB;AAItB,OAAO,cAAM,aAAa;AAE1B,YAAY,qBAAqB;CAC/B,QAAQ,KAAK,cAAc,SAAS,UAAU;CAC9C,MAAM;CACN,SAAS;;AAGX,YAAY,oBAAoB,cAAc,aAAa,uBACvD,QACA,cAAc,gBACH,WACT;AAEN,YAAY,mBAAmB,cAAc,aAAa,uBACtD,iBACS;;AAGb,YAAY,sBAAsB,cAAc,aAAa,uBACzD,iBACS;AAEb,YAAY,kBAAkB,cAAc,YAAY,aAAa;CACnE,OAAO;EACL,MAAM,sBAAsB;EAC5B,OAAO,oBAAoB;EAC3B,QAAQ,oBAAoB;;CAE9B,MAAM;EACJ,UAAU,mBAAmB;EAC7B,YAAY,4CAA4C;;CAE1D,MAAM,mBAAmB;;AAG3B,OAAO,cAAM,mBAAoB,cAAc,WAC7C,OAAO,OACP,EAAE,QAAQ,MAAM,UAAmC,uBAClD,kBAAkB;AAkCrB,YAAY,iBAAiB,SAAS;CACpC;CACA;CACA;;AAGF,YAAY,sBAAsB,SAAS,eAAe;AAE1D,YAAY,cAAc,cAAc,uBAAuB,cACvD;AAIR,YAAY;CACV,cAAc;CACd,aAAa,cAAc;IACzB,MAAM;AAEV,YAAY,sBAAsB;AAElC,YAAY;CACV,cAAc;CACd,aAAa;gBAEH,QAAQ,cAAc,UAAS,MAAM,MAAM;AAGvD,YAAY,sBAAsB,cAAc,uBAAuB;CACrE,MAAM,cAAc;;AAGtB,YAAY;CACV,cAAc;CACd,oBAAoB,cAAc;IAChC;CACF,QAAQ;CACR,gBAAgB,cAAc;CAC9B,aAAa;CACb,SAAS,cAAc,sBAAsB,QAAQ;CACrD,OAAO,oBAAoB,OAAO;CAClC,MAAM,oBAAoB,OAAO;CACjC,MAAM,oBAAoB,OAAO;CACjC,SAAS;MACH,mBAAmB,OAAO;GAC7B,aAAa,cAAc,QAAQ,MAAM,OAAO,mBAAmB,OAAO;;;AAI/E,OAAO,cAAM;OACL,cAAc;OACd,oBAAoB,cAAc;EAExC,QAAQ,OACR,aAAa,gBACZ,iBAAiB,OAAO",
+  "names": [],
+  "sources": [
+    "src/index.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "import {\n  createStyledContext,\n  type FontSizeTokens,\n  type GenericFont,\n  type SizeTokens,\n  type StyledContext,\n  type TokensParsed,\n  type Variable,\n} from '@tamagui/web'\n\nexport type TokenSize = SizeTokens | FontSizeTokens | number | true\n\nexport type TokenSizePolicy = {\n  size: Exclude<SizeTokens, true> | number\n  space: Exclude<SizeTokens, true> | number\n  radius: Exclude<SizeTokens, true> | number\n  fontSize: Exclude<FontSizeTokens, true> | number\n}\n\n// component defaults are intentionally owned by this opt-in package instead of\n// the global Tamagui config, so the other metrics retain each config's\n// token-defined platform values.\nexport const defaultTokenSizePolicy: TokenSizePolicy = {\n  // geometry consumers (Square, Circle) read the size scale directly and only\n  // need a default token; control frame heights do NOT come from here, they\n  // come from controlSizes below.\n  size: 44,\n  space: '4',\n  radius: '4',\n  fontSize: '4',\n}\n\n/**\n * Frame heights for controls, keyed like v2's size tokens.\n *\n * `size` on a control is a preset, not a length. A config's size scale is a\n * spacing scale: under v6 it is tailwind's, where `3` is 12px, so reading a\n * frame height straight off it produced a 12px-tall Button holding 16px text.\n * These are v2's size token values, so a migrating `size=\"4\"` still means a\n * 44px control rather than silently becoming a 16px one.\n *\n * `true` is the unsized default and is just the `4` step, so there is no\n * separate default constant that can drift away from the ramp.\n */\nexport const controlSizes = {\n  true: 44,\n  0: 0,\n  '0-25': 2,\n  '0-5': 4,\n  '0-75': 8,\n  1: 20,\n  '1-5': 24,\n  2: 28,\n  '2-5': 32,\n  3: 36,\n  '3-5': 40,\n  4: 44,\n  '4-5': 48,\n  5: 52,\n  6: 64,\n  7: 74,\n  8: 84,\n  9: 94,\n  10: 104,\n  11: 124,\n  12: 144,\n  13: 164,\n  14: 184,\n  15: 204,\n  16: 224,\n  17: 224,\n  18: 244,\n  19: 264,\n  20: 284,\n} as const\n\nexport type ControlSizeKey = keyof typeof controlSizes\n\n/**\n * A control's frame height. Numbers stay literal pixel values, the same line\n * resolveTokenSize and getShapeSize already draw. A size key outside the ramp\n * (v6 carries larger ones like `24`) falls through to the config's size scale,\n * where the value is already a sane large length.\n */\nexport const resolveControlSize = (\n  value: TokenSize,\n  tokens: Pick<TokensParsed, 'size'>\n): number | Variable => {\n  if (typeof value === 'number') return value\n  const ramp = controlSizes[value as ControlSizeKey]\n  return ramp ?? tokens.size[value as keyof typeof tokens.size]\n}\n\nexport const resolveSizeToken = <Value, Category extends keyof TokenSizePolicy>(\n  value: Value,\n  category: Category,\n  policy: TokenSizePolicy = defaultTokenSizePolicy\n): Exclude<Value, true> | TokenSizePolicy[Category] => {\n  return value === true ? policy[category] : (value as Exclude<Value, true>)\n}\n\nexport type SizeContextValue<Value extends TokenSize = TokenSize> = {\n  size: Value | undefined\n}\n\nexport type CreatedSizeContext<Value extends TokenSize = TokenSize> = StyledContext<\n  SizeContextValue<Value>,\n  'size'\n>\n\nexport const createSizeContext = <Value extends TokenSize = TokenSize>(\n  defaultSize?: Value\n): CreatedSizeContext<Value> => {\n  return createStyledContext<SizeContextValue<Value>>({ size: defaultSize })\n}\n\nexport const SizeContext: CreatedSizeContext = createSizeContext()\n\nexport type SizeResolverExtras = {\n  tokens: Pick<TokensParsed, 'size' | 'space' | 'radius'>\n  font: GenericFont\n  policy?: TokenSizePolicy\n}\n\nexport type ResolvedFrameMetric<Value extends TokenSize> = Value extends number\n  ? Value\n  : Value extends true\n    ? number | Variable\n    : Variable\n\nexport type ResolvedFontMetric<Value extends TokenSize> = Value extends number\n  ? Value\n  : number | Variable\n\n/** the ramp yields plain numbers, so a frame height is never only a Variable */\nexport type ResolvedControlMetric<Value extends TokenSize> = Value extends number\n  ? Value\n  : number | Variable\n\nexport type ResolvedTokenSize<Value extends TokenSize = TokenSize> = {\n  frame: {\n    size: ResolvedControlMetric<Value>\n    space: ResolvedFrameMetric<Value>\n    radius: ResolvedFrameMetric<Value>\n  }\n  text: {\n    fontSize: ResolvedFontMetric<Value>\n    lineHeight: Value extends number ? undefined : number | Variable | undefined\n  }\n  icon: ResolvedFontMetric<Value>\n}\n\nexport const resolveTokenSize = <Value extends TokenSize>(\n  value: Value,\n  { tokens, font, policy = defaultTokenSizePolicy }: SizeResolverExtras\n): ResolvedTokenSize<Value> => {\n  if (typeof value === 'number') {\n    return {\n      frame: { size: value, space: value, radius: value },\n      text: { fontSize: value, lineHeight: undefined },\n      icon: value,\n    } as ResolvedTokenSize<Value>\n  }\n\n  const spaceKey = resolveSizeToken(value, 'space', policy)\n  const radiusKey = resolveSizeToken(value, 'radius', policy)\n  const fontKey = resolveSizeToken(value, 'fontSize', policy)\n\n  // frame height is a control preset off the ramp, never the spacing scale\n  const size = resolveControlSize(value, tokens)\n  const space = typeof spaceKey === 'number' ? spaceKey : tokens.space[spaceKey]\n  const radius = typeof radiusKey === 'number' ? radiusKey : tokens.radius[radiusKey]\n  const fontSize = typeof fontKey === 'number' ? fontKey : font.size[fontKey]\n  const lineHeight = typeof fontKey === 'number' ? undefined : font.lineHeight?.[fontKey]\n\n  return {\n    frame: {\n      size,\n      space,\n      radius,\n    },\n    text: {\n      fontSize,\n      lineHeight,\n    },\n    icon: fontSize,\n  } as ResolvedTokenSize<Value>\n}\n\nexport type SizeTableEntry = Readonly<{\n  frame: unknown\n  text: unknown\n  icon: unknown\n}>\n\nexport type SizeTableDefinition = Readonly<Record<string, SizeTableEntry>>\n\nexport type SizeTableName<Table extends SizeTableDefinition> = Extract<\n  keyof Table,\n  string\n>\n\nexport type SizeTableSelection<\n  Table extends SizeTableDefinition,\n  Name extends SizeTableName<Table>,\n> = Table[Name]\n\nexport type SizeTablePart = keyof SizeTableEntry\n\nexport type SizeTableProjection<\n  Table extends SizeTableDefinition,\n  Part extends SizeTablePart,\n> = {\n  readonly [Name in SizeTableName<Table>]: Table[Name][Part]\n}\n\nexport type SizeTableContextValue<Table extends SizeTableDefinition> = {\n  size: SizeTableName<Table>\n}\n\nexport type CreatedSizeTable<\n  Table extends SizeTableDefinition,\n  DefaultName extends SizeTableName<Table>,\n> = {\n  values: Table\n  names: readonly SizeTableName<Table>[]\n  defaultSize: DefaultName\n  Context: StyledContext<SizeTableContextValue<Table>, 'size'>\n  frame: SizeTableProjection<Table, 'frame'>\n  text: SizeTableProjection<Table, 'text'>\n  icon: SizeTableProjection<Table, 'icon'>\n  resolve: {\n    (): SizeTableSelection<Table, DefaultName>;\n    <Name extends SizeTableName<Table>>(name: Name): SizeTableSelection<Table, Name>\n  }\n}\n\nexport const createSizeTable = <\n  const Table extends SizeTableDefinition,\n  const DefaultName extends SizeTableName<Table>,\n>(\n  values: Table,\n  defaultSize: DefaultName\n): CreatedSizeTable<Table, DefaultName> => {\n  const Context = createStyledContext<SizeTableContextValue<Table>>({ size: defaultSize })\n  const frame = {} as Record<SizeTableName<Table>, Table[SizeTableName<Table>]['frame']>\n  const text = {} as Record<SizeTableName<Table>, Table[SizeTableName<Table>]['text']>\n  const icon = {} as Record<SizeTableName<Table>, Table[SizeTableName<Table>]['icon']>\n\n  for (const name of Object.keys(values) as SizeTableName<Table>[]) {\n    frame[name] = values[name].frame\n    text[name] = values[name].text\n    icon[name] = values[name].icon\n  }\n\n  const resolve = ((name: SizeTableName<Table> = defaultSize) => {\n    if (!(name in values)) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.error(\n          `Unknown size \"${String(name)}\" — this size table only has: ${Object.keys(values).join(', ')}. Size tables are user-owned named scales; the default skins take size tokens instead. Falling back to \"${String(defaultSize)}\".`\n        )\n      }\n      return values[defaultSize]\n    }\n    return values[name]\n  }) as CreatedSizeTable<Table, DefaultName>['resolve']\n\n  return {\n    values,\n    names: Object.keys(values) as SizeTableName<Table>[],\n    defaultSize,\n    Context,\n    frame: frame as SizeTableProjection<Table, 'frame'>,\n    text: text as SizeTableProjection<Table, 'text'>,\n    icon: icon as SizeTableProjection<Table, 'icon'>,\n    resolve,\n  }\n}\n"
+  ]
+}

package/README.md

@@ -1 +0,0 @@
-# @tamagui/size