@quadrats/react 0.7.8 → 1.0.0

package/components/Progress/index.js

@@ -3,14 +3,18 @@ import clsx from 'clsx';
 
 const Progress = forwardRef(function Progress(props, ref) {
     const { className, percentage = 0 } = props;
-    const transform = `scaleX(${percentage / 100})`;
-    const style = {
-        transform,
-        msTransform: transform,
-    };
-    return (React.createElement("span", { ref: ref, className: clsx('qdr-progress', className) },
-        React.createElement("span", { className: "qdr-progress__backdrop" }),
-        React.createElement("span", { className: "qdr-progress__track", style: style })));
+    const size = 16;
+    const strokeWidth = 2;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - percentage / 100);
+    return (React.createElement("div", { ref: ref, className: clsx('qdr-progress', className) },
+        React.createElement("div", { className: "qdr-progress__wrapper" },
+            React.createElement("div", { className: "qdr-progress__spinner-wrapper" },
+                React.createElement("svg", { width: size, height: size },
+                    React.createElement("circle", { className: "qdr-progress__backdrop", cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none" }),
+                    React.createElement("circle", { className: "qdr-progress__track", cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none", strokeDasharray: circumference, strokeDashoffset: offset }))),
+            React.createElement("p", { className: "qdr-progress__percentage" }, `${percentage}%`))));
 });
 
 export { Progress as default };

package/components/SegmentedControl/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SegmentedControlProps {
+    options: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+declare const SegmentedControl: ({ options, value, onChange, disabled }: SegmentedControlProps) => React.JSX.Element;
+export default SegmentedControl;

package/components/SegmentedControl/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const SegmentedControl = ({ options, value, onChange, disabled }) => {
+    return (React.createElement("div", { className: clsx('qdr-segmented-control', {
+            'qdr-segmented-control--disabled': disabled || options.filter((o) => o.disabled).length === options.length,
+        }) }, options.map((option) => (React.createElement("button", { key: option.value, type: "button", disabled: disabled || option.disabled, className: clsx('qdr-segmented-control__button', {
+            'qdr-segmented-control__button--active': value === option.value,
+        }), onClick: () => {
+            onChange(option.value);
+        } }, option.label)))));
+};
+
+export { SegmentedControl as default };

package/components/Textarea/index.d.ts

@@ -0,0 +1,15 @@
+import React, { Ref } from 'react';
+import { BaseFieldProps } from '../BaseField';
+export interface TextareaProps extends Omit<BaseFieldProps, 'children'> {
+    value?: string;
+    onChange?: (value: string) => void;
+    textareaRef?: Ref<HTMLTextAreaElement>;
+    placeholder?: string;
+    height?: number;
+    disabled?: boolean;
+    isError?: boolean;
+    hint?: string;
+    maxLength?: number;
+}
+declare const Textarea: ({ label, className, width, value, onChange, textareaRef, placeholder, height, disabled, isError, hint, maxLength, errorMessage, required, }: TextareaProps) => React.JSX.Element;
+export default Textarea;

package/components/Textarea/index.js

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import BaseField from '../BaseField/index.js';
+
+const Textarea = ({ label, className, width, value = '', onChange, textareaRef, placeholder, height, disabled, isError, hint, maxLength, errorMessage, required = false, }) => {
+    const isLimited = useMemo(() => maxLength && value && value.length >= maxLength, [maxLength, value]);
+    return (React.createElement(BaseField, { className: className, label: label, required: required, width: width, errorMessage: errorMessage },
+        React.createElement("div", { className: "qdr-textarea" },
+            React.createElement("textarea", { ref: textareaRef, style: { height }, className: clsx('qdr-textarea__textarea', {
+                    'qdr-textarea__textarea--error': isError,
+                }), value: value, onChange: (e) => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+                }, maxLength: maxLength, placeholder: placeholder, disabled: disabled }),
+            hint && (React.createElement("div", { className: "qdr-textarea__hint-wrapper" },
+                React.createElement("span", { className: "qdr-textarea__hint" }, hint))),
+            maxLength && (React.createElement("span", { className: clsx('qdr-textarea__counter', {
+                    'qdr-textarea__counter--have-hint': hint,
+                    'qdr-textarea__counter--limited': isLimited,
+                    'qdr-textarea__counter--error': isError,
+                    'qdr-textarea__counter--disabled': disabled,
+                }) }, `${value ? value.length : 0}/${maxLength}`)))));
+};
+
+export { Textarea as default };

package/components/Toggle/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ToggleProps {
+    onChange: (status: boolean) => void;
+    checked: boolean;
+    disabled?: boolean;
+}
+declare const Toggle: ({ onChange, checked, disabled }: ToggleProps) => React.JSX.Element;
+export default Toggle;

package/components/Toggle/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const Toggle = ({ onChange, checked, disabled }) => {
+    return (React.createElement("div", { className: clsx('qdr-toggle', {
+            'qdr-toggle--checked': checked,
+            'qdr-toggle--disabled': disabled,
+        }) },
+        React.createElement("div", { className: "qdr-toggle__control" }),
+        React.createElement("input", { "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: "qdr-toggle__input", disabled: disabled, onChange: (e) => {
+                onChange(e.target.checked);
+            }, type: "checkbox" })));
+};
+
+export { Toggle as default };

package/components/Transition/SlideFade.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TransitionImplementationProps } from './Transition';
+export type MotionDurationType = 'shortest' | 'shorter' | 'short' | 'standard' | 'long';
+export declare const MOTION_DURATION: Readonly<Record<MotionDurationType, number>>;
+export type MotionEasingType = 'standard' | 'emphasized' | 'decelerated' | 'accelerated';
+export declare const MOTION_EASING: Readonly<Record<MotionEasingType, string>>;
+export declare function reflow(node: HTMLElement): void;
+export type SlideFadeDirection = 'left' | 'right' | 'up' | 'down';
+export interface SlideFadeProps extends TransitionImplementationProps {
+    /**
+     * The direction of child element will enter to.
+     * @default 'down'
+     */
+    direction?: SlideFadeDirection;
+}
+/**
+ * The react component for `mezzanine` transition slide fade.
+ */
+declare const SlideFade: React.ForwardRefExoticComponent<SlideFadeProps & React.RefAttributes<HTMLElement>>;
+export default SlideFade;

package/components/Transition/SlideFade.js

@@ -0,0 +1,91 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useRef, cloneElement } from 'react';
+import { composeRefs } from '@quadrats/react/utils';
+import Transition from './Transition.js';
+import { useSetNodeTransition } from './useSetNodeTransition.js';
+
+const MOTION_DURATION = {
+    shorter: 200,
+    short: 250};
+const MOTION_EASING = {
+    decelerated: 'cubic-bezier(0, 0, 0.3, 1)',
+    accelerated: 'cubic-bezier(0.32, 0, 0.67, 0)',
+};
+function reflow(node) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    node.scrollTop;
+}
+function getStyle(state, inProp, direction) {
+    if (state === 'entering' || state === 'entered') {
+        return {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        };
+    }
+    const style = {
+        opacity: 0,
+        transform: {
+            up: 'translate3d(0, 100%, 0)',
+            right: 'translate3d(-100%, 0, 0)',
+            down: 'translate3d(0, -100%, 0)',
+            left: 'translate3d(100%, 0, 0)',
+        }[direction],
+    };
+    if (state === 'exited' && !inProp) {
+        style.visibility = 'hidden';
+    }
+    return style;
+}
+const defaultDuration = {
+    enter: MOTION_DURATION.short,
+    exit: MOTION_DURATION.shorter,
+};
+const defaultEasing = {
+    enter: MOTION_EASING.decelerated,
+    exit: MOTION_EASING.accelerated,
+};
+/**
+ * The react component for `mezzanine` transition slide fade.
+ */
+const SlideFade = forwardRef(function SlideFade(props, ref) {
+    const { children, direction = 'down', delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp = false, onEnter, onEntered, onExit, onExited } = props, rest = __rest(props, ["children", "direction", "delay", "duration", "easing", "in", "onEnter", "onEntered", "onExit", "onExited"]);
+    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
+    const nodeRef = useRef(null);
+    const composedNodeRef = composeRefs([ref, nodeRef]);
+    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
+        delay,
+        duration,
+        easing,
+        properties: ['opacity', 'transform'],
+    }, children === null || children === void 0 ? void 0 : children.props.style);
+    const transitionProps = Object.assign(Object.assign({}, rest), { duration, in: inProp, nodeRef,
+        onEnter(node, isAppearing) {
+            setNodeTransition(node, 'enter');
+            reflow(node);
+            if (onEnter) {
+                onEnter(node, isAppearing);
+            }
+        },
+        onEntered(node, isAppearing) {
+            resetNodeTransition(node);
+            if (onEntered) {
+                onEntered(node, isAppearing);
+            }
+        },
+        onExit(node) {
+            setNodeTransition(node, 'exit');
+            if (onExit) {
+                onExit(node);
+            }
+        },
+        onExited(node) {
+            resetNodeTransition(node);
+            if (onExited) {
+                onExited(node);
+            }
+        } });
+    return (React.createElement(Transition, Object.assign({}, transitionProps), children &&
+        ((state) => cloneElement(children, Object.assign(Object.assign({}, children.props), { ref: composedNodeRef, style: Object.assign(Object.assign({}, getStyle(state, inProp, direction)), children.props.style) })))));
+});
+
+export { MOTION_DURATION, MOTION_EASING, SlideFade as default, reflow };

package/components/Transition/Transition.d.ts

@@ -0,0 +1,98 @@
+import { JSX, RefObject, CSSProperties, ReactElement, JSXElementConstructor, Ref } from 'react';
+import { TransitionStatus as TransitionState, TransitionChildren } from 'react-transition-group/Transition';
+export type NativeElementTag = keyof JSX.IntrinsicElements;
+export { TransitionState };
+export type TransitionMode = 'enter' | 'exit';
+export type TransitionDuration = 'auto' | number | {
+    [mode in TransitionMode]?: number;
+};
+export type TransitionEasing = string | {
+    [mode in TransitionMode]?: string;
+};
+export type TransitionDelay = number | {
+    [mode in TransitionMode]?: number;
+};
+export type TransitionEnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type TransitionExitHandler = (node: HTMLElement) => void;
+export interface TransitionImplementationChildProps {
+    ref?: Ref<HTMLElement>;
+    style?: CSSProperties;
+}
+export interface TransitionProps {
+    /**
+     * A custom callback for adding custom transition end handler
+     */
+    addEndListener?: (node: HTMLElement, next: VoidFunction) => void;
+    /**
+     * Whether to perform the enter transition if `in` is true while it first mount
+     * @true
+     */
+    appear?: boolean;
+    /**
+     * A react node or a render props called with transition state
+     */
+    children?: TransitionChildren;
+    /**
+     * The duration of the transition, in milliseconds
+     */
+    duration?: TransitionDuration;
+    /**
+     * The flag to trigger toggling transition between `enter` and `exit` state
+     * @default false
+     */
+    in?: boolean;
+    /**
+     * Whether to keeping mounting the child if exited.
+     * @default false
+     */
+    keepMount?: boolean;
+    /**
+     * Whether to mount the child at the first time entering.
+     * @default true
+     */
+    lazyMount?: boolean;
+    /**
+     * A ref of DOM element need to transition
+     */
+    nodeRef: RefObject<HTMLElement | null>;
+    /**
+     * Callback fired before the `entering` state applied
+     */
+    onEnter?: TransitionEnterHandler;
+    /**
+     * Callback fired after the `entering` state applied
+     */
+    onEntering?: TransitionEnterHandler;
+    /**
+     * Callback fired after the `entered` state applied
+     */
+    onEntered?: TransitionEnterHandler;
+    /**
+     * Callback fired before the `exiting` state applied.
+     */
+    onExit?: TransitionExitHandler;
+    /**
+     * Callback fired after the `exiting` state applied.
+     */
+    onExiting?: TransitionExitHandler;
+    /**
+     * Callback fired after the `exited` state applied.
+     */
+    onExited?: TransitionExitHandler;
+}
+export interface TransitionImplementationProps extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
+    children: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
+    /**
+     * The delay of the transition, in milliseconds
+     */
+    delay?: TransitionDelay;
+    /**
+     * The timing function of the transition
+     */
+    easing?: TransitionEasing;
+}
+/**
+ * The react component for `mezzanine` transition.
+ */
+declare function Transition(props: TransitionProps): JSX.Element;
+export default Transition;

package/components/Transition/Transition.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactTransition from 'react-transition-group/Transition';
+
+/**
+ * The react component for `mezzanine` transition.
+ */
+function Transition(props) {
+    const { addEndListener, appear = true, children, duration, in: inProp = false, keepMount = false, lazyMount = true, nodeRef, onEnter, onEntering, onEntered, onExit, onExiting, onExited, } = props;
+    const addNodeToCallback = (callback) => {
+        if (!callback) {
+            return;
+        }
+        return (...args) => {
+            const node = nodeRef.current;
+            if (node) {
+                callback(node, ...args);
+            }
+        };
+    };
+    return (React.createElement(ReactTransition
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    , { 
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        addEndListener: addNodeToCallback(addEndListener), appear: appear, in: inProp, mountOnEnter: lazyMount, nodeRef: nodeRef, onEnter: addNodeToCallback(onEnter), onEntering: addNodeToCallback(onEntering), onEntered: addNodeToCallback(onEntered), onExit: addNodeToCallback(onExit), onExiting: addNodeToCallback(onExiting), onExited: addNodeToCallback(onExited), timeout: duration === 'auto' ? undefined : duration, unmountOnExit: !keepMount }, children));
+}
+
+export { Transition as default };

package/components/Transition/getTransitionStyleProps.d.ts

@@ -0,0 +1,16 @@
+import { TransitionDelay, TransitionDuration, TransitionEasing, TransitionMode } from './Transition';
+export declare function getTransitionDuration(mode: TransitionMode, duration: TransitionDuration, resolveAuto?: number | ((mode: TransitionMode) => number)): number;
+export declare function getTransitionTimingFunction(mode: TransitionMode, easing: TransitionEasing): string;
+export declare function getTransitionDelay(mode: TransitionMode, delay: TransitionDelay): number;
+export interface GetTransitionStyleProps {
+    delay: TransitionDelay;
+    duration: TransitionDuration;
+    easing: TransitionEasing;
+    resolveAutoDuration?: Parameters<typeof getTransitionDuration>[2];
+}
+export interface TransitionStyleProps {
+    delay: number;
+    duration: number;
+    timingFunction: string;
+}
+export declare function getTransitionStyleProps(mode: TransitionMode, props: GetTransitionStyleProps): TransitionStyleProps;

package/components/Transition/getTransitionStyleProps.js

@@ -0,0 +1,25 @@
+function getTransitionDuration(mode, duration, resolveAuto) {
+    if (duration !== 'auto') {
+        return typeof duration === 'number' ? duration : duration[mode] || 0;
+    }
+    if (typeof resolveAuto === 'function') {
+        return resolveAuto(mode);
+    }
+    return resolveAuto !== null && resolveAuto !== void 0 ? resolveAuto : 0;
+}
+function getTransitionTimingFunction(mode, easing) {
+    return typeof easing === 'string' ? easing : easing[mode] || 'ease';
+}
+function getTransitionDelay(mode, delay) {
+    return typeof delay === 'number' ? delay : delay[mode] || 0;
+}
+function getTransitionStyleProps(mode, props) {
+    const { delay, duration, easing, resolveAutoDuration } = props;
+    return {
+        delay: getTransitionDelay(mode, delay),
+        duration: getTransitionDuration(mode, duration, resolveAutoDuration),
+        timingFunction: getTransitionTimingFunction(mode, easing),
+    };
+}
+
+export { getTransitionDelay, getTransitionDuration, getTransitionStyleProps, getTransitionTimingFunction };

package/components/Transition/useSetNodeTransition.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+import { TransitionMode } from './Transition';
+import { GetTransitionStyleProps, TransitionStyleProps } from './getTransitionStyleProps';
+export interface UseSetNodeTransitionProps extends GetTransitionStyleProps {
+    properties: (string | [string, (props: TransitionStyleProps, mode: TransitionMode) => TransitionStyleProps])[];
+}
+export declare function useSetNodeTransition(props: UseSetNodeTransitionProps, style?: CSSProperties): readonly [(node: HTMLElement, mode: TransitionMode) => void, (node: HTMLElement) => void];

package/components/Transition/useSetNodeTransition.js

@@ -0,0 +1,35 @@
+import { getTransitionStyleProps } from './getTransitionStyleProps.js';
+
+function useSetNodeTransition(props, style) {
+    /* eslint-disable no-param-reassign */
+    const setNodeTransition = (node, mode) => {
+        const transitionProps = getTransitionStyleProps(mode, props);
+        const { properties } = props;
+        node.style.transition = properties
+            .map((propertyOrConfig) => {
+            let property;
+            let resolvedTransitionProps = transitionProps;
+            if (typeof propertyOrConfig === 'string') {
+                property = propertyOrConfig;
+            }
+            else {
+                const [, overrideTransitionProps] = propertyOrConfig;
+                [property] = propertyOrConfig;
+                resolvedTransitionProps = overrideTransitionProps(resolvedTransitionProps, mode);
+            }
+            const { delay, duration, timingFunction } = resolvedTransitionProps;
+            return `${property} ${duration}ms ${timingFunction} ${delay}ms`;
+        })
+            .join(',');
+    };
+    const resetNodeTransition = (node) => {
+        const { transition } = style || {};
+        if (transition) {
+            node.style.transition = transition;
+        }
+    };
+    /* eslint-enable no-param-reassign */
+    return [setNodeTransition, resetNodeTransition];
+}
+
+export { useSetNodeTransition };

package/components/baseField.css

@@ -0,0 +1 @@
+.qdr-base-field{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2)}.qdr-base-field__label{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-h6-font-size);line-height:var(--qdr-typography-basic-h6-line-height);letter-spacing:var(--qdr-typography-basic-h6-letter-spacing);font-weight:var(--qdr-typography-basic-h6-font-weight);margin:0}.qdr-base-field__required-mark{display:inline-block;margin-left:var(--qdr-spacing-2);color:var(--qdr-error)}.qdr-base-field__error-message{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-2);color:var(--qdr-error);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight)}

package/components/baseField.scss

@@ -0,0 +1,34 @@
+.qdr-base-field {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--qdr-spacing-2);
+
+  &__label {
+    color: var(--qdr-text-secondary);
+    font-size: var(--qdr-typography-basic-h6-font-size);
+    line-height: var(--qdr-typography-basic-h6-line-height);
+    letter-spacing: var(--qdr-typography-basic-h6-letter-spacing);
+    font-weight: var(--qdr-typography-basic-h6-font-weight);
+    margin: 0;
+  }
+
+  &__required-mark {
+    display: inline-block;
+    margin-left: var(--qdr-spacing-2);
+    color: var(--qdr-error);
+  }
+
+  &__error-message {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--qdr-spacing-2);
+    color: var(--qdr-error);
+    font-size: var(--qdr-typography-basic-caption-font-size);
+    line-height: var(--qdr-typography-basic-caption-line-height);
+    letter-spacing: var(--qdr-typography-basic-caption-letter-spacing);
+    font-weight: var(--qdr-typography-basic-caption-font-weight);
+  }
+}

package/components/button.css

@@ -0,0 +1 @@
+.qdr-button{display:flex;align-items:center;justify-content:center;gap:var(--qdr-spacing-2);border:none;background-color:rgba(0,0,0,0);cursor:pointer;transition:all var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-button--small{padding:0 var(--qdr-spacing-7);font-size:var(--qdr-typography-basic-button2-font-size);line-height:var(--qdr-typography-basic-button2-line-height);letter-spacing:var(--qdr-typography-basic-button2-letter-spacing);font-weight:var(--qdr-typography-basic-button2-font-weight)}.qdr-button--medium{padding:var(--qdr-spacing-1) var(--qdr-spacing-7);font-size:var(--qdr-typography-basic-button2-font-size);line-height:var(--qdr-typography-basic-button2-line-height);letter-spacing:var(--qdr-typography-basic-button2-letter-spacing);font-weight:var(--qdr-typography-basic-button2-font-weight)}.qdr-button--large{padding:0 var(--qdr-spacing-7);font-size:var(--qdr-typography-basic-button1-font-size);line-height:var(--qdr-typography-basic-button1-line-height);letter-spacing:var(--qdr-typography-basic-button1-letter-spacing);font-weight:var(--qdr-typography-basic-button1-font-weight)}.qdr-button--primary{background-color:var(--qdr-primary);color:var(--qdr-on-primary);border:1px solid var(--qdr-primary)}.qdr-button--primary:hover{background-color:var(--qdr-primary-light);border-color:var(--qdr-primary-light)}.qdr-button--primary:active{background-color:var(--qdr-primary-dark);border-color:var(--qdr-primary-dark)}.qdr-button--primary:disabled{color:var(--qdr-action-disabled);background-color:var(--qdr-action-disabled-bg);border-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-button--primary.qdr-button--danger{background-color:var(--qdr-error);color:var(--qdr-on-error);border:1px solid var(--qdr-error)}.qdr-button--primary.qdr-button--danger:hover{background-color:var(--qdr-error-light);border-color:var(--qdr-error-light)}.qdr-button--primary.qdr-button--danger:active{background-color:var(--qdr-error-dark);border-color:var(--qdr-error-dark)}.qdr-button--primary.qdr-button--danger:disabled{color:var(--qdr-action-disabled);background-color:var(--qdr-action-disabled-bg);border-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-button--secondary{background-color:rgba(0,0,0,0);color:var(--qdr-action-active);border:1px solid var(--qdr-border)}.qdr-button--secondary:hover{color:var(--qdr-primary);border-color:var(--qdr-primary-light)}.qdr-button--secondary:active{color:var(--qdr-primary-dark);border-color:var(--qdr-primary-dark)}.qdr-button--secondary:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-button--secondary.qdr-button--danger{background-color:rgba(0,0,0,0);color:var(--qdr-error);border:1px solid var(--qdr-border)}.qdr-button--secondary.qdr-button--danger:hover{color:var(--qdr-error-light);border-color:var(--qdr-error-light)}.qdr-button--secondary.qdr-button--danger:active{color:var(--qdr-error-dark);border-color:var(--qdr-error-dark)}.qdr-button--secondary.qdr-button--danger:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-button--outlined{background-color:rgba(0,0,0,0);color:var(--qdr-primary);border:1px solid var(--qdr-primary)}.qdr-button--outlined:hover{background-color:var(--qdr-primary-hover-bg);border-color:var(--qdr-primary-light)}.qdr-button--outlined:active{background-color:var(--qdr-primary-active-bg);border-color:var(--qdr-primary)}.qdr-button--outlined:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--outlined.qdr-button--danger{background-color:rgba(0,0,0,0);color:var(--qdr-error);border:1px solid var(--qdr-error)}.qdr-button--outlined.qdr-button--danger:hover{background-color:var(--qdr-error-hover-bg);border-color:var(--qdr-error-light)}.qdr-button--outlined.qdr-button--danger:active{background-color:var(--qdr-error-active-bg);border-color:var(--qdr-error)}.qdr-button--outlined.qdr-button--danger:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--dashed{background-color:rgba(0,0,0,0);color:var(--qdr-primary);border:1px dashed var(--qdr-border)}.qdr-button--dashed:hover{background-color:var(--qdr-primary-hover-bg);border-color:var(--qdr-primary-light)}.qdr-button--dashed:active{background-color:var(--qdr-primary-active-bg);border-color:var(--qdr-primary-dark)}.qdr-button--dashed:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--dashed.qdr-button--danger{background-color:rgba(0,0,0,0);color:var(--qdr-error);border:1px dashed var(--qdr-error)}.qdr-button--dashed.qdr-button--danger:hover{background-color:var(--qdr-error-hover-bg);border-color:var(--qdr-error-light)}.qdr-button--dashed.qdr-button--danger:active{background-color:var(--qdr-error-active-bg);border-color:var(--qdr-error-dark)}.qdr-button--dashed.qdr-button--danger:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--tertiary{color:var(--qdr-primary)}.qdr-button--tertiary:hover{background-color:var(--qdr-primary-hover-bg)}.qdr-button--tertiary:active{background-color:var(--qdr-primary-active-bg)}.qdr-button--tertiary:disabled{color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--tertiary.qdr-button--danger{color:var(--qdr-error)}.qdr-button--tertiary.qdr-button--danger:hover{background-color:var(--qdr-error-hover-bg)}.qdr-button--tertiary.qdr-button--danger:active{background-color:var(--qdr-error-active-bg)}.qdr-button--tertiary.qdr-button--danger:disabled{color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}