@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/button/LinkButton.d.ts

@@ -0,0 +1,29 @@
+import { type JSX } from "solid-js";
+import { type LinkProps as HeadlessLinkProps } from "@proyecto-viviana/solidaria-components";
+import type { StyleString } from "../style";
+import type { ButtonFillStyle, ButtonSize, ButtonVariant, StaticColor } from "./types";
+type StyledLinkButtonBaseProps = Omit<HeadlessLinkProps, "class" | "style" | "children" | "onClick">;
+export interface LinkButtonProps extends StyledLinkButtonBaseProps {
+    /** The content to display in the LinkButton. */
+    children?: JSX.Element;
+    /** The visual style of the LinkButton. */
+    variant?: ButtonVariant;
+    /** The background style of the LinkButton. */
+    fillStyle?: ButtonFillStyle;
+    /** The size of the LinkButton. */
+    size?: ButtonSize;
+    /** The static color style to apply. Useful when the LinkButton appears over a color background. */
+    staticColor?: StaticColor;
+    /** Spectrum-defined generated classes. */
+    styles?: StyleString;
+    /** Additional CSS class name. Use only as a last resort. */
+    UNSAFE_className?: string;
+    /** Additional inline styles. Use only as a last resort. */
+    UNSAFE_style?: JSX.CSSProperties;
+}
+/**
+ * A LinkButton navigates like a link while using the S2 Button visual treatment.
+ */
+export declare function LinkButton(props: LinkButtonProps): JSX.Element;
+export {};
+//# sourceMappingURL=LinkButton.d.ts.map

package/dist/button/LinkButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../src/button/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,GAAG,EACT,MAAM,UAAU,CAAC;AAClB,OAAO,EAIL,KAAK,SAAS,IAAI,iBAAiB,EAEpC,MAAM,wCAAwC,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAiB5C,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGvF,KAAK,yBAAyB,GAAG,IAAI,CACnC,iBAAiB,EACjB,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC3C,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,yBAAyB;IAChE,gDAAgD;IAChD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,kCAAkC;IAClC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,mGAAmG;IACnG,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAClC;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAyH9D"}

package/dist/button/LinkButton.js

@@ -0,0 +1,2 @@
+import { t as LinkButton } from "../_chunk/LinkButton.js";
+export { LinkButton };

package/dist/button/LinkButton.jsx

@@ -0,0 +1,2 @@
+import { t as LinkButton } from "../_chunk/LinkButton.jsx";
+export { LinkButton };

package/dist/button/LogicButton.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from "solid-js";
+import { type ToggleButtonProps as HeadlessToggleButtonProps } from "@proyecto-viviana/solidaria-components";
+export interface LogicButtonProps extends Omit<HeadlessToggleButtonProps, "class" | "style" | "children"> {
+    /** Additional CSS class name. */
+    class?: string;
+}
+/**
+ * An AND/OR logic toggle button. Displays "AND" when selected (default), "OR" when not.
+ */
+export declare function LogicButton(props: LogicButtonProps): JSX.Element;
+//# sourceMappingURL=LogicButton.d.ts.map

package/dist/button/LogicButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogicButton.d.ts","sourceRoot":"","sources":["../../src/button/LogicButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAChD,OAAO,EAEL,KAAK,iBAAiB,IAAI,yBAAyB,EAEpD,MAAM,wCAAwC,CAAC;AAIhD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,yBAAyB,EACzB,OAAO,GAAG,OAAO,GAAG,UAAU,CAC/B;IACC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0CD;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAuBhE"}

package/dist/button/S2PendingProgressCircle.d.ts

@@ -0,0 +1,14 @@
+import { type JSX } from "solid-js";
+import type { StaticColor } from "./types";
+import type { ActionButtonSize } from "./group-context";
+export interface S2PendingProgressCircleProps {
+    size: ActionButtonSize;
+    staticColor?: StaticColor;
+    "aria-label": string;
+}
+/**
+ * Button pending indicators are upstream S2 ProgressCircles with size="S" stroke
+ * metrics and button-size-specific wrapper dimensions.
+ */
+export declare function S2PendingProgressCircle(props: S2PendingProgressCircleProps): JSX.Element;
+//# sourceMappingURL=S2PendingProgressCircle.d.ts.map

package/dist/button/S2PendingProgressCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"S2PendingProgressCircle.d.ts","sourceRoot":"","sources":["../../src/button/S2PendingProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AASxD,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,gBAAgB,CAAC;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,GAAG,GAAG,CAAC,OAAO,CA8CxF"}

package/dist/button/ToggleButton.d.ts

@@ -0,0 +1,31 @@
+import { type JSX } from "solid-js";
+import { type ToggleButtonProps as HeadlessToggleButtonProps } from "@proyecto-viviana/solidaria-components";
+import type { StaticColor } from "./types";
+import type { StyleString } from "../style";
+import { type ActionButtonSize } from "./group-context";
+export type ToggleButtonSize = ActionButtonSize;
+type StyledToggleButtonBaseProps = Omit<HeadlessToggleButtonProps, "class" | "style" | "children" | "onClick" | "elementType" | "href" | "target" | "rel" | "allowFocusWhenDisabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value">;
+export interface ToggleButtonProps extends StyledToggleButtonBaseProps {
+    /** The content to display in the button. */
+    children?: JSX.Element;
+    /** The size of the button. @default 'M' */
+    size?: ToggleButtonSize;
+    /** The static color style to apply. Useful when the ToggleButton appears over a color background. */
+    staticColor?: StaticColor;
+    /** Whether the button should be displayed with a quiet style. */
+    isQuiet?: boolean;
+    /** Whether the selected ToggleButton should be emphasized. */
+    isEmphasized?: boolean;
+    /** Spectrum-defined generated classes. */
+    styles?: StyleString;
+    /** Additional CSS class name. Use only as a last resort. */
+    UNSAFE_className?: string;
+    /** Additional inline styles. Use only as a last resort. */
+    UNSAFE_style?: JSX.CSSProperties;
+}
+/**
+ * ToggleButtons allow users to toggle a selection on or off.
+ */
+export declare function ToggleButton(props: ToggleButtonProps): JSX.Element;
+export {};
+//# sourceMappingURL=ToggleButton.d.ts.map

package/dist/button/ToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/button/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,GAAG,EAA0B,MAAM,UAAU,CAAC;AACzF,OAAO,EAEL,KAAK,iBAAiB,IAAI,yBAAyB,EAEpD,MAAM,wCAAwC,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAY5C,OAAO,EAGL,KAAK,gBAAgB,EAEtB,MAAM,iBAAiB,CAAC;AAazB,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,KAAK,2BAA2B,GAAG,IAAI,CACrC,yBAAyB,EACvB,OAAO,GACP,OAAO,GACP,UAAU,GACV,SAAS,GACT,aAAa,GACb,MAAM,GACN,QAAQ,GACR,KAAK,GACL,wBAAwB,GACxB,MAAM,GACN,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,gBAAgB,GAChB,YAAY,GACZ,MAAM,GACN,MAAM,GACN,OAAO,CACV,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,2BAA2B;IACpE,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,qGAAqG;IACrG,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAClC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAuKlE"}

package/dist/button/ToggleButton.js

@@ -0,0 +1,161 @@
+import { mergeStyles } from "../style/runtime.js";
+import { useProviderProps } from "../provider/index.js";
+import { c as useToggleButtonContext } from "../_chunk/context.js";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
+import { i as s2ActionButtonStaticColor, p as useToggleButtonGroupContext, s as s2ToggleButtonText, t as s2ActionButton } from "../_chunk/s2-action-button-styles.js";
+import { centerBaseline } from "../icon/center-baseline.js";
+import { pressScale } from "../pressScale.js";
+import { SkeletonContext } from "../skeleton/index.js";
+import { t as IconContext } from "../_chunk/spectrum-icon.js";
+import { c as TextContext } from "../_chunk/text.js";
+import { t as getSingleTextChild } from "../_chunk/text-child.js";
+/* empty css                                                                               */
+/* empty css                                                                               */
+import { className, createComponent, getNextElement, insert, mergeProps, template } from "solid-js/web";
+import { children, mergeProps as mergeProps$1, splitProps } from "solid-js";
+import { ToggleButton as ToggleButton$1 } from "@proyecto-viviana/solidaria-components";
+//#region src/button/ToggleButton.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span data-rsp-slot=text>`);
+/**
+* ToggleButtons allow users to toggle a selection on or off.
+*/
+function ToggleButton(props) {
+	const providerProps = useProviderProps(props);
+	const contextProps = getSlottedContextProps(useToggleButtonContext(), props.slot);
+	const groupContext = getSlottedContextProps(useToggleButtonGroupContext(), void 0);
+	const standaloneProps = mergeProps$1({ size: "M" }, providerProps, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergeProps$1(standaloneProps, {
+		get size() {
+			return groupContext?.size ?? standaloneProps.size;
+		},
+		get staticColor() {
+			return groupContext?.staticColor ?? standaloneProps.staticColor;
+		},
+		get isQuiet() {
+			return groupContext?.isQuiet ?? standaloneProps.isQuiet;
+		},
+		get isEmphasized() {
+			return groupContext?.isEmphasized ?? standaloneProps.isEmphasized;
+		},
+		get isDisabled() {
+			return groupContext?.isDisabled ?? standaloneProps.isDisabled;
+		},
+		get density() {
+			return groupContext?.density;
+		},
+		get orientation() {
+			return groupContext?.orientation;
+		},
+		get isJustified() {
+			return groupContext?.isJustified;
+		}
+	}), [
+		"size",
+		"staticColor",
+		"isQuiet",
+		"isEmphasized",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"children",
+		"ref",
+		"density",
+		"orientation",
+		"isJustified"
+	]);
+	let buttonElement;
+	const assignButtonRefs = mergeContextRefs(contextProps?.ref, props.ref);
+	const size = () => local.size ?? "M";
+	const density = () => local.density ?? "regular";
+	const orientation = () => local.orientation ?? "horizontal";
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const getS2State = (renderProps) => ({
+		isHovered: renderProps.isHovered,
+		isPressed: renderProps.isPressed,
+		isFocused: renderProps.isFocused,
+		isFocusVisible: renderProps.isFocusVisible,
+		isDisabled: renderProps.isDisabled,
+		isSelected: renderProps.isSelected
+	});
+	const getClassName = (renderProps) => [local.UNSAFE_className, mergeStyles(s2ActionButton({
+		...getS2State(renderProps),
+		size: size(),
+		staticColor: local.staticColor,
+		isStaticColor: !!local.staticColor,
+		isQuiet: local.isQuiet,
+		isEmphasized: local.isEmphasized,
+		density: density(),
+		orientation: orientation(),
+		isJustified: local.isJustified,
+		isInGroup: !!groupContext
+	}), local.staticColor ? s2ActionButtonStaticColor({
+		...getS2State(renderProps),
+		size: size(),
+		staticColor: local.staticColor,
+		isStaticColor: true,
+		isQuiet: local.isQuiet,
+		isEmphasized: local.isEmphasized,
+		density: density(),
+		orientation: orientation(),
+		isJustified: local.isJustified,
+		isInGroup: !!groupContext
+	}) : void 0, mergedStyles())].filter(Boolean).join(" ");
+	const getPressScaleStyle = (renderProps) => pressScale(() => buttonElement, mergedUnsafeStyle())(renderProps);
+	function ToggleButtonContent() {
+		const iconContextValue = {
+			slot: "icon",
+			render: centerBaseline({
+				slot: "icon",
+				styles: " _Ja151"
+			}),
+			styles: " ZuUmpre151 FuUmpre151 I67logd151 _va151"
+		};
+		const textContextValue = {
+			styles: s2ToggleButtonText,
+			"data-rsp-slot": "text"
+		};
+		function ResolvedContent() {
+			const resolvedChildren = children(() => local.children);
+			const content = () => resolvedChildren();
+			const textChild = () => getSingleTextChild(content());
+			return textChild() !== void 0 ? (() => {
+				var _el$ = getNextElement(_tmpl$);
+				className(_el$, `${s2ToggleButtonText}  _Jb151`);
+				insert(_el$, textChild);
+				return _el$;
+			})() : content();
+		}
+		return createComponent(SkeletonContext.Provider, {
+			value: null,
+			get children() {
+				return createComponent(TextContext.Provider, {
+					value: textContextValue,
+					get children() {
+						return createComponent(IconContext.Provider, {
+							value: iconContextValue,
+							get children() {
+								return createComponent(ResolvedContent, {});
+							}
+						});
+					}
+				});
+			}
+		});
+	}
+	return createComponent(ToggleButton$1, mergeProps(headlessProps, {
+		ref: (element) => {
+			buttonElement = element;
+			assignButtonRefs(element);
+		},
+		"class": getClassName,
+		style: getPressScaleStyle,
+		get children() {
+			return createComponent(ToggleButtonContent, {});
+		}
+	}));
+}
+//#endregion
+export { ToggleButton };
+
+//# sourceMappingURL=ToggleButton.js.map

package/dist/button/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","names":[],"sources":["../../src/button/ToggleButton.tsx"],"sourcesContent":["import { children as resolveChildren, type JSX, mergeProps, splitProps } from \"solid-js\";\nimport {\n  ToggleButton as HeadlessToggleButton,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { useProviderProps } from \"../provider\";\nimport type { StaticColor } from \"./types\";\nimport type { StyleString } from \"../style\";\nimport { fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { SkeletonContext } from \"../skeleton\";\nimport { TextContext } from \"../text\";\nimport {\n  s2ActionButton,\n  s2ActionButtonStaticColor,\n  s2ToggleButtonText,\n  type S2ActionButtonRenderState,\n} from \"./s2-action-button-styles\";\nimport {\n  type ActionButtonDensity,\n  type ActionButtonOrientation,\n  type ActionButtonSize,\n  useToggleButtonGroupContext,\n} from \"./group-context\";\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { pressScale } from \"../pressScale\";\nimport { useToggleButtonContext } from \"./context\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n} from \"./spectrum-context\";\nimport { getSingleTextChild } from \"./text-child\";\n\nexport type ToggleButtonSize = ActionButtonSize;\n\ntype StyledToggleButtonBaseProps = Omit<\n  HeadlessToggleButtonProps,\n  | \"class\"\n  | \"style\"\n  | \"children\"\n  | \"onClick\"\n  | \"elementType\"\n  | \"href\"\n  | \"target\"\n  | \"rel\"\n  | \"allowFocusWhenDisabled\"\n  | \"form\"\n  | \"formAction\"\n  | \"formEncType\"\n  | \"formMethod\"\n  | \"formNoValidate\"\n  | \"formTarget\"\n  | \"name\"\n  | \"type\"\n  | \"value\"\n>;\n\nexport interface ToggleButtonProps extends StyledToggleButtonBaseProps {\n  /** The content to display in the button. */\n  children?: JSX.Element;\n  /** The size of the button. @default 'M' */\n  size?: ToggleButtonSize;\n  /** The static color style to apply. Useful when the ToggleButton appears over a color background. */\n  staticColor?: StaticColor;\n  /** Whether the button should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /** Whether the selected ToggleButton should be emphasized. */\n  isEmphasized?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n}\n\n/**\n * ToggleButtons allow users to toggle a selection on or off.\n */\nexport function ToggleButton(props: ToggleButtonProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useToggleButtonContext(), props.slot);\n  const groupContext = getSlottedContextProps(useToggleButtonGroupContext(), undefined);\n  const defaultProps: Partial<ToggleButtonProps> = {\n    size: \"M\",\n  };\n  const standaloneProps = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);\n  const groupProps: Partial<ToggleButtonProps> & {\n    density?: ActionButtonDensity;\n    orientation?: ActionButtonOrientation;\n    isJustified?: boolean;\n  } = {\n    get size() {\n      return groupContext?.size ?? standaloneProps.size;\n    },\n    get staticColor() {\n      return groupContext?.staticColor ?? standaloneProps.staticColor;\n    },\n    get isQuiet() {\n      return groupContext?.isQuiet ?? standaloneProps.isQuiet;\n    },\n    get isEmphasized() {\n      return groupContext?.isEmphasized ?? standaloneProps.isEmphasized;\n    },\n    get isDisabled() {\n      return groupContext?.isDisabled ?? standaloneProps.isDisabled;\n    },\n    get density() {\n      return groupContext?.density;\n    },\n    get orientation() {\n      return groupContext?.orientation;\n    },\n    get isJustified() {\n      return groupContext?.isJustified;\n    },\n  };\n\n  const mergedProps = mergeProps(standaloneProps, groupProps);\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"staticColor\",\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"children\",\n    \"ref\",\n    \"density\",\n    \"orientation\",\n    \"isJustified\",\n  ]);\n  let buttonElement: HTMLButtonElement | undefined;\n  const assignButtonRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    props.ref,\n  );\n\n  const size = (): ToggleButtonSize => local.size ?? \"M\";\n  const density = (): ActionButtonDensity => local.density ?? \"regular\";\n  const orientation = (): ActionButtonOrientation => local.orientation ?? \"horizontal\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const getS2State = (renderProps: ToggleButtonRenderProps): S2ActionButtonRenderState => ({\n    isHovered: renderProps.isHovered,\n    isPressed: renderProps.isPressed,\n    isFocused: renderProps.isFocused,\n    isFocusVisible: renderProps.isFocusVisible,\n    isDisabled: renderProps.isDisabled,\n    isSelected: renderProps.isSelected,\n  });\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      mergeStyles(\n        s2ActionButton({\n          ...getS2State(renderProps),\n          size: size(),\n          staticColor: local.staticColor,\n          isStaticColor: !!local.staticColor,\n          isQuiet: local.isQuiet,\n          isEmphasized: local.isEmphasized,\n          density: density(),\n          orientation: orientation(),\n          isJustified: local.isJustified,\n          isInGroup: !!groupContext,\n        }),\n        local.staticColor\n          ? s2ActionButtonStaticColor({\n              ...getS2State(renderProps),\n              size: size(),\n              staticColor: local.staticColor,\n              isStaticColor: true,\n              isQuiet: local.isQuiet,\n              isEmphasized: local.isEmphasized,\n              density: density(),\n              orientation: orientation(),\n              isJustified: local.isJustified,\n              isInGroup: !!groupContext,\n            })\n          : undefined,\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getPressScaleStyle = (renderProps: ToggleButtonRenderProps): JSX.CSSProperties =>\n    pressScale(() => buttonElement, mergedUnsafeStyle())(renderProps);\n\n  function ToggleButtonContent() {\n    const iconContextValue = {\n      slot: \"icon\",\n      render: centerBaseline({ slot: \"icon\", styles: style({ order: 0 }) }),\n      styles: style({\n        size: fontRelative(20),\n        marginStart: \"--iconMargin\",\n        flexShrink: 0,\n      }),\n    };\n    const textContextValue = {\n      styles: s2ToggleButtonText,\n      \"data-rsp-slot\": \"text\",\n    };\n\n    function ResolvedContent() {\n      const resolvedChildren = resolveChildren(() => local.children);\n      const content = () => resolvedChildren();\n      const textChild = () => getSingleTextChild(content());\n\n      return textChild() !== undefined ? (\n        <span class={`${s2ToggleButtonText} ${style({ order: 1 })}`} data-rsp-slot=\"text\">\n          {textChild()}\n        </span>\n      ) : (\n        content()\n      );\n    }\n\n    return (\n      <SkeletonContext.Provider value={null}>\n        <TextContext.Provider value={textContextValue}>\n          <IconContext.Provider value={iconContextValue}>\n            <ResolvedContent />\n          </IconContext.Provider>\n        </TextContext.Provider>\n      </SkeletonContext.Provider>\n    );\n  }\n\n  return (\n    <HeadlessToggleButton\n      {...headlessProps}\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n        assignButtonRefs(element);\n      }}\n      class={getClassName}\n      style={getPressScaleStyle}\n    >\n      <ToggleButtonContent />\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":"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"}

package/dist/button/ToggleButton.jsx

@@ -0,0 +1,139 @@
+import { t as mergeStyles } from "../_chunk/runtime.jsx";
+import { useProviderProps } from "../provider/index.jsx";
+import { c as useToggleButtonContext } from "../_chunk/context.jsx";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
+import { i as s2ActionButtonStaticColor, p as useToggleButtonGroupContext, s as s2ToggleButtonText, t as s2ActionButton } from "../_chunk/s2-action-button-styles.jsx";
+import { centerBaseline } from "../icon/center-baseline.jsx";
+import { pressScale } from "../pressScale.jsx";
+import { SkeletonContext } from "../skeleton/index.jsx";
+import { t as IconContext } from "../_chunk/spectrum-icon.jsx";
+import { c as TextContext } from "../_chunk/text.jsx";
+import { t as getSingleTextChild } from "../_chunk/text-child.jsx";
+import { children, mergeProps, splitProps } from "solid-js";
+import { ToggleButton as ToggleButton$1 } from "@proyecto-viviana/solidaria-components";
+//#region src/button/ToggleButton.tsx
+/**
+* ToggleButtons allow users to toggle a selection on or off.
+*/ function ToggleButton(props) {
+	const providerProps = useProviderProps(props);
+	const contextProps = getSlottedContextProps(useToggleButtonContext(), props.slot);
+	const groupContext = getSlottedContextProps(useToggleButtonGroupContext(), void 0);
+	const standaloneProps = mergeProps({ size: "M" }, providerProps, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergeProps(standaloneProps, {
+		get size() {
+			return groupContext?.size ?? standaloneProps.size;
+		},
+		get staticColor() {
+			return groupContext?.staticColor ?? standaloneProps.staticColor;
+		},
+		get isQuiet() {
+			return groupContext?.isQuiet ?? standaloneProps.isQuiet;
+		},
+		get isEmphasized() {
+			return groupContext?.isEmphasized ?? standaloneProps.isEmphasized;
+		},
+		get isDisabled() {
+			return groupContext?.isDisabled ?? standaloneProps.isDisabled;
+		},
+		get density() {
+			return groupContext?.density;
+		},
+		get orientation() {
+			return groupContext?.orientation;
+		},
+		get isJustified() {
+			return groupContext?.isJustified;
+		}
+	}), [
+		"size",
+		"staticColor",
+		"isQuiet",
+		"isEmphasized",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"children",
+		"ref",
+		"density",
+		"orientation",
+		"isJustified"
+	]);
+	let buttonElement;
+	const assignButtonRefs = mergeContextRefs(contextProps?.ref, props.ref);
+	const size = () => local.size ?? "M";
+	const density = () => local.density ?? "regular";
+	const orientation = () => local.orientation ?? "horizontal";
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const getS2State = (renderProps) => ({
+		isHovered: renderProps.isHovered,
+		isPressed: renderProps.isPressed,
+		isFocused: renderProps.isFocused,
+		isFocusVisible: renderProps.isFocusVisible,
+		isDisabled: renderProps.isDisabled,
+		isSelected: renderProps.isSelected
+	});
+	const getClassName = (renderProps) => [local.UNSAFE_className, mergeStyles(s2ActionButton({
+		...getS2State(renderProps),
+		size: size(),
+		staticColor: local.staticColor,
+		isStaticColor: !!local.staticColor,
+		isQuiet: local.isQuiet,
+		isEmphasized: local.isEmphasized,
+		density: density(),
+		orientation: orientation(),
+		isJustified: local.isJustified,
+		isInGroup: !!groupContext
+	}), local.staticColor ? s2ActionButtonStaticColor({
+		...getS2State(renderProps),
+		size: size(),
+		staticColor: local.staticColor,
+		isStaticColor: true,
+		isQuiet: local.isQuiet,
+		isEmphasized: local.isEmphasized,
+		density: density(),
+		orientation: orientation(),
+		isJustified: local.isJustified,
+		isInGroup: !!groupContext
+	}) : void 0, mergedStyles())].filter(Boolean).join(" ");
+	const getPressScaleStyle = (renderProps) => pressScale(() => buttonElement, mergedUnsafeStyle())(renderProps);
+	function ToggleButtonContent() {
+		const iconContextValue = {
+			slot: "icon",
+			render: centerBaseline({
+				slot: "icon",
+				styles: " _Ja151"
+			}),
+			styles: " ZuUmpre151 FuUmpre151 I67logd151 _va151"
+		};
+		const textContextValue = {
+			styles: s2ToggleButtonText,
+			"data-rsp-slot": "text"
+		};
+		function ResolvedContent() {
+			const resolvedChildren = children(() => local.children);
+			const content = () => resolvedChildren();
+			const textChild = () => getSingleTextChild(content());
+			return textChild() !== void 0 ? <span class={`${s2ToggleButtonText}  _Jb151`} data-rsp-slot="text">
+          {textChild()}
+        </span> : content();
+		}
+		return <SkeletonContext.Provider value={null}>
+        <TextContext.Provider value={textContextValue}>
+          <IconContext.Provider value={iconContextValue}>
+            <ResolvedContent />
+          </IconContext.Provider>
+        </TextContext.Provider>
+      </SkeletonContext.Provider>;
+	}
+	return <ToggleButton$1 {...headlessProps} ref={(element) => {
+		buttonElement = element;
+		assignButtonRefs(element);
+	}} class={getClassName} style={getPressScaleStyle}>
+      <ToggleButtonContent />
+    </ToggleButton$1>;
+}
+//#endregion
+export { ToggleButton };
+
+//# sourceMappingURL=ToggleButton.jsx.map

package/dist/button/ToggleButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.jsx","names":[],"sources":["../../src/button/ToggleButton.tsx"],"sourcesContent":["import { children as resolveChildren, type JSX, mergeProps, splitProps } from \"solid-js\";\nimport {\n  ToggleButton as HeadlessToggleButton,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { useProviderProps } from \"../provider\";\nimport type { StaticColor } from \"./types\";\nimport type { StyleString } from \"../style\";\nimport { fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { SkeletonContext } from \"../skeleton\";\nimport { TextContext } from \"../text\";\nimport {\n  s2ActionButton,\n  s2ActionButtonStaticColor,\n  s2ToggleButtonText,\n  type S2ActionButtonRenderState,\n} from \"./s2-action-button-styles\";\nimport {\n  type ActionButtonDensity,\n  type ActionButtonOrientation,\n  type ActionButtonSize,\n  useToggleButtonGroupContext,\n} from \"./group-context\";\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { pressScale } from \"../pressScale\";\nimport { useToggleButtonContext } from \"./context\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n} from \"./spectrum-context\";\nimport { getSingleTextChild } from \"./text-child\";\n\nexport type ToggleButtonSize = ActionButtonSize;\n\ntype StyledToggleButtonBaseProps = Omit<\n  HeadlessToggleButtonProps,\n  | \"class\"\n  | \"style\"\n  | \"children\"\n  | \"onClick\"\n  | \"elementType\"\n  | \"href\"\n  | \"target\"\n  | \"rel\"\n  | \"allowFocusWhenDisabled\"\n  | \"form\"\n  | \"formAction\"\n  | \"formEncType\"\n  | \"formMethod\"\n  | \"formNoValidate\"\n  | \"formTarget\"\n  | \"name\"\n  | \"type\"\n  | \"value\"\n>;\n\nexport interface ToggleButtonProps extends StyledToggleButtonBaseProps {\n  /** The content to display in the button. */\n  children?: JSX.Element;\n  /** The size of the button. @default 'M' */\n  size?: ToggleButtonSize;\n  /** The static color style to apply. Useful when the ToggleButton appears over a color background. */\n  staticColor?: StaticColor;\n  /** Whether the button should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /** Whether the selected ToggleButton should be emphasized. */\n  isEmphasized?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n}\n\n/**\n * ToggleButtons allow users to toggle a selection on or off.\n */\nexport function ToggleButton(props: ToggleButtonProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useToggleButtonContext(), props.slot);\n  const groupContext = getSlottedContextProps(useToggleButtonGroupContext(), undefined);\n  const defaultProps: Partial<ToggleButtonProps> = {\n    size: \"M\",\n  };\n  const standaloneProps = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);\n  const groupProps: Partial<ToggleButtonProps> & {\n    density?: ActionButtonDensity;\n    orientation?: ActionButtonOrientation;\n    isJustified?: boolean;\n  } = {\n    get size() {\n      return groupContext?.size ?? standaloneProps.size;\n    },\n    get staticColor() {\n      return groupContext?.staticColor ?? standaloneProps.staticColor;\n    },\n    get isQuiet() {\n      return groupContext?.isQuiet ?? standaloneProps.isQuiet;\n    },\n    get isEmphasized() {\n      return groupContext?.isEmphasized ?? standaloneProps.isEmphasized;\n    },\n    get isDisabled() {\n      return groupContext?.isDisabled ?? standaloneProps.isDisabled;\n    },\n    get density() {\n      return groupContext?.density;\n    },\n    get orientation() {\n      return groupContext?.orientation;\n    },\n    get isJustified() {\n      return groupContext?.isJustified;\n    },\n  };\n\n  const mergedProps = mergeProps(standaloneProps, groupProps);\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"staticColor\",\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"children\",\n    \"ref\",\n    \"density\",\n    \"orientation\",\n    \"isJustified\",\n  ]);\n  let buttonElement: HTMLButtonElement | undefined;\n  const assignButtonRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    props.ref,\n  );\n\n  const size = (): ToggleButtonSize => local.size ?? \"M\";\n  const density = (): ActionButtonDensity => local.density ?? \"regular\";\n  const orientation = (): ActionButtonOrientation => local.orientation ?? \"horizontal\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const getS2State = (renderProps: ToggleButtonRenderProps): S2ActionButtonRenderState => ({\n    isHovered: renderProps.isHovered,\n    isPressed: renderProps.isPressed,\n    isFocused: renderProps.isFocused,\n    isFocusVisible: renderProps.isFocusVisible,\n    isDisabled: renderProps.isDisabled,\n    isSelected: renderProps.isSelected,\n  });\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      mergeStyles(\n        s2ActionButton({\n          ...getS2State(renderProps),\n          size: size(),\n          staticColor: local.staticColor,\n          isStaticColor: !!local.staticColor,\n          isQuiet: local.isQuiet,\n          isEmphasized: local.isEmphasized,\n          density: density(),\n          orientation: orientation(),\n          isJustified: local.isJustified,\n          isInGroup: !!groupContext,\n        }),\n        local.staticColor\n          ? s2ActionButtonStaticColor({\n              ...getS2State(renderProps),\n              size: size(),\n              staticColor: local.staticColor,\n              isStaticColor: true,\n              isQuiet: local.isQuiet,\n              isEmphasized: local.isEmphasized,\n              density: density(),\n              orientation: orientation(),\n              isJustified: local.isJustified,\n              isInGroup: !!groupContext,\n            })\n          : undefined,\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getPressScaleStyle = (renderProps: ToggleButtonRenderProps): JSX.CSSProperties =>\n    pressScale(() => buttonElement, mergedUnsafeStyle())(renderProps);\n\n  function ToggleButtonContent() {\n    const iconContextValue = {\n      slot: \"icon\",\n      render: centerBaseline({ slot: \"icon\", styles: style({ order: 0 }) }),\n      styles: style({\n        size: fontRelative(20),\n        marginStart: \"--iconMargin\",\n        flexShrink: 0,\n      }),\n    };\n    const textContextValue = {\n      styles: s2ToggleButtonText,\n      \"data-rsp-slot\": \"text\",\n    };\n\n    function ResolvedContent() {\n      const resolvedChildren = resolveChildren(() => local.children);\n      const content = () => resolvedChildren();\n      const textChild = () => getSingleTextChild(content());\n\n      return textChild() !== undefined ? (\n        <span class={`${s2ToggleButtonText} ${style({ order: 1 })}`} data-rsp-slot=\"text\">\n          {textChild()}\n        </span>\n      ) : (\n        content()\n      );\n    }\n\n    return (\n      <SkeletonContext.Provider value={null}>\n        <TextContext.Provider value={textContextValue}>\n          <IconContext.Provider value={iconContextValue}>\n            <ResolvedContent />\n          </IconContext.Provider>\n        </TextContext.Provider>\n      </SkeletonContext.Provider>\n    );\n  }\n\n  return (\n    <HeadlessToggleButton\n      {...headlessProps}\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n        assignButtonRefs(element);\n      }}\n      class={getClassName}\n      style={getPressScaleStyle}\n    >\n      <ToggleButtonContent />\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":"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"}

package/dist/button/context.d.ts

@@ -0,0 +1,14 @@
+import type { ActionButtonProps } from "./ActionButton";
+import type { ButtonProps } from "./types";
+import type { LinkButtonProps } from "./LinkButton";
+import type { ToggleButtonProps } from "./ToggleButton";
+import type { SpectrumContextValue } from "./spectrum-context";
+export declare const ButtonContext: import("solid-js").Context<SpectrumContextValue<ButtonProps>>;
+export declare const LinkButtonContext: import("solid-js").Context<SpectrumContextValue<LinkButtonProps>>;
+export declare const ActionButtonContext: import("solid-js").Context<SpectrumContextValue<ActionButtonProps>>;
+export declare const ToggleButtonContext: import("solid-js").Context<SpectrumContextValue<ToggleButtonProps>>;
+export declare function useButtonContext(): SpectrumContextValue<ButtonProps>;
+export declare function useLinkButtonContext(): SpectrumContextValue<LinkButtonProps>;
+export declare function useActionButtonContext(): SpectrumContextValue<ActionButtonProps>;
+export declare function useToggleButtonContext(): SpectrumContextValue<ToggleButtonProps>;
+//# sourceMappingURL=context.d.ts.map

package/dist/button/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/button/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,eAAO,MAAM,aAAa,+DAAyD,CAAC;AACpF,eAAO,MAAM,iBAAiB,mEAA6D,CAAC;AAC5F,eAAO,MAAM,mBAAmB,qEAA+D,CAAC;AAChG,eAAO,MAAM,mBAAmB,qEAA+D,CAAC;AAEhG,wBAAgB,gBAAgB,IAAI,oBAAoB,CAAC,WAAW,CAAC,CAEpE;AAED,wBAAgB,oBAAoB,IAAI,oBAAoB,CAAC,eAAe,CAAC,CAE5E;AAED,wBAAgB,sBAAsB,IAAI,oBAAoB,CAAC,iBAAiB,CAAC,CAEhF;AAED,wBAAgB,sBAAsB,IAAI,oBAAoB,CAAC,iBAAiB,CAAC,CAEhF"}

package/dist/button/group-context.d.ts

@@ -0,0 +1,53 @@
+import { type JSX } from "solid-js";
+import type { Key } from "@proyecto-viviana/solid-stately";
+import type { StyleString } from "../style";
+import type { ButtonSize, StaticColor } from "./types";
+import type { RefLike, SpectrumContextValue } from "./spectrum-context";
+export type ActionButtonSize = "XS" | "S" | "M" | "L" | "XL";
+export type ActionButtonDensity = "regular" | "compact";
+export type ActionButtonOrientation = "horizontal" | "vertical";
+export type ButtonGroupAlign = "start" | "end" | "center";
+export interface ButtonGroupContextValue {
+    children?: JSX.Element;
+    orientation?: ActionButtonOrientation;
+    align?: ButtonGroupAlign;
+    size?: ButtonSize;
+    isDisabled?: boolean;
+    isHidden?: boolean;
+    styles?: StyleString;
+    UNSAFE_className?: string;
+    UNSAFE_style?: JSX.CSSProperties;
+    ref?: RefLike<HTMLDivElement>;
+    slot?: string;
+}
+export interface ActionButtonGroupContextValue {
+    children?: JSX.Element;
+    size?: ActionButtonSize;
+    density?: ActionButtonDensity;
+    orientation?: ActionButtonOrientation;
+    isQuiet?: boolean;
+    isJustified?: boolean;
+    isEmphasized?: boolean;
+    staticColor?: StaticColor;
+    isDisabled?: boolean;
+    styles?: StyleString;
+    UNSAFE_className?: string;
+    UNSAFE_style?: JSX.CSSProperties;
+    ref?: RefLike<HTMLDivElement>;
+    slot?: string;
+}
+export interface ToggleButtonGroupContextValue extends ActionButtonGroupContextValue {
+    selectionMode?: "single" | "multiple";
+    disallowEmptySelection?: boolean;
+    selectedKeys?: Iterable<Key>;
+    defaultSelectedKeys?: Iterable<Key>;
+    disabledKeys?: Iterable<Key>;
+    onSelectionChange?: (keys: Set<Key>) => void;
+}
+export declare const ButtonGroupContext: import("solid-js").Context<SpectrumContextValue<ButtonGroupContextValue>>;
+export declare const ActionButtonGroupContext: import("solid-js").Context<SpectrumContextValue<ActionButtonGroupContextValue>>;
+export declare const ToggleButtonGroupContext: import("solid-js").Context<SpectrumContextValue<ToggleButtonGroupContextValue>>;
+export declare function useButtonGroupContext(): SpectrumContextValue<ButtonGroupContextValue>;
+export declare function useActionButtonGroupContext(): SpectrumContextValue<ActionButtonGroupContextValue>;
+export declare function useToggleButtonGroupContext(): SpectrumContextValue<ToggleButtonGroupContextValue>;
+//# sourceMappingURL=group-context.d.ts.map

package/dist/button/group-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-context.d.ts","sourceRoot":"","sources":["../../src/button/group-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAExE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAC7D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,6BAA8B,SAAQ,6BAA6B;IAClF,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,kBAAkB,2EACqC,CAAC;AACrE,eAAO,MAAM,wBAAwB,iFACqC,CAAC;AAC3E,eAAO,MAAM,wBAAwB,iFACqC,CAAC;AAE3E,wBAAgB,qBAAqB,IAAI,oBAAoB,CAAC,uBAAuB,CAAC,CAErF;AAED,wBAAgB,2BAA2B,IAAI,oBAAoB,CAAC,6BAA6B,CAAC,CAEjG;AAED,wBAAgB,2BAA2B,IAAI,oBAAoB,CAAC,6BAA6B,CAAC,CAEjG"}

package/dist/button/index.d.ts

@@ -0,0 +1,18 @@
+export { Button } from "./Button";
+export { ActionButtonContext, ButtonContext, LinkButtonContext, ToggleButtonContext, } from "./context";
+export type { ButtonFillStyle, ButtonProps, ButtonSize, ButtonVariant, StaticColor } from "./types";
+export { LinkButton } from "./LinkButton";
+export type { LinkButtonProps } from "./LinkButton";
+export { ToggleButton } from "./ToggleButton";
+export type { ToggleButtonProps, ToggleButtonSize } from "./ToggleButton";
+export { ActionButton } from "./ActionButton";
+export type { ActionButtonProps, ActionButtonSize } from "./ActionButton";
+export { ActionButtonGroupContext, ButtonGroupContext, ToggleButtonGroupContext, } from "./group-context";
+export type { ActionButtonDensity, ActionButtonGroupContextValue, ActionButtonOrientation, ButtonGroupAlign, ButtonGroupContextValue, ToggleButtonGroupContextValue, } from "./group-context";
+export { ClearButton } from "./ClearButton";
+export type { ClearButtonProps, ClearButtonSize } from "./ClearButton";
+export { FieldButton } from "./FieldButton";
+export type { FieldButtonProps } from "./FieldButton";
+export { LogicButton } from "./LogicButton";
+export type { LogicButtonProps } from "./LogicButton";
+//# sourceMappingURL=index.d.ts.map

package/dist/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,mBAAmB,EACnB,6BAA6B,EAC7B,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACvB,6BAA6B,GAC9B,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/button/index.js

@@ -0,0 +1,7 @@
+import { i as ToggleButtonContext, n as ButtonContext, r as LinkButtonContext, t as ActionButtonContext } from "../_chunk/context.js";
+import { c as ActionButtonGroupContext, l as ButtonGroupContext, u as ToggleButtonGroupContext } from "../_chunk/s2-action-button-styles.js";
+import { t as ActionButton } from "../_chunk/ActionButton.js";
+import { t as LinkButton } from "../_chunk/LinkButton.js";
+import { i as Button, n as FieldButton, r as ClearButton, t as LogicButton } from "../_chunk/button.js";
+import { ToggleButton } from "./ToggleButton.js";
+export { ActionButton, ActionButtonContext, ActionButtonGroupContext, Button, ButtonContext, ButtonGroupContext, ClearButton, FieldButton, LinkButton, LinkButtonContext, LogicButton, ToggleButton, ToggleButtonContext, ToggleButtonGroupContext };

package/dist/button/index.jsx

@@ -0,0 +1,7 @@
+import { i as ToggleButtonContext, n as ButtonContext, r as LinkButtonContext, t as ActionButtonContext } from "../_chunk/context.jsx";
+import { c as ActionButtonGroupContext, l as ButtonGroupContext, u as ToggleButtonGroupContext } from "../_chunk/s2-action-button-styles.jsx";
+import { t as ActionButton } from "../_chunk/ActionButton.jsx";
+import { t as LinkButton } from "../_chunk/LinkButton.jsx";
+import { i as Button, n as FieldButton, r as ClearButton, t as LogicButton } from "../_chunk/button.jsx";
+import { ToggleButton } from "./ToggleButton.jsx";
+export { ActionButton, ActionButtonContext, ActionButtonGroupContext, Button, ButtonContext, ButtonGroupContext, ClearButton, FieldButton, LinkButton, LinkButtonContext, LogicButton, ToggleButton, ToggleButtonContext, ToggleButtonGroupContext };

package/dist/button/pending-state.d.ts

@@ -0,0 +1,5 @@
+import { type Accessor } from "solid-js";
+export declare function createPendingState(isPending: Accessor<boolean | undefined>): {
+    isProgressVisible: Accessor<boolean>;
+};
+//# sourceMappingURL=pending-state.d.ts.map

package/dist/button/pending-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pending-state.d.ts","sourceRoot":"","sources":["../../src/button/pending-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEhF,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;;EAsB1E"}