@atom-learning/components 6.8.2 → 6.10.0

package/dist/components/textarea/Textarea.d.ts

@@ -1,18 +1,20 @@
 import * as React from 'react';
 declare const StyledTextarea: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     ref?: ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
-}, "appearance" | "state"> & {
+}, "appearance" | "theme" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     state?: "error" | undefined;
+    theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }>;
 export type TextareaProps = React.ComponentProps<typeof StyledTextarea>;
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     ref?: ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
-}, "appearance" | "state"> & {
+}, "appearance" | "theme" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     state?: "error" | undefined;
+    theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea/Textarea.js

@@ -43,18 +43,35 @@ var StyledTextarea = styled("textarea", {
 				"focus-within:z-1"
 			]
 		},
-		state: { error: [] }
+		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		}
 	},
 	defaultVariants: { appearance: "standard" },
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus-within:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus-within:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 });
 var Textarea = React$1.forwardRef((props, ref) => /* @__PURE__ */ React$1.createElement(StyledTextarea, {
 	...props,

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'text-md',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;AAIA,IAAM,iBAAiB,OAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,iBAAiB,EACf,YAAY,YACb;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,8BAA8B;EAC1D,CACF;CACF,CAAC;AAIF,IAAa,WAAW,QAAM,YAC3B,OAAO,QAAQ,wBAAA,cAAC,gBAAD;CAAgB,GAAI;CAAY;CAAO,CAAA,CACxD;AAED,SAAS,cAAc"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'text-md',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    },\n    theme: {\n      white: [],\n      grey: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;AAIA,IAAM,iBAAiB,OAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACF;CACD,iBAAiB,EACf,YAAY,YACb;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAIF,IAAa,WAAW,QAAM,YAC3B,OAAO,QAAQ,wBAAA,cAAC,gBAAD;CAAgB,GAAI;CAAY;CAAO,CAAA,CACxD;AAED,SAAS,cAAc"}

package/dist/components/textarea-field/TextareaField.d.ts

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWr
 import { TextareaProps } from '../../components/textarea/Textarea';
 type TextareaFieldProps = TextareaProps & FieldElementWrapperProps;
 export declare const TextareaField: {
-    ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: TextareaFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }: TextareaFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/textarea-field/TextareaField.js

@@ -5,12 +5,13 @@ import { Textarea } from "../textarea/Textarea.js";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/textarea-field/TextareaField.tsx
-var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
 		className,
 		description,
@@ -26,6 +27,7 @@ var TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));

package/dist/components/textarea-field/TextareaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Textarea, TextareaProps } from '~/components/textarea/Textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"mappings":";;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;AAE9C,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAUC,EARb,wBAAA,cAAC,UAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}
+{"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Textarea, TextareaProps } from '~/components/textarea/Textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...remainingProps\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"mappings":";;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAWC,EATb,wBAAA,cAAC,UAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}