@baseline-ui/tokens 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -1217,7 +1217,7 @@ declare const themeVars: {
     };
 };
 
-declare const sprinkles: ((props: {
+declare const createLayerSprinkles: (layer: string) => ((props: {
     paddingTop?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
         mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
         tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
@@ -1312,8 +1312,8 @@ declare const sprinkles: ((props: {
 } & {
     color?: "text.primary" | "text.secondary" | "text.helper" | "text.placeholder" | "text.disabled" | "text.inverse" | "icon.primary" | "icon.secondary" | "icon.disabled" | "icon.inverse" | "icon.interactive" | "interactive.primary" | "interactive.hovered" | "interactive.active" | "interactive.visited" | "interactive.disabled" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.primary" | "focused.inset" | undefined;
     backgroundColor?: "background.primary.subtle" | "background.primary.medium" | "background.primary.strong" | "background.secondary.subtle" | "background.secondary.medium" | "background.secondary.strong" | "background.inverse.subtle" | "background.inverse.medium" | "background.inverse.strong" | "background.overlay.subtle" | "background.overlay.medium" | "background.positive.subtle" | "background.positive.medium" | "background.positive.strong" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.primary" | "focused.inset" | undefined;
-    borderColor?: "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.primary" | "focused.inset" | "border.subtle" | "border.medium" | "border.strong" | "border.inverse" | "border.interactive" | "border.disabled" | undefined;
-    outlineColor?: "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.primary" | "focused.inset" | "border.subtle" | "border.medium" | "border.strong" | "border.inverse" | "border.interactive" | "border.disabled" | undefined;
+    borderColor?: "transparent" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.primary" | "focused.inset" | "border.subtle" | "border.medium" | "border.strong" | "border.inverse" | "border.interactive" | "border.disabled" | undefined;
+    outlineColor?: "transparent" | "support.error.subtler" | "support.error.subtle" | "support.error.medium" | "support.error.strong" | "support.success.subtler" | "support.success.subtle" | "support.success.medium" | "support.success.strong" | "support.warning.subtler" | "support.warning.subtle" | "support.warning.medium" | "support.warning.strong" | "support.info.subtler" | "support.info.subtle" | "support.info.medium" | "support.info.strong" | "focused.primary" | "focused.inset" | "border.subtle" | "border.medium" | "border.strong" | "border.inverse" | "border.interactive" | "border.disabled" | undefined;
 } & {
     position?: ("fixed" | "absolute" | "relative" | {
         mobile?: "fixed" | "absolute" | "relative" | undefined;
@@ -1345,24 +1345,53 @@ declare const sprinkles: ((props: {
         tablet?: "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
         desktop?: "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | null>;
+    placeItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
+        mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+        tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+        desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "stretch" | "center" | "flex-end" | "flex-start" | null>;
 } & {
     transition?: "transition.medium" | undefined;
     transitionProperty?: "opacity" | "transform" | "background-color" | undefined;
 } & {
-    flexWrap?: "nowrap" | "wrap" | undefined;
-    top?: number | undefined;
-    bottom?: number | undefined;
-    left?: number | undefined;
-    right?: number | undefined;
-    flexShrink?: number | undefined;
-    flexGrow?: number | undefined;
-    width?: "full" | undefined;
-    height?: "full" | undefined;
-    cursor?: "pointer" | undefined;
-    inset?: number | undefined;
+    readonly flexWrap?: "nowrap" | "wrap" | undefined;
+    readonly top?: 0 | undefined;
+    readonly bottom?: 0 | undefined;
+    readonly left?: 0 | undefined;
+    readonly right?: 0 | undefined;
+    readonly flexShrink?: 0 | undefined;
+    readonly flexGrow?: 0 | 1 | undefined;
+    readonly width?: "full" | undefined;
+    readonly height?: "full" | undefined;
+    readonly cursor?: "pointer" | undefined;
+    inset?: 0 | undefined;
+} & {
+    outline?: "none" | undefined;
+    outlineStyle?: "solid" | undefined;
+    outlineWidth?: number | undefined;
+    outlineOffset?: number | undefined;
+    border?: "none" | undefined;
+    borderStyle?: "dashed" | "solid" | undefined;
+    borderWidth?: number | undefined;
 }) => string) & {
-    properties: Set<"opacity" | "color" | "inset" | "typography" | "backgroundColor" | "borderColor" | "outlineColor" | "alignItems" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "bottom" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "transitionProperty" | "width" | "borderRadius" | "flex" | "gap" | "margin" | "padding" | "transition" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius">;
+    properties: Set<"opacity" | "color" | "inset" | "border" | "typography" | "backgroundColor" | "borderColor" | "outlineColor" | "alignItems" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "bottom" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "transitionProperty" | "width" | "borderRadius" | "borderStyle" | "borderWidth" | "flex" | "gap" | "margin" | "outline" | "padding" | "placeItems" | "transition" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius">;
 };
+type Sprinkles = ReturnType<typeof createLayerSprinkles>;
+/**
+ * @deprecated Use `Unstable_Sprinkles` instead. This will be removed in the
+ *   next major version. `Unstable_Sprinkles` takes care of all the layering for
+ *   you so that you do not run into issues with specificity.
+ */
+declare const sprinkles: Sprinkles;
+declare const Unstable_Sprinkles: Unstable_SprinklesInterface;
+interface Unstable_SprinklesInterface {
+    components: {
+        base: Sprinkles;
+        variants: Sprinkles;
+        compoundVariants: Sprinkles;
+    };
+    overrides: Sprinkles;
+}
 
 declare const breakpoints: {
     mobile: number;
@@ -1519,4 +1548,13 @@ interface Elevation {
   medium: string;
 }
 
-export { Breakpoint, Theme, breakpoints, dark as darkTheme, light as lightTheme, responsiveStyle, sprinkles, themeContract, themeVars };
+declare const Layers: {
+    readonly RESET: string;
+    readonly COMPONENTS: string;
+    readonly COMPONENTS_BASE: string;
+    readonly COMPONENTS_VARIANTS: string;
+    readonly COMPONENTS_COMPOUND_VARIANTS: string;
+    readonly OVERRIDES: string;
+};
+
+export { type Breakpoint, Layers, type Sprinkles, type Theme, Unstable_Sprinkles, type Unstable_SprinklesInterface, breakpoints, dark as darkTheme, light as lightTheme, responsiveStyle, sprinkles, themeContract, themeVars };