@cambly/syntax-core 1.1.1 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +14 -2
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +11 -1
- package/dist/index.js +16 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +17 -3
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -1
package/dist/index.css
CHANGED
|
@@ -22,9 +22,21 @@
|
|
|
22
22
|
height: 128px;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css/#css-module-data */
|
|
26
|
+
._card_hvz2b_1 {
|
|
27
|
+
border-radius: 24px;
|
|
28
|
+
padding: 28px;
|
|
29
|
+
background-color: #fff;
|
|
30
|
+
}
|
|
31
|
+
@media (min-width: 480px) {
|
|
32
|
+
._card_hvz2b_1 {
|
|
33
|
+
padding: 36px;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
25
37
|
/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css/#css-module-data */
|
|
26
|
-
.
|
|
27
|
-
background-color:
|
|
38
|
+
._divider_1ddgq_1 {
|
|
39
|
+
background-color: var(--color-base-gray-10);
|
|
28
40
|
border-radius: 50px;
|
|
29
41
|
border: none;
|
|
30
42
|
height: 1px;
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css/#css-module-data"],"sourcesContent":["._avatar_17elh_1 {\n background-position: \"center\";\n background-size: \"cover\";\n background-repeat: \"no-repeat\";\n border-radius: 50%;\n}\n\n._sm_17elh_8 {\n width: 24px;\n height: 24px;\n}\n\n._md_17elh_13 {\n width: 40px;\n height: 40px;\n}\n\n._lg_17elh_18 {\n width: 72px;\n height: 72px;\n}\n\n._xl_17elh_23 {\n width: 128px;\n height: 128px;\n}\n",".
|
|
1
|
+
{"version":3,"sources":["css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css/#css-module-data"],"sourcesContent":["._avatar_17elh_1 {\n background-position: \"center\";\n background-size: \"cover\";\n background-repeat: \"no-repeat\";\n border-radius: 50%;\n}\n\n._sm_17elh_8 {\n width: 24px;\n height: 24px;\n}\n\n._md_17elh_13 {\n width: 40px;\n height: 40px;\n}\n\n._lg_17elh_18 {\n width: 72px;\n height: 72px;\n}\n\n._xl_17elh_23 {\n width: 128px;\n height: 128px;\n}\n","._card_hvz2b_1 {\n border-radius: 24px;\n padding: 28px;\n background-color: #fff;\n}\n\n@media (min-width: 480px) {\n ._card_hvz2b_1 {\n padding: 36px;\n }\n}\n","._divider_1ddgq_1 {\n background-color: var(--color-base-gray-10);\n border-radius: 50px;\n border: none;\n height: 1px;\n margin: 0;\n}\n"],"mappings":";AAAA;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACxBF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;;;ACRJ;AACE;AACA;AACA;AACA;AACA;AAAA;","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -20,6 +20,16 @@ declare const Avatar: ({ src, accessibilityLabel, size, }: {
|
|
|
20
20
|
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
21
21
|
}) => JSX.Element;
|
|
22
22
|
|
|
23
|
+
/**
|
|
24
|
+
* Card is a basic container component to apply consistent styling and render child components.
|
|
25
|
+
*/
|
|
26
|
+
declare const Card: ({ children, }: {
|
|
27
|
+
/**
|
|
28
|
+
* The child components to render within Card.
|
|
29
|
+
*/
|
|
30
|
+
children: JSX.Element;
|
|
31
|
+
}) => JSX.Element;
|
|
32
|
+
|
|
23
33
|
/**
|
|
24
34
|
* Divider is a thin horizontal line to group content in lists and layouts.
|
|
25
35
|
*/
|
|
@@ -28,4 +38,4 @@ declare namespace Divider {
|
|
|
28
38
|
var displayName: string;
|
|
29
39
|
}
|
|
30
40
|
|
|
31
|
-
export { Avatar, Divider };
|
|
41
|
+
export { Avatar, Card, Divider };
|
package/dist/index.js
CHANGED
|
@@ -85,9 +85,11 @@ var require_classnames = __commonJS({
|
|
|
85
85
|
var src_exports = {};
|
|
86
86
|
__export(src_exports, {
|
|
87
87
|
Avatar: () => Avatar_default,
|
|
88
|
+
Card: () => Card_default,
|
|
88
89
|
Divider: () => Divider
|
|
89
90
|
});
|
|
90
91
|
module.exports = __toCommonJS(src_exports);
|
|
92
|
+
var import_variables = require("@cambly/syntax-design-tokens/dist/css/variables.css");
|
|
91
93
|
|
|
92
94
|
// src/Avatar/Avatar.tsx
|
|
93
95
|
var import_classnames = __toESM(require_classnames());
|
|
@@ -113,18 +115,29 @@ var Avatar = ({
|
|
|
113
115
|
};
|
|
114
116
|
var Avatar_default = Avatar;
|
|
115
117
|
|
|
118
|
+
// css-module:./Card.module.css#css-module
|
|
119
|
+
var Card_module_default = { "card": "_card_hvz2b_1" };
|
|
120
|
+
|
|
121
|
+
// src/Card/Card.tsx
|
|
122
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
123
|
+
var Card = ({
|
|
124
|
+
children
|
|
125
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: Card_module_default.card, children });
|
|
126
|
+
var Card_default = Card;
|
|
127
|
+
|
|
116
128
|
// css-module:./Divider.module.css#css-module
|
|
117
|
-
var Divider_module_default = { "divider": "
|
|
129
|
+
var Divider_module_default = { "divider": "_divider_1ddgq_1" };
|
|
118
130
|
|
|
119
131
|
// src/Divider/Divider.tsx
|
|
120
|
-
var
|
|
132
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
121
133
|
function Divider({}) {
|
|
122
|
-
return /* @__PURE__ */ (0,
|
|
134
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { className: Divider_module_default.divider });
|
|
123
135
|
}
|
|
124
136
|
Divider.displayName = "Divider";
|
|
125
137
|
// Annotate the CommonJS export names for ESM import in node:
|
|
126
138
|
0 && (module.exports = {
|
|
127
139
|
Avatar,
|
|
140
|
+
Card,
|
|
128
141
|
Divider
|
|
129
142
|
});
|
|
130
143
|
/*! Bundled license information:
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/index.tsx","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import Avatar from \"./Avatar/Avatar\";\nimport Divider from \"./Divider/Divider\";\n\nexport { Avatar, Divider };\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n src,\n accessibilityLabel,\n size = \"md\",\n}: {\n /**\n * The URL of the image to display as the avatar.\n */\n src: string;\n /**\n * The alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * The size of the avatar.\n * xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.\n *\n * @defaultValue `md`\n */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n return (\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(styles.avatar, styles[size])}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_17elh_1\",\"sm\":\"_sm_17elh_8\",\"md\":\"_md_17elh_13\",\"lg\":\"_lg_17elh_18\",\"xl\":\"_xl_17elh_23\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"
|
|
1
|
+
{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/index.tsx","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import \"@cambly/syntax-design-tokens/dist/css/variables.css\";\nimport Avatar from \"./Avatar/Avatar\";\nimport Card from \"./Card/Card\";\nimport Divider from \"./Divider/Divider\";\n\nexport { Avatar, Card, Divider };\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n src,\n accessibilityLabel,\n size = \"md\",\n}: {\n /**\n * The URL of the image to display as the avatar.\n */\n src: string;\n /**\n * The alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * The size of the avatar.\n * xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.\n *\n * @defaultValue `md`\n */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n return (\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(styles.avatar, styles[size])}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_17elh_1\",\"sm\":\"_sm_17elh_8\",\"md\":\"_md_17elh_13\",\"lg\":\"_lg_17elh_18\",\"xl\":\"_xl_17elh_23\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n children,\n}: {\n /**\n * The child components to render within Card.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,oDAAAA,SAAA;AAOA,KAAC,WAAY;AACZ;AAEA,UAAI,SAAS,CAAC,EAAE;AAChB,UAAI,mBAAmB;AAEvB,eAASC,cAAa;AACrB,YAAI,UAAU,CAAC;AAEf,iBAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AAC1C,cAAI,MAAM,UAAU,CAAC;AACrB,cAAI,CAAC;AAAK;AAEV,cAAI,UAAU,OAAO;AAErB,cAAI,YAAY,YAAY,YAAY,UAAU;AACjD,oBAAQ,KAAK,GAAG;AAAA,UACjB,WAAW,MAAM,QAAQ,GAAG,GAAG;AAC9B,gBAAI,IAAI,QAAQ;AACf,kBAAI,QAAQA,YAAW,MAAM,MAAM,GAAG;AACtC,kBAAI,OAAO;AACV,wBAAQ,KAAK,KAAK;AAAA,cACnB;AAAA,YACD;AAAA,UACD,WAAW,YAAY,UAAU;AAChC,gBAAI,IAAI,aAAa,OAAO,UAAU,YAAY,CAAC,IAAI,SAAS,SAAS,EAAE,SAAS,eAAe,GAAG;AACrG,sBAAQ,KAAK,IAAI,SAAS,CAAC;AAC3B;AAAA,YACD;AAEA,qBAAS,OAAO,KAAK;AACpB,kBAAI,OAAO,KAAK,KAAK,GAAG,KAAK,IAAI,GAAG,GAAG;AACtC,wBAAQ,KAAK,GAAG;AAAA,cACjB;AAAA,YACD;AAAA,UACD;AAAA,QACD;AAEA,eAAO,QAAQ,KAAK,GAAG;AAAA,MACxB;AAEA,UAAI,OAAOD,YAAW,eAAeA,QAAO,SAAS;AACpD,QAAAC,YAAW,UAAUA;AACrB,QAAAD,QAAO,UAAUC;AAAA,MAClB,WAAW,OAAO,WAAW,cAAc,OAAO,OAAO,QAAQ,YAAY,OAAO,KAAK;AAExF,eAAO,cAAc,CAAC,GAAG,WAAY;AACpC,iBAAOA;AAAA,QACR,CAAC;AAAA,MACF,OAAO;AACN,eAAO,aAAaA;AAAA,MACrB;AAAA,IACD,GAAE;AAAA;AAAA;;;AC3DF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAO;;;ACAP,wBAAuB;;;ACAqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,MAAK,eAAc,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;AD6BjN;AAvBJ,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAW,kBAAAC,SAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC;AAAA;AAAA,EACnD;AAEJ;AAEA,IAAO,iBAAQ;;;AErCyE,IAAO,sBAAQ,EAAC,QAAO,gBAAe;;;ACY3G,IAAAC,sBAAA;AAPnB,IAAM,OAAO,CAAC;AAAA,EACZ;AACF,MAKmB,6CAAC,SAAI,WAAW,oBAAO,MAAO,UAAS;AAE1D,IAAO,eAAQ;;;ACd+E,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ACMjI,IAAAC,sBAAA;AADM,SAAR,QAAyB,CAAC,GAA0B;AACzD,SAAO,6CAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc;","names":["module","classNames","classNames","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -75,6 +75,9 @@ var require_classnames = __commonJS({
|
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
77
|
|
|
78
|
+
// src/index.tsx
|
|
79
|
+
import "@cambly/syntax-design-tokens/dist/css/variables.css";
|
|
80
|
+
|
|
78
81
|
// src/Avatar/Avatar.tsx
|
|
79
82
|
var import_classnames = __toESM(require_classnames());
|
|
80
83
|
|
|
@@ -99,17 +102,28 @@ var Avatar = ({
|
|
|
99
102
|
};
|
|
100
103
|
var Avatar_default = Avatar;
|
|
101
104
|
|
|
105
|
+
// css-module:./Card.module.css#css-module
|
|
106
|
+
var Card_module_default = { "card": "_card_hvz2b_1" };
|
|
107
|
+
|
|
108
|
+
// src/Card/Card.tsx
|
|
109
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
110
|
+
var Card = ({
|
|
111
|
+
children
|
|
112
|
+
}) => /* @__PURE__ */ jsx2("div", { className: Card_module_default.card, children });
|
|
113
|
+
var Card_default = Card;
|
|
114
|
+
|
|
102
115
|
// css-module:./Divider.module.css#css-module
|
|
103
|
-
var Divider_module_default = { "divider": "
|
|
116
|
+
var Divider_module_default = { "divider": "_divider_1ddgq_1" };
|
|
104
117
|
|
|
105
118
|
// src/Divider/Divider.tsx
|
|
106
|
-
import { jsx as
|
|
119
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
107
120
|
function Divider({}) {
|
|
108
|
-
return /* @__PURE__ */
|
|
121
|
+
return /* @__PURE__ */ jsx3("hr", { className: Divider_module_default.divider });
|
|
109
122
|
}
|
|
110
123
|
Divider.displayName = "Divider";
|
|
111
124
|
export {
|
|
112
125
|
Avatar_default as Avatar,
|
|
126
|
+
Card_default as Card,
|
|
113
127
|
Divider
|
|
114
128
|
};
|
|
115
129
|
/*! Bundled license information:
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n src,\n accessibilityLabel,\n size = \"md\",\n}: {\n /**\n * The URL of the image to display as the avatar.\n */\n src: string;\n /**\n * The alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * The size of the avatar.\n * xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.\n *\n * @defaultValue `md`\n */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n return (\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(styles.avatar, styles[size])}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_17elh_1\",\"sm\":\"_sm_17elh_8\",\"md\":\"_md_17elh_13\",\"lg\":\"_lg_17elh_18\",\"xl\":\"_xl_17elh_23\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"
|
|
1
|
+
{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/index.tsx","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import \"@cambly/syntax-design-tokens/dist/css/variables.css\";\nimport Avatar from \"./Avatar/Avatar\";\nimport Card from \"./Card/Card\";\nimport Divider from \"./Divider/Divider\";\n\nexport { Avatar, Card, Divider };\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n src,\n accessibilityLabel,\n size = \"md\",\n}: {\n /**\n * The URL of the image to display as the avatar.\n */\n src: string;\n /**\n * The alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * The size of the avatar.\n * xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.\n *\n * @defaultValue `md`\n */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n return (\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(styles.avatar, styles[size])}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_17elh_1\",\"sm\":\"_sm_17elh_8\",\"md\":\"_md_17elh_13\",\"lg\":\"_lg_17elh_18\",\"xl\":\"_xl_17elh_23\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n children,\n}: {\n /**\n * The child components to render within Card.\n */\n children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAOA,KAAC,WAAY;AACZ;AAEA,UAAI,SAAS,CAAC,EAAE;AAChB,UAAI,mBAAmB;AAEvB,eAASA,cAAa;AACrB,YAAI,UAAU,CAAC;AAEf,iBAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AAC1C,cAAI,MAAM,UAAU,CAAC;AACrB,cAAI,CAAC;AAAK;AAEV,cAAI,UAAU,OAAO;AAErB,cAAI,YAAY,YAAY,YAAY,UAAU;AACjD,oBAAQ,KAAK,GAAG;AAAA,UACjB,WAAW,MAAM,QAAQ,GAAG,GAAG;AAC9B,gBAAI,IAAI,QAAQ;AACf,kBAAI,QAAQA,YAAW,MAAM,MAAM,GAAG;AACtC,kBAAI,OAAO;AACV,wBAAQ,KAAK,KAAK;AAAA,cACnB;AAAA,YACD;AAAA,UACD,WAAW,YAAY,UAAU;AAChC,gBAAI,IAAI,aAAa,OAAO,UAAU,YAAY,CAAC,IAAI,SAAS,SAAS,EAAE,SAAS,eAAe,GAAG;AACrG,sBAAQ,KAAK,IAAI,SAAS,CAAC;AAC3B;AAAA,YACD;AAEA,qBAAS,OAAO,KAAK;AACpB,kBAAI,OAAO,KAAK,KAAK,GAAG,KAAK,IAAI,GAAG,GAAG;AACtC,wBAAQ,KAAK,GAAG;AAAA,cACjB;AAAA,YACD;AAAA,UACD;AAAA,QACD;AAEA,eAAO,QAAQ,KAAK,GAAG;AAAA,MACxB;AAEA,UAAI,OAAO,WAAW,eAAe,OAAO,SAAS;AACpD,QAAAA,YAAW,UAAUA;AACrB,eAAO,UAAUA;AAAA,MAClB,WAAW,OAAO,WAAW,cAAc,OAAO,OAAO,QAAQ,YAAY,OAAO,KAAK;AAExF,eAAO,cAAc,CAAC,GAAG,WAAY;AACpC,iBAAOA;AAAA,QACR,CAAC;AAAA,MACF,OAAO;AACN,eAAO,aAAaA;AAAA,MACrB;AAAA,IACD,GAAE;AAAA;AAAA;;;AC3DF,OAAO;;;ACAP,wBAAuB;;;ACAqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,MAAK,eAAc,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;AD6BjN;AAvBJ,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAW,kBAAAC,SAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC;AAAA;AAAA,EACnD;AAEJ;AAEA,IAAO,iBAAQ;;;AErCyE,IAAO,sBAAQ,EAAC,QAAO,gBAAe;;;ACY3G,gBAAAC,YAAA;AAPnB,IAAM,OAAO,CAAC;AAAA,EACZ;AACF,MAKmB,gBAAAA,KAAC,SAAI,WAAW,oBAAO,MAAO,UAAS;AAE1D,IAAO,eAAQ;;;ACd+E,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ACMjI,gBAAAC,YAAA;AADM,SAAR,QAAyB,CAAC,GAA0B;AACzD,SAAO,gBAAAA,KAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc;","names":["classNames","classNames","jsx","jsx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cambly/syntax-core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -9,6 +9,9 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
"dist/**"
|
|
11
11
|
],
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@cambly/syntax-design-tokens": "0.1.0"
|
|
14
|
+
},
|
|
12
15
|
"devDependencies": {
|
|
13
16
|
"@types/react": "^18.0.28",
|
|
14
17
|
"@types/react-dom": "^18.0.11",
|