@workday/canvas-kit-preview-react 9.1.0-471-next.0 → 9.1.0-475-next.0

package/dist/commonjs/radio/lib/hooks/useRadioModel.d.ts

@@ -0,0 +1,106 @@
+import React from 'react';
+export declare const useRadioModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.
+     * The value of this attribute needs to match the value passed to `hintId` on the `FormField`.
+     *
+     * ```tsx
+     * <FormField
+     *    error={FormField.ErrorType.Alert}
+     *    hintId="hint-alert"
+     *    hintText="Deep dish is an extra $2.99"
+     *    label="Choose Your Pizza Crust"
+     *    useFieldset={true}
+     *  >
+     *    <RadioGroup
+     *      name="crust"
+     *      onChange={handleChange}
+     *      initialValue={value}
+     *      aria-describedby="hint-alert"
+     *    >
+     *      <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+     *      <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+     *      <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
+     *      <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
+     *    </RadioGroup>
+     * </FormField>
+     * ```
+     */
+    'aria-describedby': string | undefined;
+    /**
+     * The common `name` passed to all Radio button children of the RadioGroup. This enables you to avoid specifying the `name` for each child.
+     */
+    name: string;
+    /**
+     * The selected value of the RadioGroup. Providing this prop will cause the model be in a controlled state
+     */
+    value: string | number | undefined;
+    /**
+     * `onChange` handler. Any `onChange` passed to children will be overwritten by this event so that there is only one per group.
+     */
+    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+}> & {} & {}) | undefined) => {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    state: {
+        value: string | number | undefined;
+        name: string;
+        'aria-describedby': string | undefined;
+        inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.
+     * The value of this attribute needs to match the value passed to `hintId` on the `FormField`.
+     *
+     * ```tsx
+     * <FormField
+     *    error={FormField.ErrorType.Alert}
+     *    hintId="hint-alert"
+     *    hintText="Deep dish is an extra $2.99"
+     *    label="Choose Your Pizza Crust"
+     *    useFieldset={true}
+     *  >
+     *    <RadioGroup
+     *      name="crust"
+     *      onChange={handleChange}
+     *      initialValue={value}
+     *      aria-describedby="hint-alert"
+     *    >
+     *      <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+     *      <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+     *      <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
+     *      <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
+     *    </RadioGroup>
+     * </FormField>
+     * ```
+     */
+    'aria-describedby': string | undefined;
+    /**
+     * The common `name` passed to all Radio button children of the RadioGroup. This enables you to avoid specifying the `name` for each child.
+     */
+    name: string;
+    /**
+     * The selected value of the RadioGroup. Providing this prop will cause the model be in a controlled state
+     */
+    value: string | number | undefined;
+    /**
+     * `onChange` handler. Any `onChange` passed to children will be overwritten by this event so that there is only one per group.
+     */
+    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+}, {}, {
+    value: string | number | undefined;
+    name: string;
+    'aria-describedby': string | undefined;
+    inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+}, {}, {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    state: {
+        value: string | number | undefined;
+        name: string;
+        'aria-describedby': string | undefined;
+        inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=useRadioModel.d.ts.map

package/dist/commonjs/radio/lib/hooks/useRadioModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioModel.d.ts","sourceRoot":"","sources":["../../../../../radio/lib/hooks/useRadioModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,aAAa;IAEtB;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;oBACa,MAAM,WAAW,CAAC,gBAAgB,CAAC;;sBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;IAtCnD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;oBACa,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;sBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;EAmBrD,CAAC"}

package/dist/commonjs/radio/lib/hooks/useRadioModel.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRadioModel = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+exports.useRadioModel = common_1.createModelHook({
+    defaultConfig: {
+        /**
+         * Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.
+         * The value of this attribute needs to match the value passed to `hintId` on the `FormField`.
+         *
+         * ```tsx
+         * <FormField
+         *    error={FormField.ErrorType.Alert}
+         *    hintId="hint-alert"
+         *    hintText="Deep dish is an extra $2.99"
+         *    label="Choose Your Pizza Crust"
+         *    useFieldset={true}
+         *  >
+         *    <RadioGroup
+         *      name="crust"
+         *      onChange={handleChange}
+         *      initialValue={value}
+         *      aria-describedby="hint-alert"
+         *    >
+         *      <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+         *      <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+         *      <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
+         *      <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
+         *    </RadioGroup>
+         * </FormField>
+         * ```
+         */
+        'aria-describedby': undefined,
+        /**
+         * The common `name` passed to all Radio button children of the RadioGroup. This enables you to avoid specifying the `name` for each child.
+         */
+        name: '',
+        /**
+         * The selected value of the RadioGroup. Providing this prop will cause the model be in a controlled state
+         */
+        value: undefined,
+        /**
+         * `onChange` handler. Any `onChange` passed to children will be overwritten by this event so that there is only one per group.
+         */
+        onChange(event) {
+            return;
+        },
+    },
+})(config => {
+    const inputRef = react_1.default.useRef();
+    const state = {
+        value: config.value,
+        name: config.name,
+        'aria-describedby': config['aria-describedby'],
+        inputRef,
+    };
+    const events = {};
+    return {
+        onChange: config.onChange,
+        state,
+        events,
+    };
+});

package/dist/es6/index.d.ts

@@ -8,4 +8,5 @@ export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
+export * from './radio';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/es6/index.js

@@ -8,3 +8,4 @@ export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
+export * from './radio';

package/dist/es6/radio/index.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/RadioGroup';
+export * from './lib/hooks/useRadioModel';
+export * from './lib/StyledRadioButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC"}

package/dist/es6/radio/index.js

@@ -0,0 +1,3 @@
+export * from './lib/RadioGroup';
+export * from './lib/hooks/useRadioModel';
+export * from './lib/StyledRadioButton';

package/dist/es6/radio/lib/RadioButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RadioLabelProps } from './RadioLabel';
+export declare const RadioButton: import("@workday/canvas-kit-react/common").ElementComponentM<"input", RadioLabelProps, {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    state: {
+        value: string | number | undefined;
+        name: string;
+        'aria-describedby': string | undefined;
+        inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=RadioButton.d.ts.map

package/dist/es6/radio/lib/RadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,eAAO,MAAM,WAAW;;;;;;;;;EAUtB,CAAC"}

package/dist/es6/radio/lib/RadioButton.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { useRadioModel } from './hooks/useRadioModel';
+import { RadioGroup } from './RadioGroup';
+export const RadioButton = createSubcomponent('input')({
+    displayName: 'Radio',
+    modelHook: useRadioModel,
+})(({ children, variant, ref, value, disabled, ...elemProps }) => {
+    return (React.createElement(RadioGroup.Label, { variant: variant, disabled: disabled },
+        React.createElement(RadioGroup.Label.Input, Object.assign({ value: value }, elemProps, { ref: ref })),
+        React.createElement(RadioGroup.Label.Text, null, children)));
+});

package/dist/es6/radio/lib/RadioGroup.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Themeable, ErrorType, ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface RadioGroupProps extends Themeable, ExtractProps<typeof Flex, never> {
+    /**
+     * The type of error associated with the RadioGroup (if applicable).
+     */
+    error?: ErrorType;
+}
+/**
+ * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
+ *
+ * ```tsx
+ * <RadioGroup name="pizza-crust" value="thin">
+ *   <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+ *   <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+ * </RadioGroup>
+ * ```
+ */
+export declare const RadioGroup: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps> & {
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps>;
+}, RadioGroupProps & Partial<{
+    'aria-describedby': string | undefined;
+    name: string;
+    value: string | number | undefined;
+    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+}> & {} & {}, {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    state: {
+        value: string | number | undefined;
+        name: string;
+        'aria-describedby': string | undefined;
+        inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    };
+    events: {};
+}> & {
+    /**
+     * `RadioGroup.Radio` renders an `<input type="radio" />` and its associated `<label>` (using `children` as the label's contents).
+     * This component should satisfy most use cases; use `RadioGroup.Label` if you require more flexibility.
+     *
+     * ```tsx
+     * <RadioGroup name="pizza-crust" value="thin">
+     *   <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+     *   <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+     * </RadioGroup>
+     * ```
+     */
+    RadioButton: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("./RadioLabel").RadioLabelProps, {
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        state: {
+            value: string | number | undefined;
+            name: string;
+            'aria-describedby': string | undefined;
+            inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+        };
+        events: {};
+    }>;
+    /**
+     * Use `RadioGroup.Label` instead of `RadioGroup.Radio` if you need direct access to the label and the radio input.
+     * This will render a `<label>` that wraps an `<input type="radio" />` and a `<span>` for the label text.
+     *
+     * ```tsx
+     * <RadioGroup name"pizza-crust" value="deep-dish">
+     *   <RadioGroup.Label>
+     *     <RadioGroup.Label.Input value="deep-dish" />
+     *     <RadioGroup.Label.Text>Deep dish</RadioGroup.Label.Text>
+     *   </RadioGroup.Label>
+     * </RadioGroup>
+     * ```
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("./RadioLabel").RadioLabelProps, {
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        state: {
+            value: string | number | undefined;
+            name: string;
+            'aria-describedby': string | undefined;
+            inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+        };
+        events: {};
+    }> & {
+        Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("./RadioLabel").RadioLabelProps, {
+            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+            state: {
+                value: string | number | undefined;
+                name: string;
+                'aria-describedby': string | undefined;
+                inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+            };
+            events: {};
+        }>;
+        Text: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("@workday/canvas-kit-react/text").TextProps & React.HTMLAttributes<HTMLSpanElement>, {
+            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+            state: {
+                value: string | number | undefined;
+                name: string;
+                'aria-describedby': string | undefined;
+                inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+            };
+            events: {};
+        }>;
+    };
+};
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/es6/radio/lib/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,SAAS,EACT,SAAS,EAET,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAItD,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAClF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BL,CAAC"}

package/dist/es6/radio/lib/RadioGroup.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { createContainer, getErrorColors, } from '@workday/canvas-kit-react/common';
+import { space } from '@workday/canvas-kit-react/tokens';
+import { useRadioModel } from './hooks/useRadioModel';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { RadioLabel } from './RadioLabel';
+import { RadioButton } from './RadioButton';
+/**
+ * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
+ *
+ * ```tsx
+ * <RadioGroup name="pizza-crust" value="thin">
+ *   <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+ *   <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+ * </RadioGroup>
+ * ```
+ */
+export const RadioGroup = createContainer(Flex)({
+    displayName: 'RadioGroup',
+    modelHook: useRadioModel,
+    subComponents: {
+        /**
+         * `RadioGroup.Radio` renders an `<input type="radio" />` and its associated `<label>` (using `children` as the label's contents).
+         * This component should satisfy most use cases; use `RadioGroup.Label` if you require more flexibility.
+         *
+         * ```tsx
+         * <RadioGroup name="pizza-crust" value="thin">
+         *   <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+         *   <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+         * </RadioGroup>
+         * ```
+         */
+        RadioButton: RadioButton,
+        /**
+         * Use `RadioGroup.Label` instead of `RadioGroup.Radio` if you need direct access to the label and the radio input.
+         * This will render a `<label>` that wraps an `<input type="radio" />` and a `<span>` for the label text.
+         *
+         * ```tsx
+         * <RadioGroup name"pizza-crust" value="deep-dish">
+         *   <RadioGroup.Label>
+         *     <RadioGroup.Label.Input value="deep-dish" />
+         *     <RadioGroup.Label.Text>Deep dish</RadioGroup.Label.Text>
+         *   </RadioGroup.Label>
+         * </RadioGroup>
+         * ```
+         */
+        Label: RadioLabel,
+    },
+})(({ children, error, theme, ...elemProps }, Element, model) => {
+    const errorColors = getErrorColors(error, theme);
+    return (React.createElement(Flex, Object.assign({ as: Element, boxSizing: "border-box", flexDirection: "column", borderRadius: "m", paddingTop: "10px", paddingBottom: "8px", paddingX: "xs", gap: "xxs", marginY: `-${space.xxxs}`, transition: "100ms box-shadow", marginX: `-${space.xs}`, width: "fit-content", style: {
+            boxShadow: errorColors.outer !== errorColors.inner
+                ? `inset 0 0 0 1px ${errorColors.outer}, inset 0 0 0 3px ${errorColors.inner}`
+                : `inset 0 0 0 2px ${errorColors.inner}`,
+        } }, elemProps), children));
+});

package/dist/es6/radio/lib/RadioInput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RadioLabelProps } from './RadioLabel';
+export declare const RadioInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", RadioLabelProps, {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    state: {
+        value: string | number | undefined;
+        name: string;
+        'aria-describedby': string | undefined;
+        inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=RadioInput.d.ts.map

package/dist/es6/radio/lib/RadioInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,eAAe,EAAoB,MAAM,cAAc,CAAC;AAmBhE,eAAO,MAAM,UAAU;;;;;;;;;EAKrB,CAAC"}

package/dist/es6/radio/lib/RadioInput.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { createSubcomponent, createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useRadioModel } from './hooks/useRadioModel';
+import { RadioLabelContext } from './RadioLabel';
+import { StyledRadioButton } from './StyledRadioButton';
+const useRadioInput = createElemPropsHook(useRadioModel)((model, _ref, elemProps = {}) => {
+    const { disabled, variant } = React.useContext(RadioLabelContext);
+    return {
+        'aria-describedby': model.state['aria-describedby'],
+        disabled: disabled,
+        variant: variant,
+        checked: elemProps.value === model.state.value,
+        'aria-checked': elemProps.value === model.state.value,
+        onChange(event) {
+            model.onChange(event);
+        },
+        name: model.state.name,
+    };
+});
+export const RadioInput = createSubcomponent('input')({
+    modelHook: useRadioModel,
+    elemPropsHook: useRadioInput,
+})(({ ...elemProps }, _Element, _model) => {
+    return React.createElement(StyledRadioButton, Object.assign({}, elemProps));
+});

package/dist/es6/radio/lib/RadioLabel.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Themeable, ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+interface RadioLabelContextInterface {
+    disabled?: boolean | undefined;
+    variant?: 'inverse' | undefined;
+    value?: string | number;
+}
+export interface RadioLabelProps extends Themeable, ExtractProps<typeof Flex, never>, RadioLabelContextInterface {
+    /**
+     * The Radio input and label children of RadioLabel
+     */
+    children?: React.ReactNode;
+}
+export declare const RadioLabelContext: React.Context<RadioLabelContextInterface>;
+export declare const RadioLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", RadioLabelProps, {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    state: {
+        value: string | number | undefined;
+        name: string;
+        'aria-describedby': string | undefined;
+        inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    };
+    events: {};
+}> & {
+    /**
+     * Use `RadioGroup.Label.Input` within a `RadioGroup.Label` to render the input portion of a radio button.
+     *
+     * ```tsx
+     * <RadioGroup name"pizza-crust" value="deep-dish">
+     *   <RadioGroup.Label>
+     *     <RadioGroup.Label.Input value="deep-dish" />
+     *     <RadioGroup.Label.Text>Deep dish</RadioGroup.Label.Text>
+     *   </RadioGroup.Label>
+     * </RadioGroup>
+     * ```
+     */
+    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", RadioLabelProps, {
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        state: {
+            value: string | number | undefined;
+            name: string;
+            'aria-describedby': string | undefined;
+            inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+        };
+        events: {};
+    }>;
+    /**
+     * Use `RadioGroup.Label.Text` within a `RadioGroup.Label` to render the label text portion of a radio button.
+     *
+     * ```tsx
+     * <RadioGroup name"pizza-crust" value="deep-dish">
+     *   <RadioGroup.Label>
+     *     <RadioGroup.Label.Input value="deep-dish" />
+     *     <RadioGroup.Label.Text>Deep dish</RadioGroup.Label.Text>
+     *   </RadioGroup.Label>
+     * </RadioGroup>
+     * ```
+     */
+    Text: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("@workday/canvas-kit-react/text").TextProps & React.HTMLAttributes<HTMLSpanElement>, {
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        state: {
+            value: string | number | undefined;
+            name: string;
+            'aria-describedby': string | undefined;
+            inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+        };
+        events: {};
+    }>;
+};
+export {};
+//# sourceMappingURL=RadioLabel.d.ts.map

package/dist/es6/radio/lib/RadioLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioLabel.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAsB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAE7F,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAItD,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AACD,MAAM,WAAW,eACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAChC,0BAA0B;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,2CAAwD,CAAC;AAEvF,eAAO,MAAM,UAAU;;;;;;;;;;IAInB;;;;;;;;;;;OAWG;;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;;CAkBL,CAAC"}

package/dist/es6/radio/lib/RadioLabel.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { useRadioModel } from './hooks/useRadioModel';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { RadioInput } from './RadioInput';
+import { RadioText } from './RadioText';
+export const RadioLabelContext = React.createContext({});
+export const RadioLabel = createSubcomponent('label')({
+    displayName: 'Radio.Label',
+    modelHook: useRadioModel,
+    subComponents: {
+        /**
+         * Use `RadioGroup.Label.Input` within a `RadioGroup.Label` to render the input portion of a radio button.
+         *
+         * ```tsx
+         * <RadioGroup name"pizza-crust" value="deep-dish">
+         *   <RadioGroup.Label>
+         *     <RadioGroup.Label.Input value="deep-dish" />
+         *     <RadioGroup.Label.Text>Deep dish</RadioGroup.Label.Text>
+         *   </RadioGroup.Label>
+         * </RadioGroup>
+         * ```
+         */
+        Input: RadioInput,
+        /**
+         * Use `RadioGroup.Label.Text` within a `RadioGroup.Label` to render the label text portion of a radio button.
+         *
+         * ```tsx
+         * <RadioGroup name"pizza-crust" value="deep-dish">
+         *   <RadioGroup.Label>
+         *     <RadioGroup.Label.Input value="deep-dish" />
+         *     <RadioGroup.Label.Text>Deep dish</RadioGroup.Label.Text>
+         *   </RadioGroup.Label>
+         * </RadioGroup>
+         * ```
+         */
+        Text: RadioText,
+    },
+})(({ children, variant, disabled, value, ...elemProps }, Element, model) => {
+    return (React.createElement(RadioLabelContext.Provider, { value: { variant, disabled } },
+        React.createElement(Flex, Object.assign({ as: Element, alignItems: "flex-start", minHeight: "m", position: "relative", gap: "xs" }, elemProps), children)));
+});

package/dist/es6/radio/lib/RadioText.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const RadioText: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("@workday/canvas-kit-react/text").TextProps & React.HTMLAttributes<HTMLSpanElement>, {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    state: {
+        value: string | number | undefined;
+        name: string;
+        'aria-describedby': string | undefined;
+        inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=RadioText.d.ts.map

package/dist/es6/radio/lib/RadioText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioText.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,SAAS;;;;;;;;;EAwBpB,CAAC"}

package/dist/es6/radio/lib/RadioText.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { inputColors, colors } from '@workday/canvas-kit-react/tokens';
+import { useRadioModel } from './hooks/useRadioModel';
+import { RadioLabelContext } from './RadioLabel';
+import { Text } from '@workday/canvas-kit-react/text';
+export const RadioText = createSubcomponent('span')({
+    displayName: 'RadioButton.Text',
+    modelHook: useRadioModel,
+})(({ children, ...elemProps }, Element) => {
+    const { disabled, variant } = React.useContext(RadioLabelContext);
+    const inverse = variant === 'inverse';
+    return (React.createElement(Text, Object.assign({ as: Element, style: {
+            cursor: !disabled ? 'pointer' : undefined,
+            opacity: disabled && inverse ? '.4' : '1',
+            color: inverse
+                ? colors.frenchVanilla100
+                : disabled
+                    ? inputColors.disabled.text
+                    : elemProps.color,
+        }, typeLevel: "subtext.large" }, elemProps), children));
+});

package/dist/es6/radio/lib/StyledRadioButton.d.ts

@@ -0,0 +1,14 @@
+import { ExtractProps, Themeable } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
+export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'>, Themeable {
+    variant?: 'inverse' | undefined;
+}
+export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'> {
+    variant?: 'inverse' | undefined;
+}
+/**
+ * Use `StyledRadioButton` when you want a styled radio button on its own without using `RadioGroup`.
+ * You will need to handle behavior and accessibility.
+ */
+export declare const StyledRadioButton: import("@workday/canvas-kit-react/common").ElementComponent<"input", StyledRadioButtonProps>;
+//# sourceMappingURL=StyledRadioButton.d.ts.map

package/dist/es6/radio/lib/StyledRadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,YAAY,EACZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,GAAG,EAAO,MAAM,kCAAkC,CAAC;AAM3D,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC,EAAE,SAAS;IAC1F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8HD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAuB5B,CAAC"}