@theroutingcompany/components 0.0.26-alpha.16 → 0.0.26-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theroutingcompany/components",
-  "version": "0.0.26-alpha.16",
+  "version": "0.0.26-alpha.18",
   "description": "The Routing Company Components",
   "main": "./dist/trc-components.umd.js",
   "module": "./dist/trc-components.es.js",
@@ -102,7 +102,7 @@
     "@types/styled-system": "^5.1.16",
     "@react-types/select": "^3.8.1",
     "@tanstack/react-table": "^8.9.1",
-    "@theroutingcompany/design-tokens": "^0.0.4-alpha.3",
+    "@theroutingcompany/design-tokens": "^0.0.4-alpha.4",
     "@styled-system/prop-types": "^5.1.2",
     "@styled-system/props": "^5.1.5",
     "csstype": "^3.1.2",

package/types/components/Badge/Badge.d.ts

@@ -10,7 +10,7 @@ declare const colors: {
     };
     readonly muted: {
         readonly background: "hsl(0deg 0% 10% / 8%)";
-        readonly color: "hsl(0deg 0% 56%)";
+        readonly color: "#909090";
     };
     readonly info: {
         readonly background: "hsl(217.4deg 81.6% 51% / 8%)";

package/types/components/Button/Button.d.ts

@@ -23,5 +23,8 @@ type ReactAriaProps = RenameMisprefixedProps<AriaButtonProps, 'is', 'isDisabled'
 export type ButtonProps = Prettify<PropsWithChildren<ButtonDesignProps & ReactAriaProps & {
     onClick?: ReactAriaProps['onPress'];
 } & Pick<ComponentPropsWithoutRef<'button'>, 'form'>>>;
+/**
+ * Deprecated. Use ButtonV2 instead.
+ */
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/types/components/ButtonV2/ButtonV2.d.ts

@@ -10,6 +10,7 @@ export interface ButtonPropsV2 {
     to?: string;
     toTitle?: string;
     variant?: Variant;
+    inverse?: boolean;
     disabled?: boolean;
     size?: Size;
     fullWidth?: boolean;

package/types/components/ButtonV2/styles.d.ts

@@ -1,7 +1,4 @@
 import type { Size, Variant } from './ButtonV2';
-export declare function focus({ buttonColor }: {
-    buttonColor?: string;
-}): string;
 export declare const reset: () => string;
 export declare const base: () => string;
 export type LoadingProp = {
@@ -10,16 +7,20 @@ export type LoadingProp = {
 export declare const childwrapper: (props: LoadingProp) => string;
 export declare const disabled: (props: {
     disabled: boolean;
-}) => "\n      opacity: 0.6;\n      &:hover {\n        cursor: not-allowed;\n      }\n    " | undefined;
+}) => "\n      opacity: 0.8;\n\n      &:hover {\n        cursor: not-allowed;\n      }\n    " | undefined;
 export declare const fullWidth: (props: {
     fullWidth: boolean;
 }) => "\n      display: block;\n      width: 100%;\n    " | undefined;
 export declare const group: () => string;
 export declare const primary: import("styled-components").FlattenSimpleInterpolation;
+export declare const inverse_primary: import("styled-components").FlattenSimpleInterpolation;
 export declare const secondary: import("styled-components").FlattenSimpleInterpolation;
+export declare const inverse_secondary: import("styled-components").FlattenSimpleInterpolation;
 export declare const tertiary: import("styled-components").FlattenSimpleInterpolation;
+export declare const inverse_tertiary: import("styled-components").FlattenSimpleInterpolation;
 export declare const danger: import("styled-components").FlattenSimpleInterpolation;
-export declare const getVariantStyles: (variant: Variant) => import("styled-components").FlattenSimpleInterpolation | undefined;
+export declare const inverse_danger: import("styled-components").FlattenSimpleInterpolation;
+export declare const getVariantStyles: (variant: Variant, inverse: boolean) => import("styled-components").FlattenSimpleInterpolation | undefined;
 export declare const small: import("styled-components").FlattenSimpleInterpolation;
 export declare const large: import("styled-components").FlattenSimpleInterpolation;
 export declare const getDefaultSize: (size: Size) => import("styled-components").FlattenSimpleInterpolation | undefined;

package/types/components/Input/InlineEdit/InlineEdit.d.ts

@@ -6,6 +6,7 @@ export interface InlineEditProps {
     'data-id'?: string;
     children: ReactNode;
     value?: number | string;
+    editValue?: number | string;
     placeholder?: string;
     fullWidth?: boolean;
     minWidth?: string;
@@ -17,7 +18,7 @@ export interface InlineEditProps {
     disabled?: boolean;
 }
 export declare const InlineEdit: {
-    ({ children, placeholder, value, minWidth, hideIcon, fullWidth, textAlign, p, onChange, onToggle, disabled, ...rest }: InlineEditProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, placeholder, value, editValue, minWidth, hideIcon, fullWidth, textAlign, p, onChange, onToggle, disabled, ...rest }: InlineEditProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/types/styles/index.d.ts

@@ -1,34 +1,2 @@
 export declare const buttonReset = "\n  border: none;\n  margin: 0;\n  padding: 0;\n  overflow: visible;\n  width: auto;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: normal;\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  -webkit-appearance: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n  }\n";
 export declare const visuallyHidden = "\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  word-wrap: normal !important;\n";
-type FocusOutline = {
-    /**
-     * Color of the focus ring. Defaults to color_blue_700.
-     */
-    color?: string;
-    /**
-     * CSS selector to target the pseudo-element with the ring. Defaults to '&:focus'.
-     */
-    modifier?: string;
-    /**
-     * Pixel offset of the focus ring. Defaults to '3px'.
-     */
-    offset?: string;
-    /**
-     * Border radius of the focus ring. Defaults to borderRadius_200.
-     */
-    radius?: string;
-};
-/**
- * Creates focus styles on an :after pseudo-element.
- * @param string Color of the focus ring. Defaults to color_blue_700.
- * @param modifier CSS selector to target the pseudo-element with the ring, defaults to '&:focus'
- * @param offset Pixel offset of the focus ring. Defaults to '3px'.
- * @param radius Border radius of the focus ring. Defaults to borderRadius_200.
- *
- * @example
- * const Styled = styled.div`
- *   ${focusOutline({ color: 'gray', modifier: '&:focus-within' })}
- * `;
- */
-export declare const focusOutline: ({ modifier, offset, }?: FocusOutline) => string;
-export {};