@mirohq/design-system-base-hotkey 0.1.24 → 0.2.0

package/dist/main.js

@@ -10,6 +10,9 @@ const Hotkey = designSystemStitches.styled(designSystemPrimitive.Primitive.span,
   fontSize: "$175",
   lineHeight: "20px",
   variants: {
+    v1: {
+      true: {}
+    },
     variant: {
       neutral: {
         color: "$text-neutrals-subtle"
@@ -22,6 +25,17 @@ const Hotkey = designSystemStitches.styled(designSystemPrimitive.Primitive.span,
       }
     }
   },
+  compoundVariants: [
+    {
+      variant: "inverted",
+      v1: true,
+      css: {
+        backgroundColor: "$gray-650",
+        color: "$white",
+        borderRadius: "$75"
+      }
+    }
+  ],
   defaultVariants: {
     variant: "neutral"
   }

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/hotkey.ts"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Hotkey = styled(Primitive.span, {\n  whiteSpace: 'nowrap',\n  fontSize: '$175',\n  lineHeight: '20px',\n\n  variants: {\n    variant: {\n      neutral: {\n        color: '$text-neutrals-subtle',\n      },\n      inverted: {\n        backgroundColor: '$background-neutrals-inverted-subtle',\n        color: '$text-neutrals-inverted',\n        padding: '2px 6px',\n        borderRadius: '$50',\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'neutral',\n  },\n})\n\nexport type HotkeyProps = ComponentPropsWithRef<typeof Hotkey>\n"],"names":["styled","Primitive"],"mappings":";;;;;;;AAIa,MAAA,MAAA,GAASA,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EAC3C,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,MAAA;AAAA,EAEZ,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,QAAU,EAAA;AAAA,QACR,eAAiB,EAAA,sCAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,QACP,OAAS,EAAA,SAAA;AAAA,QACT,YAAc,EAAA,KAAA;AAAA,OAChB;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,SAAA;AAAA,GACX;AACF,CAAC;;;;"}
+{"version":3,"file":"main.js","sources":["../src/hotkey.ts"],"sourcesContent":["import type { ComponentPropsWithRef, HTMLAttributes } from 'react'\nimport type { CSS, SafeProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Hotkey = styled(Primitive.span, {\n  whiteSpace: 'nowrap',\n  fontSize: '$175',\n  lineHeight: '20px',\n\n  variants: {\n    v1: {\n      true: {},\n    },\n    variant: {\n      neutral: {\n        color: '$text-neutrals-subtle',\n      },\n      inverted: {\n        backgroundColor: '$background-neutrals-inverted-subtle',\n        color: '$text-neutrals-inverted',\n        padding: '2px 6px',\n        borderRadius: '$50',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'inverted',\n      v1: true,\n      css: {\n        backgroundColor: '$gray-650',\n        color: '$white',\n        borderRadius: '$75',\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: 'neutral',\n  },\n})\n\nexport type HotkeyStyledProps = ComponentPropsWithRef<typeof Hotkey>\n\ntype SpanProps = HTMLAttributes<HTMLSpanElement>\nexport type HotkeySharedProps = SafeProps<SpanProps & { css?: CSS }>\n"],"names":["styled","Primitive"],"mappings":";;;;;;;AAKa,MAAA,MAAA,GAASA,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EAC3C,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,MAAA;AAAA,EAEZ,QAAU,EAAA;AAAA,IACR,EAAI,EAAA;AAAA,MACF,MAAM,EAAC;AAAA,KACT;AAAA,IACA,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,QAAU,EAAA;AAAA,QACR,eAAiB,EAAA,sCAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,QACP,OAAS,EAAA,SAAA;AAAA,QACT,YAAc,EAAA,KAAA;AAAA,OAChB;AAAA,KACF;AAAA,GACF;AAAA,EACA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,OAAS,EAAA,UAAA;AAAA,MACT,EAAI,EAAA,IAAA;AAAA,MACJ,GAAK,EAAA;AAAA,QACH,eAAiB,EAAA,WAAA;AAAA,QACjB,KAAO,EAAA,QAAA;AAAA,QACP,YAAc,EAAA,KAAA;AAAA,OAChB;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,SAAA;AAAA,GACX;AACF,CAAC;;;;"}

package/dist/module.js

@@ -6,6 +6,9 @@ const Hotkey = styled(Primitive.span, {
   fontSize: "$175",
   lineHeight: "20px",
   variants: {
+    v1: {
+      true: {}
+    },
     variant: {
       neutral: {
         color: "$text-neutrals-subtle"
@@ -18,6 +21,17 @@ const Hotkey = styled(Primitive.span, {
       }
     }
   },
+  compoundVariants: [
+    {
+      variant: "inverted",
+      v1: true,
+      css: {
+        backgroundColor: "$gray-650",
+        color: "$white",
+        borderRadius: "$75"
+      }
+    }
+  ],
   defaultVariants: {
     variant: "neutral"
   }

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/hotkey.ts"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Hotkey = styled(Primitive.span, {\n  whiteSpace: 'nowrap',\n  fontSize: '$175',\n  lineHeight: '20px',\n\n  variants: {\n    variant: {\n      neutral: {\n        color: '$text-neutrals-subtle',\n      },\n      inverted: {\n        backgroundColor: '$background-neutrals-inverted-subtle',\n        color: '$text-neutrals-inverted',\n        padding: '2px 6px',\n        borderRadius: '$50',\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'neutral',\n  },\n})\n\nexport type HotkeyProps = ComponentPropsWithRef<typeof Hotkey>\n"],"names":[],"mappings":";;;AAIa,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EAC3C,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,MAAA;AAAA,EAEZ,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,QAAU,EAAA;AAAA,QACR,eAAiB,EAAA,sCAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,QACP,OAAS,EAAA,SAAA;AAAA,QACT,YAAc,EAAA,KAAA;AAAA,OAChB;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,SAAA;AAAA,GACX;AACF,CAAC;;;;"}
+{"version":3,"file":"module.js","sources":["../src/hotkey.ts"],"sourcesContent":["import type { ComponentPropsWithRef, HTMLAttributes } from 'react'\nimport type { CSS, SafeProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Hotkey = styled(Primitive.span, {\n  whiteSpace: 'nowrap',\n  fontSize: '$175',\n  lineHeight: '20px',\n\n  variants: {\n    v1: {\n      true: {},\n    },\n    variant: {\n      neutral: {\n        color: '$text-neutrals-subtle',\n      },\n      inverted: {\n        backgroundColor: '$background-neutrals-inverted-subtle',\n        color: '$text-neutrals-inverted',\n        padding: '2px 6px',\n        borderRadius: '$50',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'inverted',\n      v1: true,\n      css: {\n        backgroundColor: '$gray-650',\n        color: '$white',\n        borderRadius: '$75',\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: 'neutral',\n  },\n})\n\nexport type HotkeyStyledProps = ComponentPropsWithRef<typeof Hotkey>\n\ntype SpanProps = HTMLAttributes<HTMLSpanElement>\nexport type HotkeySharedProps = SafeProps<SpanProps & { css?: CSS }>\n"],"names":[],"mappings":";;;AAKa,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EAC3C,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,MAAA;AAAA,EAEZ,QAAU,EAAA;AAAA,IACR,EAAI,EAAA;AAAA,MACF,MAAM,EAAC;AAAA,KACT;AAAA,IACA,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,QAAU,EAAA;AAAA,QACR,eAAiB,EAAA,sCAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,QACP,OAAS,EAAA,SAAA;AAAA,QACT,YAAc,EAAA,KAAA;AAAA,OAChB;AAAA,KACF;AAAA,GACF;AAAA,EACA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,OAAS,EAAA,UAAA;AAAA,MACT,EAAI,EAAA,IAAA;AAAA,MACJ,GAAK,EAAA;AAAA,QACH,eAAiB,EAAA,WAAA;AAAA,QACjB,KAAO,EAAA,QAAA;AAAA,QACP,YAAc,EAAA,KAAA;AAAA,OAChB;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,SAAA;AAAA,GACX;AACF,CAAC;;;;"}

package/dist/types.d.ts

@@ -1,14 +1,21 @@
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import { SafeProps, CSS } from '@mirohq/design-system-stitches';
 import * as react from 'react';
-import { ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef, HTMLAttributes } from 'react';
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 
-declare const Hotkey: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
+declare const Hotkey: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>>, "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "true" | undefined;
     variant?: "neutral" | "inverted" | undefined;
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>, {
+    v1?: boolean | "true" | undefined;
     variant?: "neutral" | "inverted" | undefined;
 }, {}>;
-declare type HotkeyProps = ComponentPropsWithRef<typeof Hotkey>;
+declare type HotkeyStyledProps = ComponentPropsWithRef<typeof Hotkey>;
+declare type SpanProps = HTMLAttributes<HTMLSpanElement>;
+declare type HotkeySharedProps = SafeProps<SpanProps & {
+    css?: CSS;
+}>;
 
-export { Hotkey, HotkeyProps };
+export { Hotkey, HotkeySharedProps, HotkeyStyledProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-base-hotkey",
-  "version": "0.1.24",
+  "version": "0.2.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",