@conveyorhq/arrow-ds 1.127.0 → 1.128.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.127.0",
+  "version": "1.128.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/OptionButton/OptionButton.d.ts

@@ -7,8 +7,10 @@ export interface OptionButtonGroupProps extends StackProps {
     type?: "radio" | "checkbox";
 }
 export declare const OptionButtonGroup: (props: OptionButtonGroupProps) => JSX.Element;
-export declare type OptionButtonRootProps = HTMLProps<HTMLLabelElement>;
-export declare const OptionButtonRoot: ({ children, className, ...rest }: OptionButtonRootProps) => JSX.Element;
+export declare type OptionButtonRootProps = HTMLProps<HTMLLabelElement> & {
+    theme?: "blue" | "green";
+};
+export declare const OptionButtonRoot: ({ children, className, theme, ...rest }: OptionButtonRootProps) => JSX.Element;
 export declare type OptionButtonInputProps = HTMLProps<HTMLInputElement>;
 export declare const OptionButtonInput: (props: OptionButtonInputProps) => JSX.Element;
 export declare const OptionButtonContent: ({ className, children, ...rest }: BoxProps) => JSX.Element;
@@ -19,11 +21,12 @@ export declare const OptionButtonSelectedIcon: ({ className, ...rest }: BoxProps
 interface OptionButtonProps extends HTMLProps<HTMLInputElement> {
     heading: string;
     description?: string;
+    theme?: "blue" | "green";
 }
 export declare const OptionButton: {
     (props: OptionButtonProps): JSX.Element;
     Group: (props: OptionButtonGroupProps) => JSX.Element;
-    Root: ({ children, className, ...rest }: OptionButtonRootProps) => JSX.Element;
+    Root: ({ children, className, theme, ...rest }: OptionButtonRootProps) => JSX.Element;
     Input: (props: OptionButtonInputProps) => JSX.Element;
     Content: ({ className, children, ...rest }: BoxProps) => JSX.Element;
     Heading: ({ className, children, ...rest }: TextProps) => JSX.Element;

package/public/components/OptionButton/OptionButton.js

@@ -26,8 +26,8 @@ const OptionButtonGroup = (props) => {
         react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: orientation }, rest))));
 };
 exports.OptionButtonGroup = OptionButtonGroup;
-const OptionButtonRoot = ({ children, className, ...rest }) => {
-    return (react_1.default.createElement("label", Object.assign({ className: classnames_1.default(cn(), className) }, rest), children));
+const OptionButtonRoot = ({ children, className, theme = "blue", ...rest }) => {
+    return (react_1.default.createElement("label", Object.assign({ className: classnames_1.default(cn(), className), "data-theme": theme }, rest), children));
 };
 exports.OptionButtonRoot = OptionButtonRoot;
 const OptionButtonInput = (props) => {
@@ -54,7 +54,7 @@ const OptionButtonSelectedIcon = ({ className, ...rest }) => (react_1.default.cr
 exports.OptionButtonSelectedIcon = OptionButtonSelectedIcon;
 const OptionButton = (props) => {
     const { name: nameFromContext, type: typeFromContext, } = context_1.useOptionButtonContext();
-    const { heading, description, id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", disabled = false, ...rest } = props;
+    const { heading, description, id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", disabled = false, theme = "blue", ...rest } = props;
     const fallbackId = `OptionButton-${auto_id_1.useId()}`;
     const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
     const name = isUndefined_1.default(nameFromContext) ? nameProp : nameFromContext;
@@ -64,7 +64,7 @@ const OptionButton = (props) => {
         disabled && cn({ m: "disabled" }),
         className,
     ]);
-    return (react_1.default.createElement(exports.OptionButtonRoot, { className: rootClassName },
+    return (react_1.default.createElement(exports.OptionButtonRoot, { className: rootClassName, theme: theme },
         react_1.default.createElement(exports.OptionButtonContent, null,
             heading && react_1.default.createElement(exports.OptionButtonHeading, null, heading),
             description && (react_1.default.createElement(exports.OptionButtonDescription, null, description))),

package/public/css/styles.css

@@ -4939,16 +4939,30 @@ override built-in Image component classes */
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
-.ads-OptionButton:hover
+.ads-OptionButton[data-theme="blue"]:hover
   .ads-OptionButton-input:checked
   + .ads-OptionButton-backdrop, 
-.ads-OptionButton-input:checked + .ads-OptionButton-backdrop {
+.ads-OptionButton[data-theme="blue"]
+  .ads-OptionButton-input:checked
+  + .ads-OptionButton-backdrop {
   --tw-border-opacity: 1;
   border-color: rgb(13 125 228 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(244 247 249 / var(--tw-bg-opacity));
 }
 
+.ads-OptionButton[data-theme="green"]:hover
+  .ads-OptionButton-input:checked
+  + .ads-OptionButton-backdrop, 
+.ads-OptionButton[data-theme="green"]
+  .ads-OptionButton-input:checked
+  + .ads-OptionButton-backdrop {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 198 159 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .ads-OptionButton-input:focus-visible + .ads-OptionButton-backdrop {
   outline-style: solid;
   outline-width: 2px;