@dscout/particle 1.0.0-alpha.5 → 1.0.0-alpha.51

package/README.md

@@ -1,30 +1,47 @@
-# particle
+# Particle
 
-A pattern library for building dscout user interfaces with [React].
+A CSS framework and React component library for building dscout user interfaces. Visit the [documentation site] to learn more.
+
+## Usage
 
 Install particle using [yarn] or [npm]:
 
-```shell
+```bash
 $ yarn add @dscout/particle
 $ npm install --save @dscout/particle
 ```
 
-Visit the [demo site] to see example code of the components.
+### React Version Support
+
+Particle supports both React 18.x and React 19.x applications. No code changes are required when upgrading between React versions. Note that Particle is built using React 18.x, so usage with React 19.x should be done with this in mind and developers should validate components behave as expected.
+
+```bash
+# React 18 applications
+yarn add @dscout/particle react@^18.0.0 react-dom@^18.0.0
+
+# React 19 applications
+yarn add @dscout/particle react@^19.0.0 react-dom@^19.0.0
+```
+
+### Peer dependencies
+
+Particle requires the implementing application install React and React Router. Optionally the implementing application can also install `lodash` and `@floating-ui/dom`. These optional peer dependencies are **required** when using the tooltip or dropdown components from Particle, but can be omitted if those are not used.
+
+### Importing
+
 Everything is a named export on the namespace "@dscout/particle," for example:
 
 ```javascript
-import React from 'react'
-import { Container, ContainerInner } from '@dscout/particle'
+import React from 'react';
+import { Container, Heading } from '@dscout/particle';
 
 export default function Announcement() {
   return (
     <Container>
-      <ContainerInner>
-        <h2>Important!</h2>
-        <p>Make sure to eat your vegetables.</p>
-      </ContainerInner>
+      <Heading level="2">Important!</Heading>
+      <p>Make sure to eat your vegetables.</p>
     </Container>
-  )
+  );
 }
 ```
 
@@ -43,101 +60,78 @@ To import into a plain CSS file:
 The source `scss` file is located in the `styles` directory.
 You can import it into your own `scss` file like so:
 
-```css
-@import '~@dscout/particle/styles/particle.scss';
+```scss
+@import '@dscout/particle/styles/particle.scss';
 ```
 
 ## Developing with Storybook
-Particle uses asdf to manage the node dependencies. To develop locally first
-install asdf with:
 
-```
-$ brew install asdf
-```
+Storybook provides an isolated development environment for Particle components as well as a published static site that serves as a playground and documentation.
 
-Then in order to install nodejs, you must first install its dependencies:
+### Install dependencies
 
-```
-$ brew install coreutils
-$ brew install gpg
+Particle uses asdf to manage the node dependencies. To develop locally first
+install asdf with:
+
+```bash
+brew install asdf
 ```
 
-Import the Node.js release team's OpenPGP keys to main keystring:
+Then install nodejs. If you don't already have nodejs set up on your machine you may first need install its dependencies and OpenPGP keys:
 
-```
-$ bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring
+```bash
+brew install coreutils
+brew install gpg
+bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring
 ```
 
 Install asdf dependencies
 
-```
-$ asdf install
+```bash
+asdf install
 ```
 
-Install dependencies with [yarn]:
+Install NPM dependencies with [yarn]:
 
+```bash
+yarn install
 ```
-$ yarn install
-```
-
-### Storybook
 
-[Storybook] provides a neat approach to developing UI components.
-Start up the development server with `yarn start` and open your
-browser to `http://localhost:6006`.
+### Start Storybook
 
-### Styleguide
+Run Storybook locally:
 
-A PostCSS plugin automatically generates a basic styleguide site from
-comments in the CSS. Run the styleguide locally with `yarn styleguide` and open
-your browser to `http://localhost:9090`.
+```bash
+yarn start
+```
 
 ## Scripts
 
 A variety of scripts are provided for running common tasks.
 
-Lint with ESLint:
-```
-$ yarn lint
-```
+Lint with ESLint and run typechecker:
 
-Watch the tests with Karma:
-```
-$ yarn test
+```bash
+yarn lint
 ```
 
-Lint, then run the test suite:
-```
-$ yarn ci
-```
+Start the Vitest test runner in watch mode:
 
-Remove and re-create the `lib` directory:
-```
-$ yarn clean
-```
+Note: Before testing, you will need to run `yarn playwright install` to ensure the local test runner can properly spin up the necessary browser environment.
 
-Create a build (outputs to the `lib` directory):
-```
-$ yarn build
+```bash
+yarn test
 ```
 
-Minify the CSS build:
-```
-$ yarn nano
-```
+## Contributing
 
-Create a release with a minified CSS build:
-```
-$ yarn release
-```
+[See the wiki](https://github.com/dscout/particle/wiki/Development-and-QA-workflow) for details on how to contribute to Particle.
 
-Generate the documentation website (output to the `docs` directory):
-```
-$ yarn build-docs
-```
+## Releasing a new version
+
+Instructions for preparing a new release and submitting it to npm can be found [here](https://github.com/dscout/particle/wiki/Versioning-&-Releases).
 
-[demo site]: https://dscout.github.io/particle/
-[npm]:       https://www.npmjs.com/
-[React]:     https://facebook.github.io/react/
+[documentation site]: https://dscout.github.io/particle/
+[npm]: https://www.npmjs.com/
 [Storybook]: https://getstorybook.io/
-[yarn]:      https://yarnpkg.com/en/docs/install
+[yarn]: https://yarnpkg.com/en/docs/install

package/lib/cjs/components/add_button.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { CommonComponentProps, Dimensions, MarginModifierProp, ModifierClassProp } from '../types';
+import type { GetRef } from '../utils/refs';
+type Variant = 'collapsed' | 'short' | 'tall';
+interface AddButtonProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
+    'aria-controls'?: string;
+    'aria-expanded'?: React.AriaAttributes['aria-expanded'];
+    'aria-pressed'?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    getRef?: GetRef<HTMLButtonElement>;
+    id?: string;
+    label?: string;
+    name?: string;
+    onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    variant: Variant;
+    width?: Dimensions;
+}
+/**
+ * This component is intended for use within Express style builders to render
+ * a consistently styled button for triggering "Add Item" actions, usually for adding questions.
+ */
+export declare function AddButton({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, disabled, getRef, id, label, margin, name, onBlur, onClick, onFocus, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp, style, tabIndex, title, variant, width, ...rest }: AddButtonProps): React.JSX.Element;
+export {};

package/lib/cjs/components/add_button.js

@@ -0,0 +1,50 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddButton = void 0;
+var react_1 = __importDefault(require("react"));
+var noop_1 = __importDefault(require("../utils/noop"));
+var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var class_names_1 = __importDefault(require("../utils/class_names"));
+var modifier_classes_1 = require("../utils/modifier_classes");
+var express_1 = require("../icons/express");
+/**
+ * This component is intended for use within Express style builders to render
+ * a consistently styled button for triggering "Add Item" actions, usually for adding questions.
+ */
+function AddButton(_a) {
+    var _b;
+    var _modifierClass = _a._modifierClass, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], ariaPressed = _a["aria-pressed"], disabled = _a.disabled, getRef = _a.getRef, id = _a.id, _c = _a.label, label = _c === void 0 ? 'Add' : _c, _d = _a.margin, margin = _d === void 0 ? 'none' : _d, name = _a.name, _e = _a.onBlur, onBlur = _e === void 0 ? noop_1.default : _e, onClick = _a.onClick, _f = _a.onFocus, onFocus = _f === void 0 ? noop_1.default : _f, _g = _a.onMouseDown, onMouseDown = _g === void 0 ? noop_1.default : _g, _h = _a.onMouseEnter, onMouseEnter = _h === void 0 ? noop_1.default : _h, _j = _a.onMouseLeave, onMouseLeave = _j === void 0 ? noop_1.default : _j, _k = _a.onMouseUp, onMouseUp = _k === void 0 ? noop_1.default : _k, style = _a.style, tabIndex = _a.tabIndex, title = _a.title, variant = _a.variant, _l = _a.width, width = _l === void 0 ? '100%' : _l, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-pressed', "disabled", "getRef", "id", "label", "margin", "name", "onBlur", "onClick", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "style", "tabIndex", "title", "variant", "width"]);
+    var className = (0, class_names_1.default)('AddButton', _modifierClass, (0, modifier_classes_1.getMarginClass)(margin), (0, modifier_classes_1.getDimensionClass)('width', width), (_b = {},
+        _b["AddButton--".concat(variant)] = variant,
+        _b));
+    return (react_1.default.createElement("button", __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-pressed": ariaPressed, className: className, disabled: disabled, id: id, name: name, onBlur: onBlur, ref: getRef, onClick: onClick, onFocus: onFocus, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp, onMouseDown: onMouseDown, style: style, tabIndex: tabIndex, title: title, type: "button" }),
+        react_1.default.createElement(express_1.ExpressIcons.IconCirclePlusOutlined, { base: "16" }),
+        variant !== 'collapsed' && react_1.default.createElement("span", { className: "display--b" }, label)));
+}
+exports.AddButton = AddButton;
+//# sourceMappingURL=add_button.js.map

package/lib/cjs/components/add_button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add_button.js","sourceRoot":"","sources":["../../../src/components/add_button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAQ1B,uDAAiC;AACjC,6EAAyD;AACzD,qEAA8C;AAC9C,8DAA8E;AAC9E,4CAAgD;AA+BhD;;;GAGG;AACH,SAAgB,SAAS,CAAC,EA2BT;;IA1Bf,IAAA,cAAc,oBAAA,EACG,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnB,WAAW,qBAAA,EAC3B,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,cAAe,EAAf,MAAM,mBAAG,MAAM,KAAA,EACf,IAAI,UAAA,EACJ,cAAa,EAAb,MAAM,mBAAG,cAAI,KAAA,EACb,OAAO,aAAA,EACP,eAAc,EAAd,OAAO,mBAAG,cAAI,KAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,cAAI,KAAA,EAClB,oBAAmB,EAAnB,YAAY,mBAAG,cAAI,KAAA,EACnB,oBAAmB,EAAnB,YAAY,mBAAG,cAAI,KAAA,EACnB,iBAAgB,EAAhB,SAAS,mBAAG,cAAI,KAAA,EAChB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,OAAO,aAAA,EACP,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EACX,IAAI,cA1BiB,8TA2BzB,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAC1B,WAAW,EACX,cAAc,EACd,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,IAAA,oCAAiB,EAAC,OAAO,EAAE,KAAK,CAAC;QAE/B,GAAC,qBAAc,OAAO,CAAE,IAAG,OAAO;YAErC,CAAC;IAEF,OAAO,CACL,qDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,YAAY,mBACZ,YAAY,gBACf,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,KAAK,qBACb,cAAc,sBACb,eAAe,kBACnB,WAAW,EACzB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,QAAQ;QAEb,8BAAC,sBAAY,CAAC,sBAAsB,IAAC,IAAI,EAAC,IAAI,GAAG;QAChD,OAAO,KAAK,WAAW,IAAI,wCAAM,SAAS,EAAC,YAAY,IAAE,KAAK,CAAQ,CAChE,CACV,CAAC;AACJ,CAAC;AApED,8BAoEC"}

package/lib/cjs/components/advanced_options.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+import type { GetRef } from '../utils/refs';
+interface AdvancedOptionsProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    getRef?: GetRef<HTMLDivElement>;
+    id?: string;
+    initialCollapsed?: boolean;
+    name?: string;
+    title: React.ReactNode;
+}
+export declare function AdvancedOptions({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, disabled, getRef, id, initialCollapsed, margin, name, title, ...rest }: AdvancedOptionsProps): React.JSX.Element;
+export {};

package/lib/cjs/components/advanced_options.js

@@ -0,0 +1,78 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdvancedOptions = void 0;
+var react_1 = __importStar(require("react"));
+var class_names_1 = __importDefault(require("../utils/class_names"));
+var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
+var triangle_inverted_1 = require("../icons/triangle_inverted");
+var button_plain_1 = require("./button_plain");
+var collapsible_content_1 = require("./collapsible_content");
+var flex_1 = require("./flex");
+var modifier_1 = require("./modifier");
+function AdvancedOptions(_a) {
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? true : _b, margin = _a.margin, name = _a.name, title = _a.title, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "disabled", "getRef", "id", "initialCollapsed", "margin", "name", "title"]);
+    var _c = (0, react_1.useState)(initialCollapsed), isCollapsed = _c[0], setIsCollapsed = _c[1];
+    var collapsibleContentId = (0, react_1.useId)();
+    return (react_1.default.createElement("div", { className: (0, class_names_1.default)((0, modifier_classes_1.getMarginClass)(margin), _modifierClass), ref: getRef },
+        react_1.default.createElement(modifier_1.Modifier, { margin: { bottom: 'none' } },
+            react_1.default.createElement(button_plain_1.ButtonPlain, __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": collapsibleContentId, "aria-expanded": !isCollapsed, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, disabled: disabled, id: id, onClick: function () {
+                    setIsCollapsed(function (prevCollapsed) { return !prevCollapsed; });
+                }, name: name || (typeof title === 'string' ? title : undefined) }),
+                react_1.default.createElement(flex_1.Flex, null,
+                    title,
+                    ' ',
+                    react_1.default.createElement(triangle_inverted_1.IconTriangleInverted, { direction: isCollapsed ? 'right' : 'down' })))),
+        react_1.default.createElement(collapsible_content_1.CollapsibleContent, { collapsed: isCollapsed, id: collapsibleContentId },
+            react_1.default.createElement("div", { className: "margin-t--0.75" }, children))));
+}
+exports.AdvancedOptions = AdvancedOptions;
+//# sourceMappingURL=advanced_options.js.map

package/lib/cjs/components/advanced_options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced_options.js","sourceRoot":"","sources":["../../../src/components/advanced_options.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+C;AAS/C,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAE3D,gEAAkE;AAClE,+CAA6C;AAC7C,6DAA2D;AAC3D,+BAA8B;AAC9B,uCAAsC;AAetC,SAAgB,eAAe,CAAC,EAcT;IAbrB,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,wBAAuB,EAAvB,gBAAgB,mBAAG,IAAI,KAAA,EACvB,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,KAAK,WAAA,EACF,IAAI,cAbuB,8JAc/B,CADQ;IAED,IAAA,KAAgC,IAAA,gBAAQ,EAAC,gBAAgB,CAAC,EAAzD,WAAW,QAAA,EAAE,cAAc,QAA8B,CAAC;IACjE,IAAM,oBAAoB,GAAG,IAAA,aAAK,GAAE,CAAC;IAErC,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,qBAAU,EAAC,IAAA,iCAAc,EAAC,MAAM,CAAC,EAAE,cAAc,CAAC,EAC7D,GAAG,EAAE,MAAM;QAEX,8BAAC,mBAAQ,IAAC,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;YAClC,8BAAC,0BAAW,eACN,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,oBAAoB,mBACpB,CAAC,WAAW,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE;oBACP,cAAc,CAAC,UAAC,aAAa,IAAK,OAAA,CAAC,aAAa,EAAd,CAAc,CAAC,CAAC;gBACpD,CAAC,EACD,IAAI,EAAE,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;gBAE7D,8BAAC,WAAI;oBACF,KAAK;oBAAE,GAAG;oBACX,8BAAC,wCAAoB,IAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAAI,CAC9D,CACK,CACL;QACX,8BAAC,wCAAkB,IAAC,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,oBAAoB;YAClE,uCAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAC7B,CACjB,CACP,CAAC;AACJ,CAAC;AAjDD,0CAiDC"}

package/lib/cjs/components/attribute_input.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+import type { GetRef } from '../utils/refs';
+interface AttributeInputProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    getRef?: GetRef<HTMLInputElement>;
+    id?: string;
+    label?: React.ReactNode;
+    name?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    readOnly?: boolean;
+    required?: boolean;
+    tabIndex?: number;
+    value: number | string;
+}
+export declare function AttributeInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, defaultChecked, checked, disabled, getRef, id, label, margin, name, value, onChange, readOnly, required, tabIndex, ...rest }: AttributeInputProps): React.JSX.Element;
+export {};

package/lib/cjs/components/attribute_input.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeInput = void 0;
+var react_1 = __importDefault(require("react"));
+var class_names_1 = __importDefault(require("../utils/class_names"));
+var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
+var shared_hooks_1 = require("./shared_hooks");
+function AttributeInput(_a) {
+    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], defaultChecked = _a.defaultChecked, checked = _a.checked, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, label = _a.label, margin = _a.margin, name = _a.name, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, required = _a.required, tabIndex = _a.tabIndex, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "defaultChecked", "checked", "disabled", "getRef", "id", "label", "margin", "name", "value", "onChange", "readOnly", "required", "tabIndex"]);
+    var attributeId = (0, shared_hooks_1.useFallbackId)(id);
+    var selectorClassName = (0, class_names_1.default)('Attribute', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass);
+    var labelClassName = (0, class_names_1.default)('Attribute__Label', {
+        'Attribute__Label--read-only': readOnly
+    });
+    return (react_1.default.createElement("div", { className: selectorClassName },
+        react_1.default.createElement("input", __assign({}, (0, data_attributes_1.default)(rest), { id: attributeId, name: name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, ref: getRef, checked: checked, defaultChecked: defaultChecked, className: "Attribute__Input", onChange: readOnly ? undefined : onChange, type: "radio", value: value, tabIndex: tabIndex, readOnly: readOnly, required: required, disabled: disabled })),
+        react_1.default.createElement("label", { className: labelClassName, htmlFor: attributeId },
+            react_1.default.createElement("span", { className: "Attribute__Label__Content" }, label))));
+}
+exports.AttributeInput = AttributeInput;
+//# sourceMappingURL=attribute_input.js.map

package/lib/cjs/components/attribute_input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute_input.js","sourceRoot":"","sources":["../../../src/components/attribute_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAE3D,+CAA+C;AAqB/C,SAAgB,cAAc,CAAC,EAoBT;IAnBpB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,KAAK,WAAA,EACL,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACL,IAAI,cAnBsB,oOAoB9B,CADQ;IAEP,IAAM,WAAW,GAAG,IAAA,4BAAa,EAAC,EAAE,CAAC,CAAC;IAEtC,IAAM,iBAAiB,GAAG,IAAA,qBAAU,EAClC,WAAW,EACX,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,CACf,CAAC;IACF,IAAM,cAAc,GAAG,IAAA,qBAAU,EAAC,kBAAkB,EAAE;QACpD,6BAA6B,EAAE,QAAQ;KACxC,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAE,iBAAiB;QAE/B,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,IAC3B,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,gBACE,SAAS,qBACJ,cAAc,kBACjB,WAAW,sBACP,eAAe,EACjC,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACzC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAClB;QACF,yCAAO,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW;YACpD,wCAAM,SAAS,EAAC,2BAA2B,IAAE,KAAK,CAAQ,CACpD,CACJ,CACP,CAAC;AACJ,CAAC;AA5DD,wCA4DC"}

package/lib/cjs/components/attribute_selector.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+import type { GetRef } from '../utils/refs';
+type AttributesMap = {
+    [name: string]: string;
+};
+interface AttributeSelectorProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
+    /**
+     * A mapping of each inputs `value` to is `<label>` text.
+     */
+    attributes: AttributesMap;
+    disabled?: boolean;
+    getRef?: GetRef<HTMLInputElement>;
+    id?: string;
+    name?: string;
+    onClick: (value: string) => void;
+    readOnly?: boolean;
+    required?: boolean;
+    selected?: keyof AttributesMap;
+}
+export declare function AttributeSelector({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, attributes, disabled, getRef, id, margin, name, onClick, readOnly, required, selected, ...rest }: AttributeSelectorProps): React.JSX.Element;
+export {};

package/lib/cjs/components/attribute_selector.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeSelector = void 0;
+var react_1 = __importDefault(require("react"));
+var class_names_1 = __importDefault(require("../utils/class_names"));
+var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
+var attribute_input_1 = require("./attribute_input");
+function AttributeSelector(_a) {
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], attributes = _a.attributes, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, margin = _a.margin, name = _a.name, onClick = _a.onClick, readOnly = _a.readOnly, required = _a.required, selected = _a.selected, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "attributes", "disabled", "getRef", "id", "margin", "name", "onClick", "readOnly", "required", "selected"]);
+    function handleAttributeSelected(_a) {
+        var target = _a.target;
+        if (onClick)
+            onClick(target.value);
+    }
+    function renderAttribute(attribute) {
+        return (react_1.default.createElement(attribute_input_1.AttributeInput, { checked: selected !== undefined ? attribute === selected : undefined, disabled: disabled, id: "".concat(name, "[").concat(attribute, "]"), key: attribute, label: attributes[attribute], name: name, onChange: handleAttributeSelected, readOnly: readOnly, required: required, value: attribute }));
+    }
+    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Attribute__Selector spacing-h--0.25', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass), id: id, ref: getRef }), Object.keys(attributes).map(renderAttribute)));
+}
+exports.AttributeSelector = AttributeSelector;
+//# sourceMappingURL=attribute_selector.js.map

package/lib/cjs/components/attribute_selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute_selector.js","sourceRoot":"","sources":["../../../src/components/attribute_selector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAE3D,qDAAmD;AAwBnD,SAAgB,iBAAiB,CAAC,EAgBT;IAfvB,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACL,IAAI,cAfyB,kLAgBjC,CADQ;IAEP,SAAS,uBAAuB,CAAC,EAEK;YADpC,MAAM,YAAA;QAEN,IAAI,OAAO;YAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,SAAS,eAAe,CAAC,SAA8B;QACrD,OAAO,CACL,8BAAC,gCAAc,IACb,OAAO,EAAE,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpE,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,UAAG,IAAI,cAAI,SAAS,MAAG,EAC3B,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,EAC5B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,uBAAuB,EACjC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,GAChB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EACnB,qCAAqC,EACrC,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,CACf,EACD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,KAEV,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,CACzC,CACP,CAAC;AACJ,CAAC;AAzDD,8CAyDC"}

package/lib/cjs/components/avatar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Colors, CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+import type { GetRef } from '../utils/refs';
+interface AvatarProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
+    active?: boolean;
+    avatarUrl: string | null;
+    backgroundColor?: Colors;
+    getRef?: GetRef<HTMLDivElement>;
+    id?: string;
+    name?: string;
+    outlineColor?: Colors;
+    size?: number | string;
+    textColor?: Colors;
+    title?: string;
+}
+declare const MemoizedAvatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<unknown>>;
+export { MemoizedAvatar as Avatar };