@cambly/syntax-core 23.2.0 → 23.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cambly/syntax-core",
   "description": "Cambly design system core components",
-  "version": "23.2.0",
+  "version": "23.3.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -11,7 +11,7 @@
     "dist/**"
   ],
   "dependencies": {
-    "@cambly/syntax-design-tokens": "1.0.1",
+    "@cambly/syntax-design-tokens": "1.1.0",
     "@react-aria/focus": "^3.16.0",
     "@react-aria/utils": "^3.23.0",
     "react-aria": "^3.31.0",

package/dist/__chunks/VULONMWO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import { type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport Typography from \"../Typography/Typography\";\n\nfunction weight({\n  fontStyle,\n  size,\n}: {\n  fontStyle: ComponentProps<typeof Heading>[\"fontStyle\"];\n  size: ComponentProps<typeof Heading>[\"size\"];\n}): \"bold\" | \"medium\" | \"regular\" {\n  if (fontStyle === \"serif\" && size === 400) {\n    return \"bold\";\n  } else if (fontStyle === \"serif\") {\n    return \"medium\";\n  } else {\n    return \"regular\";\n  }\n}\n\n/**\n * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.\n */\nconst Heading = ({\n  align = \"start\",\n  as = \"h1\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  fontStyle = \"sans-serif\",\n  lineClamp,\n  size = 400,\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"h1\"\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?:\n    | \"gray900\"\n    | \"gray700\"\n    | \"primary\"\n    | \"destructive-primary\"\n    | \"success\"\n    | \"white\"\n    | \"inherit\";\n  /**\n   * Test id for the text.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Style of the font\n   *\n   * Classic only supports `sans-serif`\n   *\n   * @defaultValue \"sans-serif\"\n   */\n  fontStyle?: \"serif\" | \"sans-serif\";\n  /**\n   * The number of lines we should truncate the text at\n   */\n  lineClamp?: number | undefined;\n  /**\n   * Size of the text\n   *\n   * Mobile: (viewport width < 480px):\n   * * `400`: 25px\n   * * `500`: 32px\n   * * `700`: 38px\n   * * `800`: 46px\n   * * `900`: 55px\n   * * `1100`: 83px\n   *\n   * Desktop (viewport width >= 480px):\n   * * `400`: 25px\n   * * `500`: 32px\n   * * `700`: 49px\n   * * `800`: 63px\n   * * `900`: 76px\n   * * `1100`: 119px\n   *\n   * @defaultValue 400\n   */\n  size?: 400 | 500 | 700 | 800 | 900 | 1100;\n}): ReactElement => {\n  return (\n    <Typography\n      align={align}\n      as={as}\n      color={color}\n      fontStyle={fontStyle}\n      data-testid={dataTestId}\n      lineClamp={lineClamp}\n      size={size}\n      weight={weight({ fontStyle, size })}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nexport default Heading;\n"],"mappings":";;;;;;AAuGI;AApGJ,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AACF,GAGkC;AAChC,MAAI,cAAc,WAAW,SAAS,KAAK;AACzC,WAAO;AAAA,EACT,WAAW,cAAc,SAAS;AAChC,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAKA,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AACT,MAsEoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,QAAQ,OAAO,EAAE,WAAW,KAAK,CAAC;AAAA,MAEjC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/__chunks/X6FOFRMZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport textColor from \"../colors/textColors\";\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n  HTMLDivElement,\n  {\n    /**\n     * Aligns the text to the left, right, or center of the container.\n     * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n     * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n     *\n     * @defaultValue \"start\"\n     */\n    align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n    /**\n     * DOM element to render as.\n     *\n     * @defaultValue \"div\"\n     */\n    as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\";\n    /**\n     * The text to be rendered\n     */\n    children?: ReactNode;\n    /**\n     * The color of the text.\n     *\n     * @defaultValue \"gray900\"\n     */\n    color?:\n      | \"gray900\"\n      | \"gray700\"\n      | \"primary\"\n      | \"destructive-primary\"\n      | \"destructive-darkBackground\"\n      | \"destructive-lightBackground\"\n      | \"success\"\n      | \"success-darkBackground\"\n      | \"white\"\n      | \"white-secondary\"\n      | \"inherit\";\n    /**\n     * Test id for the text\n     */\n    \"data-testid\"?: string;\n    /**\n     * Style of the font\n     *\n     * Classic only supports `sans-serif`\n     *\n     * @defaultValue \"sans-serif\"\n     */\n    fontStyle?: \"serif\" | \"sans-serif\";\n    /**\n     * The id for the element\n     */\n    id?: string;\n    /**\n     * Whether the text should flow inline with other elements.\n     *\n     * @defaultValue false\n     */\n    inline?: boolean;\n    /**\n     * The number of lines we should truncate the text at\n     */\n    lineClamp?: number | undefined;\n    /**\n     * Size of the text.\n     *\n     * Mobile (viewport width <= 480px)::\n     * * `0`: 12px\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 19px\n     * * `400`: 25px\n     * * `500`: 32px\n     * * `700`: 38px\n     * * `800`: 46px\n     * * `900`: 55px\n     * * `1100`: 83px\n     *\n     * Desktop (viewport width > 480px):\n     * * `0`: 12px\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 20px\n     * * `400`: 25px\n     * * `500`: 32px\n     * * `700`: 44px\n     * * `800`: 63px\n     * * `900`: 76px\n     * * `1100`: 119px\n     *\n     * @defaultValue 200\n     */\n    size?: 0 | 100 | 200 | 300 | 400 | 500 | 700 | 800 | 900 | 1100;\n    /**\n     * The tooltip to be displayed when the user hovers the text\n     */\n    tooltip?: string;\n    /**\n     * Whether the text should be transformed to uppercase.\n     *\n     * @defaultValue \"none\"\n     */\n    transform?: \"none\" | \"uppercase\";\n    /**\n     * Whether the text has an underline.\n     *\n     * @defaultValue false\n     */\n    underline?: boolean;\n    /**\n     * Indicates the boldness of the text.\n     *\n     * * `regular`: 400\n     * * `medium`: 510\n     * * `semiBold`: 590\n     * * `bold`: 710\n     *\n     * @defaultValue \"regular\"\n     */\n    weight?: \"regular\" | \"medium\" | \"semiBold\" | \"bold\";\n    /**\n     * Controls how whitespace within the element is handled.\n     *\n     * See: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space\n     *\n     * @defaultValue \"inherit\"\n     */\n    whiteSpace?: \"inherit\" | \"normal\" | \"nowrap\" | \"preLine\";\n  }\n>(function Typography(\n  {\n    align = \"start\",\n    as = \"div\",\n    children,\n    color = \"gray900\",\n    \"data-testid\": dataTestId,\n    fontStyle = \"sans-serif\",\n    id,\n    inline = false,\n    lineClamp = undefined,\n    size = 200,\n    tooltip,\n    transform = \"none\",\n    underline = false,\n    weight = \"regular\",\n    whiteSpace = \"inherit\",\n  },\n  ref,\n): ReactElement {\n  const Tag = as;\n\n  return (\n    <Tag\n      id={id}\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        styles[whiteSpace],\n        fontStyle === \"serif\" ? styles.serif : styles.sansSerif,\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n        as === \"p\" && styles[`p${size}`],\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n      ref={ref}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_n4fyj_1\",\"underline\":\"_underline_n4fyj_6\",\"inline\":\"_inline_n4fyj_10\",\"uppercase\":\"_uppercase_n4fyj_14\",\"lineClamp\":\"_lineClamp_n4fyj_18\",\"sansSerif\":\"_sansSerif_n4fyj_42\",\"serif\":\"_serif_n4fyj_47\",\"size0\":\"_size0_n4fyj_98\",\"size100\":\"_size100_n4fyj_102\",\"size200\":\"_size200_n4fyj_106\",\"size300\":\"_size300_n4fyj_110\",\"size400\":\"_size400_n4fyj_114\",\"size500\":\"_size500_n4fyj_118\",\"size700\":\"_size700_n4fyj_122\",\"size800\":\"_size800_n4fyj_126\",\"size900\":\"_size900_n4fyj_130\",\"size1100\":\"_size1100_n4fyj_134\",\"center\":\"_center_n4fyj_162\",\"forceLeft\":\"_forceLeft_n4fyj_166\",\"forceRight\":\"_forceRight_n4fyj_170\",\"start\":\"_start_n4fyj_174\",\"end\":\"_end_n4fyj_178\",\"regular\":\"_regular_n4fyj_184\",\"medium\":\"_medium_n4fyj_188\",\"semiBold\":\"_semiBold_n4fyj_192\",\"bold\":\"_bold_n4fyj_196\",\"p100\":\"_p100_n4fyj_201\",\"p200\":\"_p200_n4fyj_205\",\"p300\":\"_p300_n4fyj_209\",\"p400\":\"_p400_n4fyj_213\",\"p500\":\"_p500_n4fyj_217\",\"inherit\":\"_inherit_n4fyj_222\",\"normal\":\"_normal_n4fyj_226\",\"nowrap\":\"_nowrap_n4fyj_230\",\"preLine\":\"_preLine_n4fyj_234\"}"],"mappings":";;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,kBAAqD;;;ACDsC,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,aAAY,sBAAqB,UAAS,oBAAmB,aAAY,uBAAsB,aAAY,uBAAsB,aAAY,uBAAsB,SAAQ,mBAAkB,SAAQ,mBAAkB,WAAU,sBAAqB,WAAU,sBAAqB,WAAU,sBAAqB,WAAU,sBAAqB,WAAU,sBAAqB,WAAU,sBAAqB,WAAU,sBAAqB,WAAU,sBAAqB,YAAW,uBAAsB,UAAS,qBAAoB,aAAY,wBAAuB,cAAa,yBAAwB,SAAQ,oBAAmB,OAAM,kBAAiB,WAAU,sBAAqB,UAAS,qBAAoB,YAAW,uBAAsB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,WAAU,sBAAqB,UAAS,qBAAoB,UAAS,qBAAoB,WAAU,qBAAoB;;;ADiKpoC;AAzJJ,IAAM,aAAa,WAkIjB,SAASA,YACT;AAAA,EACE,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AACf,GACA,KACc;AACd,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,0BAAO,UAAU;AAAA,QACjB,cAAc,UAAU,0BAAO,QAAQ,0BAAO;AAAA,QAC9C,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,QAC5B,OAAO,OAAO,0BAAO,IAAI,MAAM;AAAA,MACjC;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,qBAAQ;","names":["Typography"]}