@arbor-education/design-system.components 0.0.1

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/tokens.scss","../src/global.scss","../src/components/button/button.scss","../src/components/heading/heading.scss","../src/components/card/card.scss","../src/components/pill/pill.scss"],"names":[],"mappings":"AAMQ;ACNR;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/tCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AChBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;;AClLJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AC7CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;;ACjEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA","file":"index.css"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { Button } from './components/button/Button';
+export { Heading } from './components/heading/Heading';
+export { HeadingInnerContainer } from './components/heading/HeadingInnerContainer';
+export { Icon } from './components/icon/Icon';
+export { Card } from './components/card/Card';
+export { Pill } from './components/pill/Pill';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export { Button } from './components/button/Button';
+export { Heading } from './components/heading/Heading';
+export { HeadingInnerContainer } from './components/heading/HeadingInnerContainer';
+export { Icon } from './components/icon/Icon';
+export { Card } from './components/card/Card';
+export { Pill } from './components/pill/Pill';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/utils/generateUuid.d.ts

@@ -0,0 +1,2 @@
+export declare const generateUuid: (prefix?: string) => string;
+//# sourceMappingURL=generateUuid.d.ts.map

package/dist/utils/generateUuid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateUuid.d.ts","sourceRoot":"","sources":["../../src/utils/generateUuid.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,eAAW,KAAG,MAQ1C,CAAC"}

package/dist/utils/generateUuid.js

@@ -0,0 +1,10 @@
+export const generateUuid = (prefix = '') => {
+    if (!self?.crypto?.randomUUID) {
+        throw new Error('Crypto API not supported');
+    }
+    if (prefix) {
+        return `${prefix}-${self.crypto.randomUUID()}`;
+    }
+    return self.crypto.randomUUID();
+};
+//# sourceMappingURL=generateUuid.js.map

package/dist/utils/generateUuid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateUuid.js","sourceRoot":"","sources":["../../src/utils/generateUuid.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,EAAU,EAAE;IAClD,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;QAC9B,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC,CAAC;IAC9C,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;IACjD,CAAC;IACD,OAAO,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;AAClC,CAAC,CAAC"}

package/dist/utils/hooks/useMemoGenerateUuid.d.ts

@@ -0,0 +1,8 @@
+import { type DependencyList } from 'react';
+type Args = {
+    deps?: DependencyList;
+    prefix?: string;
+};
+export declare const useMemoGenerateUuid: ({ deps, prefix }: Args) => string;
+export {};
+//# sourceMappingURL=useMemoGenerateUuid.d.ts.map

package/dist/utils/hooks/useMemoGenerateUuid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMemoGenerateUuid.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useMemoGenerateUuid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGrD,KAAK,IAAI,GAAG;IACV,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,kBAAuB,IAAI,WAI9D,CAAC"}

package/dist/utils/hooks/useMemoGenerateUuid.js

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { generateUuid } from '../generateUuid';
+export const useMemoGenerateUuid = ({ deps = [], prefix }) => {
+    return useMemo(() => {
+        return generateUuid(prefix);
+    }, deps);
+};
+//# sourceMappingURL=useMemoGenerateUuid.js.map

package/dist/utils/hooks/useMemoGenerateUuid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMemoGenerateUuid.js","sourceRoot":"","sources":["../../../src/utils/hooks/useMemoGenerateUuid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAuB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAO/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,EAAQ,EAAE,EAAE;IACjE,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC,EAAE,IAAI,CAAC,CAAC;AACX,CAAC,CAAC"}

package/dist/utils/keyboardConstants.d.ts

@@ -0,0 +1,13 @@
+export declare const BACKSPACE_KEY = "Backspace";
+export declare const TAB_KEY = "Tab";
+export declare const ENTER_KEY = "Enter";
+export declare const ESCAPE_KEY = "Escape";
+export declare const SPACE_KEY = " ";
+export declare const ARROW_LEFT_KEY = "ArrowLeft";
+export declare const ARROW_UP_KEY = "ArrowUp";
+export declare const ARROW_RIGHT_KEY = "ArrowRight";
+export declare const ARROW_DOWN_KEY = "ArrowDown";
+export declare const DELETE_KEY = "Delete";
+export declare const Z_KEY = "z";
+export declare const A_KEY = "a";
+//# sourceMappingURL=keyboardConstants.d.ts.map

package/dist/utils/keyboardConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardConstants.d.ts","sourceRoot":"","sources":["../../src/utils/keyboardConstants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,cAAc,CAAC;AACzC,eAAO,MAAM,OAAO,QAAQ,CAAC;AAC7B,eAAO,MAAM,SAAS,UAAU,CAAC;AACjC,eAAO,MAAM,UAAU,WAAW,CAAC;AACnC,eAAO,MAAM,SAAS,MAAM,CAAC;AAC7B,eAAO,MAAM,cAAc,cAAc,CAAC;AAC1C,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,eAAe,eAAe,CAAC;AAC5C,eAAO,MAAM,cAAc,cAAc,CAAC;AAC1C,eAAO,MAAM,UAAU,WAAW,CAAC;AACnC,eAAO,MAAM,KAAK,MAAM,CAAC;AACzB,eAAO,MAAM,KAAK,MAAM,CAAC"}

package/dist/utils/keyboardConstants.js

@@ -0,0 +1,13 @@
+export const BACKSPACE_KEY = 'Backspace';
+export const TAB_KEY = 'Tab';
+export const ENTER_KEY = 'Enter';
+export const ESCAPE_KEY = 'Escape';
+export const SPACE_KEY = ' ';
+export const ARROW_LEFT_KEY = 'ArrowLeft';
+export const ARROW_UP_KEY = 'ArrowUp';
+export const ARROW_RIGHT_KEY = 'ArrowRight';
+export const ARROW_DOWN_KEY = 'ArrowDown';
+export const DELETE_KEY = 'Delete';
+export const Z_KEY = 'z';
+export const A_KEY = 'a';
+//# sourceMappingURL=keyboardConstants.js.map

package/dist/utils/keyboardConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardConstants.js","sourceRoot":"","sources":["../../src/utils/keyboardConstants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;AACzC,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC;AAC7B,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC;AACjC,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC;AACnC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC;AAC7B,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC;AAC1C,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;AACtC,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CAAC;AAC5C,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC;AAC1C,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC;AACnC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAC;AACzB,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAC"}

package/dist/utils/waitForElement.d.ts

@@ -0,0 +1,2 @@
+export declare const waitForElement: (selector: string, callback: (element: Element) => void) => void;
+//# sourceMappingURL=waitForElement.d.ts.map

package/dist/utils/waitForElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"waitForElement.d.ts","sourceRoot":"","sources":["../../src/utils/waitForElement.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,EAChB,UAAU,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,SAmBrC,CAAC"}

package/dist/utils/waitForElement.js

@@ -0,0 +1,18 @@
+export const waitForElement = (selector, callback) => {
+    const timeout = setTimeout(() => {
+        console.error('Element not found:', selector);
+    }, 1000);
+    const observer = new MutationObserver((mutations, mutObs) => {
+        const element = document.querySelector(selector);
+        if (element) {
+            mutObs.disconnect();
+            callback(element);
+            clearTimeout(timeout);
+        }
+    });
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+};
+//# sourceMappingURL=waitForElement.js.map

package/dist/utils/waitForElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waitForElement.js","sourceRoot":"","sources":["../../src/utils/waitForElement.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,QAAgB,EAChB,QAAoC,EACpC,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;QAC9B,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;IAChD,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE;QAC1D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,CAAC,UAAU,EAAE,CAAC;YACpB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC9B,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;AACL,CAAC,CAAC"}

package/eslint.config.mts

@@ -0,0 +1,30 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import { defineConfig } from 'eslint/config';
+import stylistic from '@stylistic/eslint-plugin';
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    plugins: { js },
+    extends: ['js/recommended'],
+    languageOptions: { globals: globals.browser },
+  },
+  tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended!,
+  stylistic.configs.customize({
+    semi: true,
+    commaDangle: 'always-multiline',
+    pluginName: '@stylistic',
+  }),
+  {
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-uses-react': 'off',
+      'react/no-unescaped-entities': 'off',
+      '@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
+    },
+  },
+]);

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@arbor-education/design-system.components",
+  "version": "0.0.1",
+  "description": "The component library for the design system (the baby)",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/arbor-education/design-system.components.git"
+  },
+  "author": "AmeeMorris <amee@live.co.uk>",
+  "license": "MIT",
+  "dependencies": {
+    "@types/react": "^19.1.10",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.544.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.90.0",
+    "typescript": "^5.9.2"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.0",
+    "@eslint/js": "^9.33.0",
+    "@storybook/addon-a11y": "^9.1.8",
+    "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addon-onboarding": "^9.1.8",
+    "@storybook/addon-vitest": "^9.1.8",
+    "@storybook/react-vite": "^9.1.8",
+    "@storybook/test": "^8.6.14",
+    "@stylistic/eslint-plugin": "^5.4.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.7.0",
+    "@testing-library/react": "^16.3.0",
+    "@vitejs/plugin-react": "^5.0.1",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
+    "chromatic": "^13.1.4",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^9.1.2",
+    "global-jsdom": "^26.0.0",
+    "globals": "^16.3.0",
+    "husky": "^9.1.7",
+    "jiti": "^2.5.1",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^16.2.3",
+    "playwright": "^1.55.0",
+    "storybook": "^9.1.8",
+    "stylelint": "^16.25.0",
+    "stylelint-config-standard-scss": "^16.0.0",
+    "tsc-watch": "^7.1.1",
+    "typescript-eslint": "^8.40.0",
+    "vite": "^7.1.3",
+    "vitest": "^3.2.4"
+  },
+  "lint-staged": {
+    "*.[t|j]s?(x)": "eslint",
+    "*.scss": "stylelint"
+  },
+  "scripts": {
+    "tsc": "tsc",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsc && sass src/index.scss dist/index.css",
+    "watch": "sass --watch src/index.scss dist/index.css & tsc-watch --onSuccess \"yalc push --private --sig\"",
+    "test": "vitest",
+    "create-component": "./bin/createComponent.sh",
+    "prepare": "husky",
+    "prepublishOnly": "yarn build"
+  },
+  "types": "./dist/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/arbor-education/design-system.components/issues"
+  },
+  "homepage": "https://github.com/arbor-education/design-system.components#readme"
+}

package/src/components/button/Button.story.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './Button';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'primary-destructive',
+        'secondary-destructive',
+        'text-link',
+      ],
+      description: 'Button type/variant',
+    },
+    size: {
+      control: 'select',
+      options: ['M', 'S'],
+      description: 'Button size',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button',
+    },
+    children: {
+      control: 'text',
+      description: 'Button text',
+    },
+    onClick: {
+      action: 'clicked',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Primary button
+export const Primary: Story = {
+  args: {
+    type: 'primary',
+    children: 'Button Text',
+    size: 'M',
+  },
+};
+
+// Secondary button
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    type: 'secondary',
+  },
+};
+
+// Tertiary button
+export const Tertiary: Story = {
+  args: {
+    ...Primary.args,
+    type: 'tertiary',
+  },
+};
+
+// Primary destructive button
+export const PrimaryDestructive: Story = {
+  args: {
+    ...Primary.args,
+    type: 'primary-destructive',
+  },
+};
+
+// Secondary destructive button
+export const SecondaryDestructive: Story = {
+  args: {
+    ...Primary.args,
+    type: 'secondary-destructive',
+  },
+};
+
+// Text link button
+export const TextLink: Story = {
+  args: {
+    ...Primary.args,
+    type: 'text-link',
+  },
+};
+
+// Small buttons
+export const SmallPrimary: Story = {
+  args: {
+    ...Primary.args,
+    size: 'S',
+  },
+};
+
+export const SmallSecondary: Story = {
+  args: {
+    ...Secondary.args,
+    size: 'S',
+  },
+};
+
+// Disabled button
+export const Disabled: Story = {
+  args: {
+    ...Primary.args,
+    disabled: true,
+  },
+};

package/src/components/button/Button.test.tsx

@@ -0,0 +1,49 @@
+import { expect, test, describe, vi } from 'vitest';
+import { Button } from './Button';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+describe('Button component', () => {
+  test('renders button with text', () => {
+    render(<Button>Button Text</Button>);
+    expect(screen.getByText('Button Text')).toBeInTheDocument();
+  });
+
+  test('applies primary style by default', () => {
+    render(<Button>Button Text</Button>);
+    const button = screen.getByText('Button Text').closest('button');
+    expect(button).toHaveClass('ds-button--primary');
+  });
+
+  test('applies correct type class when specified', () => {
+    render(<Button type="secondary">Button Text</Button>);
+    const button = screen.getByText('Button Text').closest('button');
+    expect(button).toHaveClass('ds-button--secondary');
+  });
+
+  test('applies correct size class', () => {
+    render(<Button size="S">Small Button</Button>);
+    const button = screen.getByText('Small Button').closest('button');
+    expect(button).toHaveClass('ds-button--S');
+  });
+
+  test('handles click events', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click Me</Button>);
+    fireEvent.click(screen.getByText('Click Me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('does not call onClick when disabled', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick} disabled>Disabled Button</Button>);
+    fireEvent.click(screen.getByText('Disabled Button'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  test('applies additional className', () => {
+    render(<Button className="custom-class">Button Text</Button>);
+    const button = screen.getByText('Button Text').closest('button');
+    expect(button).toHaveClass('custom-class');
+  });
+});

package/src/components/button/Button.tsx

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import React, { type ButtonHTMLAttributes } from 'react';
+
+export type ButtonProps = {
+  type?: 'primary' | 'secondary' | 'tertiary' | 'primary-destructive' | 'secondary-destructive' | 'text-link';
+  size?: 'M' | 'S';
+  children?: React.ReactNode;
+  className?: string;
+  [key: string]: unknown;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
+
+export const Button = (props: ButtonProps) => {
+  const {
+    type = 'primary',
+    size = 'M',
+    children,
+    onClick,
+    disabled = false,
+    className = '',
+    ...rest
+  } = props;
+
+  return (
+    <button
+      className={classNames('ds-button',
+        `ds-button--${type}`,
+        `ds-button--${size}`,
+        className,
+      )}
+      onClick={onClick}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};

package/src/components/button/button.scss

@@ -0,0 +1,181 @@
+// Base button styles
+.ds-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--button-medium-spacing-gap-y);
+  border-radius: var(--button-medium-radius);
+  font-family: var(--font-family-standard);
+  font-weight: var(--font-weight-regular);
+  padding: var(--button-medium-spacing-y) var(--button-medium-spacing-x);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  position: relative;
+  text-decoration: none;
+  
+  &:focus {
+    outline: none;
+  }
+
+  // Button sizes
+  &--M {
+    font-size: var(--font-size-3-14);
+  }
+
+  &--S {
+    font-size: var(--font-size-2-13);
+  }
+
+  // Button text
+  &__text {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+
+  // Primary Button
+  &--primary {
+    background-color: var(--button-medium-primary-default-color-background);
+    color: var(--button-medium-primary-default-color-text);
+    border: 1px solid var(--button-medium-primary-default-color-border);
+
+    &:focus {
+      background-color: var(--button-medium-primary-focus-color-background);
+      color: var(--button-medium-primary-focus-color-text);
+      outline: 2px solid var(--button-medium-primary-focus-color-focus);
+    }
+    
+    &:hover {
+      background-color: var(--button-medium-primary-hover-color-background);
+      color: var(--button-medium-primary-hover-color-text);
+    }
+    
+    &:active {
+      background-color: var(--button-medium-primary-pressed-color-background);
+      color: var(--button-medium-primary-pressed-color-text);
+    }
+  }
+
+  // Secondary Button
+  &--secondary {
+    background-color: var(--button-medium-secondary-default-color-background);
+    color: var(--button-medium-secondary-default-color-text);
+    border: 1px solid var(--button-medium-secondary-default-color-border);
+
+    &:focus {
+      background-color: var(--button-medium-secondary-focus-color-background);
+      color: var(--button-medium-secondary-focus-color-text);
+      outline: 2px solid var(--button-medium-secondary-focus-color-focus);
+    }
+    
+    &:hover {
+      background-color: var(--button-medium-secondary-hover-color-background);
+      color: var(--button-medium-secondary-hover-color-text);
+    }
+    
+    &:active {
+      background-color: var(--button-medium-secondary-pressed-color-background);
+      color: var(--button-medium-secondary-pressed-color-text);
+    }
+  }
+
+  // Tertiary Button
+  &--tertiary {
+    background-color: var(--button-medium-tertiary-default-color-background);
+    color: var(--button-medium-tertiary-default-color-text);
+    border: 1px solid var(--button-medium-tertiary-default-color-border);
+
+    &:focus {
+      background-color: var(--button-medium-tertiary-focus-color-background);
+      color: var(--button-medium-tertiary-focus-color-text);
+      outline: 2px solid var(--button-medium-tertiary-focus-color-focus);
+    }
+    
+    &:hover {
+      background-color: var(--button-medium-tertiary-hover-color-background);
+      color: var(--button-medium-tertiary-hover-color-text);
+    }
+    
+    &:active {
+      background-color: var(--button-medium-tertiary-pressed-color-background);
+      color: var(--button-medium-tertiary-pressed-color-text);
+    }
+  }
+
+  // Primary Destructive Button
+  &--primary-destructive {
+    background-color: var(--button-medium-primary-destructive-default-color-background);
+    color: var(--button-medium-primary-destructive-default-color-text);
+    border: 1px solid var(--button-medium-primary-destructive-default-color-border);
+
+    &:focus {
+      background-color: var(--button-medium-primary-destructive-focus-color-background);
+      color: var(--button-medium-primary-destructive-focus-color-text);
+      outline: 2px solid var(--button-medium-primary-destructive-focus-color-focus);
+    }
+
+    &:hover {
+      background-color: var(--button-medium-primary-destructive-hover-color-background);
+      color: var(--button-medium-primary-destructive-hover-color-text);
+    }
+    
+    &:active {
+      background-color: var(--button-medium-primary-destructive-pressed-color-background);
+      color: var(--button-medium-primary-destructive-pressed-color-text);
+    }
+  }
+
+  // Secondary Destructive Button
+  &--secondary-destructive {
+    background-color: var(--button-medium-secondary-destructive-default-color-background);
+    color: var(--button-medium-secondary-destructive-default-color-text);
+    border: 1px solid var(--button-medium-secondary-destructive-default-color-border);
+
+    &:focus {
+      background-color: var(--button-medium-secondary-destructive-focus-color-background);
+      color: var(--button-medium-secondary-destructive-focus-color-text);
+      outline: 2px solid var(--button-medium-secondary-destructive-focus-color-focus);
+    }
+
+    &:hover {
+      background-color: var(--button-medium-secondary-destructive-hover-color-background);
+      color: var(--button-medium-secondary-destructive-hover-color-text);
+    }
+    
+    &:active{
+      background-color: var(--button-medium-secondary-destructive-pressed-color-background);
+      color: var(--button-medium-secondary-destructive-pressed-color-text);
+    }
+  }
+
+  // Text Link Button
+  &--text-link {
+    background-color: var(--button-medium-text-link-default-color-background);
+    color: var(--button-medium-text-link-default-color-text);
+    border: 1px solid var(--button-medium-text-link-default-color-border);
+
+    &:focus {
+      background-color: var(--button-medium-text-link-focus-color-background);
+      color: var(--button-medium-text-link-focus-color-text);
+      outline: 2px solid var(--button-medium-text-link-focus-color-focus);
+    }
+
+    &:hover {
+      background-color: var(--button-medium-text-link-hover-color-background);
+      color: var(--button-medium-text-link-hover-color-text);
+    }
+
+    &:active{
+      background-color: var(--button-medium-text-link-pressed-color-background);
+      color: var(--button-medium-text-link-pressed-color-text);
+    }
+  }
+
+  // Disabled state
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}