@koide-labs/ui 0.0.0 → 0.0.1

package/dist/styles/tokens.d.ts

@@ -0,0 +1,400 @@
+import { InvertRecord, ValueOf } from '../-types';
+/**
+ * Size variants for widths, buttons, icon sizes, you name it!
+ * Use `Extract` if you don't want to support all of them but ensure we reuse
+ * correct values.
+ * @example
+ * // only support a subset of size variants
+ * Extract<Size, "sm" | "md" | "lg">
+ */
+export type Size = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export type SpaceToken = ValueOf<typeof spaceTokens>;
+export type ColorToken = ValueOf<typeof colorTokens>;
+export type InteractiveToken = ValueOf<typeof interactiveTokens>;
+export type Token = ValueOf<typeof tokens>;
+export declare const colorTokens: {
+    readonly backgroundRoot: "var(--background-root)";
+    readonly backgroundDefault: "var(--background-default)";
+    readonly backgroundHigher: "var(--background-higher)";
+    readonly backgroundHighest: "var(--background-highest)";
+    readonly backgroundOverlay: "var(--background-overlay)";
+    readonly foregroundDefault: "var(--foreground-default)";
+    readonly foregroundDimmer: "var(--foreground-dimmer)";
+    readonly foregroundDimmest: "var(--foreground-dimmest)";
+    readonly outlineDimmest: "var(--outline-dimmest)";
+    readonly outlineDimmer: "var(--outline-dimmer)";
+    readonly outlineDefault: "var(--outline-default)";
+    readonly outlineStronger: "var(--outline-stronger)";
+    readonly outlineStrongest: "var(--outline-strongest)";
+    readonly primaryDimmest: "var(--primary-dimmest)";
+    readonly primaryDimmer: "var(--primary-dimmer)";
+    readonly primaryDefault: "var(--primary-default)";
+    readonly primaryStronger: "var(--primary-stronger)";
+    readonly primaryStrongest: "var(--primary-strongest)";
+    readonly positiveDimmest: "var(--positive-dimmest)";
+    readonly positiveDimmer: "var(--positive-dimmer)";
+    readonly positiveDefault: "var(--positive-default)";
+    readonly positiveStronger: "var(--positive-stronger)";
+    readonly positiveStrongest: "var(--positive-strongest)";
+    readonly negativeDimmest: "var(--negative-dimmest)";
+    readonly negativeDimmer: "var(--negative-dimmer)";
+    readonly negativeDefault: "var(--negative-default)";
+    readonly negativeStronger: "var(--negative-stronger)";
+    readonly negativeStrongest: "var(--negative-strongest)";
+    readonly redDimmest: "var(--red-dimmest)";
+    readonly redDimmer: "var(--red-dimmer)";
+    readonly redDefault: "var(--red-default)";
+    readonly redStronger: "var(--red-stronger)";
+    readonly redStrongest: "var(--red-strongest)";
+    readonly orangeDimmest: "var(--orange-dimmest)";
+    readonly orangeDimmer: "var(--orange-dimmer)";
+    readonly orangeDefault: "var(--orange-default)";
+    readonly orangeStronger: "var(--orange-stronger)";
+    readonly orangeStrongest: "var(--orange-strongest)";
+    readonly yellowDimmest: "var(--yellow-dimmest)";
+    readonly yellowDimmer: "var(--yellow-dimmer)";
+    readonly yellowDefault: "var(--yellow-default)";
+    readonly yellowStronger: "var(--yellow-stronger)";
+    readonly yellowStrongest: "var(--yellow-strongest)";
+    readonly limeDimmest: "var(--lime-dimmest)";
+    readonly limeDimmer: "var(--lime-dimmer)";
+    readonly limeDefault: "var(--lime-default)";
+    readonly limeStronger: "var(--lime-stronger)";
+    readonly limeStrongest: "var(--lime-strongest)";
+    readonly greenDimmest: "var(--green-dimmest)";
+    readonly greenDimmer: "var(--green-dimmer)";
+    readonly greenDefault: "var(--green-default)";
+    readonly greenStronger: "var(--green-stronger)";
+    readonly greenStrongest: "var(--green-strongest)";
+    readonly tealDimmest: "var(--teal-dimmest)";
+    readonly tealDimmer: "var(--teal-dimmer)";
+    readonly tealDefault: "var(--teal-default)";
+    readonly tealStronger: "var(--teal-stronger)";
+    readonly tealStrongest: "var(--teal-strongest)";
+    readonly blueDimmest: "var(--blue-dimmest)";
+    readonly blueDimmer: "var(--blue-dimmer)";
+    readonly blueDefault: "var(--blue-default)";
+    readonly blueStronger: "var(--blue-stronger)";
+    readonly blueStrongest: "var(--blue-strongest)";
+    readonly blurpleDimmest: "var(--blurple-dimmest)";
+    readonly blurpleDimmer: "var(--blurple-dimmer)";
+    readonly blurpleDefault: "var(--blurple-default)";
+    readonly blurpleStronger: "var(--blurple-stronger)";
+    readonly blurpleStrongest: "var(--blurple-strongest)";
+    readonly purpleDimmest: "var(--purple-dimmest)";
+    readonly purpleDimmer: "var(--purple-dimmer)";
+    readonly purpleDefault: "var(--purple-default)";
+    readonly purpleStronger: "var(--purple-stronger)";
+    readonly purpleStrongest: "var(--purple-strongest)";
+    readonly magentaDimmest: "var(--magenta-dimmest)";
+    readonly magentaDimmer: "var(--magenta-dimmer)";
+    readonly magentaDefault: "var(--magenta-default)";
+    readonly magentaStronger: "var(--magenta-stronger)";
+    readonly magentaStrongest: "var(--magenta-strongest)";
+    readonly pinkDimmest: "var(--pink-dimmest)";
+    readonly pinkDimmer: "var(--pink-dimmer)";
+    readonly pinkDefault: "var(--pink-default)";
+    readonly pinkStronger: "var(--pink-stronger)";
+    readonly pinkStrongest: "var(--pink-strongest)";
+    readonly greyDimmest: "var(--grey-dimmest)";
+    readonly greyDimmer: "var(--grey-dimmer)";
+    readonly greyDefault: "var(--grey-default)";
+    readonly greyStronger: "var(--grey-stronger)";
+    readonly greyStrongest: "var(--grey-strongest)";
+    readonly brownDimmest: "var(--brown-dimmest)";
+    readonly brownDimmer: "var(--brown-dimmer)";
+    readonly brownDefault: "var(--brown-default)";
+    readonly brownStronger: "var(--brown-stronger)";
+    readonly brownStrongest: "var(--brown-strongest)";
+    readonly black: "var(--black)";
+    readonly white: "var(--white)";
+};
+export declare const interactiveTokens: {
+    readonly surfaceBackground: "var(--surface-background)";
+    readonly interactiveBackground: "var(--surface-interactive-background)";
+    readonly interactiveBackgroundActive: "var(--surface-interactive-background--active)";
+    readonly interactiveBorder: "var(--surface-interactive-border)";
+    readonly interactiveBorderHover: "var(--surface-interactive-border--hover)";
+};
+export declare const colorwayTokens: {
+    readonly colorwayDimmest: "var(--view-colorway-dimmest)";
+    readonly colorwayDimmer: "var(--view-colorway-dimmer)";
+    readonly colorwayDefault: "var(--view-colorway-default)";
+    readonly colorwayStronger: "var(--view-colorway-stronger)";
+    readonly colorwayStrongest: "var(--view-colorway-strongest)";
+};
+export declare const spaceTokens: {
+    readonly space1: "var(--space-1)";
+    readonly space2: "var(--space-2)";
+    readonly space4: "var(--space-4)";
+    readonly space6: "var(--space-6)";
+    readonly space8: "var(--space-8)";
+    readonly space12: "var(--space-12)";
+    readonly space16: "var(--space-16)";
+    readonly space20: "var(--space-20)";
+    readonly space24: "var(--space-24)";
+    readonly space28: "var(--space-28)";
+    readonly space32: "var(--space-32)";
+    readonly space40: "var(--space-40)";
+    readonly space48: "var(--space-48)";
+    readonly space56: "var(--space-56)";
+    readonly space64: "var(--space-64)";
+    readonly space80: "var(--space-80)";
+    readonly space96: "var(--space-96)";
+    readonly space128: "var(--space-128)";
+    readonly space256: "var(--space-256)";
+    readonly spaceDefault: "var(--space-default)";
+};
+export declare const borderTokens: {
+    readonly borderRadius1: "var(--border-radius-1)";
+    readonly borderRadius2: "var(--border-radius-2)";
+    readonly borderRadius4: "var(--border-radius-4)";
+    readonly borderRadius6: "var(--border-radius-6)";
+    readonly borderRadius8: "var(--border-radius-8)";
+    readonly borderRadius12: "var(--border-radius-12)";
+    readonly borderRadius16: "var(--border-radius-16)";
+    readonly borderRadiusDefault: "var(--border-radius-default)";
+    readonly borderRadiusRound: "var(--border-radius-round)";
+    readonly borderWidthDefault: "var(--border-width-default)";
+};
+export declare const shadowTokens: {
+    readonly shadow1: "var(--shadow-1)";
+    readonly shadow2: "var(--shadow-2)";
+    readonly shadow3: "var(--shadow-3)";
+    readonly shadowDefault: "var(--shadow-default)";
+};
+export declare const typographyTokens: {
+    readonly fontFamilyDefault: "var(--font-family-default)";
+    readonly fontFamilyCode: "var(--font-family-code)";
+    readonly fontSizeSmall: "var(--font-size-small)";
+    readonly fontSizeDefault: "var(--font-size-default)";
+    readonly fontSizeSubheadDefault: "var(--font-size-subhead-default)";
+    readonly fontSizeSubheadBig: "var(--font-size-subhead-big)";
+    readonly fontSizeHeaderDefault: "var(--font-size-header-default)";
+    readonly fontSizeHeaderBig: "var(--font-size-header-big)";
+    readonly lineHeightSmall: "var(--line-height-small)";
+    readonly lineHeightDefault: "var(--line-height-default)";
+    readonly lineHeightSubheadDefault: "var(--line-height-subhead-default)";
+    readonly lineHeightSubheadBig: "var(--line-height-subhead-big)";
+    readonly lineHeightHeaderDefault: "var(--line-height-header-default)";
+    readonly lineHeightHeaderBig: "var(--line-height-header-big)";
+    readonly lineHeightSingle: "var(--line-height-single)";
+    readonly lineHeightInput: "var(--line-height-input)";
+    readonly fontWeightRegular: "var(--font-weight-regular)";
+    readonly fontWeightMedium: "var(--font-weight-medium)";
+    readonly fontWeightBold: "var(--font-weight-bold)";
+};
+export declare const transitionTokens: {
+    readonly transitionDurationSnappy: "var(--transition-duration-snappy)";
+    readonly transitionTimingFunctionSnappy: "var(--transition-timing-function-snappy)";
+    readonly transitionDurationChill: "var(--transition-duration-chill)";
+    readonly transitionTimingFunctionChill: "var(--transition-timing-function-chill)";
+};
+export declare const tokens: {
+    readonly transitionDurationSnappy: "var(--transition-duration-snappy)";
+    readonly transitionTimingFunctionSnappy: "var(--transition-timing-function-snappy)";
+    readonly transitionDurationChill: "var(--transition-duration-chill)";
+    readonly transitionTimingFunctionChill: "var(--transition-timing-function-chill)";
+    readonly fontFamilyDefault: "var(--font-family-default)";
+    readonly fontFamilyCode: "var(--font-family-code)";
+    readonly fontSizeSmall: "var(--font-size-small)";
+    readonly fontSizeDefault: "var(--font-size-default)";
+    readonly fontSizeSubheadDefault: "var(--font-size-subhead-default)";
+    readonly fontSizeSubheadBig: "var(--font-size-subhead-big)";
+    readonly fontSizeHeaderDefault: "var(--font-size-header-default)";
+    readonly fontSizeHeaderBig: "var(--font-size-header-big)";
+    readonly lineHeightSmall: "var(--line-height-small)";
+    readonly lineHeightDefault: "var(--line-height-default)";
+    readonly lineHeightSubheadDefault: "var(--line-height-subhead-default)";
+    readonly lineHeightSubheadBig: "var(--line-height-subhead-big)";
+    readonly lineHeightHeaderDefault: "var(--line-height-header-default)";
+    readonly lineHeightHeaderBig: "var(--line-height-header-big)";
+    readonly lineHeightSingle: "var(--line-height-single)";
+    readonly lineHeightInput: "var(--line-height-input)";
+    readonly fontWeightRegular: "var(--font-weight-regular)";
+    readonly fontWeightMedium: "var(--font-weight-medium)";
+    readonly fontWeightBold: "var(--font-weight-bold)";
+    readonly shadow1: "var(--shadow-1)";
+    readonly shadow2: "var(--shadow-2)";
+    readonly shadow3: "var(--shadow-3)";
+    readonly shadowDefault: "var(--shadow-default)";
+    readonly space1: "var(--space-1)";
+    readonly space2: "var(--space-2)";
+    readonly space4: "var(--space-4)";
+    readonly space6: "var(--space-6)";
+    readonly space8: "var(--space-8)";
+    readonly space12: "var(--space-12)";
+    readonly space16: "var(--space-16)";
+    readonly space20: "var(--space-20)";
+    readonly space24: "var(--space-24)";
+    readonly space28: "var(--space-28)";
+    readonly space32: "var(--space-32)";
+    readonly space40: "var(--space-40)";
+    readonly space48: "var(--space-48)";
+    readonly space56: "var(--space-56)";
+    readonly space64: "var(--space-64)";
+    readonly space80: "var(--space-80)";
+    readonly space96: "var(--space-96)";
+    readonly space128: "var(--space-128)";
+    readonly space256: "var(--space-256)";
+    readonly spaceDefault: "var(--space-default)";
+    readonly borderRadius1: "var(--border-radius-1)";
+    readonly borderRadius2: "var(--border-radius-2)";
+    readonly borderRadius4: "var(--border-radius-4)";
+    readonly borderRadius6: "var(--border-radius-6)";
+    readonly borderRadius8: "var(--border-radius-8)";
+    readonly borderRadius12: "var(--border-radius-12)";
+    readonly borderRadius16: "var(--border-radius-16)";
+    readonly borderRadiusDefault: "var(--border-radius-default)";
+    readonly borderRadiusRound: "var(--border-radius-round)";
+    readonly borderWidthDefault: "var(--border-width-default)";
+    readonly surfaceBackground: "var(--surface-background)";
+    readonly interactiveBackground: "var(--surface-interactive-background)";
+    readonly interactiveBackgroundActive: "var(--surface-interactive-background--active)";
+    readonly interactiveBorder: "var(--surface-interactive-border)";
+    readonly interactiveBorderHover: "var(--surface-interactive-border--hover)";
+    readonly colorwayDimmest: "var(--view-colorway-dimmest)";
+    readonly colorwayDimmer: "var(--view-colorway-dimmer)";
+    readonly colorwayDefault: "var(--view-colorway-default)";
+    readonly colorwayStronger: "var(--view-colorway-stronger)";
+    readonly colorwayStrongest: "var(--view-colorway-strongest)";
+    readonly backgroundRoot: "var(--background-root)";
+    readonly backgroundDefault: "var(--background-default)";
+    readonly backgroundHigher: "var(--background-higher)";
+    readonly backgroundHighest: "var(--background-highest)";
+    readonly backgroundOverlay: "var(--background-overlay)";
+    readonly foregroundDefault: "var(--foreground-default)";
+    readonly foregroundDimmer: "var(--foreground-dimmer)";
+    readonly foregroundDimmest: "var(--foreground-dimmest)";
+    readonly outlineDimmest: "var(--outline-dimmest)";
+    readonly outlineDimmer: "var(--outline-dimmer)";
+    readonly outlineDefault: "var(--outline-default)";
+    readonly outlineStronger: "var(--outline-stronger)";
+    readonly outlineStrongest: "var(--outline-strongest)";
+    readonly primaryDimmest: "var(--primary-dimmest)";
+    readonly primaryDimmer: "var(--primary-dimmer)";
+    readonly primaryDefault: "var(--primary-default)";
+    readonly primaryStronger: "var(--primary-stronger)";
+    readonly primaryStrongest: "var(--primary-strongest)";
+    readonly positiveDimmest: "var(--positive-dimmest)";
+    readonly positiveDimmer: "var(--positive-dimmer)";
+    readonly positiveDefault: "var(--positive-default)";
+    readonly positiveStronger: "var(--positive-stronger)";
+    readonly positiveStrongest: "var(--positive-strongest)";
+    readonly negativeDimmest: "var(--negative-dimmest)";
+    readonly negativeDimmer: "var(--negative-dimmer)";
+    readonly negativeDefault: "var(--negative-default)";
+    readonly negativeStronger: "var(--negative-stronger)";
+    readonly negativeStrongest: "var(--negative-strongest)";
+    readonly redDimmest: "var(--red-dimmest)";
+    readonly redDimmer: "var(--red-dimmer)";
+    readonly redDefault: "var(--red-default)";
+    readonly redStronger: "var(--red-stronger)";
+    readonly redStrongest: "var(--red-strongest)";
+    readonly orangeDimmest: "var(--orange-dimmest)";
+    readonly orangeDimmer: "var(--orange-dimmer)";
+    readonly orangeDefault: "var(--orange-default)";
+    readonly orangeStronger: "var(--orange-stronger)";
+    readonly orangeStrongest: "var(--orange-strongest)";
+    readonly yellowDimmest: "var(--yellow-dimmest)";
+    readonly yellowDimmer: "var(--yellow-dimmer)";
+    readonly yellowDefault: "var(--yellow-default)";
+    readonly yellowStronger: "var(--yellow-stronger)";
+    readonly yellowStrongest: "var(--yellow-strongest)";
+    readonly limeDimmest: "var(--lime-dimmest)";
+    readonly limeDimmer: "var(--lime-dimmer)";
+    readonly limeDefault: "var(--lime-default)";
+    readonly limeStronger: "var(--lime-stronger)";
+    readonly limeStrongest: "var(--lime-strongest)";
+    readonly greenDimmest: "var(--green-dimmest)";
+    readonly greenDimmer: "var(--green-dimmer)";
+    readonly greenDefault: "var(--green-default)";
+    readonly greenStronger: "var(--green-stronger)";
+    readonly greenStrongest: "var(--green-strongest)";
+    readonly tealDimmest: "var(--teal-dimmest)";
+    readonly tealDimmer: "var(--teal-dimmer)";
+    readonly tealDefault: "var(--teal-default)";
+    readonly tealStronger: "var(--teal-stronger)";
+    readonly tealStrongest: "var(--teal-strongest)";
+    readonly blueDimmest: "var(--blue-dimmest)";
+    readonly blueDimmer: "var(--blue-dimmer)";
+    readonly blueDefault: "var(--blue-default)";
+    readonly blueStronger: "var(--blue-stronger)";
+    readonly blueStrongest: "var(--blue-strongest)";
+    readonly blurpleDimmest: "var(--blurple-dimmest)";
+    readonly blurpleDimmer: "var(--blurple-dimmer)";
+    readonly blurpleDefault: "var(--blurple-default)";
+    readonly blurpleStronger: "var(--blurple-stronger)";
+    readonly blurpleStrongest: "var(--blurple-strongest)";
+    readonly purpleDimmest: "var(--purple-dimmest)";
+    readonly purpleDimmer: "var(--purple-dimmer)";
+    readonly purpleDefault: "var(--purple-default)";
+    readonly purpleStronger: "var(--purple-stronger)";
+    readonly purpleStrongest: "var(--purple-strongest)";
+    readonly magentaDimmest: "var(--magenta-dimmest)";
+    readonly magentaDimmer: "var(--magenta-dimmer)";
+    readonly magentaDefault: "var(--magenta-default)";
+    readonly magentaStronger: "var(--magenta-stronger)";
+    readonly magentaStrongest: "var(--magenta-strongest)";
+    readonly pinkDimmest: "var(--pink-dimmest)";
+    readonly pinkDimmer: "var(--pink-dimmer)";
+    readonly pinkDefault: "var(--pink-default)";
+    readonly pinkStronger: "var(--pink-stronger)";
+    readonly pinkStrongest: "var(--pink-strongest)";
+    readonly greyDimmest: "var(--grey-dimmest)";
+    readonly greyDimmer: "var(--grey-dimmer)";
+    readonly greyDefault: "var(--grey-default)";
+    readonly greyStronger: "var(--grey-stronger)";
+    readonly greyStrongest: "var(--grey-strongest)";
+    readonly brownDimmest: "var(--brown-dimmest)";
+    readonly brownDimmer: "var(--brown-dimmer)";
+    readonly brownDefault: "var(--brown-default)";
+    readonly brownStronger: "var(--brown-stronger)";
+    readonly brownStrongest: "var(--brown-strongest)";
+    readonly black: "var(--black)";
+    readonly white: "var(--white)";
+};
+declare const invertedTokens: InvertRecord<{
+    space1: "var(--space-1)";
+    space2: "var(--space-2)";
+    space4: "var(--space-4)";
+    space6: "var(--space-6)";
+    space8: "var(--space-8)";
+    space12: "var(--space-12)";
+    space16: "var(--space-16)";
+    space20: "var(--space-20)";
+    space24: "var(--space-24)";
+    space28: "var(--space-28)";
+    space32: "var(--space-32)";
+    space40: "var(--space-40)";
+    space48: "var(--space-48)";
+    space56: "var(--space-56)";
+    space64: "var(--space-64)";
+    space80: "var(--space-80)";
+    space96: "var(--space-96)";
+    space128: "var(--space-128)";
+    space256: "var(--space-256)";
+    spaceDefault: "var(--space-default)";
+    borderRadius1: "var(--border-radius-1)";
+    borderRadius2: "var(--border-radius-2)";
+    borderRadius4: "var(--border-radius-4)";
+    borderRadius6: "var(--border-radius-6)";
+    borderRadius8: "var(--border-radius-8)";
+    borderRadius12: "var(--border-radius-12)";
+    borderRadius16: "var(--border-radius-16)";
+    borderRadiusDefault: "var(--border-radius-default)";
+    borderRadiusRound: "var(--border-radius-round)";
+    borderWidthDefault: "var(--border-width-default)";
+}>;
+/**
+ * Get the actual value from a CSS variable \
+ * You really can't get color values reliably without extracting them from the DOM because of theming
+ * @param token (CSS variable)
+ * @returns Raw value, or null if one is not found
+ *
+ * @example
+ * getTokenValue(tokens.space80)
+ * getTokenValue("var(--space-80)")
+ */
+export declare function getTokenValue(token: keyof typeof invertedTokens): 2 | 1 | 4 | 6 | 8 | 12 | 16 | 1028 | 20 | 24 | 28 | 32 | 40 | 48 | 56 | 64 | 80 | 96 | 128 | 256;
+export {};

package/{src/styles/tokens.ts → dist/styles/tokens.js}

@@ -1,21 +1,4 @@
-import type { InvertRecord, ValueOf } from "~/-types";
-
-/**
- * Size variants for widths, buttons, icon sizes, you name it!
- * Use `Extract` if you don't want to support all of them but ensure we reuse
- * correct values.
- * @example
- * // only support a subset of size variants
- * Extract<Size, "sm" | "md" | "lg">
- */
-export type Size = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-
-export type SpaceToken = ValueOf<typeof spaceTokens>;
-export type ColorToken = ValueOf<typeof colorTokens>;
-export type InteractiveToken = ValueOf<typeof interactiveTokens>;
-export type Token = ValueOf<typeof tokens>;
-
-export const colorTokens = {
+const n = {
   backgroundRoot: "var(--background-root)",
   backgroundDefault: "var(--background-default)",
   backgroundHigher: "var(--background-higher)",
@@ -110,26 +93,20 @@ export const colorTokens = {
   brownStronger: "var(--brown-stronger)",
   brownStrongest: "var(--brown-strongest)",
   black: "var(--black)",
-  white: "var(--white)",
-} as const;
-
-export const interactiveTokens = {
+  white: "var(--white)"
+}, s = {
   surfaceBackground: "var(--surface-background)",
   interactiveBackground: "var(--surface-interactive-background)",
   interactiveBackgroundActive: "var(--surface-interactive-background--active)",
   interactiveBorder: "var(--surface-interactive-border)",
-  interactiveBorderHover: "var(--surface-interactive-border--hover)",
-} as const;
-
-export const colorwayTokens = {
+  interactiveBorderHover: "var(--surface-interactive-border--hover)"
+}, l = {
   colorwayDimmest: "var(--view-colorway-dimmest)",
   colorwayDimmer: "var(--view-colorway-dimmer)",
   colorwayDefault: "var(--view-colorway-default)",
   colorwayStronger: "var(--view-colorway-stronger)",
-  colorwayStrongest: "var(--view-colorway-strongest)",
-} as const;
-
-export const spaceTokens = {
+  colorwayStrongest: "var(--view-colorway-strongest)"
+}, a = {
   space1: "var(--space-1)",
   space2: "var(--space-2)",
   space4: "var(--space-4)",
@@ -149,10 +126,8 @@ export const spaceTokens = {
   space96: "var(--space-96)",
   space128: "var(--space-128)",
   space256: "var(--space-256)",
-  spaceDefault: "var(--space-default)",
-} as const;
-
-export const borderTokens = {
+  spaceDefault: "var(--space-default)"
+}, t = {
   borderRadius1: "var(--border-radius-1)",
   borderRadius2: "var(--border-radius-2)",
   borderRadius4: "var(--border-radius-4)",
@@ -162,27 +137,21 @@ export const borderTokens = {
   borderRadius16: "var(--border-radius-16)",
   borderRadiusDefault: "var(--border-radius-default)",
   borderRadiusRound: "var(--border-radius-round)",
-  borderWidthDefault: "var(--border-width-default)",
-} as const;
-
-export const shadowTokens = {
+  borderWidthDefault: "var(--border-width-default)"
+}, d = {
   shadow1: "var(--shadow-1)",
   shadow2: "var(--shadow-2)",
   shadow3: "var(--shadow-3)",
-  shadowDefault: "var(--shadow-default)",
-} as const;
-
-export const typographyTokens = {
+  shadowDefault: "var(--shadow-default)"
+}, v = {
   fontFamilyDefault: "var(--font-family-default)",
   fontFamilyCode: "var(--font-family-code)",
-
   fontSizeSmall: "var(--font-size-small)",
   fontSizeDefault: "var(--font-size-default)",
   fontSizeSubheadDefault: "var(--font-size-subhead-default)",
   fontSizeSubheadBig: "var(--font-size-subhead-big)",
   fontSizeHeaderDefault: "var(--font-size-header-default)",
   fontSizeHeaderBig: "var(--font-size-header-big)",
-
   lineHeightSmall: "var(--line-height-small)",
   lineHeightDefault: "var(--line-height-default)",
   lineHeightSubheadDefault: "var(--line-height-subhead-default)",
@@ -191,46 +160,37 @@ export const typographyTokens = {
   lineHeightHeaderBig: "var(--line-height-header-big)",
   lineHeightSingle: "var(--line-height-single)",
   lineHeightInput: "var(--line-height-input)",
-
   fontWeightRegular: "var(--font-weight-regular)",
   fontWeightMedium: "var(--font-weight-medium)",
-  fontWeightBold: "var(--font-weight-bold)",
-} as const;
-
-export const transitionTokens = {
+  fontWeightBold: "var(--font-weight-bold)"
+}, m = {
   transitionDurationSnappy: "var(--transition-duration-snappy)",
   transitionTimingFunctionSnappy: "var(--transition-timing-function-snappy)",
   transitionDurationChill: "var(--transition-duration-chill)",
-  transitionTimingFunctionChill: "var(--transition-timing-function-chill)",
-} as const;
-
-export const tokens = {
-  ...colorTokens,
-  ...colorwayTokens,
-  ...interactiveTokens,
-  ...borderTokens,
-  ...spaceTokens,
-  ...shadowTokens,
-  ...typographyTokens,
-  ...transitionTokens,
-} as const;
-
-function invertRecord<T extends Record<string, string>>(record: T) {
-  return Object.entries(record).reduce(
-    (acc, [key, value]) => ({
-      ...acc,
-      [value]: key,
+  transitionTimingFunctionChill: "var(--transition-timing-function-chill)"
+}, c = {
+  ...n,
+  ...l,
+  ...s,
+  ...t,
+  ...a,
+  ...d,
+  ...v,
+  ...m
+};
+function u(e) {
+  return Object.entries(e).reduce(
+    (r, [i, o]) => ({
+      ...r,
+      [o]: i
     }),
-    {},
-  ) as InvertRecord<T>;
+    {}
+  );
 }
-
-const invertedTokens = invertRecord({
-  ...borderTokens,
-  ...spaceTokens,
-});
-
-const rawTokenValues = {
+const g = u({
+  ...t,
+  ...a
+}), p = {
   borderRadius1: 1,
   borderRadius2: 2,
   borderRadius4: 4,
@@ -260,23 +220,21 @@ const rawTokenValues = {
   space96: 96,
   space128: 128,
   space256: 256,
-  spaceDefault: 8,
-} as const;
-
-/**
- * Get the actual value from a CSS variable \
- * You really can't get color values reliably without extracting them from the DOM because of theming
- * @param token (CSS variable)
- * @returns Raw value, or null if one is not found
- *
- * @example
- * getTokenValue(tokens.space80)
- * getTokenValue("var(--space-80)")
- */
-export function getTokenValue(token: keyof typeof invertedTokens) {
-  // TODO create JS values alongside css themes
-  // something like getTokenValue(token.primaryDefault, "light")
-  // or try dom extraction?
-  const tokenKey = invertedTokens[token];
-  return rawTokenValues[tokenKey];
+  spaceDefault: 8
+};
+function f(e) {
+  const r = g[e];
+  return p[r];
 }
+export {
+  t as borderTokens,
+  n as colorTokens,
+  l as colorwayTokens,
+  f as getTokenValue,
+  s as interactiveTokens,
+  d as shadowTokens,
+  a as spaceTokens,
+  c as tokens,
+  m as transitionTokens,
+  v as typographyTokens
+};

package/dist/toast.css

@@ -0,0 +1 @@
+._toast__viewport_km0zn_1{position:fixed;z-index:1;margin:0 auto;inset:auto var(--space-8) var(--space-8) auto;width:var(--space-256)}@media(min-width:512px){._toast__viewport_km0zn_1{right:var(--space-16);bottom:var(--space-16)}}._toast_km0zn_1{--toast-custom-gap: var(--space-12);--toast-custom-peek: var(--space-12);--toast-custom-scale: max(0, 1 - (var(--toast-index) * .1)) ;--toast-custom-shrink: calc(1 - var(--toast-custom-scale));--toast-custom-height: var(--toast-frontmost-height, var(--toast-height));--toast-custom-offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--toast-custom-gap) * -1) + var(--toast-swipe-movement-y) );display:flex;position:absolute;right:0;bottom:0;left:auto;flex-direction:row;align-items:center;gap:var(--space-8);transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-custom-peek)) - (var(--toast-custom-shrink) * var(--toast-custom-height)))) scale(var(--toast-custom-scale));transform-origin:bottom center;z-index:calc(1000 - var(--toast-index));transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s,height var(--transition-duration-snappy);cursor:default;box-sizing:border-box;margin:0 0 0 auto;border-width:1px;border-style:solid;border-radius:var(--border-radius-default);background-clip:padding-box;width:100%;height:var(--toast-custom-height);-webkit-user-select:none;-moz-user-select:none;user-select:none}._toast_km0zn_1[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--toast-custom-offset-y));height:var(--toast-height)}._toast_km0zn_1[data-starting-style],._toast_km0zn_1[data-ending-style]{transform:translateY(150%)}._toast_km0zn_1[data-limited],._toast_km0zn_1[data-ending-style]{opacity:0}._toast_km0zn_1[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 50%))}._toast_km0zn_1[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 50%)) translateY(var(--toast-custom-offset-y))}._toast_km0zn_1[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 50%)) translateY(var(--toast-custom-offset-y))}._toast_km0zn_1[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 50%))}._toast_km0zn_1:after{display:block;position:absolute;top:100%;left:0;width:100%;height:calc(var(--toast-custom-gap) + 1px);content:""}._toast_variant_neutral_km0zn_109{border-color:var(--surface-interactive-border);background:var(--surface-background);color:var(--foreground-default)}._toast_variant_colorway_km0zn_115{border-color:var(--view-colorway-dimmer);background:var(--view-colorway-dimmest);color:var(--view-colorway-strongest)}._toast__content_km0zn_121{flex-grow:1;flex-shrink:1;gap:var(--space-16);transition:opacity var(--transition-duration-snappy) var(--transition-timing-function-snappy);padding:var(--space-12);overflow:hidden}._toast__content_km0zn_121[data-behind]{opacity:0}._toast__content_km0zn_121[data-expanded]{opacity:1}._toast__header_km0zn_139{flex:1 1 auto;gap:var(--space-4)}._toast__row_km0zn_144{flex:1 1 auto;flex-direction:row;justify-content:space-between;gap:var(--space-4)}._toast__title_km0zn_151,._toast__description_km0zn_155{flex:1 1 auto}._toast__close_km0zn_159{position:absolute;top:0;right:0}

package/dist/tooltip-arrow-C1qXdi5T.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as r } from "./clsx-OuTLNxxd.js";
+import './tooltip-arrow.css';const i = "_tooltip_nun1r_1", _ = "_tooltip__arrow_nun1r_10", n = {
+  tooltip: i,
+  tooltip__arrow: _,
+  "tooltip__arrow-icon": "_tooltip__arrow-icon_nun1r_35"
+};
+function s(t) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      width: "10",
+      height: "5",
+      viewBox: "0 0 30 10",
+      preserveAspectRatio: "none",
+      className: r(n["tooltip__arrow-icon"], t.className),
+      children: /* @__PURE__ */ o("polygon", { points: "0,0 30,0 15,10" })
+    }
+  );
+}
+export {
+  s as T,
+  n as t
+};

package/dist/tooltip-arrow.css

@@ -0,0 +1 @@
+._tooltip_nun1r_1{z-index:50;box-shadow:var(--shadow-1);border:1px solid var(--outline-dimmer);border-radius:var(--border-radius-default);background-color:var(--surface-background);padding:var(--space-4) var(--space-8)}._tooltip__arrow_nun1r_10[data-instant]{transition:none}._tooltip__arrow_nun1r_10[data-side=top]{bottom:-4px}._tooltip__arrow_nun1r_10[data-side=bottom]{top:-4px;rotate:180deg}._tooltip__arrow_nun1r_10[data-side=left]{right:-7px;rotate:-90deg}._tooltip__arrow_nun1r_10[data-side=right]{left:-7px;rotate:90deg}._tooltip__arrow-icon_nun1r_35{display:block;position:relative;fill:var(--surface-background)!important;stroke:var(--outline-dimmer);stroke-dasharray:0 30 22 0 22;stroke-linejoin:round;stroke-width:2;border-top:1px solid var(--surface-background)}

package/dist/transitions.css

@@ -0,0 +1 @@
+._transition_opacity_18csa_1{transition:opacity var(--transition-duration-snappy) var(--transition-timing-function-snappy)}._transition_opacity_18csa_1[data-starting-style],._transition_opacity_18csa_1[data-ending-style]{opacity:0}._transition_fade-out_18csa_11[data-ending-style]{opacity:0;transition:opacity var(--transition-duration-snappy) var(--transition-timing-function-snappy)}._transition_scale_18csa_19{transition:opacity var(--transition-duration-snappy) var(--transition-timing-function-snappy),transform var(--transition-duration-snappy) var(--transition-timing-function-snappy)}._transition_scale_18csa_19[data-starting-style],._transition_scale_18csa_19[data-ending-style]{transform:scale(.96);opacity:0}