@tokenami/config 0.0.15 → 0.0.16

package/dist/index.d.mts

@@ -0,0 +1,239 @@
+import * as v from 'valibot';
+
+declare const defaultConfig: {
+    readonly include: readonly never[];
+    readonly grid: string;
+    readonly responsive: {};
+    readonly theme: {};
+    readonly aliases: {};
+    readonly selectors: {
+        readonly active: string;
+        readonly after: string;
+        readonly before: string;
+        readonly disabled: string;
+        readonly even: string;
+        readonly 'first-child': string;
+        readonly focus: string;
+        readonly 'focus-visible': string;
+        readonly 'focus-within': string;
+        readonly hover: string;
+        readonly 'last-child': string;
+        readonly odd: string;
+        readonly placeholder: string;
+    };
+    readonly properties: {
+        readonly 'accent-color': readonly "color"[];
+        readonly animation: readonly "anim"[];
+        readonly 'animation-timing-function': readonly "ease"[];
+        readonly background: readonly ("color" | "surface")[];
+        readonly 'background-color': readonly "color"[];
+        readonly 'background-image': readonly "surface"[];
+        readonly 'background-position': readonly "grid"[];
+        readonly 'background-position-x': readonly "grid"[];
+        readonly 'background-position-y': readonly "grid"[];
+        readonly 'block-size': readonly ("grid" | "size")[];
+        readonly border: readonly "border"[];
+        readonly 'border-block': readonly "border"[];
+        readonly 'border-block-color': readonly "color"[];
+        readonly 'border-block-end': readonly "border"[];
+        readonly 'border-block-end-color': readonly "color"[];
+        readonly 'border-block-end-style': readonly "line-style"[];
+        readonly 'border-block-end-width': readonly "grid"[];
+        readonly 'border-block-start': readonly "border"[];
+        readonly 'border-block-start-color': readonly "color"[];
+        readonly 'border-block-start-style': readonly "line-style"[];
+        readonly 'border-block-start-width': readonly "grid"[];
+        readonly 'border-block-style': readonly "line-style"[];
+        readonly 'border-block-width': readonly "grid"[];
+        readonly 'border-bottom': readonly "border"[];
+        readonly 'border-bottom-color': readonly "color"[];
+        readonly 'border-bottom-left-radius': readonly "radii"[];
+        readonly 'border-bottom-right-radius': readonly "radii"[];
+        readonly 'border-bottom-style': readonly "line-style"[];
+        readonly 'border-bottom-width': readonly "grid"[];
+        readonly 'border-color': readonly "color"[];
+        readonly 'border-end-end-radius': readonly "radii"[];
+        readonly 'border-end-start-radius': readonly "radii"[];
+        readonly 'border-inline': readonly "border"[];
+        readonly 'border-inline-color': readonly "color"[];
+        readonly 'border-inline-end': readonly "border"[];
+        readonly 'border-inline-end-color': readonly "color"[];
+        readonly 'border-inline-end-style': readonly "line-style"[];
+        readonly 'border-inline-end-width': readonly "grid"[];
+        readonly 'border-inline-start': readonly "border"[];
+        readonly 'border-inline-start-color': readonly "color"[];
+        readonly 'border-inline-start-style': readonly "line-style"[];
+        readonly 'border-inline-start-width': readonly "grid"[];
+        readonly 'border-inline-style': readonly "line-style"[];
+        readonly 'border-inline-width': readonly "grid"[];
+        readonly 'border-left': readonly "border"[];
+        readonly 'border-left-color': readonly "color"[];
+        readonly 'border-left-style': readonly "line-style"[];
+        readonly 'border-left-width': readonly "grid"[];
+        readonly 'border-radius': readonly "radii"[];
+        readonly 'border-right': readonly "border"[];
+        readonly 'border-right-color': readonly "color"[];
+        readonly 'border-right-style': readonly "line-style"[];
+        readonly 'border-right-width': readonly "grid"[];
+        readonly 'border-start-end-radius': readonly "radii"[];
+        readonly 'border-start-start-radius': readonly "radii"[];
+        readonly 'border-style': readonly "line-style"[];
+        readonly 'border-top': readonly "border"[];
+        readonly 'border-top-color': readonly "color"[];
+        readonly 'border-top-left-radius': readonly "radii"[];
+        readonly 'border-top-right-radius': readonly "radii"[];
+        readonly 'border-top-style': readonly "line-style"[];
+        readonly 'border-top-width': readonly "grid"[];
+        readonly 'border-width': readonly "grid"[];
+        readonly bottom: readonly "grid"[];
+        readonly 'box-shadow': readonly "shadow"[];
+        readonly 'caret-color': readonly "color"[];
+        readonly color: readonly "color"[];
+        readonly 'column-gap': readonly "grid"[];
+        readonly 'column-rule-color': readonly "color"[];
+        readonly 'column-rule-width': readonly "grid"[];
+        readonly 'column-width': readonly ("grid" | "size")[];
+        readonly 'flex-basis': readonly ("grid" | "size")[];
+        readonly 'font-family': readonly "font"[];
+        readonly 'font-size': readonly "font-size"[];
+        readonly 'font-weight': readonly "weight"[];
+        readonly gap: readonly "grid"[];
+        readonly height: readonly ("grid" | "size")[];
+        readonly 'inline-size': readonly ("grid" | "size")[];
+        readonly inset: readonly "grid"[];
+        readonly 'inset-block': readonly "grid"[];
+        readonly 'inset-block-end': readonly "grid"[];
+        readonly 'inset-block-start': readonly "grid"[];
+        readonly 'inset-inline': readonly "grid"[];
+        readonly 'inset-inline-end': readonly "grid"[];
+        readonly 'inset-inline-start': readonly "grid"[];
+        readonly left: readonly "grid"[];
+        readonly 'letter-spacing': readonly "tracking"[];
+        readonly 'line-height': readonly "leading"[];
+        readonly margin: readonly "grid"[];
+        readonly 'margin-block': readonly "grid"[];
+        readonly 'margin-block-end': readonly "grid"[];
+        readonly 'margin-block-start': readonly "grid"[];
+        readonly 'margin-bottom': readonly "grid"[];
+        readonly 'margin-inline': readonly "grid"[];
+        readonly 'margin-inline-end': readonly "grid"[];
+        readonly 'margin-inline-start': readonly "grid"[];
+        readonly 'margin-left': readonly "grid"[];
+        readonly 'margin-right': readonly "grid"[];
+        readonly 'margin-top': readonly "grid"[];
+        readonly 'max-block-size': readonly ("grid" | "size")[];
+        readonly 'max-height': readonly ("grid" | "size")[];
+        readonly 'max-inline-size': readonly ("grid" | "size")[];
+        readonly 'max-width': readonly ("grid" | "size")[];
+        readonly 'min-block-size': readonly ("grid" | "size")[];
+        readonly 'min-height': readonly ("grid" | "size")[];
+        readonly 'min-inline-size': readonly ("grid" | "size")[];
+        readonly 'min-width': readonly ("grid" | "size")[];
+        readonly opacity: readonly "alpha"[];
+        readonly 'outline-color': readonly "color"[];
+        readonly padding: readonly "grid"[];
+        readonly 'padding-block': readonly "grid"[];
+        readonly 'padding-block-end': readonly "grid"[];
+        readonly 'padding-block-start': readonly "grid"[];
+        readonly 'padding-bottom': readonly "grid"[];
+        readonly 'padding-inline': readonly "grid"[];
+        readonly 'padding-inline-end': readonly "grid"[];
+        readonly 'padding-inline-start': readonly "grid"[];
+        readonly 'padding-left': readonly "grid"[];
+        readonly 'padding-right': readonly "grid"[];
+        readonly 'padding-top': readonly "grid"[];
+        readonly right: readonly "grid"[];
+        readonly 'row-gap': readonly "grid"[];
+        readonly 'scroll-margin': readonly "grid"[];
+        readonly 'scroll-margin-bottom': readonly "grid"[];
+        readonly 'scroll-margin-left': readonly "grid"[];
+        readonly 'scroll-margin-right': readonly "grid"[];
+        readonly 'scroll-margin-top': readonly "grid"[];
+        readonly 'scroll-padding': readonly "grid"[];
+        readonly 'scroll-padding-bottom': readonly "grid"[];
+        readonly 'scroll-padding-left': readonly "grid"[];
+        readonly 'scroll-padding-right': readonly "grid"[];
+        readonly 'scroll-padding-top': readonly "grid"[];
+        readonly 'text-decoration-color': readonly "color"[];
+        readonly 'text-shadow': readonly "shadow"[];
+        readonly top: readonly "grid"[];
+        readonly transition: readonly "transition"[];
+        readonly 'transition-timing-function': readonly "ease"[];
+        readonly width: readonly ("grid" | "size")[];
+        readonly 'z-index': readonly "z"[];
+    };
+};
+type DefaultConfig = typeof defaultConfig;
+
+declare const properties: readonly ["-webkit-line-clamp", "accent-color", "align-tracks", "all", "animation", "animation-composition", "animation-delay", "animation-direction", "animation-duration", "animation-fill-mode", "animation-iteration-count", "animation-name", "animation-play-state", "animation-timeline", "animation-timing-function", "appearance", "aspect-ratio", "backdrop-filter", "backface-visibility", "background", "background-attachment", "background-blend-mode", "background-clip", "background-color", "background-image", "background-origin", "background-position", "background-position-x", "background-position-y", "background-repeat", "background-size", "block-overflow", "block-size", "border", "border-style", "border-color", "border-width", "border-top", "border-top-color", "border-top-style", "border-top-width", "border-right", "border-right-color", "border-right-style", "border-right-width", "border-bottom", "border-bottom-color", "border-bottom-style", "border-bottom-width", "border-left", "border-left-color", "border-left-style", "border-left-width", "border-block", "border-block-width", "border-block-style", "border-block-color", "border-block-start", "border-block-end", "border-block-start-color", "border-block-start-style", "border-block-start-width", "border-block-end-color", "border-block-end-style", "border-block-end-width", "border-image", "border-image-outset", "border-image-repeat", "border-image-slice", "border-image-source", "border-image-width", "border-inline", "border-inline-color", "border-inline-style", "border-inline-width", "border-inline-start", "border-inline-end", "border-inline-start-color", "border-inline-start-style", "border-inline-start-width", "border-inline-end-color", "border-inline-end-style", "border-inline-end-width", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius", "border-start-end-radius", "border-start-start-radius", "border-end-end-radius", "border-end-start-radius", "border-collapse", "border-spacing", "box-decoration-break", "box-shadow", "box-sizing", "break-after", "break-before", "break-inside", "caption-side", "caret", "caret-color", "caret-shape", "clear", "clip", "clip-path", "color", "color-scheme", "column-fill", "column-span", "column-rule", "column-rule-color", "column-rule-style", "column-rule-width", "columns", "column-count", "column-width", "contain", "contain-intrinsic-block-size", "contain-intrinsic-height", "contain-intrinsic-inline-size", "contain-intrinsic-size", "contain-intrinsic-width", "container", "container-name", "container-type", "content", "content-visibility", "counter-increment", "counter-reset", "counter-set", "cursor", "direction", "display", "empty-cells", "filter", "flex", "flex-basis", "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap", "float", "font", "font-family", "font-feature-settings", "font-kerning", "font-language-override", "font-optical-sizing", "font-palette", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-synthesis", "font-variant", "font-variant-alternates", "font-variant-caps", "font-variant-east-asian", "font-variant-emoji", "font-variant-ligatures", "font-variant-numeric", "font-variant-position", "font-variation-settings", "font-weight", "forced-color-adjust", "gap", "row-gap", "column-gap", "grid", "grid-area", "grid-auto-rows", "grid-auto-columns", "grid-auto-flow", "grid-column", "grid-column-end", "grid-column-start", "grid-row", "grid-row-end", "grid-row-start", "grid-template", "grid-template-rows", "grid-template-columns", "grid-template-areas", "hanging-punctuation", "height", "hyphenate-character", "hyphenate-limit-chars", "hyphens", "image-orientation", "image-rendering", "image-resolution", "initial-letter", "inline-size", "input-security", "inset", "top", "right", "bottom", "left", "inset-block", "inset-block-end", "inset-block-start", "inset-inline", "inset-inline-end", "inset-inline-start", "isolation", "justify-tracks", "letter-spacing", "line-break", "line-clamp", "line-height", "line-height-step", "list-style", "list-style-image", "list-style-position", "list-style-type", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "margin-block", "margin-block-end", "margin-block-start", "margin-inline", "margin-inline-end", "margin-inline-start", "margin-trim", "mask", "mask-border", "mask-border-mode", "mask-border-outset", "mask-border-repeat", "mask-border-slice", "mask-border-source", "mask-border-width", "mask-clip", "mask-composite", "mask-image", "mask-mode", "mask-origin", "mask-position", "mask-repeat", "mask-size", "mask-type", "math-depth", "math-shift", "math-style", "max-block-size", "max-height", "max-inline-size", "max-lines", "max-width", "min-block-size", "min-height", "min-inline-size", "min-width", "mix-blend-mode", "object-fit", "object-position", "offset", "offset-anchor", "offset-distance", "offset-path", "offset-position", "offset-rotate", "opacity", "order", "orphans", "outline", "outline-color", "outline-offset", "outline-style", "outline-width", "overflow", "overflow-anchor", "overflow-block", "overflow-clip-margin", "overflow-inline", "overflow-wrap", "overflow-x", "overflow-y", "overscroll-behavior", "overscroll-behavior-block", "overscroll-behavior-inline", "overscroll-behavior-x", "overscroll-behavior-y", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "padding-block", "padding-block-end", "padding-block-start", "padding-inline", "padding-inline-end", "padding-inline-start", "page", "page-break-after", "page-break-before", "page-break-inside", "paint-order", "perspective", "perspective-origin", "place-content", "align-content", "justify-content", "place-items", "align-items", "justify-items", "place-self", "align-self", "justify-self", "pointer-events", "position", "print-color-adjust", "quotes", "resize", "rotate", "ruby-align", "ruby-merge", "ruby-position", "scale", "scroll-behavior", "scroll-margin", "scroll-margin-top", "scroll-margin-right", "scroll-margin-bottom", "scroll-margin-left", "scroll-margin-block", "scroll-margin-block-end", "scroll-margin-block-start", "scroll-margin-inline", "scroll-margin-inline-end", "scroll-margin-inline-start", "scroll-padding", "scroll-padding-top", "scroll-padding-right", "scroll-padding-bottom", "scroll-padding-left", "scroll-padding-block", "scroll-padding-block-end", "scroll-padding-block-start", "scroll-padding-inline", "scroll-padding-inline-end", "scroll-padding-inline-start", "scroll-snap-align", "scroll-snap-stop", "scroll-snap-type", "scroll-timeline", "scroll-timeline-axis", "scroll-timeline-name", "scrollbar-color", "scrollbar-gutter", "scrollbar-width", "shape-image-threshold", "shape-margin", "shape-outside", "tab-size", "table-layout", "text-align", "text-align-last", "text-combine-upright", "text-decoration", "text-decoration-color", "text-decoration-line", "text-decoration-style", "text-decoration-thickness", "text-decoration-skip-ink", "text-emphasis", "text-emphasis-color", "text-emphasis-position", "text-emphasis-style", "text-indent", "text-justify", "text-orientation", "text-overflow", "text-rendering", "text-shadow", "text-size-adjust", "text-transform", "text-underline-offset", "text-underline-position", "touch-action", "transform", "transform-box", "transform-origin", "transform-style", "transition", "transition-delay", "transition-duration", "transition-property", "transition-timing-function", "translate", "unicode-bidi", "user-select", "vertical-align", "view-transition-name", "visibility", "white-space", "widows", "width", "will-change", "word-break", "word-spacing", "word-wrap", "writing-mode", "z-index", "zoom"];
+type CSSProperty = (typeof properties)[number];
+
+declare function tokenProperty(name: string): TokenProperty;
+declare function variantProperty(variant: string, name: string): TokenProperty;
+declare function tokenValue<TK extends string, N extends string>(themeKey: TK, name: N): TokenValue<TK, N>;
+declare function arbitraryValue(value: string): ArbitraryValue;
+declare const gridValueSchema: v.NumberSchema<number>;
+type GridValue = v.Output<typeof gridValueSchema>;
+declare const GridValue: {
+    safeParse: (input: unknown) => v.SafeParseResult<v.NumberSchema<number>>;
+};
+type TokenProperty<P extends string = string> = `--${P}`;
+declare const TokenProperty: {
+    safeParse: (input: unknown) => v.SafeParseResult<v.StringSchema<`--${string}`>>;
+};
+type VariantProperty<P extends string = string, V extends string = string> = `--${V}_${P}`;
+declare const VariantProperty: {
+    safeParse: (input: unknown) => v.SafeParseResult<v.StringSchema<`--${string}_${string}`>>;
+};
+type TokenValue<TK extends string = string, V extends string = string> = `var(--${TK}_${V})`;
+declare const TokenValue: {
+    safeParse: (input: unknown) => v.SafeParseResult<v.StringSchema<`var(--${string}_${string})`>>;
+};
+type ArbitraryValue = `var(---,${string})`;
+declare const ArbitraryValue: v.StringSchema<string>;
+type ThemeKey = 'alpha' | 'border' | 'color' | 'ease' | 'font-size' | 'leading' | 'line-style' | 'radii' | 'size' | 'shadow' | 'tracking' | 'transition' | 'weight' | 'z' | (string & {});
+type ThemeValues = Record<string, string | number>;
+type Theme = Partial<Record<ThemeKey, ThemeValues>>;
+type Aliases = Record<string, readonly (CSSProperty | (string & {}))[]>;
+type PropertiesOptions = readonly ('grid' | ThemeKey)[];
+type DeepReadonly<T> = {
+    readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
+};
+type Exact<T, V extends T> = Exclude<keyof V, keyof T> extends never ? V : T;
+interface Config extends DeepReadonly<{
+    include: string[];
+    exclude?: string[];
+    grid?: string;
+    responsive?: {
+        [atRule: string]: string;
+    };
+    selectors?: {
+        [name: string]: string | string[];
+    };
+    keyframes?: {
+        [name: string]: {
+            [step: string]: {
+                [cssProperty: string]: string;
+            };
+        };
+    };
+    aliases?: Aliases;
+    theme: Theme;
+    properties?: Partial<Record<CSSProperty, PropertiesOptions>>;
+}> {
+}
+declare const createConfig: <T extends Config>(obj: Exact<Config, T>) => DeepReadonly<T>;
+declare function getTokenPropertyName(tokenProperty: TokenProperty): string;
+type Parts = {
+    name: string;
+    alias: string;
+    responsive?: string;
+    selector?: string;
+};
+declare function getTokenPropertyParts(tokenProperty: TokenProperty, config: Config): Parts | null;
+declare function getTokenValueParts(tokenValue: TokenValue): {
+    themeKey: string;
+    token: string;
+};
+
+export { type Aliases, ArbitraryValue, type CSSProperty, type Config, type DefaultConfig, GridValue, type Theme, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getTokenPropertyName, getTokenPropertyParts, getTokenValueParts, properties, tokenProperty, tokenValue, variantProperty };

package/dist/index.d.ts

@@ -181,6 +181,10 @@ type TokenProperty<P extends string = string> = `--${P}`;
 declare const TokenProperty: {
     safeParse: (input: unknown) => v.SafeParseResult<v.StringSchema<`--${string}`>>;
 };
+type VariantProperty<P extends string = string, V extends string = string> = `--${V}_${P}`;
+declare const VariantProperty: {
+    safeParse: (input: unknown) => v.SafeParseResult<v.StringSchema<`--${string}_${string}`>>;
+};
 type TokenValue<TK extends string = string, V extends string = string> = `var(--${TK}_${V})`;
 declare const TokenValue: {
     safeParse: (input: unknown) => v.SafeParseResult<v.StringSchema<`var(--${string}_${string})`>>;
@@ -220,9 +224,16 @@ interface Config extends DeepReadonly<{
 }
 declare const createConfig: <T extends Config>(obj: Exact<Config, T>) => DeepReadonly<T>;
 declare function getTokenPropertyName(tokenProperty: TokenProperty): string;
+type Parts = {
+    name: string;
+    alias: string;
+    responsive?: string;
+    selector?: string;
+};
+declare function getTokenPropertyParts(tokenProperty: TokenProperty, config: Config): Parts | null;
 declare function getTokenValueParts(tokenValue: TokenValue): {
     themeKey: string;
     token: string;
 };
 
-export { Aliases, ArbitraryValue, CSSProperty, Config, DefaultConfig, GridValue, Theme, TokenProperty, TokenValue, arbitraryValue, createConfig, defaultConfig, getTokenPropertyName, getTokenValueParts, properties, tokenProperty, tokenValue, variantProperty };
+export { type Aliases, ArbitraryValue, type CSSProperty, type Config, type DefaultConfig, GridValue, type Theme, TokenProperty, TokenValue, VariantProperty, arbitraryValue, createConfig, defaultConfig, getTokenPropertyName, getTokenPropertyParts, getTokenValueParts, properties, tokenProperty, tokenValue, variantProperty };

package/dist/index.js

@@ -34,10 +34,12 @@ __export(src_exports, {
   GridValue: () => GridValue,
   TokenProperty: () => TokenProperty,
   TokenValue: () => TokenValue,
+  VariantProperty: () => VariantProperty,
   arbitraryValue: () => arbitraryValue,
   createConfig: () => createConfig,
   defaultConfig: () => config_default_default,
   getTokenPropertyName: () => getTokenPropertyName,
+  getTokenPropertyParts: () => getTokenPropertyParts,
   getTokenValueParts: () => getTokenValueParts,
   properties: () => properties,
   tokenProperty: () => tokenProperty,
@@ -61,6 +63,7 @@ function arbitraryValue(value) {
   return `var(---,${value})`;
 }
 var tokenPropertyRegex = /(?<!var\()--((\w)([\w-]+)?)/;
+var variantPropertyRegex = /(?<!var\()--((\w)([\w-]+)_([\w-]+))/;
 var tokenValueRegex = /var\(--([\w-]+)_([\w-]+)\)/;
 var aritraryValueRegex = /var\(---,(.+)\)/;
 var gridValueSchema = v.number();
@@ -68,6 +71,13 @@ var GridValue = { safeParse: (input) => v.safeParse(gridValueSchema, input) };
 var tokenPropertyRegexSchema = v.regex(tokenPropertyRegex);
 var tokenPropertySchema = v.string([tokenPropertyRegexSchema]);
 var TokenProperty = { safeParse: (input) => v.safeParse(tokenPropertySchema, input) };
+var variantPropertyRegexSchema = v.regex(variantPropertyRegex);
+var variantPropertySchema = v.string([
+  variantPropertyRegexSchema
+]);
+var VariantProperty = {
+  safeParse: (input) => v.safeParse(variantPropertySchema, input)
+};
 var tokenValueRegexSchema = v.regex(tokenValueRegex);
 var tokenValueSchema = v.string([tokenValueRegexSchema]);
 var TokenValue = { safeParse: (input) => v.safeParse(tokenValueSchema, input) };
@@ -78,6 +88,26 @@ var createConfig = (obj) => {
 function getTokenPropertyName(tokenProperty2) {
   return tokenProperty2.replace(tokenPropertyRegex, "$1");
 }
+function getTokenPropertyParts(tokenProperty2, config) {
+  const name = getTokenPropertyName(tokenProperty2);
+  const [alias, ...variants] = name.split("_").reverse();
+  const responsiveVariants = variants.filter((variant) => {
+    var _a;
+    return (_a = config.responsive) == null ? void 0 : _a[variant];
+  });
+  const selectorVariants = variants.filter((variant) => {
+    var _a;
+    return (_a = config.selectors) == null ? void 0 : _a[variant];
+  });
+  const validVariants = responsiveVariants.concat(selectorVariants);
+  const isValidResponsive = responsiveVariants.length <= 1;
+  const isValidSelector = selectorVariants.length <= 1;
+  const isValidVariants = variants.length === validVariants.length;
+  const isValid = isValidResponsive && isValidSelector && isValidVariants;
+  const [responsive] = responsiveVariants;
+  const [selector] = selectorVariants;
+  return isValid ? { name, alias, responsive, selector } : null;
+}
 function getTokenValueParts(tokenValue2) {
   const [, key, token] = tokenValue2.split(tokenValueRegex);
   return { themeKey: key, token };
@@ -671,10 +701,12 @@ var properties = [
   GridValue,
   TokenProperty,
   TokenValue,
+  VariantProperty,
   arbitraryValue,
   createConfig,
   defaultConfig,
   getTokenPropertyName,
+  getTokenPropertyParts,
   getTokenValueParts,
   properties,
   tokenProperty,

package/dist/index.mjs

@@ -13,6 +13,7 @@ function arbitraryValue(value) {
   return `var(---,${value})`;
 }
 var tokenPropertyRegex = /(?<!var\()--((\w)([\w-]+)?)/;
+var variantPropertyRegex = /(?<!var\()--((\w)([\w-]+)_([\w-]+))/;
 var tokenValueRegex = /var\(--([\w-]+)_([\w-]+)\)/;
 var aritraryValueRegex = /var\(---,(.+)\)/;
 var gridValueSchema = v.number();
@@ -20,6 +21,13 @@ var GridValue = { safeParse: (input) => v.safeParse(gridValueSchema, input) };
 var tokenPropertyRegexSchema = v.regex(tokenPropertyRegex);
 var tokenPropertySchema = v.string([tokenPropertyRegexSchema]);
 var TokenProperty = { safeParse: (input) => v.safeParse(tokenPropertySchema, input) };
+var variantPropertyRegexSchema = v.regex(variantPropertyRegex);
+var variantPropertySchema = v.string([
+  variantPropertyRegexSchema
+]);
+var VariantProperty = {
+  safeParse: (input) => v.safeParse(variantPropertySchema, input)
+};
 var tokenValueRegexSchema = v.regex(tokenValueRegex);
 var tokenValueSchema = v.string([tokenValueRegexSchema]);
 var TokenValue = { safeParse: (input) => v.safeParse(tokenValueSchema, input) };
@@ -30,6 +38,26 @@ var createConfig = (obj) => {
 function getTokenPropertyName(tokenProperty2) {
   return tokenProperty2.replace(tokenPropertyRegex, "$1");
 }
+function getTokenPropertyParts(tokenProperty2, config) {
+  const name = getTokenPropertyName(tokenProperty2);
+  const [alias, ...variants] = name.split("_").reverse();
+  const responsiveVariants = variants.filter((variant) => {
+    var _a;
+    return (_a = config.responsive) == null ? void 0 : _a[variant];
+  });
+  const selectorVariants = variants.filter((variant) => {
+    var _a;
+    return (_a = config.selectors) == null ? void 0 : _a[variant];
+  });
+  const validVariants = responsiveVariants.concat(selectorVariants);
+  const isValidResponsive = responsiveVariants.length <= 1;
+  const isValidSelector = selectorVariants.length <= 1;
+  const isValidVariants = variants.length === validVariants.length;
+  const isValid = isValidResponsive && isValidSelector && isValidVariants;
+  const [responsive] = responsiveVariants;
+  const [selector] = selectorVariants;
+  return isValid ? { name, alias, responsive, selector } : null;
+}
 function getTokenValueParts(tokenValue2) {
   const [, key, token] = tokenValue2.split(tokenValueRegex);
   return { themeKey: key, token };
@@ -622,10 +650,12 @@ export {
   GridValue,
   TokenProperty,
   TokenValue,
+  VariantProperty,
   arbitraryValue,
   createConfig,
   config_default_default as defaultConfig,
   getTokenPropertyName,
+  getTokenPropertyParts,
   getTokenValueParts,
   properties,
   tokenProperty,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenami/config",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -17,7 +17,7 @@
     "csstype": "^3.1.2",
     "tsup": "^7.0.0",
     "typescript": "^5.1.3",
-    "@tokenami/dev": "0.0.15"
+    "@tokenami/dev": "0.0.16"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",