@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/cardview/index.jsx

@@ -0,0 +1,296 @@
+import { t as mergeStyles } from "../_chunk/runtime.jsx";
+import { useProviderProps } from "../provider/index.jsx";
+import { r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
+import { Image, ImageCoordinator } from "../image/index.jsx";
+import { AssetCard, Card, CardContext, CardPreview, CollectionCardPreview, InternalCardViewContext, ProductCard, UserCard } from "../card/index.jsx";
+import { createContext, createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js";
+import { Collection, GridList, GridListItem } from "@proyecto-viviana/solidaria-components";
+//#region src/cardview/index.tsx
+const CardViewContext = createContext(null);
+const layoutOptions = {
+	XS: {
+		compact: {
+			minSpace: 6,
+			minItemSize: 100,
+			maxItemSize: 140
+		},
+		regular: {
+			minSpace: 8,
+			minItemSize: 100,
+			maxItemSize: 140
+		},
+		spacious: {
+			minSpace: 12,
+			minItemSize: 100,
+			maxItemSize: 140
+		}
+	},
+	S: {
+		compact: {
+			minSpace: 8,
+			minItemSize: 150,
+			maxItemSize: 210
+		},
+		regular: {
+			minSpace: 12,
+			minItemSize: 150,
+			maxItemSize: 210
+		},
+		spacious: {
+			minSpace: 16,
+			minItemSize: 150,
+			maxItemSize: 210
+		}
+	},
+	M: {
+		compact: {
+			minSpace: 12,
+			minItemSize: 200,
+			maxItemSize: 280
+		},
+		regular: {
+			minSpace: 16,
+			minItemSize: 200,
+			maxItemSize: 280
+		},
+		spacious: {
+			minSpace: 20,
+			minItemSize: 200,
+			maxItemSize: 280
+		}
+	},
+	L: {
+		compact: {
+			minSpace: 16,
+			minItemSize: 270,
+			maxItemSize: 370
+		},
+		regular: {
+			minSpace: 20,
+			minItemSize: 270,
+			maxItemSize: 370
+		},
+		spacious: {
+			minSpace: 24,
+			minItemSize: 270,
+			maxItemSize: 370
+		}
+	},
+	XL: {
+		compact: {
+			minSpace: 20,
+			minItemSize: 340,
+			maxItemSize: 460
+		},
+		regular: {
+			minSpace: 24,
+			minItemSize: 340,
+			maxItemSize: 460
+		},
+		spacious: {
+			minSpace: 28,
+			minItemSize: 340,
+			maxItemSize: 460
+		}
+	}
+};
+const SIZES = [
+	"XS",
+	"S",
+	"M",
+	"L",
+	"XL"
+];
+const cardViewStyles = function anonymous(props, overrides) {
+	let rules = " ";
+	let height = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "F") height = true;
+		rules += p[0];
+	}
+	if (props.isLoading) rules += " Pc151";
+	else rules += " Pa151";
+	if (props.isEmpty) rules += " sd151";
+	else rules += " se151";
+	rules += " _oa151";
+	rules += " _ta151";
+	if (props.isEmpty) rules += " eb151";
+	else rules += " ee151";
+	if (props.isEmpty) rules += " _Ca151";
+	else rules += " _Cg151";
+	if (props.density === "spacious") {
+		if (props.size === "XL") rules += " Uk151";
+		else if (props.size === "L") rules += " Uj151";
+		else if (props.size === "M") rules += " Ui151";
+		else if (props.size === "S") rules += " Ul151";
+		else if (props.size === "XS") rules += " Ug151";
+	} else if (props.density === "regular") {
+		if (props.size === "XL") rules += " Uj151";
+		else if (props.size === "L") rules += " Ui151";
+		else if (props.size === "M") rules += " Ul151";
+		else if (props.size === "S") rules += " Ug151";
+		else if (props.size === "XS") rules += " Ue151";
+	} else if (props.density === "compact") {
+		if (props.size === "XL") rules += " Ui151";
+		else if (props.size === "L") rules += " Ul151";
+		else if (props.size === "M") rules += " Ug151";
+		else if (props.size === "S") rules += " Ue151";
+		else if (props.size === "XS") rules += " U1DOfn151";
+	}
+	if (props.density === "spacious") {
+		if (props.size === "XL") rules += " qk151";
+		else if (props.size === "L") rules += " qj151";
+		else if (props.size === "M") rules += " qi151";
+		else if (props.size === "S") rules += " ql151";
+		else if (props.size === "XS") rules += " qg151";
+	} else if (props.density === "regular") {
+		if (props.size === "XL") rules += " qj151";
+		else if (props.size === "L") rules += " qi151";
+		else if (props.size === "M") rules += " ql151";
+		else if (props.size === "S") rules += " qg151";
+		else if (props.size === "XS") rules += " qe151";
+	} else if (props.density === "compact") {
+		if (props.size === "XL") rules += " qi151";
+		else if (props.size === "L") rules += " ql151";
+		else if (props.size === "M") rules += " qg151";
+		else if (props.size === "S") rules += " qe151";
+		else if (props.size === "XS") rules += " q1DOfn151";
+	}
+	if (props.size === "XL") rules += " Do1AxKd151";
+	else if (props.size === "L") rules += " DyXgpCd151";
+	else if (props.size === "M") rules += " DzHwgF151";
+	else if (props.size === "S") rules += " DIndvod151";
+	else if (props.size === "XS") rules += " Dl5GOjc151";
+	if (props.isEmpty) {
+		if (props.isFocusVisible) rules += " _Lf151";
+	} else rules += " _Le151";
+	rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kb151";
+	if (props.isActionBar) {
+		if (!height) rules += " Fb151";
+	}
+	return rules;
+};
+const wrapperStyles = function anonymous(props, overrides) {
+	let rules = " ";
+	let position = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "_P") position = true;
+		rules += p[0];
+	}
+	if (!position) rules += " _Pc151";
+	rules += " _Nb151";
+	rules += " Pb151";
+	return rules;
+};
+function selectedKeySet(keys) {
+	if (keys === "all") return "all";
+	return new Set(keys ?? []);
+}
+/**
+* A CardView displays a group of related objects, with support for selection and bulk actions.
+*/ function CardView(props) {
+	const [local, headlessProps] = splitProps(useProviderProps(props), [
+		"children",
+		"layout",
+		"size",
+		"density",
+		"variant",
+		"selectionStyle",
+		"loadingState",
+		"styles",
+		"renderActionBar",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"ref",
+		"isLoading",
+		"hasMore",
+		"onLoadMore"
+	]);
+	const requestedSize = () => local.size ?? "M";
+	const density = () => local.density ?? "regular";
+	const variant = () => local.variant ?? "primary";
+	const layout = () => local.layout ?? "grid";
+	const selectionStyle = () => local.selectionStyle ?? "checkbox";
+	const isLoading = () => local.isLoading || local.loadingState === "loading" || local.loadingState === "loadingMore";
+	const [maxSizeIndex, setMaxSizeIndex] = createSignal(SIZES.length - 1);
+	let rootElement;
+	const assignRootRef = mergeContextRefs(local.ref, (element) => {
+		rootElement = element;
+	});
+	const updateSize = () => {
+		const width = rootElement?.clientWidth ?? 0;
+		if (width <= 0) {
+			setMaxSizeIndex(SIZES.length - 1);
+			return;
+		}
+		let index = SIZES.length - 1;
+		while (index > 0) {
+			const options = layoutOptions[SIZES[index]][density()];
+			if (width >= options.minItemSize * 2 + options.minSpace * 3) break;
+			index--;
+		}
+		setMaxSizeIndex(index);
+	};
+	onMount(() => {
+		updateSize();
+		if (typeof ResizeObserver !== "function" || !rootElement) return;
+		const observer = new ResizeObserver(updateSize);
+		observer.observe(rootElement);
+		onCleanup(() => observer.disconnect());
+	});
+	createEffect(() => {
+		density();
+		requestedSize();
+		updateSize();
+	});
+	const size = () => SIZES[Math.min(maxSizeIndex(), Math.max(0, SIZES.indexOf(requestedSize())))];
+	const [actionSelectedKeys, setActionSelectedKeys] = createSignal(selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys));
+	createEffect(() => {
+		setActionSelectedKeys(selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys));
+	});
+	const onSelectionChange = (keys) => {
+		setActionSelectedKeys(keys === "all" ? "all" : new Set(keys));
+		headlessProps.onSelectionChange?.(keys);
+	};
+	const className = (renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(cardViewStyles({
+			...renderProps,
+			size: size(),
+			density: density(),
+			isLoading: isLoading(),
+			isActionBar: !!local.renderActionBar
+		}), local.styles)
+	].filter(Boolean).join(" ");
+	const cardView = <InternalCardViewContext.Provider value={{
+		ElementType: GridListItem,
+		layout: layout()
+	}}>
+      <CardContext.Provider value={{
+		size: size(),
+		variant: variant()
+	}}>
+        <ImageCoordinator>
+          <GridList {...headlessProps} ref={(element) => assignRootRef(element)} class={className} style={local.UNSAFE_style} selectionBehavior={selectionStyle() === "highlight" ? "replace" : "toggle"} onSelectionChange={onSelectionChange} isLoading={isLoading()} hasMore={local.hasMore ?? !!local.onLoadMore} onLoadMore={local.onLoadMore} data-layout={layout()} data-size={size()} data-requested-size={requestedSize()} data-density={density()} data-variant={variant()} data-selection-style={selectionStyle()}>
+            {(item) => local.children(item)}
+          </GridList>
+        </ImageCoordinator>
+      </CardContext.Provider>
+    </InternalCardViewContext.Provider>;
+	if (!local.renderActionBar) return cardView;
+	return <div class={wrapperStyles({}, local.styles)} style={local.UNSAFE_style}>
+      {cardView}
+      {local.renderActionBar(actionSelectedKeys())}
+    </div>;
+}
+//#endregion
+export { AssetCard, Card, CardContext, CardPreview, CardView, CardViewContext, Collection, CollectionCardPreview, Image, ProductCard, UserCard };
+
+//# sourceMappingURL=index.jsx.map

package/dist/cardview/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/cardview/index.tsx"],"sourcesContent":["// @ts-nocheck\nimport {\n  type JSX,\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  onMount,\n  splitProps,\n} from \"solid-js\";\nimport {\n  Collection,\n  GridList as HeadlessGridList,\n  GridListItem as HeadlessGridListItem,\n  type GridListProps as HeadlessGridListProps,\n  type GridListRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { CardContext, InternalCardViewContext } from \"../card/index\";\nimport { ImageCoordinator } from \"../image\";\nimport type { StyleString } from \"../style\";\nimport { focusRing, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { useProviderProps } from \"../provider\";\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type { RefLike, SpectrumContextValue } from \"../button/spectrum-context\";\nimport { mergeContextRefs } from \"../button/spectrum-context\";\n\nexport type CardViewLayout = \"grid\" | \"waterfall\";\nexport type CardViewSize = \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\nexport type CardViewDensity = \"compact\" | \"regular\" | \"spacious\";\nexport type CardViewVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"quiet\";\nexport type CardViewSelectionStyle = \"checkbox\" | \"highlight\";\nexport type CardViewLoadingState = \"idle\" | \"loading\" | \"loadingMore\" | \"sorting\" | \"filtering\";\n\nexport interface CardViewProps<T extends object> extends Omit<\n  HeadlessGridListProps<T>,\n  \"class\" | \"style\" | \"children\" | \"selectionBehavior\" | \"isLoading\"\n> {\n  /** The cards contained within the CardView. */\n  children: (item: T) => JSX.Element;\n  /** The layout of the cards. @default 'grid' */\n  layout?: CardViewLayout;\n  /** The size of the cards. @default 'M' */\n  size?: CardViewSize;\n  /** The amount of space between cards. @default 'regular' */\n  density?: CardViewDensity;\n  /** The visual style of the cards. @default 'primary' */\n  variant?: CardViewVariant;\n  /** How selection should be displayed. @default 'checkbox' */\n  selectionStyle?: CardViewSelectionStyle;\n  /** The loading state of the CardView. */\n  loadingState?: CardViewLoadingState;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Provides an action bar when cards are selected. */\n  renderActionBar?: (selectedKeys: \"all\" | Set<Key>) => JSX.Element;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Ref for the grid list root element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport const CardViewContext = createContext<SpectrumContextValue<CardViewProps<any>>>(null);\n\nconst layoutOptions = {\n  XS: {\n    compact: { minSpace: 6, minItemSize: 100, maxItemSize: 140 },\n    regular: { minSpace: 8, minItemSize: 100, maxItemSize: 140 },\n    spacious: { minSpace: 12, minItemSize: 100, maxItemSize: 140 },\n  },\n  S: {\n    compact: { minSpace: 8, minItemSize: 150, maxItemSize: 210 },\n    regular: { minSpace: 12, minItemSize: 150, maxItemSize: 210 },\n    spacious: { minSpace: 16, minItemSize: 150, maxItemSize: 210 },\n  },\n  M: {\n    compact: { minSpace: 12, minItemSize: 200, maxItemSize: 280 },\n    regular: { minSpace: 16, minItemSize: 200, maxItemSize: 280 },\n    spacious: { minSpace: 20, minItemSize: 200, maxItemSize: 280 },\n  },\n  L: {\n    compact: { minSpace: 16, minItemSize: 270, maxItemSize: 370 },\n    regular: { minSpace: 20, minItemSize: 270, maxItemSize: 370 },\n    spacious: { minSpace: 24, minItemSize: 270, maxItemSize: 370 },\n  },\n  XL: {\n    compact: { minSpace: 20, minItemSize: 340, maxItemSize: 460 },\n    regular: { minSpace: 24, minItemSize: 340, maxItemSize: 460 },\n    spacious: { minSpace: 28, minItemSize: 340, maxItemSize: 460 },\n  },\n} as const;\n\nconst SIZES: CardViewSize[] = [\"XS\", \"S\", \"M\", \"L\", \"XL\"];\n\nconst cardViewStyles = style<\n  GridListRenderProps & {\n    size: CardViewSize;\n    density: CardViewDensity;\n    isLoading?: boolean;\n    isActionBar?: boolean;\n  }\n>(\n  {\n    overflowY: {\n      default: \"auto\",\n      isLoading: \"hidden\",\n    },\n    display: {\n      default: \"grid\",\n      isEmpty: \"flex\",\n    },\n    boxSizing: \"border-box\",\n    flexDirection: \"column\",\n    alignItems: {\n      default: \"stretch\",\n      isEmpty: \"center\",\n    },\n    justifyContent: {\n      default: \"start\",\n      isEmpty: \"center\",\n    },\n    gap: {\n      density: {\n        compact: {\n          size: {\n            XS: \"[6px]\",\n            S: 8,\n            M: 12,\n            L: 16,\n            XL: 20,\n          },\n        },\n        regular: {\n          size: {\n            XS: 8,\n            S: 12,\n            M: 16,\n            L: 20,\n            XL: 24,\n          },\n        },\n        spacious: {\n          size: {\n            XS: 12,\n            S: 16,\n            M: 20,\n            L: 24,\n            XL: 28,\n          },\n        },\n      },\n    },\n    gridTemplateColumns: {\n      size: {\n        XS: \"[repeat(auto-fit,minmax(100px,140px))]\",\n        S: \"[repeat(auto-fit,minmax(150px,210px))]\",\n        M: \"[repeat(auto-fit,minmax(200px,280px))]\",\n        L: \"[repeat(auto-fit,minmax(270px,370px))]\",\n        XL: \"[repeat(auto-fit,minmax(340px,460px))]\",\n      },\n    },\n    ...focusRing(),\n    outlineStyle: {\n      default: \"none\",\n      isEmpty: {\n        isFocusVisible: \"solid\",\n      },\n    },\n    outlineOffset: -2,\n    height: {\n      isActionBar: \"full\",\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst wrapperStyles = style(\n  {\n    position: \"relative\",\n    overflow: \"clip\",\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nfunction selectedKeySet(keys: \"all\" | Iterable<Key> | undefined): \"all\" | Set<Key> {\n  if (keys === \"all\") {\n    return \"all\";\n  }\n\n  return new Set(keys ?? []);\n}\n\n/**\n * A CardView displays a group of related objects, with support for selection and bulk actions.\n */\nexport function CardView<T extends object>(props: CardViewProps<T>): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(providerProps, [\n    \"children\",\n    \"layout\",\n    \"size\",\n    \"density\",\n    \"variant\",\n    \"selectionStyle\",\n    \"loadingState\",\n    \"styles\",\n    \"renderActionBar\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"ref\",\n    \"isLoading\",\n    \"hasMore\",\n    \"onLoadMore\",\n  ]);\n  const requestedSize = (): CardViewSize => local.size ?? \"M\";\n  const density = (): CardViewDensity => local.density ?? \"regular\";\n  const variant = (): CardViewVariant => local.variant ?? \"primary\";\n  const layout = (): CardViewLayout => local.layout ?? \"grid\";\n  const selectionStyle = (): CardViewSelectionStyle => local.selectionStyle ?? \"checkbox\";\n  const isLoading = () =>\n    local.isLoading || local.loadingState === \"loading\" || local.loadingState === \"loadingMore\";\n  const [maxSizeIndex, setMaxSizeIndex] = createSignal(SIZES.length - 1);\n  let rootElement: HTMLDivElement | undefined;\n  const assignRootRef = mergeContextRefs(local.ref, (element: HTMLDivElement) => {\n    rootElement = element;\n  });\n\n  const updateSize = () => {\n    const width = rootElement?.clientWidth ?? 0;\n    if (width <= 0) {\n      setMaxSizeIndex(SIZES.length - 1);\n      return;\n    }\n\n    let index = SIZES.length - 1;\n    while (index > 0) {\n      const options = layoutOptions[SIZES[index]][density()];\n      if (width >= options.minItemSize * 2 + options.minSpace * 3) {\n        break;\n      }\n      index--;\n    }\n    setMaxSizeIndex(index);\n  };\n\n  onMount(() => {\n    updateSize();\n    if (typeof ResizeObserver !== \"function\" || !rootElement) {\n      return;\n    }\n\n    const observer = new ResizeObserver(updateSize);\n    observer.observe(rootElement);\n    onCleanup(() => observer.disconnect());\n  });\n\n  createEffect(() => {\n    density();\n    requestedSize();\n    updateSize();\n  });\n\n  const size = (): CardViewSize =>\n    SIZES[Math.min(maxSizeIndex(), Math.max(0, SIZES.indexOf(requestedSize())))];\n  const [actionSelectedKeys, setActionSelectedKeys] = createSignal<\"all\" | Set<Key>>(\n    selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),\n  );\n  createEffect(() => {\n    setActionSelectedKeys(\n      selectedKeySet(headlessProps.selectedKeys ?? headlessProps.defaultSelectedKeys),\n    );\n  });\n  const onSelectionChange = (keys: \"all\" | Set<Key>) => {\n    setActionSelectedKeys(keys === \"all\" ? \"all\" : new Set(keys));\n    headlessProps.onSelectionChange?.(keys);\n  };\n  const className = (renderProps: GridListRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      mergeStyles(\n        cardViewStyles({\n          ...renderProps,\n          size: size(),\n          density: density(),\n          isLoading: isLoading(),\n          isActionBar: !!local.renderActionBar,\n        }),\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const cardView = (\n    <InternalCardViewContext.Provider\n      value={{ ElementType: HeadlessGridListItem, layout: layout() }}\n    >\n      <CardContext.Provider value={{ size: size(), variant: variant() }}>\n        <ImageCoordinator>\n          <HeadlessGridList\n            {...headlessProps}\n            ref={(element: HTMLDivElement) => assignRootRef(element)}\n            class={className}\n            style={local.UNSAFE_style}\n            selectionBehavior={selectionStyle() === \"highlight\" ? \"replace\" : \"toggle\"}\n            onSelectionChange={onSelectionChange}\n            isLoading={isLoading()}\n            hasMore={local.hasMore ?? !!local.onLoadMore}\n            onLoadMore={local.onLoadMore}\n            data-layout={layout()}\n            data-size={size()}\n            data-requested-size={requestedSize()}\n            data-density={density()}\n            data-variant={variant()}\n            data-selection-style={selectionStyle()}\n          >\n            {(item: T) => local.children(item)}\n          </HeadlessGridList>\n        </ImageCoordinator>\n      </CardContext.Provider>\n    </InternalCardViewContext.Provider>\n  );\n\n  if (!local.renderActionBar) {\n    return cardView;\n  }\n\n  return (\n    <div class={wrapperStyles({}, local.styles)} style={local.UNSAFE_style}>\n      {cardView}\n      {local.renderActionBar(actionSelectedKeys())}\n    </div>\n  );\n}\n\nexport { Collection };\nexport {\n  Card,\n  CardPreview,\n  CollectionCardPreview,\n  AssetCard,\n  UserCard,\n  ProductCard,\n  CardContext,\n  Image,\n} from \"../card/index\";\nexport type {\n  CardProps,\n  CardPreviewProps,\n  AssetCardProps,\n  UserCardProps,\n  ProductCardProps,\n  CardRenderProps,\n  CardDensity,\n  CardSize,\n  CardVariant,\n} from \"../card/index\";\n"],"mappings":"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"}

package/dist/checkbox/index.d.ts

@@ -0,0 +1,84 @@
+import { type JSX } from "solid-js";
+import { type CheckboxFieldProps as HeadlessCheckboxFieldProps, type CheckboxGroupProps as HeadlessCheckboxGroupProps } from "@proyecto-viviana/solidaria-components";
+import type { StyleString } from "../style";
+import { type RefLike, type SpectrumContextValue } from "../button/spectrum-context";
+export type CheckboxSize = "S" | "M" | "L" | "XL" | "sm" | "md" | "lg";
+export type CheckboxGroupOrientation = "horizontal" | "vertical";
+export type CheckboxGroupLabelPosition = "top" | "side";
+export type CheckboxGroupLabelAlign = "start" | "end";
+export type CheckboxGroupNecessityIndicator = "icon" | "label";
+export interface CheckboxProps extends Omit<HeadlessCheckboxFieldProps, "class" | "children" | "style" | "slot" | "ref" | "inputRef"> {
+    /** The size of the checkbox. */
+    size?: CheckboxSize;
+    /** Whether the checkbox should be displayed with an emphasized style. */
+    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;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label text for the checkbox. */
+    children?: JSX.Element;
+    /** A description for the checkbox, displayed below the label. */
+    description?: JSX.Element;
+    /** An error message for the checkbox, displayed when invalid. */
+    errorMessage?: JSX.Element;
+    /** Slot name when used in a Spectrum context. */
+    slot?: string | null;
+    /** Ref for the underlying field (root `<div>`) element. */
+    ref?: RefLike<HTMLDivElement>;
+    /** Ref for the underlying input element. */
+    inputRef?: RefLike<HTMLInputElement>;
+}
+export interface CheckboxGroupProps extends Omit<HeadlessCheckboxGroupProps, "class" | "children" | "style" | "slot" | "ref"> {
+    /** The size of the Checkboxes in the CheckboxGroup. */
+    size?: CheckboxSize;
+    /** The axis the checkboxes should align with. */
+    orientation?: CheckboxGroupOrientation;
+    /** The label's overall position relative to the checkbox items. */
+    labelPosition?: CheckboxGroupLabelPosition;
+    /** The label's horizontal alignment relative to the checkbox items. */
+    labelAlign?: CheckboxGroupLabelAlign;
+    /** Whether the required state should be shown as an icon or text label. */
+    necessityIndicator?: CheckboxGroupNecessityIndicator;
+    /** A contextual help element to place next to the label. */
+    contextualHelp?: JSX.Element;
+    /** Whether the Checkboxes should be displayed with an emphasized style. */
+    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;
+    /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */
+    class?: string;
+    /** Children checkboxes. */
+    children?: JSX.Element;
+    /** Label for the group. */
+    label?: JSX.Element;
+    /** Description for the group. */
+    description?: JSX.Element;
+    /** Error message when invalid. */
+    errorMessage?: JSX.Element;
+    /** Slot name when used in a Spectrum context. */
+    slot?: string | null;
+    /** Ref for the checkbox group root element. */
+    ref?: RefLike<HTMLDivElement>;
+}
+export declare const CheckboxContext: import("solid-js").Context<SpectrumContextValue<CheckboxProps>>;
+export declare const CheckboxGroupContext: import("solid-js").Context<SpectrumContextValue<CheckboxGroupProps>>;
+/**
+ * A checkbox allows users to select one or more items from a set.
+ *
+ */
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
+/**
+ * A checkbox group allows users to select multiple items from a list.
+ *
+ */
+export declare function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/checkbox/index.tsx"],"names":[],"mappings":"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"}