@1ry/basic-react-primitive-components 0.1.0

package/lib/components/Card.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '$components/Box';
+import React from 'react';
+import { VariantProps } from '$utils/tv';
+declare const cardStyles: any;
+type CardProps = BoxProps & VariantProps<typeof cardStyles> & {};
+export declare const Card: ({ children, className, noBorder, ...props }: CardProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/lib/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAO,MAAM,iBAAiB,CAAA;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,QAAA,MAAM,UAAU,KAOd,CAAA;AAEF,KAAK,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,EAC7D,CAAA;AAED,eAAO,MAAM,IAAI,gDAAiD,SAAS,sBAU1E,CAAA"}

package/lib/components/Card.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var Box = require('./Box.js');
+var Card_module = require('../styles/Card.module.scss.js');
+var React = require('react');
+var tailwindVariants = require('tailwind-variants');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const cardStyles = tailwindVariants.tv({
+    base: Card_module.default.cardBase,
+    variants: {
+        noBorder: {
+            true: Card_module.default.noBorder,
+        },
+    },
+});
+const Card = ({ children, className, noBorder, ...props }) => (React__default.default.createElement(Box.Box, { ...props, className: cardStyles({
+        noBorder,
+        className,
+    }) }, children));
+
+exports.Card = Card;
+//# sourceMappingURL=Card.js.map

package/lib/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../src/components/Card.tsx"],"sourcesContent":["import { BoxProps, Box } from '$components/Box'\nimport styles from '$styles/Card.module.scss'\nimport React from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst cardStyles = tv({\n\tbase: styles.cardBase,\n\tvariants: {\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\ntype CardProps = BoxProps & VariantProps<typeof cardStyles> & {\n}\n\nexport const Card = ({ children, className, noBorder, ...props }: CardProps) => (\n\t<Box\n\t\t{...props}\n\t\tclassName={cardStyles({\n\t\t\tnoBorder,\n\t\t\tclassName,\n\t\t})}\n\t>\n\t\t{children}\n\t</Box>\n)\n"],"names":["tv","styles","React","Box"],"mappings":";;;;;;;;;;;AAMA,MAAM,UAAU,GAAGA,mBAAE,CAAC;IACrB,IAAI,EAAEC,mBAAM,CAAC,QAAQ;AACrB,IAAA,QAAQ,EAAE;AACT,QAAA,QAAQ,EAAE;YACT,IAAI,EAAEA,mBAAM,CAAC,QAAQ;AACrB,SAAA;AACD,KAAA;AACD,CAAA,CAAC;AAKK,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,MAC1EC,sBAAA,CAAA,aAAA,CAACC,OAAG,EAAA,EAAA,GACC,KAAK,EACT,SAAS,EAAE,UAAU,CAAC;QACrB,QAAQ;QACR,SAAS;AACT,KAAA,CAAC,EAAA,EAED,QAAQ,CACJ;;;;"}

package/lib/components/Card.mjs

@@ -0,0 +1,20 @@
+import { Box } from './Box.mjs';
+import styles from '../styles/Card.module.scss.mjs';
+import React from 'react';
+import { tv } from 'tailwind-variants';
+
+const cardStyles = tv({
+    base: styles.cardBase,
+    variants: {
+        noBorder: {
+            true: styles.noBorder,
+        },
+    },
+});
+const Card = ({ children, className, noBorder, ...props }) => (React.createElement(Box, { ...props, className: cardStyles({
+        noBorder,
+        className,
+    }) }, children));
+
+export { Card };
+//# sourceMappingURL=Card.mjs.map

package/lib/components/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","sources":["../../src/components/Card.tsx"],"sourcesContent":["import { BoxProps, Box } from '$components/Box'\nimport styles from '$styles/Card.module.scss'\nimport React from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst cardStyles = tv({\n\tbase: styles.cardBase,\n\tvariants: {\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\ntype CardProps = BoxProps & VariantProps<typeof cardStyles> & {\n}\n\nexport const Card = ({ children, className, noBorder, ...props }: CardProps) => (\n\t<Box\n\t\t{...props}\n\t\tclassName={cardStyles({\n\t\t\tnoBorder,\n\t\t\tclassName,\n\t\t})}\n\t>\n\t\t{children}\n\t</Box>\n)\n"],"names":[],"mappings":";;;;;AAMA,MAAM,UAAU,GAAG,EAAE,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC,QAAQ;AACrB,IAAA,QAAQ,EAAE;AACT,QAAA,QAAQ,EAAE;YACT,IAAI,EAAE,MAAM,CAAC,QAAQ;AACrB,SAAA;AACD,KAAA;AACD,CAAA,CAAC;AAKK,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,MAC1E,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAA,GACC,KAAK,EACT,SAAS,EAAE,UAAU,CAAC;QACrB,QAAQ;QACR,SAAS;AACT,KAAA,CAAC,EAAA,EAED,QAAQ,CACJ;;;;"}

package/lib/components/ErrorMessage.d.ts

@@ -0,0 +1,10 @@
+import { BoxProps } from '$components/Box';
+import React from 'react';
+import { VariantProps } from '$utils/tv';
+declare const errorMessageStyles: any;
+export type ErrorMessageProps = BoxProps & VariantProps<typeof errorMessageStyles> & {
+    error: Error;
+};
+export declare function ErrorMessage({ error, ...props }: ErrorMessageProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ErrorMessage.d.ts.map

package/lib/components/ErrorMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../src/components/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,QAAA,MAAM,kBAAkB,KAWtB,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACpF,KAAK,EAAE,KAAK,CAAA;CACZ,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAMlE"}

package/lib/components/ErrorMessage.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var Box = require('./Box.js');
+var Text = require('./Text.js');
+var React = require('react');
+var ErrorMessage_module = require('../styles/ErrorMessage.module.scss.js');
+var tailwindVariants = require('tailwind-variants');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const errorMessageStyles = tailwindVariants.tv({
+    base: ErrorMessage_module.default.errorMessageBase,
+    variants: {
+        variant: {
+            critical: ErrorMessage_module.default.critical,
+            warning: ErrorMessage_module.default.warning,
+        },
+    },
+    defaultVariants: {
+        variant: 'critical',
+    },
+});
+function ErrorMessage({ error, ...props }) {
+    return (React__default.default.createElement(Box.Box, { ...props, className: errorMessageStyles() },
+        React__default.default.createElement(Text.Text, null, error.message)));
+}
+
+exports.ErrorMessage = ErrorMessage;
+//# sourceMappingURL=ErrorMessage.js.map

package/lib/components/ErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","sources":["../../src/components/ErrorMessage.tsx"],"sourcesContent":["import { Box, BoxProps } from '$components/Box'\nimport { Text } from '$components/Text'\nimport React from 'react'\nimport styles from '$styles/ErrorMessage.module.scss'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst errorMessageStyles = tv({\n\tbase: styles.errorMessageBase,\n    variants: {\n        variant: {\n            critical: styles.critical,\n            warning: styles.warning,\n        },\n    },\n    defaultVariants: {\n        variant: 'critical',\n    },\n})\n\nexport type ErrorMessageProps = BoxProps & VariantProps<typeof errorMessageStyles> & {\n\terror: Error\n}\n\nexport function ErrorMessage({ error, ...props }: ErrorMessageProps) {\n\treturn (\n\t\t<Box {...props} className={errorMessageStyles()}>\n\t\t\t<Text>{error.message}</Text>\n\t\t</Box>\n\t)\n}\n"],"names":["tv","styles","React","Box","Text"],"mappings":";;;;;;;;;;;;AAOA,MAAM,kBAAkB,GAAGA,mBAAE,CAAC;IAC7B,IAAI,EAAEC,2BAAM,CAAC,gBAAgB;AAC1B,IAAA,QAAQ,EAAE;AACN,QAAA,OAAO,EAAE;YACL,QAAQ,EAAEA,2BAAM,CAAC,QAAQ;YACzB,OAAO,EAAEA,2BAAM,CAAC,OAAO;AAC1B,SAAA;AACJ,KAAA;AACD,IAAA,eAAe,EAAE;AACb,QAAA,OAAO,EAAE,UAAU;AACtB,KAAA;AACJ,CAAA,CAAC;AAMI,SAAU,YAAY,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAqB,EAAA;IAClE,QACCC,qCAACC,OAAG,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAA;QAC9CD,sBAAA,CAAA,aAAA,CAACE,SAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CACvB;AAER;;;;"}

package/lib/components/ErrorMessage.mjs

@@ -0,0 +1,25 @@
+import { Box } from './Box.mjs';
+import { Text } from './Text.mjs';
+import React from 'react';
+import styles from '../styles/ErrorMessage.module.scss.mjs';
+import { tv } from 'tailwind-variants';
+
+const errorMessageStyles = tv({
+    base: styles.errorMessageBase,
+    variants: {
+        variant: {
+            critical: styles.critical,
+            warning: styles.warning,
+        },
+    },
+    defaultVariants: {
+        variant: 'critical',
+    },
+});
+function ErrorMessage({ error, ...props }) {
+    return (React.createElement(Box, { ...props, className: errorMessageStyles() },
+        React.createElement(Text, null, error.message)));
+}
+
+export { ErrorMessage };
+//# sourceMappingURL=ErrorMessage.mjs.map

package/lib/components/ErrorMessage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.mjs","sources":["../../src/components/ErrorMessage.tsx"],"sourcesContent":["import { Box, BoxProps } from '$components/Box'\nimport { Text } from '$components/Text'\nimport React from 'react'\nimport styles from '$styles/ErrorMessage.module.scss'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst errorMessageStyles = tv({\n\tbase: styles.errorMessageBase,\n    variants: {\n        variant: {\n            critical: styles.critical,\n            warning: styles.warning,\n        },\n    },\n    defaultVariants: {\n        variant: 'critical',\n    },\n})\n\nexport type ErrorMessageProps = BoxProps & VariantProps<typeof errorMessageStyles> & {\n\terror: Error\n}\n\nexport function ErrorMessage({ error, ...props }: ErrorMessageProps) {\n\treturn (\n\t\t<Box {...props} className={errorMessageStyles()}>\n\t\t\t<Text>{error.message}</Text>\n\t\t</Box>\n\t)\n}\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,kBAAkB,GAAG,EAAE,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC,gBAAgB;AAC1B,IAAA,QAAQ,EAAE;AACN,QAAA,OAAO,EAAE;YACL,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,OAAO,EAAE,MAAM,CAAC,OAAO;AAC1B,SAAA;AACJ,KAAA;AACD,IAAA,eAAe,EAAE;AACb,QAAA,OAAO,EAAE,UAAU;AACtB,KAAA;AACJ,CAAA,CAAC;AAMI,SAAU,YAAY,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAqB,EAAA;IAClE,QACC,oBAAC,GAAG,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAA;QAC9C,KAAA,CAAA,aAAA,CAAC,IAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CACvB;AAER;;;;"}

package/lib/components/IconButton.d.ts

@@ -0,0 +1,12 @@
+import { ButtonProps } from '$components/Button';
+import React, { ReactNode } from 'react';
+import { VariantProps } from '$utils/tv';
+declare const inputButtonStyles: any;
+export type IconButtonProps = ButtonProps & VariantProps<typeof inputButtonStyles> & {
+    className?: string;
+    children?: ReactNode;
+    label?: string;
+};
+export declare function IconButton({ className, children, label, id: customId, ...props }: Readonly<IconButtonProps>): React.JSX.Element;
+export {};
+//# sourceMappingURL=IconButton.d.ts.map

package/lib/components/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGxD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAGxC,QAAA,MAAM,iBAAiB,KAUrB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GACxC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAEF,wBAAgB,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACR,EAAE,QAAQ,CAAC,eAAe,CAAC,qBAa3B"}

package/lib/components/IconButton.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var Button = require('./Button.js');
+var Text = require('./Text.js');
+var shortId = require('@1ry/short-id');
+var React = require('react');
+var tailwindVariants = require('tailwind-variants');
+var IconButton_module = require('../styles/IconButton.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const inputButtonStyles = tailwindVariants.tv({
+    base: [IconButton_module.default.iconButtonBase],
+    variants: {
+        variant: {
+            default: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function IconButton({ className, children, label, id: customId, ...props }) {
+    const id = React.useMemo(() => customId ?? shortId.generateShortId(7), [customId]);
+    return (React__default.default.createElement(Button.Button, { name: id, className: inputButtonStyles({ variant: 'default' }), ...props },
+        children,
+        label && (React__default.default.createElement(Text.Text, { htmlFor: id, paddingBefore: "10", as: "label", variant: "wavy" },
+            ' ',
+            label))));
+}
+
+exports.IconButton = IconButton;
+//# sourceMappingURL=IconButton.js.map

package/lib/components/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { ReactNode, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport ibStyles from '$styles/IconButton.module.scss'\n\nconst inputButtonStyles = tv({\n\tbase: [ibStyles.iconButtonBase],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t},\n})\n\nexport type IconButtonProps = ButtonProps &\n\tVariantProps<typeof inputButtonStyles> & {\n\t\tclassName?: string\n\t\tchildren?: ReactNode\n\t\tlabel?: string\n\t}\n\nexport function IconButton({\n\tclassName,\n\tchildren,\n\tlabel,\n\tid: customId,\n\t...props\n}: Readonly<IconButtonProps>) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\treturn (\n\t\t<Button name={id} className={inputButtonStyles({ variant: 'default' })} {...props}>\n\t\t\t{children}\n\t\t\t{label && (\n\t\t\t\t<Text htmlFor={id} paddingBefore=\"10\" as=\"label\" variant=\"wavy\">\n\t\t\t\t\t{' '}\n\t\t\t\t\t{label}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t</Button>\n\t)\n}\n"],"names":["tv","ibStyles","useMemo","generateShortId","React","Button","Text"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,iBAAiB,GAAGA,mBAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAACC,yBAAQ,CAAC,cAAc,CAAC;AAC/B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,KAAA;AACD,CAAA,CAAC;SASc,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACmB,EAAA;AAC3B,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,uBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,QACCC,sBAAA,CAAA,aAAA,CAACC,aAAM,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,EAAA;QAC/E,QAAQ;AACR,QAAA,KAAK,KACLD,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,EAAC,OAAO,EAAE,EAAE,EAAE,aAAa,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAA;YAC7D,GAAG;AACH,YAAA,KAAK,CACA,CACP,CACO;AAEX;;;;"}

package/lib/components/IconButton.mjs

@@ -0,0 +1,29 @@
+import { Button } from './Button.mjs';
+import { Text } from './Text.mjs';
+import { generateShortId } from '@1ry/short-id';
+import React, { useMemo } from 'react';
+import { tv } from 'tailwind-variants';
+import ibStyles from '../styles/IconButton.module.scss.mjs';
+
+const inputButtonStyles = tv({
+    base: [ibStyles.iconButtonBase],
+    variants: {
+        variant: {
+            default: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function IconButton({ className, children, label, id: customId, ...props }) {
+    const id = useMemo(() => customId ?? generateShortId(7), [customId]);
+    return (React.createElement(Button, { name: id, className: inputButtonStyles({ variant: 'default' }), ...props },
+        children,
+        label && (React.createElement(Text, { htmlFor: id, paddingBefore: "10", as: "label", variant: "wavy" },
+            ' ',
+            label))));
+}
+
+export { IconButton };
+//# sourceMappingURL=IconButton.mjs.map

package/lib/components/IconButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.mjs","sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { ReactNode, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport ibStyles from '$styles/IconButton.module.scss'\n\nconst inputButtonStyles = tv({\n\tbase: [ibStyles.iconButtonBase],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t},\n})\n\nexport type IconButtonProps = ButtonProps &\n\tVariantProps<typeof inputButtonStyles> & {\n\t\tclassName?: string\n\t\tchildren?: ReactNode\n\t\tlabel?: string\n\t}\n\nexport function IconButton({\n\tclassName,\n\tchildren,\n\tlabel,\n\tid: customId,\n\t...props\n}: Readonly<IconButtonProps>) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\treturn (\n\t\t<Button name={id} className={inputButtonStyles({ variant: 'default' })} {...props}>\n\t\t\t{children}\n\t\t\t{label && (\n\t\t\t\t<Text htmlFor={id} paddingBefore=\"10\" as=\"label\" variant=\"wavy\">\n\t\t\t\t\t{' '}\n\t\t\t\t\t{label}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t</Button>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;AAC/B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,KAAA;AACD,CAAA,CAAC;SASc,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACmB,EAAA;AAC3B,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,QACC,KAAA,CAAA,aAAA,CAAC,MAAM,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,EAAA;QAC/E,QAAQ;AACR,QAAA,KAAK,KACL,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,EAAE,EAAE,aAAa,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAA;YAC7D,GAAG;AACH,YAAA,KAAK,CACA,CACP,CACO;AAEX;;;;"}

package/lib/components/Input.d.ts

@@ -0,0 +1,13 @@
+import React, { HTMLProps } from 'react';
+import { VariantProps } from '$utils/tv';
+declare const InputStyles: any;
+/**
+ * Props for the Input component.
+ */
+export type InputProps = HTMLProps<HTMLInputElement> & VariantProps<typeof InputStyles> & {
+    label?: string;
+    glowing?: boolean;
+};
+export declare function Input({ label, name: customName, placeholder, width, glowing, type, id: customId, ...props }: Readonly<InputProps>): React.JSX.Element;
+export {};
+//# sourceMappingURL=Input.d.ts.map

package/lib/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,QAAA,MAAM,WAAW,KAEf,CAAA;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,gBAAgB,CAAC,GACnD,YAAY,CAAC,OAAO,WAAW,CAAC,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAEF,wBAAgB,KAAK,CAAC,EACrB,KAAK,EACL,IAAI,EAAE,UAAU,EAChB,WAAW,EACX,KAAc,EACd,OAAe,EACf,IAAI,EACJ,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACR,EAAE,QAAQ,CAAC,UAAU,CAAC,qBA0BtB"}

package/lib/components/Input.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var Box = require('./Box.js');
+var Button = require('./Button.js');
+var Text = require('./Text.js');
+var shortId = require('@1ry/short-id');
+var React = require('react');
+var tailwindVariants = require('tailwind-variants');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+tailwindVariants.tv({
+    base: 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400',
+});
+function Input({ label, name: customName, placeholder, width = 'auto', glowing = false, type, id: customId, ...props }) {
+    const id = React.useMemo(() => customId ?? shortId.generateShortId(7), [customId]);
+    const name = React.useMemo(() => customName ?? id, [customName, id]);
+    const cname = 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400';
+    return (React__default.default.createElement(Box.Box, { orientation: "none", justify: "evenly" },
+        label && (React__default.default.createElement(Text.Text, { as: "label", className: "text-sm font-medium text-zinc-700 mt-1.5" }, label)),
+        type === 'submit' && React__default.default.createElement(Button.Button, { id: id, asSubmit: true, glowing: glowing, className: cname }),
+        type !== 'submit' && (React__default.default.createElement("input", { name: name, className: cname, placeholder: placeholder ?? 'meow abc meow', width: width ?? 400, type: type, id: id, ...props }))));
+}
+
+exports.Input = Input;
+//# sourceMappingURL=Input.js.map

package/lib/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../src/components/Input.tsx"],"sourcesContent":["import { Box } from '$components/Box'\nimport { Button } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { HTMLProps, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst InputStyles = tv({\n\tbase: 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400',\n})\n\n/**\n * Props for the Input component.\n */\nexport type InputProps = HTMLProps<HTMLInputElement> &\n\tVariantProps<typeof InputStyles> & {\n\t\tlabel?: string\n\t\tglowing?: boolean\n\t}\n\nexport function Input({\n\tlabel,\n\tname: customName,\n\tplaceholder,\n\twidth = 'auto',\n\tglowing = false,\n\ttype,\n\tid: customId,\n\t...props\n}: Readonly<InputProps>) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tconst name = useMemo(() => customName ?? id, [customName, id])\n\tconst cname = 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400'\n\treturn (\n\t\t<Box orientation=\"none\" justify=\"evenly\">\n\t\t\t{label && (\n\t\t\t\t<Text as=\"label\" className=\"text-sm font-medium text-zinc-700 mt-1.5\">\n\t\t\t\t\t{label}\n\t\t\t\t</Text>\n\t\t\t)}\n\n\t\t\t{type === 'submit' && <Button id={id} asSubmit={true} glowing={glowing} className={cname} />}\n\t\t\t{type !== 'submit' && (\n\t\t\t\t<input\n\t\t\t\t\tname={name}\n\t\t\t\t\tclassName={cname}\n\t\t\t\t\tplaceholder={placeholder ?? 'meow abc meow'}\n\t\t\t\t\twidth={width ?? 400}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tid={id}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Box>\n\t)\n}\n"],"names":["tv","useMemo","generateShortId","React","Box","Text","Button"],"mappings":";;;;;;;;;;;;;AAQoBA,mBAAE,CAAC;AACtB,IAAA,IAAI,EAAE,oFAAoF;AAC1F,CAAA;AAWK,SAAU,KAAK,CAAC,EACrB,KAAK,EACL,IAAI,EAAE,UAAU,EAChB,WAAW,EACX,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACc,EAAA;AACtB,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,uBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,MAAM,IAAI,GAAGD,aAAO,CAAC,MAAM,UAAU,IAAI,EAAE,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,KAAK,GAAG,oFAAoF;IAClG,QACCE,sBAAA,CAAA,aAAA,CAACC,OAAG,EAAA,EAAC,WAAW,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAA;AACtC,QAAA,KAAK,KACLD,sBAAA,CAAA,aAAA,CAACE,SAAI,IAAC,EAAE,EAAC,OAAO,EAAC,SAAS,EAAC,0CAA0C,EAAA,EACnE,KAAK,CACA,CACP;QAEA,IAAI,KAAK,QAAQ,IAAIF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAA,CAAI;AAC3F,QAAA,IAAI,KAAK,QAAQ,KACjBH,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,WAAW,IAAI,eAAe,EAC3C,KAAK,EAAE,KAAK,IAAI,GAAG,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EAAA,GACF,KAAK,GACR,CACF,CACI;AAER;;;;"}

package/lib/components/Input.mjs

@@ -0,0 +1,22 @@
+import { Box } from './Box.mjs';
+import { Button } from './Button.mjs';
+import { Text } from './Text.mjs';
+import { generateShortId } from '@1ry/short-id';
+import React, { useMemo } from 'react';
+import { tv } from 'tailwind-variants';
+
+tv({
+    base: 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400',
+});
+function Input({ label, name: customName, placeholder, width = 'auto', glowing = false, type, id: customId, ...props }) {
+    const id = useMemo(() => customId ?? generateShortId(7), [customId]);
+    const name = useMemo(() => customName ?? id, [customName, id]);
+    const cname = 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400';
+    return (React.createElement(Box, { orientation: "none", justify: "evenly" },
+        label && (React.createElement(Text, { as: "label", className: "text-sm font-medium text-zinc-700 mt-1.5" }, label)),
+        type === 'submit' && React.createElement(Button, { id: id, asSubmit: true, glowing: glowing, className: cname }),
+        type !== 'submit' && (React.createElement("input", { name: name, className: cname, placeholder: placeholder ?? 'meow abc meow', width: width ?? 400, type: type, id: id, ...props }))));
+}
+
+export { Input };
+//# sourceMappingURL=Input.mjs.map

package/lib/components/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","sources":["../../src/components/Input.tsx"],"sourcesContent":["import { Box } from '$components/Box'\nimport { Button } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { HTMLProps, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst InputStyles = tv({\n\tbase: 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400',\n})\n\n/**\n * Props for the Input component.\n */\nexport type InputProps = HTMLProps<HTMLInputElement> &\n\tVariantProps<typeof InputStyles> & {\n\t\tlabel?: string\n\t\tglowing?: boolean\n\t}\n\nexport function Input({\n\tlabel,\n\tname: customName,\n\tplaceholder,\n\twidth = 'auto',\n\tglowing = false,\n\ttype,\n\tid: customId,\n\t...props\n}: Readonly<InputProps>) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tconst name = useMemo(() => customName ?? id, [customName, id])\n\tconst cname = 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400'\n\treturn (\n\t\t<Box orientation=\"none\" justify=\"evenly\">\n\t\t\t{label && (\n\t\t\t\t<Text as=\"label\" className=\"text-sm font-medium text-zinc-700 mt-1.5\">\n\t\t\t\t\t{label}\n\t\t\t\t</Text>\n\t\t\t)}\n\n\t\t\t{type === 'submit' && <Button id={id} asSubmit={true} glowing={glowing} className={cname} />}\n\t\t\t{type !== 'submit' && (\n\t\t\t\t<input\n\t\t\t\t\tname={name}\n\t\t\t\t\tclassName={cname}\n\t\t\t\t\tplaceholder={placeholder ?? 'meow abc meow'}\n\t\t\t\t\twidth={width ?? 400}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tid={id}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Box>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;AAQoB,EAAE,CAAC;AACtB,IAAA,IAAI,EAAE,oFAAoF;AAC1F,CAAA;AAWK,SAAU,KAAK,CAAC,EACrB,KAAK,EACL,IAAI,EAAE,UAAU,EAChB,WAAW,EACX,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACc,EAAA;AACtB,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,UAAU,IAAI,EAAE,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,KAAK,GAAG,oFAAoF;IAClG,QACC,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,WAAW,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAA;AACtC,QAAA,KAAK,KACL,KAAA,CAAA,aAAA,CAAC,IAAI,IAAC,EAAE,EAAC,OAAO,EAAC,SAAS,EAAC,0CAA0C,EAAA,EACnE,KAAK,CACA,CACP;QAEA,IAAI,KAAK,QAAQ,IAAI,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAA,CAAI;AAC3F,QAAA,IAAI,KAAK,QAAQ,KACjB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,WAAW,IAAI,eAAe,EAC3C,KAAK,EAAE,KAAK,IAAI,GAAG,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EAAA,GACF,KAAK,GACR,CACF,CACI;AAER;;;;"}

package/lib/components/Modal.d.ts

@@ -0,0 +1,19 @@
+import { BoxProps } from '$components/Box';
+import React, { ReactNode } from 'react';
+import { VariantProps } from '$utils/tv';
+declare const modalStyles: any;
+export type ModalProps = BoxProps & VariantProps<typeof modalStyles> & {
+    onClose?: () => void;
+    onSubmit?: () => void;
+    modalTitle?: ReactNode;
+    modalSubTitle?: ReactNode;
+    children?: ReactNode;
+    closeIcon?: ReactNode;
+    closeText?: string;
+    showSubmitButton?: boolean;
+    submitText?: string;
+    submitIcon?: ReactNode;
+};
+export declare const Modal: ({ onClose, onSubmit, id: customId, modalTitle, modalSubTitle, children, closeText, closeIcon, showSubmitButton, submitText, submitIcon, ...props }: ModalProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Modal.d.ts.map

package/lib/components/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAI/C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAGxC,QAAA,MAAM,WAAW,KAUf,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAChC,YAAY,CAAC,OAAO,WAAW,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AACF,eAAO,MAAM,KAAK,uJAiBf,UAAU,sBAuCZ,CAAA"}

package/lib/components/Modal.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var Box = require('./Box.js');
+var IconButton = require('./IconButton.js');
+var Text = require('./Text.js');
+var shortId = require('@1ry/short-id');
+var React = require('react');
+var tailwindVariants = require('tailwind-variants');
+var Modal_module = require('../styles/Modal.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const modalStyles = tailwindVariants.tv({
+    base: [Modal_module.default.modalBase],
+    variants: {
+        variant: {
+            default: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+const Modal = ({ onClose, onSubmit, id: customId, modalTitle, modalSubTitle = 'Press ESC key or click the button below to close', children, closeText = 'Close', closeIcon = (React__default.default.createElement(Text.Text, { as: "span", variant: "wavy" }, "\u2716")), showSubmitButton, submitText, submitIcon, ...props }) => {
+    const id = React.useMemo(() => customId ?? shortId.generateShortId(7), [customId]);
+    return (React__default.default.createElement("dialog", { id: id, className: modalStyles({ variant: 'default' }) },
+        React__default.default.createElement(Box.Box, { orientation: "none", id: `${id}_modal_box`, ...props, className: modalStyles({ variant: 'default' }) },
+            modalTitle && React__default.default.createElement(Box.Box, null, modalTitle),
+            modalSubTitle && React__default.default.createElement(Box.Box, null, modalSubTitle),
+            React__default.default.createElement(Box.Box, { orientation: "vertical", id: `${id}_modal_inner`, className: modalStyles({ variant: 'default' }) },
+                React__default.default.createElement(Box.Box, { orientation: "vertical" }, children),
+                React__default.default.createElement(Box.Box, { align: "right", orientation: "horizontal", justify: "spaceBetween", gap: 4 },
+                    showSubmitButton && (React__default.default.createElement(IconButton.IconButton, { onClick: () => (onSubmit ? onSubmit() : null), label: submitText, className: "ps-8" }, submitIcon)),
+                    React__default.default.createElement(IconButton.IconButton, { onClick: () => document.getElementById(id).close(), label: closeText }, closeIcon))))));
+};
+
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.js.map

package/lib/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { Box, BoxProps } from '$components/Box'\nimport { IconButton } from '$components/IconButton'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { ReactNode, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport MODALSTYLES from '$styles/Modal.module.scss'\n\nconst modalStyles = tv({\n\tbase: [MODALSTYLES.modalBase],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t},\n})\n\nexport type ModalProps = BoxProps &\n\tVariantProps<typeof modalStyles> & {\n\t\tonClose?: () => void\n\t\tonSubmit?: () => void\n\t\tmodalTitle?: ReactNode\n\t\tmodalSubTitle?: ReactNode\n\t\tchildren?: ReactNode\n\t\tcloseIcon?: ReactNode\n\t\tcloseText?: string\n\t\tshowSubmitButton?: boolean\n\t\tsubmitText?: string\n\t\tsubmitIcon?: ReactNode\n\t}\nexport const Modal = ({\n\tonClose,\n\tonSubmit,\n\tid: customId,\n\tmodalTitle,\n\tmodalSubTitle = 'Press ESC key or click the button below to close',\n\tchildren,\n\tcloseText = 'Close',\n\tcloseIcon = (\n\t\t<Text as=\"span\" variant=\"wavy\">\n\t\t\t✖\n\t\t</Text>\n\t),\n\tshowSubmitButton,\n\tsubmitText,\n\tsubmitIcon,\n\t...props\n}: ModalProps) => {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\treturn (\n\t\t<dialog id={id} className={modalStyles({ variant: 'default' })}>\n\t\t\t<Box\n\t\t\t\torientation=\"none\"\n\t\t\t\tid={`${id}_modal_box`}\n\t\t\t\t{...props}\n\t\t\t\tclassName={modalStyles({ variant: 'default' })}\n\t\t\t>\n\t\t\t\t{modalTitle && <Box>{modalTitle}</Box>}\n\t\t\t\t{modalSubTitle && <Box>{modalSubTitle}</Box>}\n\t\t\t\t<Box\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\tid={`${id}_modal_inner`}\n\t\t\t\t\tclassName={modalStyles({ variant: 'default' })}\n\t\t\t\t>\n\t\t\t\t\t<Box orientation=\"vertical\">{children}</Box>\n\t\t\t\t\t<Box align=\"right\" orientation=\"horizontal\" justify=\"spaceBetween\" gap={4}>\n\t\t\t\t\t\t{showSubmitButton && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => (onSubmit ? onSubmit() : null)}\n\t\t\t\t\t\t\t\tlabel={submitText}\n\t\t\t\t\t\t\t\tclassName=\"ps-8\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{submitIcon}\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tonClick={() => (document.getElementById(id) as HTMLDialogElement).close()}\n\t\t\t\t\t\t\tlabel={closeText}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{closeIcon}\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t</Box>\n\t\t</dialog>\n\t)\n}\n"],"names":["tv","MODALSTYLES","React","Text","useMemo","generateShortId","Box","IconButton"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,WAAW,GAAGA,mBAAE,CAAC;AACtB,IAAA,IAAI,EAAE,CAACC,oBAAW,CAAC,SAAS,CAAC;AAC7B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,KAAA;AACD,CAAA,CAAC;AAeK,MAAM,KAAK,GAAG,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,QAAQ,EACZ,UAAU,EACV,aAAa,GAAG,kDAAkD,EAClE,QAAQ,EACR,SAAS,GAAG,OAAO,EACnB,SAAS,IACRC,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAA,EAAA,QAAA,CAEvB,CACP,EACD,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,uBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,QACCH,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAA;QAC7DA,sBAAA,CAAA,aAAA,CAACI,OAAG,IACH,WAAW,EAAC,MAAM,EAClB,EAAE,EAAE,CAAA,EAAG,EAAE,CAAA,UAAA,CAAY,KACjB,KAAK,EACT,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAA;AAE7C,YAAA,UAAU,IAAIJ,sBAAA,CAAA,aAAA,CAACI,OAAG,EAAA,IAAA,EAAE,UAAU,CAAO;AACrC,YAAA,aAAa,IAAIJ,sBAAA,CAAA,aAAA,CAACI,OAAG,EAAA,IAAA,EAAE,aAAa,CAAO;YAC5CJ,sBAAA,CAAA,aAAA,CAACI,OAAG,IACH,WAAW,EAAC,UAAU,EACtB,EAAE,EAAE,CAAA,EAAG,EAAE,cAAc,EACvB,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAA;AAE9C,gBAAAJ,sBAAA,CAAA,aAAA,CAACI,OAAG,EAAA,EAAC,WAAW,EAAC,UAAU,EAAA,EAAE,QAAQ,CAAO;AAC5C,gBAAAJ,sBAAA,CAAA,aAAA,CAACI,OAAG,EAAA,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,EAAC,OAAO,EAAC,cAAc,EAAC,GAAG,EAAE,CAAC,EAAA;AACvE,oBAAA,gBAAgB,KAChBJ,sBAAA,CAAA,aAAA,CAACK,qBAAU,IACV,OAAO,EAAE,OAAO,QAAQ,GAAG,QAAQ,EAAE,GAAG,IAAI,CAAC,EAC7C,KAAK,EAAE,UAAU,EACjB,SAAS,EAAC,MAAM,EAAA,EAEf,UAAU,CACC,CACb;AACD,oBAAAL,sBAAA,CAAA,aAAA,CAACK,qBAAU,EAAA,EACV,OAAO,EAAE,MAAO,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAuB,CAAC,KAAK,EAAE,EACzE,KAAK,EAAE,SAAS,EAAA,EAEf,SAAS,CACE,CACR,CACD,CACD,CACE;AAEX;;;;"}

package/lib/components/Modal.mjs

@@ -0,0 +1,34 @@
+import { Box } from './Box.mjs';
+import { IconButton } from './IconButton.mjs';
+import { Text } from './Text.mjs';
+import { generateShortId } from '@1ry/short-id';
+import React, { useMemo } from 'react';
+import { tv } from 'tailwind-variants';
+import MODALSTYLES from '../styles/Modal.module.scss.mjs';
+
+const modalStyles = tv({
+    base: [MODALSTYLES.modalBase],
+    variants: {
+        variant: {
+            default: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+const Modal = ({ onClose, onSubmit, id: customId, modalTitle, modalSubTitle = 'Press ESC key or click the button below to close', children, closeText = 'Close', closeIcon = (React.createElement(Text, { as: "span", variant: "wavy" }, "\u2716")), showSubmitButton, submitText, submitIcon, ...props }) => {
+    const id = useMemo(() => customId ?? generateShortId(7), [customId]);
+    return (React.createElement("dialog", { id: id, className: modalStyles({ variant: 'default' }) },
+        React.createElement(Box, { orientation: "none", id: `${id}_modal_box`, ...props, className: modalStyles({ variant: 'default' }) },
+            modalTitle && React.createElement(Box, null, modalTitle),
+            modalSubTitle && React.createElement(Box, null, modalSubTitle),
+            React.createElement(Box, { orientation: "vertical", id: `${id}_modal_inner`, className: modalStyles({ variant: 'default' }) },
+                React.createElement(Box, { orientation: "vertical" }, children),
+                React.createElement(Box, { align: "right", orientation: "horizontal", justify: "spaceBetween", gap: 4 },
+                    showSubmitButton && (React.createElement(IconButton, { onClick: () => (onSubmit ? onSubmit() : null), label: submitText, className: "ps-8" }, submitIcon)),
+                    React.createElement(IconButton, { onClick: () => document.getElementById(id).close(), label: closeText }, closeIcon))))));
+};
+
+export { Modal };
+//# sourceMappingURL=Modal.mjs.map

package/lib/components/Modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { Box, BoxProps } from '$components/Box'\nimport { IconButton } from '$components/IconButton'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { ReactNode, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport MODALSTYLES from '$styles/Modal.module.scss'\n\nconst modalStyles = tv({\n\tbase: [MODALSTYLES.modalBase],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t},\n})\n\nexport type ModalProps = BoxProps &\n\tVariantProps<typeof modalStyles> & {\n\t\tonClose?: () => void\n\t\tonSubmit?: () => void\n\t\tmodalTitle?: ReactNode\n\t\tmodalSubTitle?: ReactNode\n\t\tchildren?: ReactNode\n\t\tcloseIcon?: ReactNode\n\t\tcloseText?: string\n\t\tshowSubmitButton?: boolean\n\t\tsubmitText?: string\n\t\tsubmitIcon?: ReactNode\n\t}\nexport const Modal = ({\n\tonClose,\n\tonSubmit,\n\tid: customId,\n\tmodalTitle,\n\tmodalSubTitle = 'Press ESC key or click the button below to close',\n\tchildren,\n\tcloseText = 'Close',\n\tcloseIcon = (\n\t\t<Text as=\"span\" variant=\"wavy\">\n\t\t\t✖\n\t\t</Text>\n\t),\n\tshowSubmitButton,\n\tsubmitText,\n\tsubmitIcon,\n\t...props\n}: ModalProps) => {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\treturn (\n\t\t<dialog id={id} className={modalStyles({ variant: 'default' })}>\n\t\t\t<Box\n\t\t\t\torientation=\"none\"\n\t\t\t\tid={`${id}_modal_box`}\n\t\t\t\t{...props}\n\t\t\t\tclassName={modalStyles({ variant: 'default' })}\n\t\t\t>\n\t\t\t\t{modalTitle && <Box>{modalTitle}</Box>}\n\t\t\t\t{modalSubTitle && <Box>{modalSubTitle}</Box>}\n\t\t\t\t<Box\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\tid={`${id}_modal_inner`}\n\t\t\t\t\tclassName={modalStyles({ variant: 'default' })}\n\t\t\t\t>\n\t\t\t\t\t<Box orientation=\"vertical\">{children}</Box>\n\t\t\t\t\t<Box align=\"right\" orientation=\"horizontal\" justify=\"spaceBetween\" gap={4}>\n\t\t\t\t\t\t{showSubmitButton && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => (onSubmit ? onSubmit() : null)}\n\t\t\t\t\t\t\t\tlabel={submitText}\n\t\t\t\t\t\t\t\tclassName=\"ps-8\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{submitIcon}\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tonClick={() => (document.getElementById(id) as HTMLDialogElement).close()}\n\t\t\t\t\t\t\tlabel={closeText}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{closeIcon}\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t</Box>\n\t\t</dialog>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,WAAW,GAAG,EAAE,CAAC;AACtB,IAAA,IAAI,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC;AAC7B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,KAAA;AACD,CAAA,CAAC;AAeK,MAAM,KAAK,GAAG,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,QAAQ,EACZ,UAAU,EACV,aAAa,GAAG,kDAAkD,EAClE,QAAQ,EACR,SAAS,GAAG,OAAO,EACnB,SAAS,IACR,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAA,EAAA,QAAA,CAEvB,CACP,EACD,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,QACC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAA;QAC7D,KAAA,CAAA,aAAA,CAAC,GAAG,IACH,WAAW,EAAC,MAAM,EAClB,EAAE,EAAE,CAAA,EAAG,EAAE,CAAA,UAAA,CAAY,KACjB,KAAK,EACT,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAA;AAE7C,YAAA,UAAU,IAAI,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA,EAAE,UAAU,CAAO;AACrC,YAAA,aAAa,IAAI,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA,EAAE,aAAa,CAAO;YAC5C,KAAA,CAAA,aAAA,CAAC,GAAG,IACH,WAAW,EAAC,UAAU,EACtB,EAAE,EAAE,CAAA,EAAG,EAAE,cAAc,EACvB,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAA;AAE9C,gBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,WAAW,EAAC,UAAU,EAAA,EAAE,QAAQ,CAAO;AAC5C,gBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,YAAY,EAAC,OAAO,EAAC,cAAc,EAAC,GAAG,EAAE,CAAC,EAAA;AACvE,oBAAA,gBAAgB,KAChB,KAAA,CAAA,aAAA,CAAC,UAAU,IACV,OAAO,EAAE,OAAO,QAAQ,GAAG,QAAQ,EAAE,GAAG,IAAI,CAAC,EAC7C,KAAK,EAAE,UAAU,EACjB,SAAS,EAAC,MAAM,EAAA,EAEf,UAAU,CACC,CACb;AACD,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACV,OAAO,EAAE,MAAO,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAuB,CAAC,KAAK,EAAE,EACzE,KAAK,EAAE,SAAS,EAAA,EAEf,SAAS,CACE,CACR,CACD,CACD,CACE;AAEX;;;;"}

package/lib/components/Text.d.ts

@@ -0,0 +1,16 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { PaddingSize } from '$types/Padding';
+import { VariantProps } from '$utils/tv';
+type AllowedElements = 'p' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+declare const textStyles: any;
+type TextProps<T extends AllowedElements> = VariantProps<typeof textStyles> & {
+    as?: T;
+    paddingBefore?: PaddingSize;
+    /**
+     * if you set it to as=label
+     */
+    htmlFor?: string;
+} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'variant' | 'paddingBefore' | 'font' | 'size'>;
+export declare function Text<T extends AllowedElements = 'span'>({ variant, as, className, children, paddingBefore, font, size, ...props }: Readonly<TextProps<T>>): React.JSX.Element;
+export {};
+//# sourceMappingURL=Text.d.ts.map

package/lib/components/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAe,MAAM,OAAO,CAAA;AAGpE,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,KAAK,eAAe,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvF,QAAA,MAAM,UAAU,KAQd,CAAA;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,eAAe,IAAI,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG;IAC7E,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,aAAa,CAAC,EAAE,WAAW,CAAA;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;AAE3F,wBAAgB,IAAI,CAAC,CAAC,SAAS,eAAe,GAAG,MAAM,EAAE,EACxD,OAAmB,EACnB,EAAW,EACX,SAAS,EACT,QAAQ,EACR,aAAsB,EACtB,IAAe,EACf,IAAI,EACJ,GAAG,KAAK,EACR,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,qBAmBxB"}

package/lib/components/Text.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var TextFont = require('../types/TextFont.js');
+var Text_module = require('../styles/Text.module.scss.js');
+var React = require('react');
+var tailwindMerge = require('tailwind-merge');
+var TextVariant = require('../types/TextVariant.js');
+var Padding = require('../types/Padding.js');
+var TextSizing = require('../types/TextSizing.js');
+var tailwindVariants = require('tailwind-variants');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const textStyles = tailwindVariants.tv({
+    base: [Text_module.default.TextComponent],
+    variants: {
+        variant: TextVariant.VARIANT_MAP,
+        paddingBefore: Padding.PADDING_MAP,
+        font: TextFont.FONT_MAP,
+        size: TextSizing.SIZE_MAP,
+    },
+});
+function Text({ variant = 'default', as = 'span', className, children, paddingBefore = 'none', font = 'medium', size, ...props }) {
+    const Component = (as || 'span');
+    return (React__default.default.createElement(Component, { className: tailwindMerge.twMerge(textStyles({
+            variant,
+            paddingBefore,
+            font,
+            size,
+            className,
+        })), ...props }, children));
+}
+
+exports.Text = Text;
+//# sourceMappingURL=Text.js.map

package/lib/components/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../src/components/Text.tsx"],"sourcesContent":["import { FONT_MAP } from '$types/TextFont'\n\nimport styles from '$styles/Text.module.scss'\nimport React, { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { VARIANT_MAP } from '$types/TextVariant'\nimport { PADDING_MAP, PaddingSize } from '$types/Padding'\nimport { SIZE_MAP } from '$types/TextSizing'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\ntype AllowedElements = 'p' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nconst textStyles = tv({\n\tbase: [styles.TextComponent],\n\tvariants: {\n\t\tvariant: VARIANT_MAP,\n\t\tpaddingBefore: PADDING_MAP,\n\t\tfont: FONT_MAP,\n\t\tsize: SIZE_MAP,\n\t},\n})\n\ntype TextProps<T extends AllowedElements> = VariantProps<typeof textStyles> & {\n\tas?: T\n\tpaddingBefore?: PaddingSize\n\t/**\n\t * if you set it to as=label\n\t */\n\thtmlFor?: string\n} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'variant' | 'paddingBefore' | 'font' | 'size'>\n\nexport function Text<T extends AllowedElements = 'span'>({\n\tvariant = 'default',\n\tas = 'span',\n\tclassName,\n\tchildren,\n\tpaddingBefore = 'none',\n\tfont = 'medium',\n\tsize,\n\t...props\n}: Readonly<TextProps<T>>) {\n\tconst Component = (as || 'span') as ElementType\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={twMerge(\n\t\t\t\ttextStyles({\n\t\t\t\t\tvariant,\n\t\t\t\t\tpaddingBefore,\n\t\t\t\t\tfont,\n\t\t\t\t\tsize,\n\t\t\t\t\tclassName,\n\t\t\t\t}),\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n"],"names":["tv","styles","VARIANT_MAP","PADDING_MAP","FONT_MAP","SIZE_MAP","React","twMerge"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,UAAU,GAAGA,mBAAE,CAAC;AACrB,IAAA,IAAI,EAAE,CAACC,mBAAM,CAAC,aAAa,CAAC;AAC5B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAEC,uBAAW;AACpB,QAAA,aAAa,EAAEC,mBAAW;AAC1B,QAAA,IAAI,EAAEC,iBAAQ;AACd,QAAA,IAAI,EAAEC,mBAAQ;AACd,KAAA;AACD,CAAA,CAAC;AAWI,SAAU,IAAI,CAAqC,EACxD,OAAO,GAAG,SAAS,EACnB,EAAE,GAAG,MAAM,EACX,SAAS,EACT,QAAQ,EACR,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,GAAG,KAAK,EACgB,EAAA;AACxB,IAAA,MAAM,SAAS,IAAI,EAAE,IAAI,MAAM,CAAgB;IAE/C,QACCC,qCAAC,SAAS,EAAA,EACT,SAAS,EAAEC,qBAAO,CACjB,UAAU,CAAC;YACV,OAAO;YACP,aAAa;YACb,IAAI;YACJ,IAAI;YACJ,SAAS;AACT,SAAA,CAAC,CACF,EAAA,GACG,KAAK,IAER,QAAQ,CACE;AAEd;;;;"}

package/lib/components/Text.mjs

@@ -0,0 +1,31 @@
+import { FONT_MAP } from '../types/TextFont.mjs';
+import styles from '../styles/Text.module.scss.mjs';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { VARIANT_MAP } from '../types/TextVariant.mjs';
+import { PADDING_MAP } from '../types/Padding.mjs';
+import { SIZE_MAP } from '../types/TextSizing.mjs';
+import { tv } from 'tailwind-variants';
+
+const textStyles = tv({
+    base: [styles.TextComponent],
+    variants: {
+        variant: VARIANT_MAP,
+        paddingBefore: PADDING_MAP,
+        font: FONT_MAP,
+        size: SIZE_MAP,
+    },
+});
+function Text({ variant = 'default', as = 'span', className, children, paddingBefore = 'none', font = 'medium', size, ...props }) {
+    const Component = (as || 'span');
+    return (React.createElement(Component, { className: twMerge(textStyles({
+            variant,
+            paddingBefore,
+            font,
+            size,
+            className,
+        })), ...props }, children));
+}
+
+export { Text };
+//# sourceMappingURL=Text.mjs.map

package/lib/components/Text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.mjs","sources":["../../src/components/Text.tsx"],"sourcesContent":["import { FONT_MAP } from '$types/TextFont'\n\nimport styles from '$styles/Text.module.scss'\nimport React, { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { VARIANT_MAP } from '$types/TextVariant'\nimport { PADDING_MAP, PaddingSize } from '$types/Padding'\nimport { SIZE_MAP } from '$types/TextSizing'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\ntype AllowedElements = 'p' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nconst textStyles = tv({\n\tbase: [styles.TextComponent],\n\tvariants: {\n\t\tvariant: VARIANT_MAP,\n\t\tpaddingBefore: PADDING_MAP,\n\t\tfont: FONT_MAP,\n\t\tsize: SIZE_MAP,\n\t},\n})\n\ntype TextProps<T extends AllowedElements> = VariantProps<typeof textStyles> & {\n\tas?: T\n\tpaddingBefore?: PaddingSize\n\t/**\n\t * if you set it to as=label\n\t */\n\thtmlFor?: string\n} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'variant' | 'paddingBefore' | 'font' | 'size'>\n\nexport function Text<T extends AllowedElements = 'span'>({\n\tvariant = 'default',\n\tas = 'span',\n\tclassName,\n\tchildren,\n\tpaddingBefore = 'none',\n\tfont = 'medium',\n\tsize,\n\t...props\n}: Readonly<TextProps<T>>) {\n\tconst Component = (as || 'span') as ElementType\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={twMerge(\n\t\t\t\ttextStyles({\n\t\t\t\t\tvariant,\n\t\t\t\t\tpaddingBefore,\n\t\t\t\t\tfont,\n\t\t\t\t\tsize,\n\t\t\t\t\tclassName,\n\t\t\t\t}),\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;;;AAaA,MAAM,UAAU,GAAG,EAAE,CAAC;AACrB,IAAA,IAAI,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC;AAC5B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,IAAI,EAAE,QAAQ;AACd,KAAA;AACD,CAAA,CAAC;AAWI,SAAU,IAAI,CAAqC,EACxD,OAAO,GAAG,SAAS,EACnB,EAAE,GAAG,MAAM,EACX,SAAS,EACT,QAAQ,EACR,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,GAAG,KAAK,EACgB,EAAA;AACxB,IAAA,MAAM,SAAS,IAAI,EAAE,IAAI,MAAM,CAAgB;IAE/C,QACC,oBAAC,SAAS,EAAA,EACT,SAAS,EAAE,OAAO,CACjB,UAAU,CAAC;YACV,OAAO;YACP,aAAa;YACb,IAAI;YACJ,IAAI;YACJ,SAAS;AACT,SAAA,CAAC,CACF,EAAA,GACG,KAAK,IAER,QAAQ,CACE;AAEd;;;;"}

package/lib/index.css

@@ -0,0 +1 @@
+.Button-module_RyButton__nV7MM{align-items:center;border-color:#000;border-style:groove;color:#000;cursor:pointer;display:inline-flex;justify-content:center;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}@media (prefers-color-scheme:dark){.Button-module_RyButton__nV7MM{border-color:#fff;color:#fff}}.Button-module_RyButton__nV7MM:hover{transform:translateY(-2px)}.Button-module_RyButton__nV7MM:active{box-shadow:0 3px 8px rgba(0,0,0,.1);transform:translateY(0)}@media (prefers-color-scheme:dark){.Button-module_RyButton__nV7MM:active{box-shadow:0 3px 8px rgba(0,0,0,.5)}}.Button-module_RyButton__nV7MM:focus-visible{outline:2px solid currentColor;outline-offset:3px}.Button-module_RyButton__nV7MM.Button-module_glow__kLSOA:hover{background:linear-gradient(135deg,#ff8c00,#ff3c00);box-shadow:0 0 20px rgba(255,140,0,.8)}.Button-module_RyButton__nV7MM.Button-module_no-border__GJIXW{border:none}.Button-module_RyButton__nV7MM.Button-module_transparent__2-Nvv{background:transparent}.Card-module_cardBase__Ci80k{border:1px solid #000;border-radius:2;box-sizing:1}.Card-module_cardBase__Ci80k.Card-module_noBorder__TpVru{border:none}.Text-module_TextComponent__VMcCh{color:#000;font-family:Roboto,sans-serif}@media (prefers-color-scheme:dark){.Text-module_TextComponent__VMcCh{color:#fff}}.ErrorMessage-module_errorMessageBase__nhkCL{color:red;font-size:.8rem;margin-top:.25rem}.ErrorMessage-module_errorMessageBase__nhkCL.ErrorMessage-module_critical__YZit5{font-weight:700}.ErrorMessage-module_errorMessageBase__nhkCL.ErrorMessage-module_warning__Lzf8G{font-style:italic}.IconButton-module_iconButtonBase__gqXri{align-items:center;background:transparent;border:none;color:#000;cursor:pointer;display:inline-flex;justify-content:center;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}@media (prefers-color-scheme:dark){.IconButton-module_iconButtonBase__gqXri{color:#fff}}.IconButton-module_iconButtonBase__gqXri:hover{transform:translateY(-2px)}.IconButton-module_iconButtonBase__gqXri:active{box-shadow:0 3px 8px rgba(0,0,0,.1);transform:translateY(0)}@media (prefers-color-scheme:dark){.IconButton-module_iconButtonBase__gqXri:active{box-shadow:0 3px 8px rgba(0,0,0,.5)}}.IconButton-module_iconButtonBase__gqXri:focus-visible{outline:2px solid currentColor;outline-offset:3px}.IconButton-module_iconButtonBase__gqXri.IconButton-module_glow__86Wik:hover{background:linear-gradient(135deg,#ff8c00,#ff3c00);box-shadow:0 0 20px rgba(255,140,0,.8)}

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+export { Box } from '$components/Box';
+export { Button } from '$components/Button';
+export { Card } from '$components/Card';
+export { ErrorMessage } from '$components/ErrorMessage';
+export { IconButton } from '$components/IconButton';
+export { Text } from '$components/Text';
+export { Input } from '$components/Input';
+export { Modal } from '$components/Modal';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA"}