@trackunit/react-components 0.1.113 → 0.1.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.113",
+  "version": "0.1.116",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,15 +9,14 @@
   "dependencies": {
     "@floating-ui/react": "0.22.2",
     "@trackunit/css-class-variance-utilities": "0.0.5",
-    "@trackunit/css-core": "0.0.85",
+    "@trackunit/css-core": "0.0.86",
     "@trackunit/tailwind-styled-components": "0.0.57",
-    "@trackunit/ui-design-tokens": "0.0.69",
-    "@trackunit/ui-icons": "0.0.66",
+    "@trackunit/ui-design-tokens": "0.0.70",
+    "@trackunit/ui-icons": "0.0.67",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",
     "react-day-picker": "8.7.1",
-    "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-router-dom": "6.4.5",
     "react-use": "17.4.0",

package/src/components/Alert/Alert.d.ts

@@ -11,7 +11,7 @@ export interface AlertProps extends CommonProps {
     /**
      * Child nodes.
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * Color of the alert component.
      *

package/src/components/Badge/Badge.d.ts

@@ -7,11 +7,6 @@ interface BaseBadgeProps extends CommonProps {
      * The color of the badge.
      */
     color?: BadgeColors;
-    /**
-     * Specifies whether the badge is subtle or not.
-     * Subtle badges have a light background color wither a darker text color.
-     */
-    subtle?: boolean;
     /**
      * Custom classNames can be added to make adjustments where needed.
      * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
@@ -39,5 +34,5 @@ export type BadgeProps = BaseBadgeProps;
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
  */
-export declare const Badge: ({ color, subtle, className, count, max, hideZero, dataTestId, ...rest }: BadgeProps) => JSX.Element | null;
+export declare const Badge: ({ color, className, count, max, hideZero, dataTestId, ...rest }: BadgeProps) => JSX.Element | null;
 export {};

package/src/components/Badge/Badge.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaBadge: (props?: ({
+    color?: "primary" | "danger" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Drawer/Drawer.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaDrawerOverlay: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaDrawerCard: (props?: ({
+    position?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Heading/Heading.variants.d.ts

@@ -0,0 +1,5 @@
+export declare const cvaHeading: (props?: ({
+    subtle?: boolean | null | undefined;
+    inverted?: boolean | null | undefined;
+    size?: "primary" | "secondary" | "tertiary" | "subtitle" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Icon/Icon.d.ts

@@ -1,7 +1,8 @@
-import { ThemeColors } from "@trackunit/ui-design-tokens";
+import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
 import * as React from "react";
 import { CommonProps, Size } from "../../common/CommonProps";
+export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
 export interface IconProps extends CommonProps {
     /**
      * The name of the icon to be rendered.
@@ -13,14 +14,14 @@ export interface IconProps extends CommonProps {
      * Supports any colors from the theme.
      * Custom colors can be used by setting a text color in the className.
      */
-    color?: ThemeColors;
+    color?: IconColors;
     /**
      * The size of the icon.
      * Small = 16x16px, medium = 20x20px, Large = 24x24px.
      * Default value is Large.
      * If a custom size is needed, set it in the className.
      */
-    size?: Size;
+    size?: Size | "font";
     /**
      * Select if the icon should be rendered as solid or outline.
      * Default value depends on the Size prop, small == solid, medium == solid, large == outline.

package/src/components/Icon/Icon.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const cvaIcon: (props?: ({
+    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "stopped" | "unknown" | "default" | "black" | "white" | null | undefined;
+    size?: "small" | "medium" | "large" | "font" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaIconComponent: (props?: ({
+    iconType?: "solid" | "outline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaLoadingDot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Indicator/Indicator.d.ts

@@ -39,4 +39,4 @@ export interface IndicatorProps extends CommonProps {
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
  */
-export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, ...rest }: IndicatorProps) => JSX.Element;
+export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, className, ...rest }: IndicatorProps) => JSX.Element;

package/src/components/Indicator/Indicator.variants.d.ts

@@ -0,0 +1,10 @@
+export declare const cvaIndicator: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaIndicatorIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaIndicatorLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaIndicatorPing: (props?: ({
+    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site" | "white" | "black" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaIndicatorIconBackground: (props?: ({
+    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site" | "white" | "black" | null | undefined;
+    background?: "visible" | "hidden" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/PageHeader/PageHeader.variants.d.ts

@@ -0,0 +1,5 @@
+export declare const cvaPageHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPageHeaderHeading: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPageHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPageHeaderHeadingAccessoriesContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPageHeaderChildContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Pagination/Pagination.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const cvaPagination: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPaginationText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Popover/Popover.variants.d.ts

@@ -0,0 +1,5 @@
+export declare const cvaPopoverContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPopoverTitleContainer: (props?: ({
+    divider?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaPopoverTitleText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Sidebar/Sidebar.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaSidebar: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSidebarChildContainer: (props?: ({
+    breakpoint?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/SkeletonLines/SkeletonLines.variants.d.ts

@@ -0,0 +1 @@
+export declare const cvaSkeletonLine: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Spacer/Spacer.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { CommonProps } from "../../common";
+import { CommonProps, Size } from "../../common";
 export interface SpacerProps extends CommonProps {
     /**
      * The minimum height of the spacer. Defaults to 1px.
      * Possible values are "normal"(8px), and "large" (32px).
      */
-    minHeight?: "normal" | "large";
+    size?: Size;
     /**
      * The border of the spacer.
      */
@@ -17,4 +17,4 @@ export interface SpacerProps extends CommonProps {
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
-export declare const Spacer: ({ minHeight, border, dataTestId }: SpacerProps) => JSX.Element;
+export declare const Spacer: ({ size, border, dataTestId, className }: SpacerProps) => JSX.Element;

package/src/components/Spacer/Spacer.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaSpacer: (props?: ({
+    border?: boolean | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Spinner/Spinner.variants.d.ts

@@ -0,0 +1,7 @@
+export declare const cvaSpinner: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    mode?: "dark" | "light" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSpinnerContainer: (props?: ({
+    centering?: "centered" | "vertically" | "horizontally" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Tag/Tag.d.ts

@@ -1,13 +1,14 @@
-import { ThemeColors } from "@trackunit/ui-design-tokens";
+import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 export type TagSize = "small" | "medium";
+export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
 export interface TagProps extends CommonProps {
     /**
      * The color of the tag.
      *
      */
-    color?: ThemeColors;
+    color?: TagColors;
     /**
      * A handler for a click event triggered on X icon.
      * If not passed then x icon won't be visible.

package/src/components/Tag/Tag.variants.d.ts

@@ -0,0 +1,7 @@
+export declare const cvaTag: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    layout?: "withIcon" | "default" | null | undefined;
+    color?: "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTagIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTagIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Timeline/Timeline.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaTimeline: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTimelineElement: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTimelineDot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Tip/Tip.d.ts

@@ -6,17 +6,13 @@ export interface TipProps extends CommonProps, Pick<TooltipProps, "placement" |
     /**
      * Child nodes to render inside the tip.
      */
-    children: React.ReactNode;
+    children: React.ReactNode | string;
     /**
      * The props for setting the icon on this tip.
      */
     iconProps?: Partial<IconProps>;
     /**
-     * The element type the tip will be rendered as.
-     */
-    renderAs?: keyof JSX.IntrinsicElements;
-    /**
-     * The href attribute if the tip is rendered as an anchor tag.
+     * Shows an icon with link as the href attribute inside the tip.
      */
     link?: string;
 }
@@ -27,4 +23,4 @@ export interface TipProps extends CommonProps, Pick<TooltipProps, "placement" |
  * @param {TipProps} props - The props for the Tip component
  * @returns {JSX.Element} Tip component
  */
-export declare const Tip: ({ children, iconProps, dataTestId, link, renderAs, className, placement, mode, }: TipProps) => JSX.Element;
+export declare const Tip: ({ children, iconProps, dataTestId, className, placement, mode, link, }: TipProps) => JSX.Element;

package/src/components/Tip/Tip.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaTip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTipContent: (props?: ({
+    color?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Tooltip/Tooltip.variants.d.ts

@@ -0,0 +1,6 @@
+export declare const cvaTooltipFlexContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipPopover: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipContent: (props?: ({
+    color?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/ValueBar/ValueBar.variants.d.ts

@@ -0,0 +1,9 @@
+export declare const cvaValueBar: (props?: ({
+    size?: "small" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaValueBarProgress: (props?: ({
+    fill?: "default" | "background" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaValueBarText: (props?: ({
+    size?: "small" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/buttons/BackToTopButton/BackToTopButton.d.ts

@@ -11,4 +11,4 @@ export interface BackToTopProps extends CommonProps {
  * BackToTopButton appears at the bottom-right corner of the screen when the user scrolls down the page. When clicked, the page scrolls smoothly to the top.
  *
  */
-export declare const BackToTopButton: ({ color, size, dataTestId }: BackToTopProps) => JSX.Element;
+export declare const BackToTopButton: ({ color, size, dataTestId, className }: BackToTopProps) => JSX.Element;

package/src/components/buttons/BackToTopButton/BackToTopButton.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaBackToTopButton: (props?: ({
+    color?: "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/buttons/Button/Button.d.ts

@@ -1,14 +1,5 @@
 import * as React from "react";
-import { Size } from "../../../common";
-import { ButtonColor, ButtonCommonProps, ButtonType, ButtonVariant } from "../shared/ButtonProps";
-export interface StyledButtonProps {
-    $variant: ButtonVariant;
-    $size: Size;
-    $square: boolean;
-    $color: ButtonColor;
-    $fullWidth: boolean;
-    $as: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;
-}
+import { ButtonCommonProps, ButtonType } from "../shared/ButtonProps";
 export interface ButtonProps extends ButtonCommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**

package/src/components/buttons/IconButton/IconButton.d.ts

@@ -1,16 +1,11 @@
 import * as React from "react";
 import { Size } from "../../../common";
-import "../shared/Button.css";
 import { ButtonCommonProps } from "../shared/ButtonProps";
 export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The icon to display.
      */
     icon: React.ReactNode;
-    /**
-     * Whether the button is circular or not.
-     */
-    circular?: boolean;
     /**
      * The element type the button will be rendered as.
      *

package/src/components/buttons/shared/Button.variants.d.ts

@@ -0,0 +1,13 @@
+export declare const cvaButton: (props?: ({
+    color?: "primary" | "secondary" | "danger" | "warning" | "tertiary" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    rounded?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+    square?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    variant?: "transparent" | "filled" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaButtonSpinner: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaIconButtonContainer: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -2,7 +2,7 @@
 import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { CommonProps, Size } from "../../../common/CommonProps";
 export type ButtonVariant = "filled" | "transparent";
-export type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "info" | "warning" | "danger"> | "tertiary";
+export type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "warning" | "danger"> | "tertiary";
 export type ButtonType = "button" | "submit";
 export interface ButtonCommonProps extends CommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -38,6 +38,10 @@ export interface ButtonCommonProps extends CommonProps {
      * The id of the button.
      */
     id?: string;
+    /**
+     * Whether the button is circular or not.
+     */
+    circular?: boolean;
     title?: string;
     tabIndex?: number;
     role?: string;

package/src/index.d.ts

@@ -1,5 +1,7 @@
 export * from "./common";
 export * from "./components";
+export * from "./components/buttons/shared/Button.variants";
 export * from "./components/Clickable/Clickable.variants";
+export * from "./components/Indicator/Indicator.variants";
 export * from "./hooks";
 export * from "./layout";

package/index.css

@@ -1,194 +0,0 @@
-/* CSS related to the Button component */
-
-.tu-button {
-  @apply flex-row
-    inline-flex
-    gap-2
-    box-border
-    justify-center
-    items-center
-    whitespace-nowrap
-    max-w-full
-    outline-0
-    outline-current
-    transition-all
-    ease-in-out
-    component-button-border
-    cursor-pointer
-    flex-none
-    py-1.5
-    component-button-padding
-    component-button-height
-    focus:ring
-    focus:ring-offset-1
-    focus:outline-none
-    disabled:cursor-not-allowed
-    text-sm
-    font-medium
-    align-middle;
-
-  &__spinner {
-    @apply !w-[1em]
-      !h-[1em];
-  }
-
-  &--rounded {
-    @apply !rounded-full;
-  }
-
-  &--square {
-    @apply aspect-square;
-  }
-
-  &--full-width {
-    @apply w-full
-      flex-auto;
-  }
-
-  &--small {
-    @apply py-1
-      px-2;
-  }
-
-  &--large {
-    @apply py-2
-      px-4;
-  }
-
-  &--primary {
-    @apply bg-primary-600
-      text-white
-      hover:bg-primary-800
-      active:bg-primary-700
-      focus:ring-primary-300
-      disabled:hover:bg-slate-400
-      disabled:bg-slate-400
-      disabled:text-slate-200;
-  }
-
-  &--secondary {
-    @apply component-button-secondary-color
-      hover:bg-secondary-400
-      hover:text-secondary-800
-      active:text-secondary-700
-      active:bg-secondary-300
-      focus:ring-secondary-300
-      disabled:bg-secondary-200
-      disabled:hover:bg-secondary-200
-      disabled:text-secondary-400;
-  }
-
-  &--danger {
-    @apply bg-danger-600
-      text-white
-      hover:bg-danger-800
-      active:bg-danger-700
-      focus:ring-danger-300
-      disabled:bg-slate-200
-      disabled:hover:bg-slate-200
-      disabled:text-slate-400;
-  }
-
-  &--warning {
-    @apply bg-warning-50
-      text-warning-600
-      hover:bg-warning-200
-      hover:text-warning-800
-      active:text-warning-700
-      active:bg-warning-100
-      focus:ring-warning-300
-      disabled:bg-warning-50
-      disabled:hover:bg-warning-50
-      disabled:text-slate-400;
-  }
-
-  &--tertiary {
-    @apply bg-white 
-      border
-      text-slate-600
-      active:bg-slate-100
-      active:text-slate-700
-      focus:ring-slate-300
-      hover:bg-slate-200
-      hover:text-slate-800
-      border-slate-300
-      disabled:bg-slate-200
-      disabled:hover:bg-slate-200
-      disabled:text-slate-400;
-  }
-
-  &--transparent-primary {
-    @apply text-primary-600
-      hover:text-primary-700
-      active:bg-primary-700
-      focus:ring-primary-300
-      hover:bg-primary-500/10
-      disabled:hover:bg-transparent;
-  }
-
-  &--transparent-secondary {
-    @apply text-neutral-600
-      hover:text-neutral-800
-      active:text-neutral-700
-      active:bg-black/10
-      focus:ring-neutral-300
-      hover:bg-black/5
-      disabled:hover:bg-transparent;
-  }
-
-  &--transparent-danger {
-    @apply text-danger-600
-      active:bg-danger-600/10
-      focus:ring-danger-300
-      hover:bg-danger-600/10
-      disabled:hover:bg-transparent;
-  }
-
-  &--transparent-warning {
-    @apply text-warning-600
-      active:bg-warning-500/20
-      focus:ring-warning-300
-      hover:bg-warning-500/10
-      disabled:hover:bg-transparent;
-  }
-
-  &--transparent-tertiary {
-    @apply text-slate-600
-      active:bg-slate-200/20
-      focus:ring-slate-300
-      hover:bg-slate-600/10
-      disabled:hover:bg-transparent;
-  }
-
-  &__container {
-    @apply w-5
-      h-5
-      flex
-      justify-center
-      items-center
-      box-border;
-
-    &--small {
-      @apply w-4
-        h-4
-        flex
-        justify-center
-        items-center
-        box-border;
-    }
-  }
-
-  &__disabled {
-    @apply cursor-not-allowed
-      pointer-events-none
-      bg-slate-200
-      hover:bg-slate-200
-      text-slate-400;
-  }
-
-  &__disabled--transparent {
-    @apply cursor-not-allowed
-      pointer-events-none
-      hover:bg-transparent;
-  }
-}

package/src/components/buttons/shared/helpers.d.ts

@@ -1,20 +0,0 @@
-import { Size } from "../../../common";
-import { ButtonColor, ButtonVariant } from "./ButtonProps";
-interface ButtonProps {
-    $color: ButtonColor;
-    $variant: ButtonVariant;
-    $size: Size;
-}
-/**
- * Helper to get the needed classname from buttonProps.
- *
- * @returns {string} - Classnames for the button
- */
-export declare const getStyles: () => ({ $color, $variant }: ButtonProps) => any;
-/**
- * Helper to get the needed classname for padding.
- *
- * @returns {string} - The correct class for setting padding.
- */
-export declare const getPadding: () => ({ $size }: ButtonProps) => string;
-export {};