@1ry/basic-react-primitive-components 0.1.3 → 0.1.5
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/lib/components/Box.js.map +1 -1
- package/lib/components/Box.mjs.map +1 -1
- package/lib/components/Button.js.map +1 -1
- package/lib/components/Button.mjs.map +1 -1
- package/lib/components/IconButton.js.map +1 -1
- package/lib/components/IconButton.mjs.map +1 -1
- package/lib/components/Input.js.map +1 -1
- package/lib/components/Input.mjs.map +1 -1
- package/lib/components/Text.js +1 -1
- package/lib/components/Text.js.map +1 -1
- package/lib/components/Text.mjs +1 -1
- package/lib/components/Text.mjs.map +1 -1
- package/lib/index.d.ts +5 -5
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sources":["../../src/components/Box.tsx"],"sourcesContent":["import { generateShortId } from '@1ry/short-id'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport React, { Children, HTMLAttributes, ReactNode, useMemo } from 'react'\n\nconst boxStyles = tv({\n\tbase: 'transition-all duration-200',\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t\tnavbar: 'navbar',\n\t\t\tdock: 'dock',\n\t\t},\n\t\torientation: {\n\t\t\tnone: '',\n\t\t\thorizontal: 'flex flex-row',\n\t\t\tvertical: 'flex flex-col',\n\t\t},\n\t\talign: {\n\t\t\tnone: '',\n\t\t\tleft: 'items-start text-left',\n\t\t\tcenter: 'items-center text-center',\n\t\t\tright:\n\t\t\t\t'items-end text-right data-[has-gap=true]:place-self-end-safe data-[has-gap=true]:place-content-end-safe data-[has-gap=true]:place-items-end-safe',\n\t\t},\n\t\tjustify: {\n\t\t\tnone: 'justify-none',\n\t\t\tstart: 'justify-start',\n\t\t\tend: 'justify-end',\n\t\t\tcenter: 'justify-center',\n\t\t\tevenly: 'justify-evenly',\n\t\t\tspaceBetween: 'justify-between',\n\t\t},\n\t\tisolate: {\n\t\t\ttrue: 'isolate',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t\torientation: 'none',\n\t\talign: 'none',\n\t\tjustify: 'none',\n\t},\n})\n\nexport type BoxProps = HTMLAttributes<HTMLDivElement> &\n\tVariantProps<typeof boxStyles> & {\n\t\tas?: 'div' | 'nav' | 'footer' | 'main' | 'article' | 'aside' | 'section' | 'header'\n\t\tchildren?: ReactNode\n\t\tgap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\t}\n\nexport function Box({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\torientation = 'none',\n\talign = 'none',\n\tjustify = 'none',\n\tchildren,\n\tisolate = false,\n\tid: customId,\n\tgap = 0,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Box.js","sources":["../../src/components/Box.tsx"],"sourcesContent":["import { generateShortId } from '@1ry/short-id'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport React, { Children, HTMLAttributes, ReactNode, useMemo } from 'react'\n\nconst boxStyles = tv({\n\tbase: 'transition-all duration-200',\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t\tnavbar: 'navbar',\n\t\t\tdock: 'dock',\n\t\t},\n\t\torientation: {\n\t\t\tnone: '',\n\t\t\thorizontal: 'flex flex-row',\n\t\t\tvertical: 'flex flex-col',\n\t\t},\n\t\talign: {\n\t\t\tnone: '',\n\t\t\tleft: 'items-start text-left',\n\t\t\tcenter: 'items-center text-center',\n\t\t\tright:\n\t\t\t\t'items-end text-right data-[has-gap=true]:place-self-end-safe data-[has-gap=true]:place-content-end-safe data-[has-gap=true]:place-items-end-safe',\n\t\t},\n\t\tjustify: {\n\t\t\tnone: 'justify-none',\n\t\t\tstart: 'justify-start',\n\t\t\tend: 'justify-end',\n\t\t\tcenter: 'justify-center',\n\t\t\tevenly: 'justify-evenly',\n\t\t\tspaceBetween: 'justify-between',\n\t\t},\n\t\tisolate: {\n\t\t\ttrue: 'isolate',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t\torientation: 'none',\n\t\talign: 'none',\n\t\tjustify: 'none',\n\t},\n})\n\nexport type BoxProps = HTMLAttributes<HTMLDivElement> &\n\tVariantProps<typeof boxStyles> & {\n\t\tas?: 'div' | 'nav' | 'footer' | 'main' | 'article' | 'aside' | 'section' | 'header'\n\t\tchildren?: ReactNode\n\t\tgap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\t}\n\nexport function Box({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\torientation = 'none',\n\talign = 'none',\n\tjustify = 'none',\n\tchildren,\n\tisolate = false,\n\tid: customId,\n\tgap = 0,\n\t...props\n}: BoxProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tconst Component = variant === 'navbar' && !as ? 'nav' : as || 'div'\n\tconst childrenCount = useMemo(() => Children.count(children) ?? [], [children])\n\tconst gapStyle = gap ? { gap: `${gap * 0.25}rem` } : undefined\n\treturn (\n\t\t<Component\n\t\t\tid={id}\n\t\t\tstyle={{ ...gapStyle, ...props.style }}\n\t\t\tdata-has-gap={gap > 0 ? 'true' : undefined}\n\t\t\tclassName={boxStyles({\n\t\t\t\tvariant,\n\t\t\t\torientation,\n\t\t\t\talign,\n\t\t\t\tjustify,\n\t\t\t\tisolate,\n\t\t\t\tclassName,\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","useMemo","generateShortId","Children","React"],"mappings":";;;;;;;;;;AAKA,MAAM,SAAS,GAAGA,mBAAE,CAAC;AACpB,IAAA,IAAI,EAAE,6BAA6B;AACnC,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,SAAA;AACD,QAAA,WAAW,EAAE;AACZ,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,QAAQ,EAAE,eAAe;AACzB,SAAA;AACD,QAAA,KAAK,EAAE;AACN,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,IAAI,EAAE,uBAAuB;AAC7B,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,KAAK,EACJ,kJAAkJ;AACnJ,SAAA;AACD,QAAA,OAAO,EAAE;AACR,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,GAAG,EAAE,aAAa;AAClB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,YAAY,EAAE,iBAAiB;AAC/B,SAAA;AACD,QAAA,OAAO,EAAE;AACR,YAAA,IAAI,EAAE,SAAS;AACf,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,OAAO,EAAE,MAAM;AACf,KAAA;AACD,CAAA,CAAC;SASc,GAAG,CAAC,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,EACF,SAAS,EACT,WAAW,GAAG,MAAM,EACpB,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,MAAM,EAChB,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,EAAE,EAAE,QAAQ,EACZ,GAAG,GAAG,CAAC,EACP,GAAG,KAAK,EACE,EAAA;AACV,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,uBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,MAAM,SAAS,GAAG,OAAO,KAAK,QAAQ,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,EAAE,IAAI,KAAK;IAC7CD,aAAO,CAAC,MAAME,cAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,CAAA,GAAA,CAAK,EAAE,GAAG,SAAS;AAC9D,IAAA,QACCC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACT,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,kBACxB,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,SAAS,CAAC;YACpB,OAAO;YACP,WAAW;YACX,KAAK;YACL,OAAO;YACP,OAAO;YACP,SAAS;AACT,SAAA,CAAC,KACE,KAAK,EAAA,EAER,QAAQ,CACE;AAEd;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.mjs","sources":["../../src/components/Box.tsx"],"sourcesContent":["import { generateShortId } from '@1ry/short-id'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport React, { Children, HTMLAttributes, ReactNode, useMemo } from 'react'\n\nconst boxStyles = tv({\n\tbase: 'transition-all duration-200',\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t\tnavbar: 'navbar',\n\t\t\tdock: 'dock',\n\t\t},\n\t\torientation: {\n\t\t\tnone: '',\n\t\t\thorizontal: 'flex flex-row',\n\t\t\tvertical: 'flex flex-col',\n\t\t},\n\t\talign: {\n\t\t\tnone: '',\n\t\t\tleft: 'items-start text-left',\n\t\t\tcenter: 'items-center text-center',\n\t\t\tright:\n\t\t\t\t'items-end text-right data-[has-gap=true]:place-self-end-safe data-[has-gap=true]:place-content-end-safe data-[has-gap=true]:place-items-end-safe',\n\t\t},\n\t\tjustify: {\n\t\t\tnone: 'justify-none',\n\t\t\tstart: 'justify-start',\n\t\t\tend: 'justify-end',\n\t\t\tcenter: 'justify-center',\n\t\t\tevenly: 'justify-evenly',\n\t\t\tspaceBetween: 'justify-between',\n\t\t},\n\t\tisolate: {\n\t\t\ttrue: 'isolate',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t\torientation: 'none',\n\t\talign: 'none',\n\t\tjustify: 'none',\n\t},\n})\n\nexport type BoxProps = HTMLAttributes<HTMLDivElement> &\n\tVariantProps<typeof boxStyles> & {\n\t\tas?: 'div' | 'nav' | 'footer' | 'main' | 'article' | 'aside' | 'section' | 'header'\n\t\tchildren?: ReactNode\n\t\tgap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\t}\n\nexport function Box({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\torientation = 'none',\n\talign = 'none',\n\tjustify = 'none',\n\tchildren,\n\tisolate = false,\n\tid: customId,\n\tgap = 0,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Box.mjs","sources":["../../src/components/Box.tsx"],"sourcesContent":["import { generateShortId } from '@1ry/short-id'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport React, { Children, HTMLAttributes, ReactNode, useMemo } from 'react'\n\nconst boxStyles = tv({\n\tbase: 'transition-all duration-200',\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t\tnavbar: 'navbar',\n\t\t\tdock: 'dock',\n\t\t},\n\t\torientation: {\n\t\t\tnone: '',\n\t\t\thorizontal: 'flex flex-row',\n\t\t\tvertical: 'flex flex-col',\n\t\t},\n\t\talign: {\n\t\t\tnone: '',\n\t\t\tleft: 'items-start text-left',\n\t\t\tcenter: 'items-center text-center',\n\t\t\tright:\n\t\t\t\t'items-end text-right data-[has-gap=true]:place-self-end-safe data-[has-gap=true]:place-content-end-safe data-[has-gap=true]:place-items-end-safe',\n\t\t},\n\t\tjustify: {\n\t\t\tnone: 'justify-none',\n\t\t\tstart: 'justify-start',\n\t\t\tend: 'justify-end',\n\t\t\tcenter: 'justify-center',\n\t\t\tevenly: 'justify-evenly',\n\t\t\tspaceBetween: 'justify-between',\n\t\t},\n\t\tisolate: {\n\t\t\ttrue: 'isolate',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t\torientation: 'none',\n\t\talign: 'none',\n\t\tjustify: 'none',\n\t},\n})\n\nexport type BoxProps = HTMLAttributes<HTMLDivElement> &\n\tVariantProps<typeof boxStyles> & {\n\t\tas?: 'div' | 'nav' | 'footer' | 'main' | 'article' | 'aside' | 'section' | 'header'\n\t\tchildren?: ReactNode\n\t\tgap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\t}\n\nexport function Box({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\torientation = 'none',\n\talign = 'none',\n\tjustify = 'none',\n\tchildren,\n\tisolate = false,\n\tid: customId,\n\tgap = 0,\n\t...props\n}: BoxProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tconst Component = variant === 'navbar' && !as ? 'nav' : as || 'div'\n\tconst childrenCount = useMemo(() => Children.count(children) ?? [], [children])\n\tconst gapStyle = gap ? { gap: `${gap * 0.25}rem` } : undefined\n\treturn (\n\t\t<Component\n\t\t\tid={id}\n\t\t\tstyle={{ ...gapStyle, ...props.style }}\n\t\t\tdata-has-gap={gap > 0 ? 'true' : undefined}\n\t\t\tclassName={boxStyles({\n\t\t\t\tvariant,\n\t\t\t\torientation,\n\t\t\t\talign,\n\t\t\t\tjustify,\n\t\t\t\tisolate,\n\t\t\t\tclassName,\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":";;;;AAKA,MAAM,SAAS,GAAG,EAAE,CAAC;AACpB,IAAA,IAAI,EAAE,6BAA6B;AACnC,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,SAAA;AACD,QAAA,WAAW,EAAE;AACZ,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,QAAQ,EAAE,eAAe;AACzB,SAAA;AACD,QAAA,KAAK,EAAE;AACN,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,IAAI,EAAE,uBAAuB;AAC7B,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,KAAK,EACJ,kJAAkJ;AACnJ,SAAA;AACD,QAAA,OAAO,EAAE;AACR,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,GAAG,EAAE,aAAa;AAClB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,YAAY,EAAE,iBAAiB;AAC/B,SAAA;AACD,QAAA,OAAO,EAAE;AACR,YAAA,IAAI,EAAE,SAAS;AACf,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,OAAO,EAAE,MAAM;AACf,KAAA;AACD,CAAA,CAAC;SASc,GAAG,CAAC,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,EACF,SAAS,EACT,WAAW,GAAG,MAAM,EACpB,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,MAAM,EAChB,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,EAAE,EAAE,QAAQ,EACZ,GAAG,GAAG,CAAC,EACP,GAAG,KAAK,EACE,EAAA;AACV,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,MAAM,SAAS,GAAG,OAAO,KAAK,QAAQ,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,EAAE,IAAI,KAAK;IAC7C,OAAO,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,CAAA,GAAA,CAAK,EAAE,GAAG,SAAS;AAC9D,IAAA,QACC,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACT,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,kBACxB,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,SAAS,CAAC;YACpB,OAAO;YACP,WAAW;YACX,KAAK;YACL,OAAO;YACP,OAAO;YACP,SAAS;AACT,SAAA,CAAC,KACE,KAAK,EAAA,EAER,QAAQ,CACE;AAEd;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import styles from '$styles/Button.module.scss'\nimport { generateShortId } from '@1ry/short-id'\nimport type { ButtonHTMLAttributes } from 'react'\nimport React, { useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst buttonStyles = tv({\n\tbase: styles.buttonBase,\n\tvariants: {\n\t\tglowing: {\n\t\t\ttrue: styles.glow,\n\t\t},\n\t\ttransparent: {\n\t\t\ttrue: styles.transparent,\n\t\t},\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tVariantProps<typeof buttonStyles> & {\n\t\tasSubmit?: boolean\n\t}\n\nexport function Button({\n\tclassName,\n\tchildren,\n\tglowing = false,\n\tnoBorder = true,\n\ttransparent = true,\n\tasSubmit = false,\n\ttitle,\n\tid: customId,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import styles from '$styles/Button.module.scss'\nimport { generateShortId } from '@1ry/short-id'\nimport type { ButtonHTMLAttributes } from 'react'\nimport React, { useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst buttonStyles = tv({\n\tbase: styles.buttonBase,\n\tvariants: {\n\t\tglowing: {\n\t\t\ttrue: styles.glow,\n\t\t},\n\t\ttransparent: {\n\t\t\ttrue: styles.transparent,\n\t\t},\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tVariantProps<typeof buttonStyles> & {\n\t\tasSubmit?: boolean\n\t}\n\nexport function Button({\n\tclassName,\n\tchildren,\n\tglowing = false,\n\tnoBorder = true,\n\ttransparent = true,\n\tasSubmit = false,\n\ttitle,\n\tid: customId,\n\t...props\n}: ButtonProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tif (!title) {\n\t\tconsole.warn('button title is missing')\n\t}\n\tconst cname = buttonStyles({\n\t\tglowing,\n\t\tnoBorder,\n\t\ttransparent,\n\t\tclassName,\n\t})\n\tif (asSubmit) {\n\t\treturn (\n\t\t\t<button type=\"submit\" className={cname} title={title} id={id} {...props}>\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t)\n\t}\n\treturn (\n\t\t<button className={cname} title={title} id={id} {...props}>\n\t\t\t{children}\n\t\t</button>\n\t)\n}\n"],"names":["tv","styles","useMemo","generateShortId","React"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAY,GAAGA,mBAAE,CAAC;IACvB,IAAI,EAAEC,qBAAM,CAAC,UAAU;AACvB,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;YACR,IAAI,EAAEA,qBAAM,CAAC,IAAI;AACjB,SAAA;AACD,QAAA,WAAW,EAAE;YACZ,IAAI,EAAEA,qBAAM,CAAC,WAAW;AACxB,SAAA;AACD,QAAA,QAAQ,EAAE;YACT,IAAI,EAAEA,qBAAM,CAAC,QAAQ;AACrB,SAAA;AACD,KAAA;AACD,CAAA,CAAC;AAOI,SAAU,MAAM,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,IAAI,EACf,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACK,EAAA;AACb,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,uBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IACpE,IAAI,CAAC,KAAK,EAAE;AACX,QAAA,OAAO,CAAC,IAAI,CAAC,yBAAyB,CAAC;AACvC,IAAA;IACD,MAAM,KAAK,GAAG,YAAY,CAAC;QAC1B,OAAO;QACP,QAAQ;QACR,WAAW;QACX,SAAS;AACT,KAAA,CAAC;AACF,IAAA,IAAI,QAAQ,EAAE;QACb,QACCC,iDAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA,GAAM,KAAK,EAAA,EACrE,QAAQ,CACD;AAEV,IAAA;AACD,IAAA,QACCA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA,GAAM,KAAK,IACvD,QAAQ,CACD;AAEX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../src/components/Button.tsx"],"sourcesContent":["import styles from '$styles/Button.module.scss'\nimport { generateShortId } from '@1ry/short-id'\nimport type { ButtonHTMLAttributes } from 'react'\nimport React, { useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst buttonStyles = tv({\n\tbase: styles.buttonBase,\n\tvariants: {\n\t\tglowing: {\n\t\t\ttrue: styles.glow,\n\t\t},\n\t\ttransparent: {\n\t\t\ttrue: styles.transparent,\n\t\t},\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tVariantProps<typeof buttonStyles> & {\n\t\tasSubmit?: boolean\n\t}\n\nexport function Button({\n\tclassName,\n\tchildren,\n\tglowing = false,\n\tnoBorder = true,\n\ttransparent = true,\n\tasSubmit = false,\n\ttitle,\n\tid: customId,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../src/components/Button.tsx"],"sourcesContent":["import styles from '$styles/Button.module.scss'\nimport { generateShortId } from '@1ry/short-id'\nimport type { ButtonHTMLAttributes } from 'react'\nimport React, { useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst buttonStyles = tv({\n\tbase: styles.buttonBase,\n\tvariants: {\n\t\tglowing: {\n\t\t\ttrue: styles.glow,\n\t\t},\n\t\ttransparent: {\n\t\t\ttrue: styles.transparent,\n\t\t},\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tVariantProps<typeof buttonStyles> & {\n\t\tasSubmit?: boolean\n\t}\n\nexport function Button({\n\tclassName,\n\tchildren,\n\tglowing = false,\n\tnoBorder = true,\n\ttransparent = true,\n\tasSubmit = false,\n\ttitle,\n\tid: customId,\n\t...props\n}: ButtonProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tif (!title) {\n\t\tconsole.warn('button title is missing')\n\t}\n\tconst cname = buttonStyles({\n\t\tglowing,\n\t\tnoBorder,\n\t\ttransparent,\n\t\tclassName,\n\t})\n\tif (asSubmit) {\n\t\treturn (\n\t\t\t<button type=\"submit\" className={cname} title={title} id={id} {...props}>\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t)\n\t}\n\treturn (\n\t\t<button className={cname} title={title} id={id} {...props}>\n\t\t\t{children}\n\t\t</button>\n\t)\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,YAAY,GAAG,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC,UAAU;AACvB,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;YACR,IAAI,EAAE,MAAM,CAAC,IAAI;AACjB,SAAA;AACD,QAAA,WAAW,EAAE;YACZ,IAAI,EAAE,MAAM,CAAC,WAAW;AACxB,SAAA;AACD,QAAA,QAAQ,EAAE;YACT,IAAI,EAAE,MAAM,CAAC,QAAQ;AACrB,SAAA;AACD,KAAA;AACD,CAAA,CAAC;AAOI,SAAU,MAAM,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,IAAI,EACf,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACK,EAAA;AACb,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IACpE,IAAI,CAAC,KAAK,EAAE;AACX,QAAA,OAAO,CAAC,IAAI,CAAC,yBAAyB,CAAC;AACvC,IAAA;IACD,MAAM,KAAK,GAAG,YAAY,CAAC;QAC1B,OAAO;QACP,QAAQ;QACR,WAAW;QACX,SAAS;AACT,KAAA,CAAC;AACF,IAAA,IAAI,QAAQ,EAAE;QACb,QACC,gCAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA,GAAM,KAAK,EAAA,EACrE,QAAQ,CACD;AAEV,IAAA;AACD,IAAA,QACC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA,GAAM,KAAK,IACvD,QAAQ,CACD;AAEX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
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}:
|
|
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}: 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,EACS,EAAA;AACjB,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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
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}:
|
|
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}: 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,EACS,EAAA;AACjB,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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
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}:
|
|
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}: 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,EACI,EAAA;AACZ,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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
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}:
|
|
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}: 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,EACI,EAAA;AACZ,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/Text.js
CHANGED
|
@@ -22,7 +22,7 @@ const textStyles = tailwindVariants.tv({
|
|
|
22
22
|
size: TextSizing.SIZE_MAP,
|
|
23
23
|
},
|
|
24
24
|
});
|
|
25
|
-
function Text({ variant = 'default', as
|
|
25
|
+
function Text({ variant = 'default', as, className, children, paddingBefore = 'none', font = 'medium', size, ...props }) {
|
|
26
26
|
const Component = (as || 'span');
|
|
27
27
|
return (React__default.default.createElement(Component, { className: tailwindMerge.twMerge(textStyles({
|
|
28
28
|
variant,
|
|
@@ -1 +1 @@
|
|
|
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\nexport type 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
|
|
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\nexport type 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,\n\tclassName,\n\tchildren,\n\tpaddingBefore = 'none',\n\tfont = 'medium',\n\tsize,\n\t...props\n}: 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,EACF,SAAS,EACT,QAAQ,EACR,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,GAAG,KAAK,EACM,EAAA;AACd,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
CHANGED
|
@@ -16,7 +16,7 @@ const textStyles = tv({
|
|
|
16
16
|
size: SIZE_MAP,
|
|
17
17
|
},
|
|
18
18
|
});
|
|
19
|
-
function Text({ variant = 'default', as
|
|
19
|
+
function Text({ variant = 'default', as, className, children, paddingBefore = 'none', font = 'medium', size, ...props }) {
|
|
20
20
|
const Component = (as || 'span');
|
|
21
21
|
return (React.createElement(Component, { className: twMerge(textStyles({
|
|
22
22
|
variant,
|
|
@@ -1 +1 @@
|
|
|
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\nexport type 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
|
|
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\nexport type 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,\n\tclassName,\n\tchildren,\n\tpaddingBefore = 'none',\n\tfont = 'medium',\n\tsize,\n\t...props\n}: 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,EACF,SAAS,EACT,QAAQ,EACR,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,GAAG,KAAK,EACM,EAAA;AACd,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.d.ts
CHANGED
|
@@ -8,13 +8,13 @@ type BoxProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof boxStyles>
|
|
|
8
8
|
children?: ReactNode;
|
|
9
9
|
gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
|
|
10
10
|
};
|
|
11
|
-
declare function Box({ variant, as, className, orientation, align, justify, children, isolate, id: customId, gap, ...props }:
|
|
11
|
+
declare function Box({ variant, as, className, orientation, align, justify, children, isolate, id: customId, gap, ...props }: BoxProps): React.JSX.Element;
|
|
12
12
|
|
|
13
13
|
declare const buttonStyles: any;
|
|
14
14
|
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonStyles> & {
|
|
15
15
|
asSubmit?: boolean;
|
|
16
16
|
};
|
|
17
|
-
declare function Button({ className, children, glowing, noBorder, transparent, asSubmit, title, id: customId, ...props }:
|
|
17
|
+
declare function Button({ className, children, glowing, noBorder, transparent, asSubmit, title, id: customId, ...props }: ButtonProps): React.JSX.Element;
|
|
18
18
|
|
|
19
19
|
declare const cardStyles: any;
|
|
20
20
|
type CardProps = BoxProps & VariantProps<typeof cardStyles> & {};
|
|
@@ -32,7 +32,7 @@ type IconButtonProps = ButtonProps & VariantProps<typeof inputButtonStyles> & {
|
|
|
32
32
|
children?: ReactNode;
|
|
33
33
|
label?: string;
|
|
34
34
|
};
|
|
35
|
-
declare function IconButton({ className, children, label, id: customId, ...props }:
|
|
35
|
+
declare function IconButton({ className, children, label, id: customId, ...props }: IconButtonProps): React.JSX.Element;
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
38
|
* Defines the allowed padding sizes for the Text component.
|
|
@@ -57,7 +57,7 @@ type TextProps<T extends AllowedElements> = VariantProps<typeof textStyles> & {
|
|
|
57
57
|
*/
|
|
58
58
|
htmlFor?: string;
|
|
59
59
|
} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'variant' | 'paddingBefore' | 'font' | 'size'>;
|
|
60
|
-
declare function Text<T extends AllowedElements = 'span'>({ variant, as, className, children, paddingBefore, font, size, ...props }:
|
|
60
|
+
declare function Text<T extends AllowedElements = 'span'>({ variant, as, className, children, paddingBefore, font, size, ...props }: TextProps<T>): React.JSX.Element;
|
|
61
61
|
|
|
62
62
|
declare const InputStyles: any;
|
|
63
63
|
/**
|
|
@@ -67,7 +67,7 @@ type InputProps = HTMLProps<HTMLInputElement> & VariantProps<typeof InputStyles>
|
|
|
67
67
|
label?: string;
|
|
68
68
|
glowing?: boolean;
|
|
69
69
|
};
|
|
70
|
-
declare function Input({ label, name: customName, placeholder, width, glowing, type, id: customId, ...props }:
|
|
70
|
+
declare function Input({ label, name: customName, placeholder, width, glowing, type, id: customId, ...props }: InputProps): React.JSX.Element;
|
|
71
71
|
|
|
72
72
|
declare const modalStyles: any;
|
|
73
73
|
type ModalProps = BoxProps & VariantProps<typeof modalStyles> & {
|