@gnist/design-system 0.1.0

package/dist/components/actions/selectionControls/RadioButton.cjs

@@ -0,0 +1,54 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+const ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
+require("../../../utilities/accessibility/visuallyHidden.css.cjs");
+const index = require("../../../utilities/html/index.cjs");
+const classNames = require("classnames");
+const React = require("react");
+const radiobutton_css = require("./radiobutton.css.cjs");
+const shared_css = require("./shared.css.cjs");
+const shared = require("./shared.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const CustomRadioButton = ({ value, disabled, validity }) => {
+  return jsxRuntime.jsx("span", { className: radiobutton_css.RadioButtonRecipe({
+    disabled,
+    validity: validity == null ? void 0 : validity.type
+  }), "aria-hidden": true, children: jsxRuntime.jsx("span", { className: radiobutton_css.CheckedCircleRecipe({
+    checked: value,
+    disabled,
+    validity: validity == null ? void 0 : validity.type
+  }) }) });
+};
+const defaultRender = (radio, description) => jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [radio, jsxRuntime.jsx("div", { className: shared_css.indentedDescriptionStyle, children: description })] });
+const RadioButton = React.forwardRef(function RadioButton2({
+  value,
+  onChange,
+  disabled,
+  validity,
+  label,
+  description,
+  id = index.createValidHtmlId(label),
+  hideLabel = false,
+  canShowErrorMessage = false,
+  className,
+  render = defaultRender,
+  // Input element props
+  ...rest
+}, ref) {
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = InputHelperText.useInputHelperText({
+    id: helperId,
+    validity,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
+  const radioButtonElement = jsxRuntime.jsx("span", { className: classNames__default.default(shared_css.InputWrapper, className), ref, children: jsxRuntime.jsxs("label", { htmlFor: inputId, className: shared_css.LabelRecipe({ disabled }), id: labelId, children: [jsxRuntime.jsx("input", { type: "radio", id: inputId, disabled, onChange, checked: value === true, className: shared_css.InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsxRuntime.jsx(CustomRadioButton, { value, disabled, validity }), hideLabel ? jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label }) : jsxRuntime.jsx("span", { className: shared_css.LabelStyle, children: label })] }) });
+  const descriptionElement = description ? jsxRuntime.jsx(shared.SelectionDescription, { disabled, children: description }) : void 0;
+  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: render(radioButtonElement, descriptionElement) });
+});
+exports.RadioButton = RadioButton;

package/dist/components/actions/selectionControls/RadioButton.d.ts

@@ -0,0 +1,4 @@
+import { SelectionControlProps } from "./shared.js";
+export type RadioButtonProps = SelectionControlProps<boolean>;
+export declare const RadioButton: React.ForwardRefExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=RadioButton.d.ts.map

package/dist/components/actions/selectionControls/RadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/RadioButton.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;AAqC9D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,yBAAyB,CACrD,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAuEtE,CAAC"}

package/dist/components/actions/selectionControls/RadioButton.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useInputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
+import "../../../utilities/accessibility/visuallyHidden.css.js";
+import { createValidHtmlId } from "../../../utilities/html/index.js";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import { RadioButtonRecipe, CheckedCircleRecipe } from "./radiobutton.css.js";
+import { InputWrapper, LabelRecipe, InputStyleRecipe, LabelStyle, indentedDescriptionStyle } from "./shared.css.js";
+import { SelectionDescription, HelperTextWrapper } from "./shared.js";
+const CustomRadioButton = ({ value, disabled, validity }) => {
+  return jsx("span", { className: RadioButtonRecipe({
+    disabled,
+    validity: validity == null ? void 0 : validity.type
+  }), "aria-hidden": true, children: jsx("span", { className: CheckedCircleRecipe({
+    checked: value,
+    disabled,
+    validity: validity == null ? void 0 : validity.type
+  }) }) });
+};
+const defaultRender = (radio, description) => jsxs(Fragment, { children: [radio, jsx("div", { className: indentedDescriptionStyle, children: description })] });
+const RadioButton = forwardRef(function RadioButton2({
+  value,
+  onChange,
+  disabled,
+  validity,
+  label,
+  description,
+  id = createValidHtmlId(label),
+  hideLabel = false,
+  canShowErrorMessage = false,
+  className,
+  render = defaultRender,
+  // Input element props
+  ...rest
+}, ref) {
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = useInputHelperText({
+    id: helperId,
+    validity,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
+  const radioButtonElement = jsx("span", { className: classNames(InputWrapper, className), ref, children: jsxs("label", { htmlFor: inputId, className: LabelRecipe({ disabled }), id: labelId, children: [jsx("input", { type: "radio", id: inputId, disabled, onChange, checked: value === true, className: InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsx(CustomRadioButton, { value, disabled, validity }), hideLabel ? jsx(ScreenReaderOnly, { children: label }) : jsx("span", { className: LabelStyle, children: label })] }) });
+  const descriptionElement = description ? jsx(SelectionDescription, { disabled, children: description }) : void 0;
+  return jsx(HelperTextWrapper, { ...helperTextProps, children: render(radioButtonElement, descriptionElement) });
+});
+export {
+  RadioButton
+};

package/dist/components/actions/selectionControls/checkbox.css.cjs

@@ -0,0 +1,119 @@
+"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 CheckboxRecipe = recipes.recipe({
+  base: [
+    {
+      borderStyle: "solid",
+      boxSizing: "border-box"
+    },
+    atoms_css_js.atoms({
+      display: "inline-flex",
+      margin: "base",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "s",
+      height: "s",
+      backgroundColor: "surface",
+      borderColor: "on-surface",
+      borderWidth: "small"
+    })
+  ],
+  variants: {
+    checked: {
+      true: [
+        atoms_css_js.atoms({
+          backgroundColor: "on-surface"
+        })
+      ],
+      false: {},
+      indeterminate: [
+        atoms_css_js.atoms({
+          backgroundColor: "on-surface"
+        })
+      ]
+    },
+    validity: {
+      error: [
+        atoms_css_js.atoms({
+          borderColor: "error"
+        })
+      ]
+    },
+    disabled: {
+      true: [
+        atoms_css_js.atoms({
+          backgroundColor: "disabled",
+          borderColor: "disabled"
+        }),
+        {
+          cursor: "not-allowed"
+        }
+      ]
+    }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        checked: true,
+        validity: "error",
+        disabled: false
+      },
+      style: [
+        atoms_css_js.atoms({
+          backgroundColor: "error",
+          borderColor: "error"
+        })
+      ]
+    },
+    {
+      variants: {
+        checked: "indeterminate",
+        validity: "error",
+        disabled: false
+      },
+      style: [
+        atoms_css_js.atoms({
+          backgroundColor: "error",
+          borderColor: "error"
+        })
+      ]
+    },
+    {
+      variants: {
+        validity: "error",
+        disabled: true
+      },
+      style: [
+        {
+          borderColor: tokens_css_js.tokens.color.disabled
+        }
+      ]
+    }
+  ]
+});
+const checkbox = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      color: "surface"
+    }),
+    {
+      display: "flex",
+      alignItems: "center"
+    }
+  ],
+  variants: {
+    disabled: {
+      true: [
+        atoms_css_js.atoms({
+          color: "on-disabled"
+        })
+      ]
+    }
+  }
+});
+exports.CheckboxRecipe = CheckboxRecipe;
+exports.checkbox = checkbox;

package/dist/components/actions/selectionControls/checkbox.css.d.ts

@@ -0,0 +1,21 @@
+export declare const CheckboxRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    checked: {
+        true: string[];
+        false: {};
+        indeterminate: string[];
+    };
+    validity: {
+        error: string[];
+    };
+    disabled: {
+        true: (string | {
+            cursor: "not-allowed";
+        })[];
+    };
+}>;
+export declare const checkbox: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: string[];
+    };
+}>;
+//# sourceMappingURL=checkbox.css.d.ts.map

package/dist/components/actions/selectionControls/checkbox.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/checkbox.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EA0FzB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;EAmBnB,CAAC"}

package/dist/components/actions/selectionControls/checkbox.css.js

@@ -0,0 +1,119 @@
+"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 CheckboxRecipe = recipe({
+  base: [
+    {
+      borderStyle: "solid",
+      boxSizing: "border-box"
+    },
+    atoms({
+      display: "inline-flex",
+      margin: "base",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "s",
+      height: "s",
+      backgroundColor: "surface",
+      borderColor: "on-surface",
+      borderWidth: "small"
+    })
+  ],
+  variants: {
+    checked: {
+      true: [
+        atoms({
+          backgroundColor: "on-surface"
+        })
+      ],
+      false: {},
+      indeterminate: [
+        atoms({
+          backgroundColor: "on-surface"
+        })
+      ]
+    },
+    validity: {
+      error: [
+        atoms({
+          borderColor: "error"
+        })
+      ]
+    },
+    disabled: {
+      true: [
+        atoms({
+          backgroundColor: "disabled",
+          borderColor: "disabled"
+        }),
+        {
+          cursor: "not-allowed"
+        }
+      ]
+    }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        checked: true,
+        validity: "error",
+        disabled: false
+      },
+      style: [
+        atoms({
+          backgroundColor: "error",
+          borderColor: "error"
+        })
+      ]
+    },
+    {
+      variants: {
+        checked: "indeterminate",
+        validity: "error",
+        disabled: false
+      },
+      style: [
+        atoms({
+          backgroundColor: "error",
+          borderColor: "error"
+        })
+      ]
+    },
+    {
+      variants: {
+        validity: "error",
+        disabled: true
+      },
+      style: [
+        {
+          borderColor: tokens.color.disabled
+        }
+      ]
+    }
+  ]
+});
+const checkbox = recipe({
+  base: [
+    atoms({
+      color: "surface"
+    }),
+    {
+      display: "flex",
+      alignItems: "center"
+    }
+  ],
+  variants: {
+    disabled: {
+      true: [
+        atoms({
+          color: "on-disabled"
+        })
+      ]
+    }
+  }
+});
+export {
+  CheckboxRecipe,
+  checkbox
+};

package/dist/components/actions/selectionControls/index.cjs

@@ -0,0 +1,7 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Checkbox = require("./Checkbox.cjs");
+const RadioButton = require("./RadioButton.cjs");
+exports.Checkbox = Checkbox.Checkbox;
+exports.RadioButton = RadioButton.RadioButton;

package/dist/components/actions/selectionControls/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox, type CheckboxProps } from "./Checkbox.js";
+export { RadioButton, type RadioButtonProps } from "./RadioButton.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/selectionControls/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/actions/selectionControls/index.js

@@ -0,0 +1,7 @@
+"use client";
+import { Checkbox } from "./Checkbox.js";
+import { RadioButton } from "./RadioButton.js";
+export {
+  Checkbox,
+  RadioButton
+};

package/dist/components/actions/selectionControls/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/components/actions/selectionControls/radiobutton.css.cjs

@@ -0,0 +1,104 @@
+"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 RadioButtonRecipe = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      height: "s",
+      width: "s"
+    }),
+    {
+      position: "relative",
+      display: "flex",
+      boxSizing: "border-box",
+      border: `solid ${tokens_css_js.tokens.stroke.small}`,
+      backgroundColor: tokens_css_js.tokens.color.surface,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: tokens_css_js.tokens["border-radius"].full,
+      margin: tokens_css_js.tokens.spacing.base,
+      flexShrink: 0
+    }
+  ],
+  variants: {
+    validity: {
+      error: [
+        {
+          borderColor: tokens_css_js.tokens.color.error
+        }
+      ],
+      none: {},
+      success: {}
+    },
+    disabled: {
+      true: [
+        {
+          backgroundColor: tokens_css_js.tokens.color.disabled,
+          borderColor: tokens_css_js.tokens.color.disabled,
+          cursor: "not-allowed"
+        }
+      ],
+      false: {}
+    }
+  }
+});
+const CheckedCircleRecipe = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      display: "inline",
+      borderRadius: "full",
+      width: "xxs",
+      height: "xxs"
+    }),
+    {
+      background: "transparent"
+    }
+  ],
+  variants: {
+    checked: {
+      true: [
+        {
+          background: tokens_css_js.tokens.color["on-surface"]
+        }
+      ],
+      false: {}
+    },
+    validity: {
+      error: [
+        {
+          background: tokens_css_js.tokens.color.error
+        }
+      ],
+      none: {},
+      success: {}
+    },
+    disabled: {
+      true: [
+        atoms_css_js.atoms({}),
+        {
+          backgroundColor: tokens_css_js.tokens.color["disabled"],
+          cursor: "not-allowed"
+        }
+      ],
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        checked: true,
+        disabled: true
+      },
+      style: [
+        {
+          background: tokens_css_js.tokens.color["on-disabled"]
+        }
+      ]
+    }
+  ]
+});
+exports.CheckedCircleRecipe = CheckedCircleRecipe;
+exports.RadioButtonRecipe = RadioButtonRecipe;

package/dist/components/actions/selectionControls/radiobutton.css.d.ts

@@ -0,0 +1,40 @@
+export declare const RadioButtonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    validity: {
+        error: {
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        }[];
+        none: {};
+        success: {};
+    };
+    disabled: {
+        true: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            cursor: "not-allowed";
+        }[];
+        false: {};
+    };
+}>;
+export declare const CheckedCircleRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    checked: {
+        true: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        }[];
+        false: {};
+    };
+    validity: {
+        error: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        }[];
+        none: {};
+        success: {};
+    };
+    disabled: {
+        true: (string | {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            cursor: "not-allowed";
+        })[];
+        false: {};
+    };
+}>;
+//# sourceMappingURL=radiobutton.css.d.ts.map

package/dist/components/actions/selectionControls/radiobutton.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radiobutton.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiobutton.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;EAwC5B,CAAC;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;EAuD9B,CAAC"}

package/dist/components/actions/selectionControls/radiobutton.css.js

@@ -0,0 +1,104 @@
+"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 RadioButtonRecipe = recipe({
+  base: [
+    atoms({
+      height: "s",
+      width: "s"
+    }),
+    {
+      position: "relative",
+      display: "flex",
+      boxSizing: "border-box",
+      border: `solid ${tokens.stroke.small}`,
+      backgroundColor: tokens.color.surface,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: tokens["border-radius"].full,
+      margin: tokens.spacing.base,
+      flexShrink: 0
+    }
+  ],
+  variants: {
+    validity: {
+      error: [
+        {
+          borderColor: tokens.color.error
+        }
+      ],
+      none: {},
+      success: {}
+    },
+    disabled: {
+      true: [
+        {
+          backgroundColor: tokens.color.disabled,
+          borderColor: tokens.color.disabled,
+          cursor: "not-allowed"
+        }
+      ],
+      false: {}
+    }
+  }
+});
+const CheckedCircleRecipe = recipe({
+  base: [
+    atoms({
+      display: "inline",
+      borderRadius: "full",
+      width: "xxs",
+      height: "xxs"
+    }),
+    {
+      background: "transparent"
+    }
+  ],
+  variants: {
+    checked: {
+      true: [
+        {
+          background: tokens.color["on-surface"]
+        }
+      ],
+      false: {}
+    },
+    validity: {
+      error: [
+        {
+          background: tokens.color.error
+        }
+      ],
+      none: {},
+      success: {}
+    },
+    disabled: {
+      true: [
+        atoms({}),
+        {
+          backgroundColor: tokens.color["disabled"],
+          cursor: "not-allowed"
+        }
+      ],
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        checked: true,
+        disabled: true
+      },
+      style: [
+        {
+          background: tokens.color["on-disabled"]
+        }
+      ]
+    }
+  ]
+});
+export {
+  CheckedCircleRecipe,
+  RadioButtonRecipe
+};

package/dist/components/actions/selectionControls/shared.cjs

@@ -0,0 +1,16 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+const Column = require("../../../utilities/layout/Column.cjs");
+require("../../../utilities/layout/Row.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const HelperTextWrapper = ({ children, id, validity, reserveSpaceForMessage, helperText }) => {
+  return jsxRuntime.jsxs(Column.Column, { className: atoms_css_js.atoms({ position: "relative" }), children: [children, jsxRuntime.jsx(InputHelperText.InputHelperText, { className: atoms_css_js.atoms({ marginLeft: "base" }), id, helperText, validity, reserveSpaceForMessage })] });
+};
+const SelectionDescription = ({ disabled, children }) => {
+  return jsxRuntime.jsx("div", { className: disabled ? atoms_css_js.atoms({ color: "on-disabled" }) : void 0, children });
+};
+exports.HelperTextWrapper = HelperTextWrapper;
+exports.SelectionDescription = SelectionDescription;