@workday/canvas-kit-preview-react 10.0.0-alpha.472-next.0 → 10.0.0-alpha.476-next.0

package/dist/commonjs/index.d.ts

@@ -7,4 +7,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/commonjs/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,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,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/commonjs/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./side-panel"), exports);
 __exportStar(require("./status-indicator"), exports);
 __exportStar(require("./text-area"), exports);
 __exportStar(require("./text-input"), exports);
+__exportStar(require("./radio"), exports);

package/dist/commonjs/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/commonjs/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/commonjs/radio/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/RadioGroup"), exports);
+__exportStar(require("./lib/hooks/useRadioModel"), exports);
+__exportStar(require("./lib/StyledRadioButton"), exports);

package/dist/commonjs/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/commonjs/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/commonjs/radio/lib/RadioButton.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useRadioModel_1 = require("./hooks/useRadioModel");
+const RadioGroup_1 = require("./RadioGroup");
+exports.RadioButton = common_1.createSubcomponent('input')({
+    displayName: 'Radio',
+    modelHook: useRadioModel_1.useRadioModel,
+})(({ children, variant, ref, value, disabled, ...elemProps }) => {
+    return (react_1.default.createElement(RadioGroup_1.RadioGroup.Label, { variant: variant, disabled: disabled },
+        react_1.default.createElement(RadioGroup_1.RadioGroup.Label.Input, Object.assign({ value: value }, elemProps, { ref: ref })),
+        react_1.default.createElement(RadioGroup_1.RadioGroup.Label.Text, null, children)));
+});

package/dist/commonjs/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/commonjs/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/commonjs/radio/lib/RadioGroup.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const useRadioModel_1 = require("./hooks/useRadioModel");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const RadioLabel_1 = require("./RadioLabel");
+const RadioButton_1 = require("./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>
+ * ```
+ */
+exports.RadioGroup = common_1.createContainer(layout_1.Flex)({
+    displayName: 'RadioGroup',
+    modelHook: useRadioModel_1.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_1.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_1.RadioLabel,
+    },
+})(({ children, error, theme, ...elemProps }, Element, model) => {
+    const errorColors = common_1.getErrorColors(error, theme);
+    return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, boxSizing: "border-box", flexDirection: "column", borderRadius: "m", paddingTop: "10px", paddingBottom: "8px", paddingX: "xs", gap: "xxs", marginY: `-${tokens_1.space.xxxs}`, transition: "100ms box-shadow", marginX: `-${tokens_1.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/commonjs/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/commonjs/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/commonjs/radio/lib/RadioInput.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioInput = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useRadioModel_1 = require("./hooks/useRadioModel");
+const RadioLabel_1 = require("./RadioLabel");
+const StyledRadioButton_1 = require("./StyledRadioButton");
+const useRadioInput = common_1.createElemPropsHook(useRadioModel_1.useRadioModel)((model, _ref, elemProps = {}) => {
+    const { disabled, variant } = react_1.default.useContext(RadioLabel_1.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,
+    };
+});
+exports.RadioInput = common_1.createSubcomponent('input')({
+    modelHook: useRadioModel_1.useRadioModel,
+    elemPropsHook: useRadioInput,
+})(({ ...elemProps }, _Element, _model) => {
+    return react_1.default.createElement(StyledRadioButton_1.StyledRadioButton, Object.assign({}, elemProps));
+});

package/dist/commonjs/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/commonjs/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/commonjs/radio/lib/RadioLabel.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioLabel = exports.RadioLabelContext = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useRadioModel_1 = require("./hooks/useRadioModel");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const RadioInput_1 = require("./RadioInput");
+const RadioText_1 = require("./RadioText");
+exports.RadioLabelContext = react_1.default.createContext({});
+exports.RadioLabel = common_1.createSubcomponent('label')({
+    displayName: 'Radio.Label',
+    modelHook: useRadioModel_1.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_1.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_1.RadioText,
+    },
+})(({ children, variant, disabled, value, ...elemProps }, Element, model) => {
+    return (react_1.default.createElement(exports.RadioLabelContext.Provider, { value: { variant, disabled } },
+        react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, alignItems: "flex-start", minHeight: "m", position: "relative", gap: "xs" }, elemProps), children)));
+});

package/dist/commonjs/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/commonjs/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/commonjs/radio/lib/RadioText.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioText = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const useRadioModel_1 = require("./hooks/useRadioModel");
+const RadioLabel_1 = require("./RadioLabel");
+const text_1 = require("@workday/canvas-kit-react/text");
+exports.RadioText = common_1.createSubcomponent('span')({
+    displayName: 'RadioButton.Text',
+    modelHook: useRadioModel_1.useRadioModel,
+})(({ children, ...elemProps }, Element) => {
+    const { disabled, variant } = react_1.default.useContext(RadioLabel_1.RadioLabelContext);
+    const inverse = variant === 'inverse';
+    return (react_1.default.createElement(text_1.Text, Object.assign({ as: Element, style: {
+            cursor: !disabled ? 'pointer' : undefined,
+            opacity: disabled && inverse ? '.4' : '1',
+            color: inverse
+                ? tokens_1.colors.frenchVanilla100
+                : disabled
+                    ? tokens_1.inputColors.disabled.text
+                    : elemProps.color,
+        }, typeLevel: "subtext.large" }, elemProps), children));
+});

package/dist/commonjs/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/commonjs/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"}

package/dist/commonjs/radio/lib/StyledRadioButton.js

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRadioButton = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const radioWidth = 18;
+const rippleRadius = (tokens_1.spaceNumbers.l - radioWidth) / 2;
+const radioHeight = 18;
+const StyledRadioInput = common_1.styled(layout_1.Box.as('input'))({
+    '&:focus, &:active': {
+        outline: 'transparent',
+    },
+}, ({ disabled, variant, theme: { canvas: { palette: { primary: themePrimary, common: { focusOutline: themeFocusOutline }, }, }, }, }) => ({
+    cursor: !disabled ? 'pointer' : undefined,
+    opacity: disabled && variant === 'inverse' ? '.4' : '1',
+    height: '18px',
+    width: '18px',
+    // Circle element styles the radio as checked or unchecked
+    '+ .cnvs-radio-check': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        backgroundColor: disabled ? tokens_1.inputColors.disabled.background : tokens_1.colors.frenchVanilla100,
+        borderRadius: '999px',
+        boxSizing: 'border-box',
+        border: `1px solid`,
+        borderColor: disabled
+            ? tokens_1.inputColors.disabled.border
+            : variant === 'inverse'
+                ? tokens_1.colors.soap300
+                : tokens_1.inputColors.border,
+        height: '18px',
+        width: '18px',
+        justifyContent: 'center',
+        pointerEvents: 'none',
+        position: 'absolute',
+        transition: 'border 200ms ease, background 200ms',
+        opacity: disabled && variant === 'inverse' ? '.4' : '1',
+    },
+    '&:hover + .cnvs-radio-check': {
+        borderColor: disabled
+            ? tokens_1.inputColors.disabled.border
+            : variant === 'inverse'
+                ? tokens_1.colors.soap300
+                : tokens_1.colors.licorice500,
+    },
+    '&:focus + .cnvs-radio-check': {
+        borderColor: disabled
+            ? tokens_1.inputColors.disabled.border
+            : variant === 'inverse'
+                ? tokens_1.colors.soap300
+                : tokens_1.colors.blueberry400,
+    },
+    '&:checked + .cnvs-radio-check': {
+        backgroundColor: variant === 'inverse' ? themePrimary.main : themePrimary.contrast,
+        border: `5px solid`,
+        borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main, // outer circle color
+    },
+    '&:focus + .cnvs-radio-check, &:focus:hover + .cnvs-radio-check': {
+        outline: 'transparent',
+        ...common_1.focusRing({
+            width: variant === 'inverse' ? 2 : 1,
+            separation: 0,
+            animate: false,
+            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : tokens_1.colors.frenchVanilla100,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+        }),
+    },
+    '&:focus:checked + .cnvs-radio-check, &:focus:hover:checked + .cnvs-radio-check': {
+        outline: 'transparent',
+        ...common_1.focusRing({
+            width: 2,
+            separation: 2,
+            animate: false,
+            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : tokens_1.colors.frenchVanilla100,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+        }),
+    },
+    ...common_1.mouseFocusBehavior({
+        '&:focus + .cnvs-radio-check, &:focus:hover + .cnvs-radio-check, &:focus:active + .cnvs-radio-check, &:focus:hover:checked + .cnvs-radio-check, &:focus:active:checked + .cnvs-radio-check': {
+            ...common_1.focusRing({
+                width: 0,
+                outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+            }),
+        },
+    }),
+}));
+const RadioInputWrapper = common_1.styled(layout_1.Flex)({
+    // Hover Ripple element
+    '::before': {
+        content: "''",
+        borderRadius: tokens_1.borderRadius.circle,
+        height: radioHeight,
+        transition: 'box-shadow 150ms ease-out',
+        width: radioWidth,
+        pointerEvents: 'none',
+    },
+}, ({ variant, disabled }) => ({
+    '::before': {
+        opacity: variant === 'inverse' ? '0.4' : '1',
+    },
+    '&:hover:before': {
+        boxShadow: !disabled ? `0 0 0 ${rippleRadius}px ${tokens_1.colors.soap200}` : undefined,
+    },
+}));
+/**
+ * Use `StyledRadioButton` when you want a styled radio button on its own without using `RadioGroup`.
+ * You will need to handle behavior and accessibility.
+ */
+exports.StyledRadioButton = common_1.createComponent('input')({
+    displayName: 'Radio',
+    Component: ({ ...elemProps }, ref, Element) => {
+        return (react_1.default.createElement(RadioInputWrapper, Object.assign({ height: "18px", width: "18px", flex: "0 0 auto" }, elemProps),
+            react_1.default.createElement(StyledRadioInput, Object.assign({ borderRadius: "circle", position: "absolute", margin: "zero", as: Element, type: "radio", ref: ref }, elemProps)),
+            react_1.default.createElement("span", { className: "cnvs-radio-check" })));
+    },
+});