@gnist/design-system 0.0.6

package/dist/components/surfaces/cards/RadioCard.d.ts

@@ -0,0 +1,26 @@
+import { RadioButtonProps } from "../../actions/selectionControls/RadioButton.js";
+import { HtmlSelectionControlProps, SelectionCardProps } from "./internal/SelectionCard.js";
+interface RadioCardProps extends SelectionCardProps {
+    /**
+     * Change handler function
+     */
+    onChange: RadioButtonProps["onChange"];
+    /**
+     * A radio group is defined by giving each of radio buttons in the group the same name.
+     */
+    name: RadioButtonProps["name"];
+    /**
+     * Props which will be passed to the radio
+     */
+    radioProps?: HtmlSelectionControlProps;
+}
+/**
+Radio cards allow you to present an option and optionally provide additional information and supplementary actions.
+
+The radio card includes a radio button, label, and description. The card is clickable from top to above the description text.
+
+The card serves to draw extra attention to a radio button selection in the user interface.
+ */
+export declare const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=RadioCard.d.ts.map

package/dist/components/surfaces/cards/RadioCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,cAAe,SAAQ,kBAAkB;IAC/C;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;CAC1C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,yBAAyB,CACnD,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAkDtD,CAAC"}

package/dist/components/surfaces/cards/RadioCard.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { RadioButton } from "../../actions/selectionControls/RadioButton.js";
+import { SelectionCardLoader, SelectionCardContent } from "./internal/SelectionCard.js";
+import { InfoCard } from "./InfoCard.js";
+import { forwardRef } from "react";
+import { StyledCardRecipe } from "./checkboxCard.css.js";
+const RadioCard = forwardRef(function RadioCard2({ label, description, value, id, name, onChange, children, isLoading, validity, cardStyle, ...props }, ref) {
+  return jsx(InfoCard, { ...props, ref, className: StyledCardRecipe({
+    disabled: props.disabled,
+    cardStyle: cardStyle ?? "elevation"
+  }), children: isLoading ? jsx(SelectionCardLoader, { type: "radio", density: props.density }) : jsxs(Fragment, { children: [jsx(RadioButton, { label, value, onChange, disabled: props.disabled, validity, id, name }), jsx(SelectionCardContent, { description, value, density: props.density, children })] }) });
+});
+export {
+  RadioCard
+};

package/dist/components/surfaces/cards/SharedComponents.cjs

@@ -0,0 +1,23 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+require("../../../building-blocks/inputs/internal/TextBelowInput.cjs");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+require("../../../foundation/iconography/Icon.cjs");
+const index = require("../../../foundation/typography/index.cjs");
+require("react");
+require("classnames");
+require("../../../foundation/logos/Logo.css.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const TextSkeleton = require("../../../building-blocks/skeletons/TextSkeleton.cjs");
+require("@gnist/themes/tokens.css.js");
+require("react-content-loader");
+const LoadingSkeleton = () => jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: atoms_css_js.atoms({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-start"
+}), children: [jsxRuntime.jsx(index.Heading3Text, { children: jsxRuntime.jsx(TextSkeleton.TextSkeleton, { width: "10em" }) }), jsxRuntime.jsx("div", { className: atoms_css_js.atoms({ marginTop: "base" }), children: jsxRuntime.jsx(TextSkeleton.TextSkeleton, { width: "100px" }) })] }) });
+exports.LoadingSkeleton = LoadingSkeleton;

package/dist/components/surfaces/cards/SharedComponents.d.ts

@@ -0,0 +1,2 @@
+export declare const LoadingSkeleton: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SharedComponents.d.ts.map

package/dist/components/surfaces/cards/SharedComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedComponents.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/SharedComponents.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,+CAiB3B,CAAC"}

package/dist/components/surfaces/cards/SharedComponents.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import "../../../building-blocks/inputs/internal/TextBelowInput.js";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import "../../../foundation/iconography/Icon.js";
+import { Heading3Text } from "../../../foundation/typography/index.js";
+import "react";
+import "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { TextSkeleton } from "../../../building-blocks/skeletons/TextSkeleton.js";
+import "@gnist/themes/tokens.css.js";
+import "react-content-loader";
+const LoadingSkeleton = () => jsx(Fragment, { children: jsxs("div", { className: atoms({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-start"
+}), children: [jsx(Heading3Text, { children: jsx(TextSkeleton, { width: "10em" }) }), jsx("div", { className: atoms({ marginTop: "base" }), children: jsx(TextSkeleton, { width: "100px" }) })] }) });
+export {
+  LoadingSkeleton
+};

package/dist/components/surfaces/cards/cards.css.cjs

@@ -0,0 +1,86 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const animations_css = require("../../../styles/animations.css.cjs");
+const states_css = require("../../../styles/states.css.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const colors_css_js = require("@gnist/themes/colors.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const typography_css_js = require("@gnist/themes/typography.css.js");
+const css = require("@vanilla-extract/css");
+const recipes = require("@vanilla-extract/recipes");
+const cardsBase = css.style([
+  atoms_css_js.atoms({
+    display: "block",
+    boxShadow: "low",
+    borderRadius: "card"
+  }),
+  colors_css_js.boxColors["surface-variant"],
+  {
+    boxSizing: "border-box",
+    position: "relative",
+    textDecoration: "none"
+  }
+]);
+const actionLayers = css.style([
+  animations_css.clickAnimation,
+  states_css.focusStyle,
+  states_css.stateLayers({
+    borderSize: "x-small",
+    borderRadius: "card",
+    backgroundColor: "on-surface-variant",
+    setFocusState: true
+  })
+]);
+const cardsRecipe = recipes.recipe({
+  base: [cardsBase],
+  variants: {
+    density: {
+      default: atoms_css_js.atoms({ padding: "l" }),
+      compact: atoms_css_js.atoms({ padding: "xs" })
+    },
+    transparent: {
+      true: { backgroundColor: "transparent" },
+      false: ""
+    },
+    isLoading: {
+      false: "",
+      //styling depends on type
+      true: ""
+    },
+    type: {
+      action: [
+        { border: "none", width: "100%", textAlign: "start" },
+        typography_css_js.responsiveTypography["body"]
+      ],
+      checkbox: {},
+      info: [
+        {
+          borderStyle: "solid",
+          borderWidth: tokens_css_js.tokens.stroke["x-small"],
+          borderColor: tokens_css_js.tokens.color.outline,
+          boxShadow: "none"
+        }
+      ],
+      link: { cursor: "pointer" },
+      radio: {},
+      selection: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variants: { isLoading: false, type: "action" },
+      style: [{ cursor: "pointer" }, actionLayers]
+    },
+    {
+      variants: { type: "link", isLoading: false },
+      style: actionLayers
+    }
+  ],
+  defaultVariants: {
+    density: "default",
+    isLoading: false,
+    transparent: false
+  }
+});
+exports.cardsRecipe = cardsRecipe;

package/dist/components/surfaces/cards/cards.css.d.ts

@@ -0,0 +1,36 @@
+export declare const cardsRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        default: string;
+        compact: string;
+    };
+    transparent: {
+        true: {
+            backgroundColor: "transparent";
+        };
+        false: string;
+    };
+    isLoading: {
+        false: string;
+        true: string;
+    };
+    type: {
+        action: (string | {
+            border: "none";
+            width: "100%";
+            textAlign: "start";
+        })[];
+        checkbox: {};
+        info: {
+            borderStyle: "solid";
+            borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            boxShadow: "none";
+        }[];
+        link: {
+            cursor: "pointer";
+        };
+        radio: {};
+        selection: {};
+    };
+}>;
+//# sourceMappingURL=cards.css.d.ts.map

package/dist/components/surfaces/cards/cards.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cards.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/cards.css.ts"],"names":[],"mappings":"AAqCA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDtB,CAAC"}

package/dist/components/surfaces/cards/cards.css.js

@@ -0,0 +1,86 @@
+"use client";
+import { clickAnimation } from "../../../styles/animations.css.js";
+import { focusStyle, stateLayers } from "../../../styles/states.css.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { boxColors } from "@gnist/themes/colors.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { responsiveTypography } from "@gnist/themes/typography.css.js";
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+const cardsBase = style([
+  atoms({
+    display: "block",
+    boxShadow: "low",
+    borderRadius: "card"
+  }),
+  boxColors["surface-variant"],
+  {
+    boxSizing: "border-box",
+    position: "relative",
+    textDecoration: "none"
+  }
+]);
+const actionLayers = style([
+  clickAnimation,
+  focusStyle,
+  stateLayers({
+    borderSize: "x-small",
+    borderRadius: "card",
+    backgroundColor: "on-surface-variant",
+    setFocusState: true
+  })
+]);
+const cardsRecipe = recipe({
+  base: [cardsBase],
+  variants: {
+    density: {
+      default: atoms({ padding: "l" }),
+      compact: atoms({ padding: "xs" })
+    },
+    transparent: {
+      true: { backgroundColor: "transparent" },
+      false: ""
+    },
+    isLoading: {
+      false: "",
+      //styling depends on type
+      true: ""
+    },
+    type: {
+      action: [
+        { border: "none", width: "100%", textAlign: "start" },
+        responsiveTypography["body"]
+      ],
+      checkbox: {},
+      info: [
+        {
+          borderStyle: "solid",
+          borderWidth: tokens.stroke["x-small"],
+          borderColor: tokens.color.outline,
+          boxShadow: "none"
+        }
+      ],
+      link: { cursor: "pointer" },
+      radio: {},
+      selection: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variants: { isLoading: false, type: "action" },
+      style: [{ cursor: "pointer" }, actionLayers]
+    },
+    {
+      variants: { type: "link", isLoading: false },
+      style: actionLayers
+    }
+  ],
+  defaultVariants: {
+    density: "default",
+    isLoading: false,
+    transparent: false
+  }
+});
+export {
+  cardsRecipe
+};

package/dist/components/surfaces/cards/checkboxCard.css.cjs

@@ -0,0 +1,34 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const recipes = require("@vanilla-extract/recipes");
+const StyledCardRecipe = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      display: "flex",
+      flexDirection: "column"
+    }),
+    {
+      position: "relative"
+    }
+  ],
+  variants: {
+    disabled: {
+      true: {
+        color: tokens_css_js.tokens.color["on-disabled"]
+      }
+    },
+    cardStyle: {
+      elevation: [
+        {
+          boxShadow: tokens_css_js.tokens.elevation.low,
+          border: "none"
+        }
+      ],
+      outline: []
+    }
+  }
+});
+exports.StyledCardRecipe = StyledCardRecipe;

package/dist/components/surfaces/cards/checkboxCard.css.d.ts

@@ -0,0 +1,15 @@
+export declare const StyledCardRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+    cardStyle: {
+        elevation: {
+            boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: "none";
+        }[];
+        outline: never[];
+    };
+}>;
+//# sourceMappingURL=checkboxCard.css.d.ts.map

package/dist/components/surfaces/cards/checkboxCard.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxCard.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/checkboxCard.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;EA0B3B,CAAC"}

package/dist/components/surfaces/cards/checkboxCard.css.js

@@ -0,0 +1,34 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { recipe } from "@vanilla-extract/recipes";
+const StyledCardRecipe = recipe({
+  base: [
+    atoms({
+      display: "flex",
+      flexDirection: "column"
+    }),
+    {
+      position: "relative"
+    }
+  ],
+  variants: {
+    disabled: {
+      true: {
+        color: tokens.color["on-disabled"]
+      }
+    },
+    cardStyle: {
+      elevation: [
+        {
+          boxShadow: tokens.elevation.low,
+          border: "none"
+        }
+      ],
+      outline: []
+    }
+  }
+});
+export {
+  StyledCardRecipe
+};

package/dist/components/surfaces/cards/index.cjs

@@ -0,0 +1,13 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ActionCard = require("./ActionCard.cjs");
+const CheckboxCard = require("./CheckboxCard.cjs");
+const InfoCard = require("./InfoCard.cjs");
+const LinkCard = require("./LinkCard.cjs");
+const RadioCard = require("./RadioCard.cjs");
+exports.ActionCard = ActionCard.ActionCard;
+exports.CheckboxCard = CheckboxCard.CheckboxCard;
+exports.InfoCard = InfoCard.InfoCard;
+exports.LinkCard = LinkCard.LinkCard;
+exports.RadioCard = RadioCard.RadioCard;

package/dist/components/surfaces/cards/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./ActionCard.js";
+export * from "./CheckboxCard.js";
+export * from "./InfoCard.js";
+export * from "./LinkCard.js";
+export * from "./RadioCard.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/surfaces/cards/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/components/surfaces/cards/index.js

@@ -0,0 +1,13 @@
+"use client";
+import { ActionCard } from "./ActionCard.js";
+import { CheckboxCard } from "./CheckboxCard.js";
+import { InfoCard } from "./InfoCard.js";
+import { LinkCard } from "./LinkCard.js";
+import { RadioCard } from "./RadioCard.js";
+export {
+  ActionCard,
+  CheckboxCard,
+  InfoCard,
+  LinkCard,
+  RadioCard
+};

package/dist/components/surfaces/cards/internal/SelectionCard.cjs

@@ -0,0 +1,34 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("@formkit/auto-animate/react");
+const componentUtils = require("@gnist/component-utils");
+require("../../../../building-blocks/inputs/internal/TextBelowInput.cjs");
+require("../../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../../foundation/iconography/icons.cjs");
+require("../../../../foundation/iconography/Icon.cjs");
+require("../../../../foundation/typography/index.cjs");
+require("react");
+require("classnames");
+require("../../../../foundation/logos/Logo.css.cjs");
+require("@gnist/themes/atoms.css.js");
+const TextSkeleton = require("../../../../building-blocks/skeletons/TextSkeleton.cjs");
+require("@gnist/themes/tokens.css.js");
+require("react-content-loader");
+const RectangularSkeleton = require("../../../../building-blocks/skeletons/RectangularSkeleton.cjs");
+require("../../../../utilities/layout/Column.cjs");
+const Row = require("../../../../utilities/layout/Row.cjs");
+const SelectionCard_css = require("./SelectionCard.css.cjs");
+const SelectionCardLoader = ({ type, density }) => jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Row.Row, { gap: "base", verticalAlign: "baseline", children: [jsxRuntime.jsx(RectangularSkeleton.RectangularSkeleton, { className: SelectionCard_css.SelectionControlSkeletonRecipe({ type }) }), jsxRuntime.jsx(TextSkeleton.TextSkeleton, {})] }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CardDescription, { density, children: jsxRuntime.jsx(TextSkeleton.TextSkeleton, {}) }) })] });
+const CardDescription = componentUtils.component("CardDescription", SelectionCard_css.cardDescription, "span");
+const SelectionCardContent = ({ description, value, density, children }) => {
+  const [animationParent] = react.useAutoAnimate();
+  if (!(description || children)) {
+    return null;
+  }
+  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { ref: animationParent, children: [description && jsxRuntime.jsx(CardDescription, { density, children: description }), value && children && jsxRuntime.jsx(CardDescription, { density, children })] }) });
+};
+exports.SelectionCardContent = SelectionCardContent;
+exports.SelectionCardLoader = SelectionCardLoader;

package/dist/components/surfaces/cards/internal/SelectionCard.css.cjs

@@ -0,0 +1,44 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const recipes = require("@vanilla-extract/recipes");
+const cardDescription = recipes.recipe({
+  base: [atoms_css_js.atoms({ display: "block" })],
+  variants: {
+    density: {
+      default: atoms_css_js.atoms({
+        typography: "detail-large",
+        // Replaced description-large with 0.875rem fontsize
+        marginTop: "xxs"
+      }),
+      compact: atoms_css_js.atoms({
+        typography: "detail-small",
+        // Replaced description-small with 0.75rem fontsize
+        marginTop: "base"
+      })
+    }
+  },
+  defaultVariants: { density: "default" }
+});
+const SelectionControlSkeletonRecipe = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      height: "s",
+      width: "s",
+      margin: "base"
+    })
+  ],
+  variants: {
+    type: {
+      radio: atoms_css_js.atoms({
+        borderRadius: "full"
+      }),
+      checkbox: atoms_css_js.atoms({
+        borderRadius: "button"
+      })
+    }
+  }
+});
+exports.SelectionControlSkeletonRecipe = SelectionControlSkeletonRecipe;
+exports.cardDescription = cardDescription;

package/dist/components/surfaces/cards/internal/SelectionCard.css.d.ts

@@ -0,0 +1,13 @@
+export declare const cardDescription: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        default: string;
+        compact: string;
+    };
+}>;
+export declare const SelectionControlSkeletonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    type: {
+        radio: string;
+        checkbox: string;
+    };
+}>;
+//# sourceMappingURL=SelectionCard.css.d.ts.map

package/dist/components/surfaces/cards/internal/SelectionCard.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionCard.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/surfaces/cards/internal/SelectionCard.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe;;;;;EAe1B,CAAC;AAEH,eAAO,MAAM,8BAA8B;;;;;EAkBzC,CAAC"}

package/dist/components/surfaces/cards/internal/SelectionCard.css.js

@@ -0,0 +1,44 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { recipe } from "@vanilla-extract/recipes";
+const cardDescription = recipe({
+  base: [atoms({ display: "block" })],
+  variants: {
+    density: {
+      default: atoms({
+        typography: "detail-large",
+        // Replaced description-large with 0.875rem fontsize
+        marginTop: "xxs"
+      }),
+      compact: atoms({
+        typography: "detail-small",
+        // Replaced description-small with 0.75rem fontsize
+        marginTop: "base"
+      })
+    }
+  },
+  defaultVariants: { density: "default" }
+});
+const SelectionControlSkeletonRecipe = recipe({
+  base: [
+    atoms({
+      height: "s",
+      width: "s",
+      margin: "base"
+    })
+  ],
+  variants: {
+    type: {
+      radio: atoms({
+        borderRadius: "full"
+      }),
+      checkbox: atoms({
+        borderRadius: "button"
+      })
+    }
+  }
+});
+export {
+  SelectionControlSkeletonRecipe,
+  cardDescription
+};

package/dist/components/surfaces/cards/internal/SelectionCard.d.ts

@@ -0,0 +1,24 @@
+import { CommonInputProps, Validity } from "../../../inputs/textFields/shared.js";
+import { DensityTextProps } from "../../../../foundation";
+import { CardBaseProps } from "../CardProps.js";
+export interface CardStyleProps {
+    cardStyle?: "elevation" | "outline";
+}
+export type HtmlSelectionControlProps = Omit<React.HTMLProps<HTMLInputElement>, "label" | "value" | "onchange" | "validity" | "id" | "as">;
+export interface BaseSelectionCardProps {
+    /** Optional description, which is always shown below the selection control. */
+    description?: React.ReactNode;
+    /**
+     * Children are only shown while the card is selected.
+     */
+    children?: React.ReactNode;
+}
+export interface SelectionCardProps extends BaseSelectionCardProps, CardBaseProps<"div">, CardStyleProps, CommonInputProps<boolean>, Validity<{
+    errorMsgRequired: false;
+}> {
+}
+export declare const SelectionCardLoader: ({ type, density, }: {
+    type: "checkbox" | "radio";
+} & DensityTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionCardContent: ({ description, value, density, children, }: Pick<SelectionCardProps, "description" | "value" | "density" | "children">) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SelectionCard.d.ts.map

package/dist/components/surfaces/cards/internal/SelectionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/surfaces/cards/internal/SelectionCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACX,6CAAoE;AACrE,OAAO,EAAE,gBAAgB,EAAE,+BAAwC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,MAAM,WAAW,cAAc;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACvC;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CACxC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACjC,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,CAC5D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,kBACb,SAAQ,sBAAsB,EAC1B,aAAa,CAAC,KAAK,CAAC,EACpB,cAAc,EACd,gBAAgB,CAAC,OAAO,CAAC,EACzB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;CAAG;AAEhD,eAAO,MAAM,mBAAmB,uBAG7B;IAAE,IAAI,EAAE,UAAU,GAAG,OAAO,CAAA;CAAE,GAAG,gBAAgB,4CAcnD,CAAC;AAIF,eAAO,MAAM,oBAAoB,+CAK9B,IAAI,CACH,kBAAkB,EAClB,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CACnD,mDAqBA,CAAC"}

package/dist/components/surfaces/cards/internal/SelectionCard.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { component } from "@gnist/component-utils";
+import "../../../../building-blocks/inputs/internal/TextBelowInput.js";
+import "../../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../../foundation/iconography/IconVariantProvider.js";
+import "../../../../foundation/iconography/icons.js";
+import "../../../../foundation/iconography/Icon.js";
+import "../../../../foundation/typography/index.js";
+import "react";
+import "classnames";
+import "../../../../foundation/logos/Logo.css.js";
+import "@gnist/themes/atoms.css.js";
+import { TextSkeleton } from "../../../../building-blocks/skeletons/TextSkeleton.js";
+import "@gnist/themes/tokens.css.js";
+import "react-content-loader";
+import { RectangularSkeleton } from "../../../../building-blocks/skeletons/RectangularSkeleton.js";
+import "../../../../utilities/layout/Column.js";
+import { Row } from "../../../../utilities/layout/Row.js";
+import { cardDescription, SelectionControlSkeletonRecipe } from "./SelectionCard.css.js";
+const SelectionCardLoader = ({ type, density }) => jsxs(Fragment, { children: [jsxs(Row, { gap: "base", verticalAlign: "baseline", children: [jsx(RectangularSkeleton, { className: SelectionControlSkeletonRecipe({ type }) }), jsx(TextSkeleton, {})] }), jsx("div", { children: jsx(CardDescription, { density, children: jsx(TextSkeleton, {}) }) })] });
+const CardDescription = component("CardDescription", cardDescription, "span");
+const SelectionCardContent = ({ description, value, density, children }) => {
+  const [animationParent] = useAutoAnimate();
+  if (!(description || children)) {
+    return null;
+  }
+  return jsx(Fragment, { children: jsxs("div", { ref: animationParent, children: [description && jsx(CardDescription, { density, children: description }), value && children && jsx(CardDescription, { density, children })] }) });
+};
+export {
+  SelectionCardContent,
+  SelectionCardLoader
+};