@atom-learning/components 6.5.4 → 6.5.5

package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupItem.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive/TileInteractive'\nimport { styled } from '~/styled'\n\nconst StyledTileToggleGroupItem = styled(TileInteractive, {\n  base: [\n    'text-left',\n    'not-disabled:data-[state=on]:active:bg-(--interactive-3)',\n    'not-disabled:data-[state=on]:hover:bg-(--interactive-2)',\n    'data-[state=on]:before:-inset-px',\n    'data-[state=on]:before:absolute',\n    'data-[state=on]:before:rounded-[inherit]',\n    'data-[state=on]:before:inset-shadow-[var(--accent-8)_0px_0px_0px_2px]',\n    'data-[state=on]:before:z-1',\n    'data-[state=on]:bg-(--interactive-1)',\n    'data-[state=on]:border-(--accent-8)'\n  ]\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TTileToggleGroupItem) => (\n  <ToggleGroup.Item {...rest} asChild>\n    <StyledTileToggleGroupItem as=\"button\">\n      {children}\n    </StyledTileToggleGroupItem>\n  </ToggleGroup.Item>\n)\n"],"mappings":";;;;;AAMA,IAAM,IAA4B,EAAO,GAAiB,EACxD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAKW,KAAuB,EAClC,aACA,GAAG,QAEH,kBAAA,cAAC,EAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;CAIT,EAHjB,kBAAA,cAAC,GAAD,EAA2B,IAAG,UAEF,EADzB,EACyB,CACX"}
+{"version":3,"file":"TileToggleGroupItem.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive/TileInteractive'\nimport { styled } from '~/styled'\n\nconst StyledTileToggleGroupItem = styled(TileInteractive, {\n  base: [\n    'text-left',\n    'not-disabled:data-[state=on]:active:bg-(--interactive-3)',\n    'not-disabled:data-[state=on]:hover:bg-(--interactive-2)',\n    'data-[state=on]:before:-inset-px',\n    'data-[state=on]:before:absolute',\n    'data-[state=on]:before:rounded-[inherit]',\n    'data-[state=on]:before:inset-shadow-[var(--accent-8)_0px_0px_0px_2px]',\n    'data-[state=on]:before:z-1',\n    'data-[state=on]:bg-(--interactive-1)',\n    'data-[state=on]:border-(--accent-8)'\n  ]\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TTileToggleGroupItem) => (\n  <ToggleGroup.Item {...rest} asChild>\n    <StyledTileToggleGroupItem as=\"button\">\n      {children}\n    </StyledTileToggleGroupItem>\n  </ToggleGroup.Item>\n)\n"],"mappings":";;;;;AAMA,IAAM,4BAA4B,OAAO,iBAAiB,EACxD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAKF,IAAa,uBAAuB,EAClC,UACA,GAAG,WAEH,wBAAA,cAAC,YAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;CAIT,EAHjB,wBAAA,cAAC,2BAAD,EAA2B,IAAG,UAEF,EADzB,SACyB,CACX"}

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js

@@ -1,13 +1,13 @@
-import { ToggleGroup as e } from "../../utilities/radix-overrides/toggle-group/index.js";
-import t from "clsx";
-import * as n from "react";
+import { ToggleGroup } from "../../utilities/radix-overrides/toggle-group/index.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/tile-toggle-group/TileToggleGroupRoot.tsx
-var r = n.forwardRef((r, i) => /* @__PURE__ */ n.createElement(e.Root, {
-	ref: i,
-	...r,
-	className: t(r.className, "flex", "gap-2", r.orientation === "horizontal" && "flex-row", r.orientation === "vertical" && "flex-col", "flex-wrap")
+var TileToggleGroupRoot = React$1.forwardRef((props, ref) => /* @__PURE__ */ React$1.createElement(ToggleGroup.Root, {
+	ref,
+	...props,
+	className: clsx(props.className, "flex", "gap-2", props.orientation === "horizontal" && "flex-row", props.orientation === "vertical" && "flex-col", "flex-wrap")
 }));
 //#endregion
-export { r as TileToggleGroupRoot };
+export { TileToggleGroupRoot };
 
 //# sourceMappingURL=TileToggleGroupRoot.js.map

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupRoot.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>((props, ref) => (\n  <ToggleGroup.Root\n    ref={ref}\n    {...props}\n    className={clsx(\n      props.className,\n      'flex',\n      'gap-2',\n      props.orientation === 'horizontal' && 'flex-row',\n      props.orientation === 'vertical' && 'flex-col',\n      'flex-wrap'\n    )}\n  />\n))\n"],"mappings":";;;;AAOA,IAAa,IAAsB,EAAM,YAGtC,GAAO,MACR,kBAAA,cAAC,EAAY,MAAb;CACO;CACL,GAAI;CACJ,WAAW,EACT,EAAM,WACN,QACA,SACA,EAAM,gBAAgB,gBAAgB,YACtC,EAAM,gBAAgB,cAAc,YACpC,YACD;CACD,CAAA,CACF"}
+{"version":3,"file":"TileToggleGroupRoot.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  TTileToggleGroupRootProps\n>((props, ref) => (\n  <ToggleGroup.Root\n    ref={ref}\n    {...props}\n    className={clsx(\n      props.className,\n      'flex',\n      'gap-2',\n      props.orientation === 'horizontal' && 'flex-row',\n      props.orientation === 'vertical' && 'flex-col',\n      'flex-wrap'\n    )}\n  />\n))\n"],"mappings":";;;;AAOA,IAAa,sBAAsB,QAAM,YAGtC,OAAO,QACR,wBAAA,cAAC,YAAY,MAAb;CACO;CACL,GAAI;CACJ,WAAW,KACT,MAAM,WACN,QACA,SACA,MAAM,gBAAgB,gBAAgB,YACtC,MAAM,gBAAgB,cAAc,YACpC,YACD;CACD,CAAA,CACF"}

package/dist/components/tile-toggle-group/index.js

@@ -1,9 +1,10 @@
-import { TileToggleGroupItem as e } from "./TileToggleGroupItem.js";
-import { TileToggleGroupRoot as t } from "./TileToggleGroupRoot.js";
+import { TileToggleGroupItem } from "./TileToggleGroupItem.js";
+import { TileToggleGroupRoot } from "./TileToggleGroupRoot.js";
 //#region src/components/tile-toggle-group/index.ts
-var n = t;
-n.Item = e, n.displayName = "TileToggleGroup";
+var TileToggleGroup = TileToggleGroupRoot;
+TileToggleGroup.Item = TileToggleGroupItem;
+TileToggleGroup.displayName = "TileToggleGroup";
 //#endregion
-export { n as TileToggleGroup };
+export { TileToggleGroup };
 
 //# sourceMappingURL=index.js.map

package/dist/components/tile-toggle-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/tile-toggle-group/index.ts"],"sourcesContent":["import { TileToggleGroupItem } from './TileToggleGroupItem'\nimport { TileToggleGroupRoot } from './TileToggleGroupRoot'\n\ntype TTileToggleGroup = typeof TileToggleGroupRoot & {\n  Item: typeof TileToggleGroupItem\n}\n\nexport const TileToggleGroup = TileToggleGroupRoot as TTileToggleGroup\nTileToggleGroup.Item = TileToggleGroupItem\nTileToggleGroup.displayName = 'TileToggleGroup'\n"],"mappings":";;;AAOA,IAAa,IAAkB;AAC/B,EAAgB,OAAO,GACvB,EAAgB,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/tile-toggle-group/index.ts"],"sourcesContent":["import { TileToggleGroupItem } from './TileToggleGroupItem'\nimport { TileToggleGroupRoot } from './TileToggleGroupRoot'\n\ntype TTileToggleGroup = typeof TileToggleGroupRoot & {\n  Item: typeof TileToggleGroupItem\n}\n\nexport const TileToggleGroup = TileToggleGroupRoot as TTileToggleGroup\nTileToggleGroup.Item = TileToggleGroupItem\nTileToggleGroup.displayName = 'TileToggleGroup'\n"],"mappings":";;;AAOA,IAAa,kBAAkB;AAC/B,gBAAgB,OAAO;AACvB,gBAAgB,cAAc"}

package/dist/components/toast/Toast.js

@@ -1,16 +1,17 @@
-import { styled as e } from "../../styled.js";
-import { useToastContext as t } from "./ToastContext.js";
-import { ToastCloseButton as n } from "./ToastCloseButton.js";
-import { ToastIcon as r } from "./ToastIcon.js";
-import * as i from "react";
+import { styled } from "../../styled.js";
+import { useToastContext } from "./ToastContext.js";
+import { ToastCloseButton } from "./ToastCloseButton.js";
+import { ToastIcon } from "./ToastIcon.js";
+import * as React$1 from "react";
 //#region src/components/toast/Toast.tsx
-var a = e("div", {
+var StyledToast = styled("div", {
 	base: [
 		"flex",
 		"items-center",
 		"pointer-events-auto",
 		"rounded-md",
 		"shadow-md",
+		"box-border",
 		"text-white",
 		"min-h-12",
 		"relative",
@@ -26,15 +27,17 @@ var a = e("div", {
 		success: ["bg-success"],
 		error: ["bg-danger"]
 	} }
-}), o = (e) => {
-	let { type: n } = t();
-	return /* @__PURE__ */ i.createElement(a, {
-		type: e.type || n,
-		...e
+});
+var Toast = (props) => {
+	const { type } = useToastContext();
+	return /* @__PURE__ */ React$1.createElement(StyledToast, {
+		type: props.type || type,
+		...props
 	});
 };
-o.Icon = r, o.Close = n;
+Toast.Icon = ToastIcon;
+Toast.Close = ToastCloseButton;
 //#endregion
-export { o as Toast };
+export { Toast };
 
 //# sourceMappingURL=Toast.js.map

package/dist/components/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { useToastContext } from './ToastContext'\nimport { ToastIcon } from './ToastIcon'\n\nexport const StyledToast = styled('div', {\n  base: [\n    'flex',\n    'items-center',\n    'pointer-events-auto',\n    'rounded-md',\n    'shadow-md',\n    'text-white',\n    'min-h-12',\n    'relative',\n    'px-4',\n    'py-1',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[colors,transform]'\n  ],\n  variants: {\n    type: {\n      loading: ['bg-info'],\n      blank: ['bg-info'],\n      success: ['bg-success'],\n      error: ['bg-danger']\n    }\n  }\n})\n\nexport const Toast = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  return <StyledToast type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"mappings":";;;;;;AAQA,IAAa,IAAc,EAAO,OAAO;CACvC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,SAAS,CAAC,UAAU;EACpB,OAAO,CAAC,UAAU;EAClB,SAAS,CAAC,aAAa;EACvB,OAAO,CAAC,YAAY;EACrB,EACF;CACF,CAAC,EAEW,KAAS,MAAoD;CACxE,IAAM,EAAE,YAAS,GAAiB;AAClC,QAAO,kBAAA,cAAC,GAAD;EAAa,MAAM,EAAM,QAAQ;EAAM,GAAI;EAAS,CAAA;;AAG7D,EAAM,OAAO,GACb,EAAM,QAAQ"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { useToastContext } from './ToastContext'\nimport { ToastIcon } from './ToastIcon'\n\nexport const StyledToast = styled('div', {\n  base: [\n    'flex',\n    'items-center',\n    'pointer-events-auto',\n    'rounded-md',\n    'shadow-md',\n    'box-border',\n    'text-white',\n    'min-h-12',\n    'relative',\n    'px-4',\n    'py-1',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[colors,transform]'\n  ],\n  variants: {\n    type: {\n      loading: ['bg-info'],\n      blank: ['bg-info'],\n      success: ['bg-success'],\n      error: ['bg-danger']\n    }\n  }\n})\n\nexport const Toast = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  return <StyledToast type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"mappings":";;;;;;AAQA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,SAAS,CAAC,UAAU;EACpB,OAAO,CAAC,UAAU;EAClB,SAAS,CAAC,aAAa;EACvB,OAAO,CAAC,YAAY;EACrB,EACF;CACF,CAAC;AAEF,IAAa,SAAS,UAAoD;CACxE,MAAM,EAAE,SAAS,iBAAiB;AAClC,QAAO,wBAAA,cAAC,aAAD;EAAa,MAAM,MAAM,QAAQ;EAAM,GAAI;EAAS,CAAA;;AAG7D,MAAM,OAAO;AACb,MAAM,QAAQ"}

package/dist/components/toast/ToastCloseButton.js

@@ -1,23 +1,24 @@
-import { Icon as e } from "../icon/Icon.js";
-import { ActionIcon as t } from "../action-icon/ActionIcon.js";
-import { useToastContext as n } from "./ToastContext.js";
-import r from "clsx";
-import * as i from "react";
-import { Close as a } from "@atom-learning/icons";
-import { toast as o } from "react-hot-toast";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { useToastContext } from "./ToastContext.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { Close } from "@atom-learning/icons";
+import { toast } from "react-hot-toast";
 //#region src/components/toast/ToastCloseButton.tsx
-var s = ({ onDismiss: s, label: c = "Close alert", ...l }) => {
-	let { id: u } = n();
-	return /* @__PURE__ */ i.createElement(t, {
-		label: c,
+var ToastCloseButton = ({ onDismiss, label = "Close alert", ...rest }) => {
+	const { id } = useToastContext();
+	return /* @__PURE__ */ React$1.createElement(ActionIcon, {
+		label,
 		onClick: () => {
-			o.dismiss(u), s?.();
+			toast.dismiss(id);
+			onDismiss?.();
 		},
-		...l,
-		className: r("text-white", "-mr-2", "hover:opacity-80", "hover:text-white", "focus:opacity-80", "focus:text-white")
-	}, /* @__PURE__ */ i.createElement(e, { is: a }));
+		...rest,
+		className: clsx("text-white", "-mr-2", "hover:opacity-80", "hover:text-white", "focus:opacity-80", "focus:text-white")
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close }));
 };
 //#endregion
-export { s as ToastCloseButton };
+export { ToastCloseButton };
 
 //# sourceMappingURL=ToastCloseButton.js.map

package/dist/components/toast/ToastCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseButton.js","names":[],"sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastContext'\n\nexport interface ToastCloseButtonProps extends Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'label' | 'children'\n> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={clsx(\n        'text-white',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-white',\n        'focus:opacity-80',\n        'focus:text-white'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAa,KAAoB,EAC/B,cACA,WAAQ,eACR,GAAG,QACqC;CACxC,IAAM,EAAE,UAAO,GAAiB;AAEhC,QACE,kBAAA,cAAC,GAAD;EACS;EACP,eAAe;AAEb,GADA,EAAM,QAAQ,EAAG,EACjB,KAAa;;EAEf,GAAI;EACJ,WAAW,EACT,cACA,SACA,oBACA,oBACA,oBACA,mBACD;EAGU,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAS,CAAA,CACR"}
+{"version":3,"file":"ToastCloseButton.js","names":[],"sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastContext'\n\nexport interface ToastCloseButtonProps extends Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'label' | 'children'\n> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={clsx(\n        'text-white',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-white',\n        'focus:opacity-80',\n        'focus:text-white'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAa,oBAAoB,EAC/B,WACA,QAAQ,eACR,GAAG,WACqC;CACxC,MAAM,EAAE,OAAO,iBAAiB;AAEhC,QACE,wBAAA,cAAC,YAAD;EACS;EACP,eAAe;AACb,SAAM,QAAQ,GAAG;AACjB,gBAAa;;EAEf,GAAI;EACJ,WAAW,KACT,cACA,SACA,oBACA,oBACA,oBACA,mBACD;EAGU,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR"}

package/dist/components/toast/ToastContext.js

@@ -1,11 +1,12 @@
-import * as e from "react";
+import * as React$1 from "react";
 //#region src/components/toast/ToastContext.tsx
-var t = e.createContext(null), n = () => {
-	let n = e.useContext(t);
-	if (!n) throw Error("useToastContext must be used within a ToastProvider");
-	return n;
+var ToastContext = React$1.createContext(null);
+var useToastContext = () => {
+	const context = React$1.useContext(ToastContext);
+	if (!context) throw new Error("useToastContext must be used within a ToastProvider");
+	return context;
 };
 //#endregion
-export { t as ToastContext, n as useToastContext };
+export { ToastContext, useToastContext };
 
 //# sourceMappingURL=ToastContext.js.map

package/dist/components/toast/ToastContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.js","names":[],"sources":["../../../src/components/toast/ToastContext.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { Toast } from 'react-hot-toast/dist/core/types'\n\nexport const ToastContext = React.createContext<Pick<\n  Toast,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAGA,IAAa,IAAe,EAAM,cAGxB,KAAK,EAEF,UAAwB;CACnC,IAAM,IAAU,EAAM,WAAW,EAAa;AAE9C,KAAI,CAAC,EACH,OAAU,MAAM,sDAAsD;AAGxE,QAAO"}
+{"version":3,"file":"ToastContext.js","names":[],"sources":["../../../src/components/toast/ToastContext.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { Toast } from 'react-hot-toast/dist/core/types'\n\nexport const ToastContext = React.createContext<Pick<\n  Toast,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAGA,IAAa,eAAe,QAAM,cAGxB,KAAK;AAEf,IAAa,wBAAwB;CACnC,MAAM,UAAU,QAAM,WAAW,aAAa;AAE9C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO"}

package/dist/components/toast/ToastIcon.js

@@ -1,12 +1,12 @@
-import { Icon as e } from "../icon/Icon.js";
-import t from "react";
+import { Icon } from "../icon/Icon.js";
+import React from "react";
 //#region src/components/toast/ToastIcon.tsx
-var n = (n) => /* @__PURE__ */ t.createElement(e, {
+var ToastIcon = (props) => /* @__PURE__ */ React.createElement(Icon, {
 	size: "sm",
-	...n,
+	...props,
 	className: "mr-3 flex-[0_0_auto]"
 });
 //#endregion
-export { n as ToastIcon };
+export { ToastIcon };
 
 //# sourceMappingURL=ToastIcon.js.map

package/dist/components/toast/ToastIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastIcon.js","names":[],"sources":["../../../src/components/toast/ToastIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '../icon/Icon'\n\nexport const ToastIcon = (\n  props: React.ComponentProps<typeof Icon>\n): JSX.Element => <Icon size=\"sm\" {...props} className=\"mr-3 flex-[0_0_auto]\" />\n"],"mappings":";;;AAIA,IAAa,KACX,MACgB,kBAAA,cAAC,GAAD;CAAM,MAAK;CAAK,GAAI;CAAO,WAAU;CAAyB,CAAA"}
+{"version":3,"file":"ToastIcon.js","names":[],"sources":["../../../src/components/toast/ToastIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '../icon/Icon'\n\nexport const ToastIcon = (\n  props: React.ComponentProps<typeof Icon>\n): JSX.Element => <Icon size=\"sm\" {...props} className=\"mr-3 flex-[0_0_auto]\" />\n"],"mappings":";;;AAIA,IAAa,aACX,UACgB,sBAAA,cAAC,MAAD;CAAM,MAAK;CAAK,GAAI;CAAO,WAAU;CAAyB,CAAA"}

package/dist/components/toast/ToastProvider.js

@@ -1,19 +1,20 @@
-import { styled as e } from "../../styled.js";
-import { Text as t } from "../text/Text.js";
-import { Spacer as n } from "../spacer/Spacer.js";
-import { ToastContext as r } from "./ToastContext.js";
-import { Toast as i } from "./Toast.js";
-import * as a from "react";
-import { Error as o } from "@atom-learning/icons";
-import s, { useToaster as c } from "react-hot-toast";
+import { styled } from "../../styled.js";
+import { Text } from "../text/Text.js";
+import { Spacer } from "../spacer/Spacer.js";
+import { ToastContext } from "./ToastContext.js";
+import { Toast } from "./Toast.js";
+import * as React$1 from "react";
+import { Error } from "@atom-learning/icons";
+import toast$1, { useToaster } from "react-hot-toast";
 //#region src/components/toast/ToastProvider.tsx
-var l = e("div", { base: [
+var ToastProviderBase = styled("div", { base: [
 	"fixed",
 	"z-2147483647",
 	"inset-2",
 	"pointer-events-none",
 	"sm:top-3"
-] }), u = e("div", {
+] });
+var ToastWrapper = styled("div", {
 	base: [
 		"absolute",
 		"w-full",
@@ -21,6 +22,7 @@ var l = e("div", { base: [
 		"justify-center",
 		"items-center",
 		"rounded-sm",
+		"box-border",
 		"min-h-12",
 		"[--slide-opacity-out:0]",
 		"[--slide-direction-out-y:-100%]"
@@ -29,32 +31,36 @@ var l = e("div", { base: [
 		true: ["motion-safe:animate-slide-direction-in"],
 		false: ["opacity-0", "motion-safe:animate-slide-direction-out"]
 	} }
-}), d = ({ children: e, className: s }) => {
-	let { toasts: d, handlers: f } = c(), { startPause: p, endPause: m, calculateOffset: h, updateHeight: g } = f;
-	return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(l, {
-		onMouseEnter: p,
-		onMouseLeave: m,
-		className: s
-	}, d.map((e) => {
-		let { message: s } = e, c = h(e.id, {
-			reverseOrder: !0,
+});
+var ToastProvider = ({ children, className }) => {
+	const { toasts, handlers } = useToaster();
+	const { startPause, endPause, calculateOffset, updateHeight } = handlers;
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(ToastProviderBase, {
+		onMouseEnter: startPause,
+		onMouseLeave: endPause,
+		className
+	}, toasts.map((toast) => {
+		const { message: children } = toast;
+		const offset = calculateOffset(toast.id, {
+			reverseOrder: true,
 			margin: 8
 		});
-		return /* @__PURE__ */ a.createElement(u, {
-			key: e.id,
-			ref: (t) => {
-				t && e.height === void 0 && g(e.id, t.getBoundingClientRect().height);
-			},
-			visible: e.visible,
-			role: e.role,
-			"aria-live": e.ariaLive,
-			style: { "--offset": `${c}px` },
+		const ref = (el) => {
+			if (el && toast.height === void 0) updateHeight(toast.id, el.getBoundingClientRect().height);
+		};
+		return /* @__PURE__ */ React$1.createElement(ToastWrapper, {
+			key: toast.id,
+			ref,
+			visible: toast.visible,
+			role: toast.role,
+			"aria-live": toast.ariaLive,
+			style: { "--offset": `${offset}px` },
 			className: "top-(--offset)"
-		}, /* @__PURE__ */ a.createElement(r.Provider, { value: e }, typeof s == "function" ? s(e) : a.isValidElement(s) ? s : /* @__PURE__ */ a.createElement(i, { className: "w-100" }, e.type === "error" && /* @__PURE__ */ a.createElement(i.Icon, { is: o }), /* @__PURE__ */ a.createElement(t, null, s), /* @__PURE__ */ a.createElement(n, null), /* @__PURE__ */ a.createElement(i.Close, null))));
-	})), e);
+		}, /* @__PURE__ */ React$1.createElement(ToastContext.Provider, { value: toast }, typeof children === "function" ? children(toast) : React$1.isValidElement(children) ? children : /* @__PURE__ */ React$1.createElement(Toast, { className: "w-100" }, toast.type === "error" && /* @__PURE__ */ React$1.createElement(Toast.Icon, { is: Error }), /* @__PURE__ */ React$1.createElement(Text, null, children), /* @__PURE__ */ React$1.createElement(Spacer, null), /* @__PURE__ */ React$1.createElement(Toast.Close, null))));
+	})), children);
 };
-d.displayName = "ToastProvider";
+ToastProvider.displayName = "ToastProvider";
 //#endregion
-export { d as ToastProvider, s as toast };
+export { ToastProvider, toast$1 as toast };
 
 //# sourceMappingURL=ToastProvider.js.map

package/dist/components/toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n  base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast.id, {\n            reverseOrder: true,\n            margin: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.role}\n              aria-live={toast.ariaLive}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAoB,EAAO,OAAO,EACtC,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;CAAW,EAC9E,CAAC,EAEI,IAAe,EAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,SAAS;EACP,MAAM,CAAC,yCAAyC;EAChD,OAAO,CAAC,aAAa,0CAA0C;EAChE,EACF;CACF,CAAC,EAEW,KAAiB,EAC5B,aACA,mBACqD;CACrD,IAAM,EAAE,WAAQ,gBAAa,GAAY,EACnC,EAAE,eAAY,aAAU,oBAAiB,oBAAiB;AAEhE,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,GAAD;EACE,cAAc;EACd,cAAc;EACH;EA2CO,EAzCjB,EAAO,KAAK,MAAU;EACrB,IAAM,EAAE,SAAS,MAAa,GAExB,IAAS,EAAgB,EAAM,IAAI;GACvC,cAAc;GACd,QAAQ;GACT,CAAC;AAQF,SACE,kBAAA,cAAC,GAAD;GACE,KAAK,EAAM;GACN,MATI,MAA8B;AACzC,IAAI,KAAM,EAAM,WAAW,KAAA,KACzB,EAAa,EAAM,IAAI,EAAG,uBAAuB,CAAC,OAAO;;GAQzD,SAAS,EAAM;GACf,MAAM,EAAM;GACZ,aAAW,EAAM;GACjB,OAAO,EAAE,YAAY,GAAG,EAAO,KAAK;GACpC,WAAU;GAgBG,EAdb,kBAAA,cAAC,EAAa,UAAd,EAAuB,OAAO,GAaN,EAZrB,OAAO,KAAa,aACnB,EAAS,EAAM,GACb,EAAM,eAAe,EAAS,GAChC,IAEA,kBAAA,cAAC,GAAD,EAAO,WAAU,SAKT,EAJL,EAAM,SAAS,WAAW,kBAAA,cAAC,EAAM,MAAP,EAAY,IAAI,GAAS,CAAA,EACpD,kBAAA,cAAC,GAAA,MAAM,EAAgB,EACvB,kBAAA,cAAC,GAAA,KAAS,EACV,kBAAA,cAAC,EAAM,OAAA,KAAQ,CACT,CAEY,CACX;GAEjB,CACgB,EACnB,EACA;;AAIP,EAAc,cAAc"}
+{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n  base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'box-border',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast.id, {\n            reverseOrder: true,\n            margin: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.role}\n              aria-live={toast.ariaLive}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;AAcA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;CAAW,EAC9E,CAAC;AAEF,IAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,SAAS;EACP,MAAM,CAAC,yCAAyC;EAChD,OAAO,CAAC,aAAa,0CAA0C;EAChE,EACF;CACF,CAAC;AAEF,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,YAAY;CACzC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;AAEhE,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;EA2CO,EAzCjB,OAAO,KAAK,UAAU;EACrB,MAAM,EAAE,SAAS,aAAa;EAE9B,MAAM,SAAS,gBAAgB,MAAM,IAAI;GACvC,cAAc;GACd,QAAQ;GACT,CAAC;EAEF,MAAM,OAAO,OAA8B;AACzC,OAAI,MAAM,MAAM,WAAW,KAAA,EACzB,cAAa,MAAM,IAAI,GAAG,uBAAuB,CAAC,OAAO;;AAI7D,SACE,wBAAA,cAAC,cAAD;GACE,KAAK,MAAM;GACN;GACL,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,aAAW,MAAM;GACjB,OAAO,EAAE,YAAY,GAAG,OAAO,KAAK;GACpC,WAAU;GAgBG,EAdb,wBAAA,cAAC,aAAa,UAAd,EAAuB,OAAO,OAaN,EAZrB,OAAO,aAAa,aACnB,SAAS,MAAM,GACb,QAAM,eAAe,SAAS,GAChC,WAEA,wBAAA,cAAC,OAAD,EAAO,WAAU,SAKT,EAJL,MAAM,SAAS,WAAW,wBAAA,cAAC,MAAM,MAAP,EAAY,IAAI,OAAS,CAAA,EACpD,wBAAA,cAAC,MAAA,MAAM,SAAgB,EACvB,wBAAA,cAAC,QAAA,KAAS,EACV,wBAAA,cAAC,MAAM,OAAA,KAAQ,CACT,CAEY,CACX;GAEjB,CACgB,EACnB,SACA;;AAIP,cAAc,cAAc"}

package/dist/components/toggle-group/ToggleGroupButton.js

@@ -1,10 +1,10 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { modernVariant as n, standardVariant as r } from "./ToggleGroupItem.js";
-import * as i from "react";
-import * as a from "@radix-ui/react-toggle-group";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { modernVariant, standardVariant } from "./ToggleGroupItem.js";
+import * as React$1 from "react";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
 //#region src/components/toggle-group/ToggleGroupButton.tsx
-var o = e(a.Item, {
+var StyledButton = styled(ToggleGroup.Item, {
 	base: [
 		"cursor-pointer",
 		"disabled:cursor-not-allowed",
@@ -40,59 +40,68 @@ var o = e(a.Item, {
 		},
 		isIconOnly: { true: [] },
 		theme: {
-			standard: r,
-			modern: n
+			standard: standardVariant,
+			modern: modernVariant
 		}
 	},
 	compoundVariants: [
 		{
-			isIconOnly: !0,
+			isIconOnly: true,
 			size: "sm",
 			class: ["min-w-8", "p-0"]
 		},
 		{
-			isIconOnly: !0,
+			isIconOnly: true,
 			size: "md",
 			class: ["min-w-10", "p-0"]
 		},
 		{
-			isIconOnly: !0,
+			isIconOnly: true,
 			size: "lg",
 			class: ["min-w-12", "p-0"]
 		},
 		{
-			isIconOnly: !0,
+			isIconOnly: true,
 			size: "sm",
 			theme: "modern",
 			class: ["min-w-10", "p-0"]
 		},
 		{
-			isIconOnly: !0,
+			isIconOnly: true,
 			size: "md",
 			theme: "modern",
 			class: ["min-w-12", "p-0"]
 		},
 		{
-			isIconOnly: !0,
+			isIconOnly: true,
 			size: "lg",
 			theme: "modern",
 			class: ["min-w-15", "p-0"]
 		}
 	]
-}, { enabledResponsiveVariants: !0 }), s = i.forwardRef(({ size: e = "md", theme: n = "standard", children: r, ...a }, s) => {
-	let c = i.Children.toArray(r), l = c.length <= 1, u = l && i.isValidElement(c[0]) && c[0]?.type === t;
-	return /* @__PURE__ */ i.createElement(o, {
-		ref: s,
-		size: e,
-		isIconOnly: u,
-		theme: n,
-		...a
-	}, c.map((n) => !l && (typeof n == "string" || typeof n == "number") ? /* @__PURE__ */ i.createElement("span", { key: n }, n) : i.isValidElement(n) && n?.type === t ? i.cloneElement(n, {
-		...n.props,
-		size: e
-	}) : n));
+}, { enabledResponsiveVariants: true });
+var ToggleGroupButton = React$1.forwardRef(({ size = "md", theme = "standard", children, ...rest }, ref) => {
+	const childrenArray = React$1.Children.toArray(children);
+	const isSingleChild = childrenArray.length <= 1;
+	const isIconOnly = isSingleChild && React$1.isValidElement(childrenArray[0]) && childrenArray[0]?.type === Icon;
+	return /* @__PURE__ */ React$1.createElement(StyledButton, {
+		ref,
+		size,
+		isIconOnly,
+		theme,
+		...rest
+	}, childrenArray.map((child) => {
+		if (!isSingleChild && (typeof child === "string" || typeof child === "number")) return /* @__PURE__ */ React$1.createElement("span", { key: child }, child);
+		if (React$1.isValidElement(child)) {
+			if (child?.type === Icon) return React$1.cloneElement(child, {
+				...child.props,
+				size
+			});
+		}
+		return child;
+	}));
 });
 //#endregion
-export { s as ToggleGroupButton };
+export { ToggleGroupButton };
 
 //# sourceMappingURL=ToggleGroupButton.js.map

package/dist/components/toggle-group/ToggleGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { modernVariant, standardVariant } from './ToggleGroupItem'\n\nexport const StyledButton = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'grow',\n      'flex',\n      'items-center',\n      'justify-center',\n      'font-semibold',\n      'leading-none',\n      'py-1'\n    ],\n    variants: {\n      size: {\n        sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n        md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n        lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n      },\n      isIconOnly: {\n        true: []\n      },\n      theme: {\n        standard: standardVariant,\n        modern: modernVariant\n      }\n    },\n    compoundVariants: [\n      {\n        isIconOnly: true,\n        size: 'sm',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        theme: 'modern',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        theme: 'modern',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        theme: 'modern',\n        class: ['min-w-15', 'p-0']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const ToggleGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledButton>\n>(({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton\n      ref={ref}\n      size={size}\n      isIconOnly={isIconOnly}\n      theme={theme}\n      {...rest}\n    >\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (React.isValidElement(child)) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, { ...child.props, size })\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledButton>\n  )\n})\n"],"mappings":";;;;;;AAQA,IAAa,IAAe,EAC1B,EAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAmB;IAAW;IAAQ;IAAU;GACrD,IAAI;IAAC;IAAmB;IAAY;IAAQ;IAAU;GACtD,IAAI;IAAC;IAAmB;IAAY;IAAQ;IAAU;GACvD;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACD,OAAO;GACL,UAAU;GACV,QAAQ;GACT;EACF;CACD,kBAAkB;EAChB;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,MAAM;GAC1B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEY,IAAoB,EAAM,YAGpC,EAAE,UAAO,MAAM,WAAQ,YAAY,aAAU,GAAG,KAAQ,MAAQ;CACjE,IAAM,IAAgB,EAAM,SAAS,QAAQ,EAAS,EAChD,IAAgB,EAAc,UAAU,GACxC,IACJ,KACA,EAAM,eAAe,EAAc,GAAG,IACtC,EAAc,IAAI,SAAS;AAE7B,QACE,kBAAA,cAAC,GAAD;EACO;EACC;EACM;EACL;EACP,GAAI;EAgBS,EAbX,EAAc,KAAK,MAEf,CAAC,MACA,OAAO,KAAU,YAAY,OAAO,KAAU,YAExC,kBAAA,cAAC,QAAD,EAAM,KAAK,GAAqB,EAAb,EAAa,GACrC,EAAM,eAAe,EAAM,IACzB,GAAO,SAAS,IACX,EAAM,aAAa,GAAO;EAAE,GAAG,EAAM;EAAO;EAAM,CAAC,GAEvD,EACP,CAES;EAEjB"}
+{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { modernVariant, standardVariant } from './ToggleGroupItem'\n\nexport const StyledButton = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'grow',\n      'flex',\n      'items-center',\n      'justify-center',\n      'font-semibold',\n      'leading-none',\n      'py-1'\n    ],\n    variants: {\n      size: {\n        sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n        md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n        lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n      },\n      isIconOnly: {\n        true: []\n      },\n      theme: {\n        standard: standardVariant,\n        modern: modernVariant\n      }\n    },\n    compoundVariants: [\n      {\n        isIconOnly: true,\n        size: 'sm',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        theme: 'modern',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        theme: 'modern',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        theme: 'modern',\n        class: ['min-w-15', 'p-0']\n      }\n    ]\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const ToggleGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledButton>\n>(({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton\n      ref={ref}\n      size={size}\n      isIconOnly={isIconOnly}\n      theme={theme}\n      {...rest}\n    >\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (React.isValidElement(child)) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, { ...child.props, size })\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledButton>\n  )\n})\n"],"mappings":";;;;;;AAQA,IAAa,eAAe,OAC1B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAmB;IAAW;IAAQ;IAAU;GACrD,IAAI;IAAC;IAAmB;IAAY;IAAQ;IAAU;GACtD,IAAI;IAAC;IAAmB;IAAY;IAAQ;IAAU;GACvD;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACD,OAAO;GACL,UAAU;GACV,QAAQ;GACT;EACF;CACD,kBAAkB;EAChB;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,MAAM;GAC1B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACD;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,MAAM;GAC3B;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,oBAAoB,QAAM,YAGpC,EAAE,OAAO,MAAM,QAAQ,YAAY,UAAU,GAAG,QAAQ,QAAQ;CACjE,MAAM,gBAAgB,QAAM,SAAS,QAAQ,SAAS;CACtD,MAAM,gBAAgB,cAAc,UAAU;CAC9C,MAAM,aACJ,iBACA,QAAM,eAAe,cAAc,GAAG,IACtC,cAAc,IAAI,SAAS;AAE7B,QACE,wBAAA,cAAC,cAAD;EACO;EACC;EACM;EACL;EACP,GAAI;EAgBS,EAbX,cAAc,KAAK,UAAU;AAC3B,MACE,CAAC,kBACA,OAAO,UAAU,YAAY,OAAO,UAAU,UAE/C,QAAO,wBAAA,cAAC,QAAD,EAAM,KAAK,OAAqB,EAAb,MAAa;AACzC,MAAI,QAAM,eAAe,MAAM;OACzB,OAAO,SAAS,KAClB,QAAO,QAAM,aAAa,OAAO;IAAE,GAAG,MAAM;IAAO;IAAM,CAAC;;AAE9D,SAAO;GACP,CAES;EAEjB"}

package/dist/components/toggle-group/ToggleGroupItem.js

@@ -1,7 +1,7 @@
-import { styled as e } from "../../styled.js";
-import * as t from "@radix-ui/react-toggle-group";
+import { styled } from "../../styled.js";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
 //#region src/components/toggle-group/ToggleGroupItem.tsx
-var n = [
+var standardVariant = [
 	"before:bg-grey-600",
 	"bg-white",
 	"border",
@@ -24,8 +24,10 @@ var n = [
 	"not-disabled:hover:before:bg-none",
 	"not-disabled:hover:border-current!",
 	"not-disabled:hover:text-primary-900"
-], r = [
+];
+var modernVariant = [
 	"bg-grey-200",
+	"border-0",
 	"text-grey-800",
 	"overflow-hidden",
 	"rounded-md",
@@ -43,19 +45,20 @@ var n = [
 	"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
 	"not-disabled:focus-visible:z-1",
 	"not-disabled:hover:text-primary-900"
-], i = e(t.Item, {
+];
+var ToggleGroupItem = styled(ToggleGroup.Item, {
 	base: [
 		"cursor-pointer",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
 	variants: { theme: {
-		standard: n,
-		modern: r
+		standard: standardVariant,
+		modern: modernVariant
 	} },
 	defaultVariants: { theme: "standard" }
 });
 //#endregion
-export { i as ToggleGroupItem, r as modernVariant, n as standardVariant };
+export { ToggleGroupItem, modernVariant, standardVariant };
 
 //# sourceMappingURL=ToggleGroupItem.js.map

package/dist/components/toggle-group/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/styled'\n\nexport const standardVariant = [\n  'before:bg-grey-600',\n  'bg-white',\n  'border',\n  'border-grey-600',\n  'text-grey-800',\n  'data-[state=on]:border-current!',\n  'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'data-[state=on]:text-primary-800',\n  'not-disabled:data-[state=on]:before:bg-none',\n  'not-disabled:focus-visible:before:bg-none',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:before:bg-none',\n  'not-disabled:hover:border-current!',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const modernVariant = [\n  'bg-grey-200',\n  'text-grey-800',\n  'overflow-hidden',\n  'rounded-md',\n  'data-[state=on]:bg-white',\n  'data-[state=on]:border!',\n  'data-[state=on]:border-grey-200!',\n  'data-[state=on]:shadow-none!',\n  'data-[state=on]:text-grey-900',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const ToggleGroupItem = styled(ToggleGroup.Item, {\n  base: [\n    'cursor-pointer',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    theme: {\n      standard: standardVariant,\n      modern: modernVariant\n    }\n  },\n  defaultVariants: {\n    theme: 'standard'\n  }\n})\n"],"mappings":";;;AAIA,IAAa,IAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,IAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,IAAkB,EAAO,EAAY,MAAM;CACtD,MAAM;EACJ;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,UAAU;EACV,QAAQ;EACT,EACF;CACD,iBAAiB,EACf,OAAO,YACR;CACF,CAAC"}
+{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/styled'\n\nexport const standardVariant = [\n  'before:bg-grey-600',\n  'bg-white',\n  'border',\n  'border-grey-600',\n  'text-grey-800',\n  'data-[state=on]:border-current!',\n  'data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'data-[state=on]:text-primary-800',\n  'not-disabled:data-[state=on]:before:bg-none',\n  'not-disabled:focus-visible:before:bg-none',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:before:bg-none',\n  'not-disabled:hover:border-current!',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const modernVariant = [\n  'bg-grey-200',\n  'border-0',\n  'text-grey-800',\n  'overflow-hidden',\n  'rounded-md',\n  'data-[state=on]:bg-white',\n  'data-[state=on]:border!',\n  'data-[state=on]:border-grey-200!',\n  'data-[state=on]:shadow-none!',\n  'data-[state=on]:text-grey-900',\n  'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n  'not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:outline-none',\n  'not-disabled:focus-visible:relative',\n  'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n  'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n  'not-disabled:focus-visible:z-1',\n  'not-disabled:hover:text-primary-900'\n]\n\nexport const ToggleGroupItem = styled(ToggleGroup.Item, {\n  base: [\n    'cursor-pointer',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    theme: {\n      standard: standardVariant,\n      modern: modernVariant\n    }\n  },\n  defaultVariants: {\n    theme: 'standard'\n  }\n})\n"],"mappings":";;;AAIA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,kBAAkB,OAAO,YAAY,MAAM;CACtD,MAAM;EACJ;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,UAAU;EACV,QAAQ;EACT,EACF;CACD,iBAAiB,EACf,OAAO,YACR;CACF,CAAC"}