tailwind-styled-v4 5.1.27 → 5.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/index.browser.mjs +4 -8
  3. package/dist/index.browser.mjs.map +1 -1
  4. package/dist/index.d.mts +5 -24
  5. package/dist/index.d.ts +5 -24
  6. package/dist/index.js +4 -8
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +4 -8
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,24 +1,5 @@
1
1
  import React from 'react';
2
2
 
3
- type CSSFillMode = "none" | "forwards" | "backwards" | "both";
4
- type CSSDirection = "normal" | "reverse" | "alternate" | "alternate-reverse";
5
- type CSSIterationCount = number | "infinite";
6
- type PresetEasing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "step-start" | "step-end";
7
- type CubicBezierEasing = `cubic-bezier(${string})`;
8
- type StepsEasing = `steps(${string})`;
9
- type CSSEasing = PresetEasing | CubicBezierEasing | StepsEasing;
10
- interface AnimateOptions {
11
- from: string;
12
- to: string;
13
- duration?: number;
14
- easing?: CSSEasing;
15
- delay?: number;
16
- fill?: CSSFillMode;
17
- iterations?: CSSIterationCount;
18
- direction?: CSSDirection;
19
- name?: string;
20
- }
21
-
22
3
  type HtmlTagName = keyof HTMLElementTagNameMap;
23
4
 
24
5
  /**
@@ -32,7 +13,7 @@ type VariantLiterals = string | number | boolean;
32
13
  /** Sizes sugar syntax — shorthand untuk variants.size */
33
14
  type SizesConfig = Record<string, string>;
34
15
  type InferVariantProps<T extends ComponentConfig> = {
35
- [K in keyof T["variants"]]?: T["variants"][K] extends Record<infer Key, any> ? Key extends "true" | "false" ? boolean : Key : never;
16
+ [K in keyof T["variants"]]?: T["variants"][K] extends Record<infer Key, any> ? Key extends "true" | "false" ? boolean : Key extends `${infer N extends number}` ? N | number : Key : never;
36
17
  };
37
18
  type InferSizeProps<T extends ComponentConfig> = T["sizes"] extends Record<string, string> ? {
38
19
  size?: keyof T["sizes"];
@@ -93,8 +74,9 @@ interface ComponentConfig {
93
74
  /** Variants — nested: { intent: { primary: "..." }, size: { sm: "..." } }
94
75
  * Supports string and boolean keys: { disabled: { true: "...", false: "..." } }
95
76
  */
96
- variants?: Record<string, Record<string | "true" | "false", string>>;
97
- defaultVariants?: Record<string, string>;
77
+ variants?: Record<string, Record<string | "true" | "false" | number, string>>;
78
+ /** defaultVariants accepts string | number | boolean to match all possible variant key types */
79
+ defaultVariants?: Record<string, string | number | boolean>;
98
80
  compoundVariants?: Array<{
99
81
  class: string;
100
82
  [key: string]: string;
@@ -268,7 +250,6 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
268
250
  * Button.xyz // ❌ TypeScript error
269
251
  */
270
252
  withSub<NewS extends string>(): TwStyledComponent<Config, NewS, TagMap, Tag>;
271
- animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S, TagMap, Tag>>;
272
253
  } & SubComponentKeys<S, TagMap>;
273
254
  interface TwSubComponent<P = unknown> {
274
255
  (props: P): React.ReactElement | null;
@@ -277,7 +258,7 @@ interface TwSubComponent<P = unknown> {
277
258
  interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig, Tag extends HtmlTagName = HtmlTagName> {
278
259
  <const T extends string>(strings: readonly [T], ...exprs: []): TwStyledComponent<Config, ExtractSubNames<T>, Record<string, never>, Tag>;
279
260
  (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, string, Record<string, never>, Tag>;
280
- <C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>, InferSubTagsFromConfig<C> extends Record<string, string> ? InferSubTagsFromConfig<C> : Record<string, never>, Tag>;
261
+ <const C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>, InferSubTagsFromConfig<C> extends Record<string, string> ? InferSubTagsFromConfig<C> : Record<string, never>, Tag>;
281
262
  }
282
263
  type TwTagFactory = {
283
264
  [K in HtmlTagName]: TwTemplateFactory<ComponentConfig, K>;
package/dist/index.d.ts CHANGED
@@ -1,24 +1,5 @@
1
1
  import React from 'react';
2
2
 
3
- type CSSFillMode = "none" | "forwards" | "backwards" | "both";
4
- type CSSDirection = "normal" | "reverse" | "alternate" | "alternate-reverse";
5
- type CSSIterationCount = number | "infinite";
6
- type PresetEasing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "step-start" | "step-end";
7
- type CubicBezierEasing = `cubic-bezier(${string})`;
8
- type StepsEasing = `steps(${string})`;
9
- type CSSEasing = PresetEasing | CubicBezierEasing | StepsEasing;
10
- interface AnimateOptions {
11
- from: string;
12
- to: string;
13
- duration?: number;
14
- easing?: CSSEasing;
15
- delay?: number;
16
- fill?: CSSFillMode;
17
- iterations?: CSSIterationCount;
18
- direction?: CSSDirection;
19
- name?: string;
20
- }
21
-
22
3
  type HtmlTagName = keyof HTMLElementTagNameMap;
23
4
 
24
5
  /**
@@ -32,7 +13,7 @@ type VariantLiterals = string | number | boolean;
32
13
  /** Sizes sugar syntax — shorthand untuk variants.size */
33
14
  type SizesConfig = Record<string, string>;
34
15
  type InferVariantProps<T extends ComponentConfig> = {
35
- [K in keyof T["variants"]]?: T["variants"][K] extends Record<infer Key, any> ? Key extends "true" | "false" ? boolean : Key : never;
16
+ [K in keyof T["variants"]]?: T["variants"][K] extends Record<infer Key, any> ? Key extends "true" | "false" ? boolean : Key extends `${infer N extends number}` ? N | number : Key : never;
36
17
  };
37
18
  type InferSizeProps<T extends ComponentConfig> = T["sizes"] extends Record<string, string> ? {
38
19
  size?: keyof T["sizes"];
@@ -93,8 +74,9 @@ interface ComponentConfig {
93
74
  /** Variants — nested: { intent: { primary: "..." }, size: { sm: "..." } }
94
75
  * Supports string and boolean keys: { disabled: { true: "...", false: "..." } }
95
76
  */
96
- variants?: Record<string, Record<string | "true" | "false", string>>;
97
- defaultVariants?: Record<string, string>;
77
+ variants?: Record<string, Record<string | "true" | "false" | number, string>>;
78
+ /** defaultVariants accepts string | number | boolean to match all possible variant key types */
79
+ defaultVariants?: Record<string, string | number | boolean>;
98
80
  compoundVariants?: Array<{
99
81
  class: string;
100
82
  [key: string]: string;
@@ -268,7 +250,6 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
268
250
  * Button.xyz // ❌ TypeScript error
269
251
  */
270
252
  withSub<NewS extends string>(): TwStyledComponent<Config, NewS, TagMap, Tag>;
271
- animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S, TagMap, Tag>>;
272
253
  } & SubComponentKeys<S, TagMap>;
273
254
  interface TwSubComponent<P = unknown> {
274
255
  (props: P): React.ReactElement | null;
@@ -277,7 +258,7 @@ interface TwSubComponent<P = unknown> {
277
258
  interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig, Tag extends HtmlTagName = HtmlTagName> {
278
259
  <const T extends string>(strings: readonly [T], ...exprs: []): TwStyledComponent<Config, ExtractSubNames<T>, Record<string, never>, Tag>;
279
260
  (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, string, Record<string, never>, Tag>;
280
- <C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>, InferSubTagsFromConfig<C> extends Record<string, string> ? InferSubTagsFromConfig<C> : Record<string, never>, Tag>;
261
+ <const C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>, InferSubTagsFromConfig<C> extends Record<string, string> ? InferSubTagsFromConfig<C> : Record<string, never>, Tag>;
281
262
  }
282
263
  type TwTagFactory = {
283
264
  [K in HtmlTagName]: TwTemplateFactory<ComponentConfig, K>;
package/dist/index.js CHANGED
@@ -1062,12 +1062,6 @@ function attachExtend(component, originalTag, base, config) {
1062
1062
  }
1063
1063
  });
1064
1064
  };
1065
- component.animate = async (_opts) => {
1066
- console.warn(
1067
- '[tailwind-styled-v4] .animate() tidak tersedia di main bundle.\nGunakan: import { animate } from "tailwind-styled-v4/animate"'
1068
- );
1069
- return component;
1070
- };
1071
1065
  component.withSub = (() => component);
1072
1066
  return component;
1073
1067
  }
@@ -1213,11 +1207,12 @@ function parseTemplate(strings, exprs) {
1213
1207
  return result;
1214
1208
  }
1215
1209
  function makeTag(tag) {
1216
- return ((stringsOrConfig, ...exprs) => {
1210
+ const impl = ((stringsOrConfig, ...exprs) => {
1217
1211
  if (!Array.isArray(stringsOrConfig) && typeof stringsOrConfig === "object" && stringsOrConfig !== null && !("raw" in stringsOrConfig)) {
1218
1212
  return createComponent(tag, stringsOrConfig);
1219
1213
  }
1220
- const parsed = parseTemplate(stringsOrConfig, exprs);
1214
+ const strings = stringsOrConfig;
1215
+ const parsed = parseTemplate(strings, exprs);
1221
1216
  const component = createComponent(tag, parsed.base);
1222
1217
  if (parsed.hasSubs) {
1223
1218
  for (const [name, classes] of Object.entries(parsed.subs)) {
@@ -1234,6 +1229,7 @@ function makeTag(tag) {
1234
1229
  }
1235
1230
  return component;
1236
1231
  });
1232
+ return impl;
1237
1233
  }
1238
1234
  var HTML_TAGS = [
1239
1235
  "html",