@indra-inter/neobrutalism-components 0.1.3 → 0.2.0

package/dist/typescript/theme/nativewind-tokens.generated.d.ts

@@ -0,0 +1,295 @@
+export declare const nativeWindTokenVariables: {
+    readonly blue: {
+        readonly light: {
+            readonly "--accent": "201.11 100% 89.41%";
+            readonly "--accent-foreground": "202.17 79.31% 11.37%";
+            readonly "--background": "0 0% 100%";
+            readonly "--border": "0 0% 0%";
+            readonly "--card": "0 0% 95.29%";
+            readonly "--card-foreground": "0 0% 3.92%";
+            readonly "--code": "0 0% 94.9%";
+            readonly "--code-foreground": "0 0% 3.92%";
+            readonly "--decor-accent": "199.84 100% 50.2%";
+            readonly "--decor-ink": "0 0% 0%";
+            readonly "--decor-paper": "0 0% 100%";
+            readonly "--destructive": "355.49 77.58% 56.27%";
+            readonly "--destructive-foreground": "0 0% 100%";
+            readonly "--foreground": "0 0% 3.92%";
+            readonly "--input": "0 0% 100%";
+            readonly "--muted": "0 0% 94.9%";
+            readonly "--muted-foreground": "0 0% 36.08%";
+            readonly "--overlay": "0 0% 0% / 50.2%";
+            readonly "--popover": "0 0% 98.04%";
+            readonly "--popover-foreground": "0 0% 3.92%";
+            readonly "--primary": "199.84 100% 50.2%";
+            readonly "--primary-foreground": "0 0% 0%";
+            readonly "--primary-hover": "200.98 79.89% 64.9%";
+            readonly "--ring": "199.84 100% 50.2%";
+            readonly "--secondary": "0 0% 3.92%";
+            readonly "--secondary-foreground": "0 0% 100%";
+            readonly "--selection": "199.84 100% 50.2%";
+            readonly "--selection-foreground": "0 0% 0%";
+            readonly "--semantic-background": "0 0% 55.29%";
+            readonly "--semantic-border": "0 0.45% 56.27%";
+            readonly "--semantic-foreground": "0 0% 100%";
+            readonly "--shadow-color": "0 0% 4.31%";
+            readonly "--sidebar": "0 0% 100%";
+            readonly "--sidebar-accent": "201.11 100% 89.41%";
+            readonly "--sidebar-accent-foreground": "202.17 79.31% 11.37%";
+            readonly "--sidebar-border": "0 0% 0%";
+            readonly "--sidebar-foreground": "0 0% 3.92%";
+            readonly "--sidebar-primary": "199.84 100% 50.2%";
+            readonly "--sidebar-primary-foreground": "0 0% 0%";
+            readonly "--sidebar-ring": "199.84 100% 50.2%";
+            readonly "--surface": "0 0% 95.29%";
+            readonly "--surface-foreground": "0 0% 3.92%";
+            readonly "--success": "142.09 70.56% 45.29%";
+            readonly "--success-foreground": "0 0% 3.92%";
+            readonly "--color-success-100": "140.63 84.21% 92.55%";
+            readonly "--color-success-200": "141 78.95% 85.1%";
+            readonly "--color-success-300": "141.71 76.64% 73.14%";
+            readonly "--color-success-400": "141.89 69.16% 58.04%";
+            readonly "--color-success-500": "142.09 70.56% 45.29%";
+            readonly "--info": "217.22 91.22% 59.8%";
+            readonly "--info-foreground": "0 0% 3.92%";
+            readonly "--color-info-100": "214.29 94.59% 92.75%";
+            readonly "--color-info-200": "213.33 96.92% 87.25%";
+            readonly "--color-info-300": "211.7 96.36% 78.43%";
+            readonly "--color-info-400": "213.12 93.9% 67.84%";
+            readonly "--color-info-500": "217.22 91.22% 59.8%";
+            readonly "--warning": "26.39 90.22% 63.92%";
+            readonly "--warning-foreground": "0 0% 3.92%";
+            readonly "--color-warning-100": "28 100% 97.06%";
+            readonly "--color-warning-200": "26.51 100% 91.57%";
+            readonly "--color-warning-300": "26.84 100% 85.1%";
+            readonly "--color-warning-400": "26.55 100% 77.84%";
+            readonly "--color-warning-500": "26.39 90.22% 63.92%";
+            readonly "--error": "0 75.25% 60.39%";
+            readonly "--error-foreground": "0 75.25% 60.39% / 25.1%";
+            readonly "--color-error-100": "0 100% 95.88%";
+            readonly "--color-error-200": "0 100% 90.78%";
+            readonly "--color-error-300": "0 100% 82.75%";
+            readonly "--color-error-400": "0 90.14% 72.16%";
+            readonly "--color-error-500": "0 75.25% 60.39%";
+        };
+        readonly dark: {
+            readonly "--accent": "202.5 64.86% 14.51%";
+            readonly "--accent-foreground": "201.11 100% 89.41%";
+            readonly "--background": "0 0% 12.16%";
+            readonly "--border": "0 0% 0%";
+            readonly "--card": "0 0% 10.2%";
+            readonly "--card-foreground": "0 0% 98.04%";
+            readonly "--code": "0 0% 14.9%";
+            readonly "--code-foreground": "0 0% 98.04%";
+            readonly "--decor-accent": "200.19 46.85% 56.47%";
+            readonly "--decor-ink": "0 0% 0%";
+            readonly "--decor-paper": "0 0% 100%";
+            readonly "--destructive": "0 100% 70.98%";
+            readonly "--destructive-foreground": "0 10.64% 9.22%";
+            readonly "--foreground": "0 0% 98.04%";
+            readonly "--input": "200 8.57% 13.73%";
+            readonly "--muted": "0 0% 14.9%";
+            readonly "--muted-foreground": "0 0% 63.92%";
+            readonly "--overlay": "0 0% 0% / 50.2%";
+            readonly "--popover": "0 0% 10.2%";
+            readonly "--popover-foreground": "0 0% 98.04%";
+            readonly "--primary": "199.84 100% 50.2%";
+            readonly "--primary-foreground": "0 0% 0%";
+            readonly "--primary-hover": "200.98 79.89% 64.9%";
+            readonly "--ring": "199.89 100% 65.1%";
+            readonly "--secondary": "0 0% 98.04%";
+            readonly "--secondary-foreground": "0 0% 5.88%";
+            readonly "--selection": "199.84 100% 50.2%";
+            readonly "--selection-foreground": "0 0% 0%";
+            readonly "--semantic-background": "30 2.63% 14.9%";
+            readonly "--semantic-border": "210 1.22% 32.16%";
+            readonly "--semantic-foreground": "0 0% 100%";
+            readonly "--shadow-color": "0 0% 23.92%";
+            readonly "--sidebar": "0 0% 12.16%";
+            readonly "--sidebar-accent": "202.5 64.86% 14.51%";
+            readonly "--sidebar-accent-foreground": "201.11 100% 89.41%";
+            readonly "--sidebar-border": "0 0% 0%";
+            readonly "--sidebar-foreground": "0 0% 98.04%";
+            readonly "--sidebar-primary": "199.84 100% 50.2%";
+            readonly "--sidebar-primary-foreground": "0 0% 0%";
+            readonly "--sidebar-ring": "199.89 100% 65.1%";
+            readonly "--surface": "0 0% 10.2%";
+            readonly "--surface-foreground": "0 0% 98.04%";
+            readonly "--success": "142.09 70.56% 45.29%";
+            readonly "--success-foreground": "0 0% 98.04%";
+            readonly "--color-success-100": "140.63 84.21% 92.55%";
+            readonly "--color-success-200": "141 78.95% 85.1%";
+            readonly "--color-success-300": "141.71 76.64% 73.14%";
+            readonly "--color-success-400": "141.89 69.16% 58.04%";
+            readonly "--color-success-500": "142.09 70.56% 45.29%";
+            readonly "--info": "217.22 91.22% 59.8%";
+            readonly "--info-foreground": "0 0% 98.04%";
+            readonly "--color-info-100": "214.29 94.59% 92.75%";
+            readonly "--color-info-200": "213.33 96.92% 87.25%";
+            readonly "--color-info-300": "211.7 96.36% 78.43%";
+            readonly "--color-info-400": "213.12 93.9% 67.84%";
+            readonly "--color-info-500": "217.22 91.22% 59.8%";
+            readonly "--warning": "26.39 90.22% 63.92%";
+            readonly "--warning-foreground": "0 0% 98.04%";
+            readonly "--color-warning-100": "28 100% 97.06%";
+            readonly "--color-warning-200": "26.51 100% 91.57%";
+            readonly "--color-warning-300": "26.84 100% 85.1%";
+            readonly "--color-warning-400": "26.55 100% 77.84%";
+            readonly "--color-warning-500": "26.39 90.22% 63.92%";
+            readonly "--error": "0 75.25% 60.39%";
+            readonly "--error-foreground": "0 75.25% 60.39% / 25.1%";
+            readonly "--color-error-100": "0 100% 95.88%";
+            readonly "--color-error-200": "0 100% 90.78%";
+            readonly "--color-error-300": "0 100% 82.75%";
+            readonly "--color-error-400": "0 90.14% 72.16%";
+            readonly "--color-error-500": "0 75.25% 60.39%";
+        };
+    };
+    readonly coral: {
+        readonly light: {
+            readonly "--accent": "16.8 49.02% 90%";
+            readonly "--accent-foreground": "16.8 49.02% 20%";
+            readonly "--background": "0 0% 100%";
+            readonly "--border": "0 0% 0%";
+            readonly "--card": "0 0% 95.29%";
+            readonly "--card-foreground": "0 0% 3.92%";
+            readonly "--code": "0 0% 94.9%";
+            readonly "--code-foreground": "0 0% 3.92%";
+            readonly "--decor-accent": "16.11 100% 65.69%";
+            readonly "--decor-ink": "0 0% 0%";
+            readonly "--decor-paper": "0 0% 100%";
+            readonly "--destructive": "355.49 77.58% 56.27%";
+            readonly "--destructive-foreground": "0 0% 100%";
+            readonly "--foreground": "0 0% 3.92%";
+            readonly "--input": "0 0% 100%";
+            readonly "--muted": "0 0% 94.9%";
+            readonly "--muted-foreground": "0 0% 36.08%";
+            readonly "--overlay": "0 0% 0% / 50.2%";
+            readonly "--popover": "0 0% 98.04%";
+            readonly "--popover-foreground": "0 0% 3.92%";
+            readonly "--primary": "16.11 100% 65.69%";
+            readonly "--primary-foreground": "15.79 50% 14.9%";
+            readonly "--primary-hover": "16.47 79.69% 74.9%";
+            readonly "--ring": "16.14 94.77% 70%";
+            readonly "--secondary": "0 0% 3.92%";
+            readonly "--secondary-foreground": "0 0% 100%";
+            readonly "--selection": "16.11 100% 65.69%";
+            readonly "--selection-foreground": "15.79 50% 14.9%";
+            readonly "--semantic-background": "0 0% 55.29%";
+            readonly "--semantic-border": "0 0.45% 56.27%";
+            readonly "--semantic-foreground": "0 0% 100%";
+            readonly "--shadow-color": "0 0% 4.31%";
+            readonly "--sidebar": "0 0% 100%";
+            readonly "--sidebar-accent": "16.8 49.02% 90%";
+            readonly "--sidebar-accent-foreground": "16.8 49.02% 20%";
+            readonly "--sidebar-border": "0 0% 0%";
+            readonly "--sidebar-foreground": "0 0% 3.92%";
+            readonly "--sidebar-primary": "16.11 100% 65.69%";
+            readonly "--sidebar-primary-foreground": "15.79 50% 14.9%";
+            readonly "--sidebar-ring": "16.14 94.77% 70%";
+            readonly "--surface": "0 0% 95.29%";
+            readonly "--surface-foreground": "0 0% 3.92%";
+            readonly "--success": "142.09 70.56% 45.29%";
+            readonly "--success-foreground": "0 0% 3.92%";
+            readonly "--color-success-100": "140.63 84.21% 92.55%";
+            readonly "--color-success-200": "141 78.95% 85.1%";
+            readonly "--color-success-300": "141.71 76.64% 73.14%";
+            readonly "--color-success-400": "141.89 69.16% 58.04%";
+            readonly "--color-success-500": "142.09 70.56% 45.29%";
+            readonly "--info": "217.22 91.22% 59.8%";
+            readonly "--info-foreground": "0 0% 3.92%";
+            readonly "--color-info-100": "214.29 94.59% 92.75%";
+            readonly "--color-info-200": "213.33 96.92% 87.25%";
+            readonly "--color-info-300": "211.7 96.36% 78.43%";
+            readonly "--color-info-400": "213.12 93.9% 67.84%";
+            readonly "--color-info-500": "217.22 91.22% 59.8%";
+            readonly "--warning": "26.39 90.22% 63.92%";
+            readonly "--warning-foreground": "0 0% 3.92%";
+            readonly "--color-warning-100": "28 100% 97.06%";
+            readonly "--color-warning-200": "26.51 100% 91.57%";
+            readonly "--color-warning-300": "26.84 100% 85.1%";
+            readonly "--color-warning-400": "26.55 100% 77.84%";
+            readonly "--color-warning-500": "26.39 90.22% 63.92%";
+            readonly "--error": "0 75.25% 60.39%";
+            readonly "--error-foreground": "0 75.25% 60.39% / 25.1%";
+            readonly "--color-error-100": "0 100% 95.88%";
+            readonly "--color-error-200": "0 100% 90.78%";
+            readonly "--color-error-300": "0 100% 82.75%";
+            readonly "--color-error-400": "0 90.14% 72.16%";
+            readonly "--color-error-500": "0 75.25% 60.39%";
+        };
+        readonly dark: {
+            readonly "--accent": "16.8 49.02% 20%";
+            readonly "--accent-foreground": "16.8 49.02% 90%";
+            readonly "--background": "0 0% 12.16%";
+            readonly "--border": "0 0% 0%";
+            readonly "--card": "0 0% 10.2%";
+            readonly "--card-foreground": "0 0% 98.04%";
+            readonly "--code": "0 0% 14.9%";
+            readonly "--code-foreground": "0 0% 98.04%";
+            readonly "--decor-accent": "17.42 60.78% 10%";
+            readonly "--decor-ink": "0 0% 0%";
+            readonly "--decor-paper": "0 0% 100%";
+            readonly "--destructive": "0 100% 70.98%";
+            readonly "--destructive-foreground": "0 10.64% 9.22%";
+            readonly "--foreground": "0 0% 98.04%";
+            readonly "--input": "200 8.57% 13.73%";
+            readonly "--muted": "0 0% 14.9%";
+            readonly "--muted-foreground": "0 0% 63.92%";
+            readonly "--overlay": "0 0% 0% / 50.2%";
+            readonly "--popover": "0 0% 10.2%";
+            readonly "--popover-foreground": "0 0% 98.04%";
+            readonly "--primary": "16.11 100% 65.69%";
+            readonly "--primary-foreground": "15.79 50% 14.9%";
+            readonly "--primary-hover": "16.47 79.69% 74.9%";
+            readonly "--ring": "16.33 96.08% 70%";
+            readonly "--secondary": "0 0% 98.04%";
+            readonly "--secondary-foreground": "0 0% 5.88%";
+            readonly "--selection": "16.11 100% 65.69%";
+            readonly "--selection-foreground": "15.79 50% 14.9%";
+            readonly "--semantic-background": "30 2.63% 14.9%";
+            readonly "--semantic-border": "210 1.22% 32.16%";
+            readonly "--semantic-foreground": "0 0% 100%";
+            readonly "--shadow-color": "0 0% 23.92%";
+            readonly "--sidebar": "0 0% 12.16%";
+            readonly "--sidebar-accent": "16.8 49.02% 20%";
+            readonly "--sidebar-accent-foreground": "16.8 49.02% 90%";
+            readonly "--sidebar-border": "0 0% 0%";
+            readonly "--sidebar-foreground": "0 0% 98.04%";
+            readonly "--sidebar-primary": "16.11 100% 65.69%";
+            readonly "--sidebar-primary-foreground": "15.79 50% 14.9%";
+            readonly "--sidebar-ring": "16.33 96.08% 70%";
+            readonly "--surface": "0 0% 10.2%";
+            readonly "--surface-foreground": "0 0% 98.04%";
+            readonly "--success": "142.09 70.56% 45.29%";
+            readonly "--success-foreground": "0 0% 98.04%";
+            readonly "--color-success-100": "140.63 84.21% 92.55%";
+            readonly "--color-success-200": "141 78.95% 85.1%";
+            readonly "--color-success-300": "141.71 76.64% 73.14%";
+            readonly "--color-success-400": "141.89 69.16% 58.04%";
+            readonly "--color-success-500": "142.09 70.56% 45.29%";
+            readonly "--info": "217.22 91.22% 59.8%";
+            readonly "--info-foreground": "0 0% 98.04%";
+            readonly "--color-info-100": "214.29 94.59% 92.75%";
+            readonly "--color-info-200": "213.33 96.92% 87.25%";
+            readonly "--color-info-300": "211.7 96.36% 78.43%";
+            readonly "--color-info-400": "213.12 93.9% 67.84%";
+            readonly "--color-info-500": "217.22 91.22% 59.8%";
+            readonly "--warning": "26.39 90.22% 63.92%";
+            readonly "--warning-foreground": "0 0% 98.04%";
+            readonly "--color-warning-100": "28 100% 97.06%";
+            readonly "--color-warning-200": "26.51 100% 91.57%";
+            readonly "--color-warning-300": "26.84 100% 85.1%";
+            readonly "--color-warning-400": "26.55 100% 77.84%";
+            readonly "--color-warning-500": "26.39 90.22% 63.92%";
+            readonly "--error": "0 75.25% 60.39%";
+            readonly "--error-foreground": "0 75.25% 60.39% / 25.1%";
+            readonly "--color-error-100": "0 100% 95.88%";
+            readonly "--color-error-200": "0 100% 90.78%";
+            readonly "--color-error-300": "0 100% 82.75%";
+            readonly "--color-error-400": "0 90.14% 72.16%";
+            readonly "--color-error-500": "0 75.25% 60.39%";
+        };
+    };
+};
+//# sourceMappingURL=nativewind-tokens.generated.d.ts.map

package/dist/typescript/theme/nativewind-tokens.generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativewind-tokens.generated.d.ts","sourceRoot":"","sources":["../../../src/theme/nativewind-tokens.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqS3B,CAAC"}

package/dist/typescript/theme/theme-provider.d.ts

@@ -1,8 +1,9 @@
 import { type PropsWithChildren } from 'react';
-import { type Theme, type ThemeMode } from './theme.js';
+import { type Theme, type ThemeMode, type ThemeVariant } from './theme.js';
 export type ThemeProviderProps = PropsWithChildren<{
     mode: ThemeMode;
+    variant?: ThemeVariant;
 }>;
-export declare function ThemeProvider({ children, mode }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ children, mode, variant }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): Theme;
 //# sourceMappingURL=theme-provider.d.ts.map

package/dist/typescript/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAsB,KAAK,KAAK,EAAE,KAAK,SAAS,EAAE,MAAM,YAAS,CAAC;AAIzE,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC,CAAC;AAEH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,kBAAkB,+BAMnE;AAED,wBAAgB,QAAQ,IAAI,KAAK,CAEhC"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,KAAK,KAAK,EACV,KAAK,SAAS,EACd,KAAK,YAAY,EAClB,MAAM,YAAS,CAAC;AAIjB,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC,CAAC;AAEH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAgB,EAAE,EAAE,kBAAkB,+BAMrF;AAED,wBAAgB,QAAQ,IAAI,KAAK,CAEhC"}

package/dist/typescript/theme/theme.d.ts

@@ -1,25 +1,26 @@
+import { designTokens } from './design-tokens.generated.js';
 export type ThemeMode = 'light' | 'dark';
+export type ThemeVariant = 'blue' | 'coral';
+type KebabToCamelCase<Value extends string> = Value extends `${infer Head}-${infer Tail}` ? `${Head}${Capitalize<KebabToCamelCase<Tail>>}` : Value;
+type ModeTokenName = keyof (typeof designTokens.mode.light.Blue) & string;
+type ModeColors = {
+    [Name in ModeTokenName as KebabToCamelCase<Name>]: string;
+};
+type ThemeStatusName = 'success' | 'info' | 'warning' | 'error';
+type ThemeStatusScale = '100' | '200' | '300' | '400' | '500';
+type ThemeStatusColor = Record<ThemeStatusScale, string> & {
+    foreground: string;
+};
+export type ThemeStatus = Record<ThemeStatusName, ThemeStatusColor>;
 export type Theme = {
-    colors: {
-        background: string;
-        surface: string;
-        popover: string;
-        accent: string;
-        primary: string;
-        primaryHover: string;
-        primaryForeground: string;
-        secondary: string;
-        secondaryForeground: string;
-        destructive: string;
-        destructiveForeground: string;
+    colors: ModeColors & {
         warning: string;
         success: string;
         info: string;
-        foreground: string;
-        mutedForeground: string;
+        error: string;
         disabled: string;
-        semanticBorder: string;
     };
+    status: ThemeStatus;
     border: {
         color: string;
         radius: number;
@@ -47,6 +48,8 @@ export type Theme = {
         weight: '500';
     };
 };
-export declare function createTheme(mode?: ThemeMode): Theme;
+export declare function createNativeWindVariables(mode: ThemeMode, variant?: ThemeVariant): Record<`--${string}`, string>;
+export declare function createTheme(mode?: ThemeMode, variant?: ThemeVariant): Theme;
 export declare const theme: Theme;
+export {};
 //# sourceMappingURL=theme.d.ts.map

package/dist/typescript/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE;QACN,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,YAAY,EAAE,MAAM,CAAC;QACrB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,SAAS,EAAE,MAAM,CAAC;QAClB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,WAAW,EAAE,MAAM,CAAC;QACpB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,eAAe,EAAE,MAAM,CAAC;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,UAAU,EAAE;QACV,EAAE,EAAE,MAAM,CAAC;QACX,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;QAChB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,KAAK,CAAC;KACf,CAAC;CACH,CAAC;AAEF,wBAAgB,WAAW,CAAC,IAAI,GAAE,SAAmB,GAAG,KAAK,CAoD5D;AAED,eAAO,MAAM,KAAK,OAAuB,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA2B,CAAC;AAGzD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACzC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C,KAAK,gBAAgB,CAAC,KAAK,SAAS,MAAM,IACxC,KAAK,SAAS,GAAG,MAAM,IAAI,IAAI,MAAM,IAAI,EAAE,GACvC,GAAG,IAAI,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,GAC9C,KAAK,CAAC;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAE1E,KAAK,UAAU,GAAG;KACf,IAAI,IAAI,aAAa,IAAI,gBAAgB,CAAC,IAAI,CAAC,GAAG,MAAM;CAC1D,CAAC;AAEF,KAAK,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAChE,KAAK,gBAAgB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAC9D,KAAK,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAElF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;AAEpE,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,UAAU,GAAG;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,UAAU,EAAE;QACV,EAAE,EAAE,MAAM,CAAC;QACX,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;QAChB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,KAAK,CAAC;KACf,CAAC;CACH,CAAC;AA2CF,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,SAAS,EACf,OAAO,GAAE,YAAqB,GAC7B,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAE/B;AAED,wBAAgB,WAAW,CACzB,IAAI,GAAE,SAAmB,EACzB,OAAO,GAAE,YAAqB,GAC7B,KAAK,CA2CP;AAED,eAAO,MAAM,KAAK,OAAuB,CAAC"}

package/nativewind.css

@@ -1,25 +1,47 @@
 /* Generated NativeWind semantic tokens from Figma design tokens. Do not edit by hand. */
 :root {
+  --accent: 201.11 100% 89.41%;
+  --accent-foreground: 202.17 79.31% 11.37%;
   --background: 0 0% 100%;
-  --foreground: 0 0% 3.92%;
+  --border: 0 0% 0%;
   --card: 0 0% 95.29%;
   --card-foreground: 0 0% 3.92%;
+  --code: 0 0% 94.9%;
+  --code-foreground: 0 0% 3.92%;
+  --decor-accent: 199.84 100% 50.2%;
+  --decor-ink: 0 0% 0%;
+  --decor-paper: 0 0% 100%;
+  --destructive: 355.49 77.58% 56.27%;
+  --destructive-foreground: 0 0% 100%;
+  --foreground: 0 0% 3.92%;
+  --input: 0 0% 100%;
+  --muted: 0 0% 94.9%;
+  --muted-foreground: 0 0% 36.08%;
+  --overlay: 0 0% 0% / 50.2%;
   --popover: 0 0% 98.04%;
   --popover-foreground: 0 0% 3.92%;
   --primary: 199.84 100% 50.2%;
-  --primary-hover: 200.98 79.89% 64.9%;
   --primary-foreground: 0 0% 0%;
+  --primary-hover: 200.98 79.89% 64.9%;
+  --ring: 199.84 100% 50.2%;
   --secondary: 0 0% 3.92%;
   --secondary-foreground: 0 0% 100%;
-  --muted: 0 0% 94.9%;
-  --muted-foreground: 0 0% 36.08%;
-  --accent: 201.11 100% 89.41%;
-  --accent-foreground: 202.17 79.31% 11.37%;
-  --destructive: 355.49 77.58% 56.27%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 0 0% 0%;
-  --input: 0 0% 100%;
-  --ring: 199.84 100% 50.2%;
+  --selection: 199.84 100% 50.2%;
+  --selection-foreground: 0 0% 0%;
+  --semantic-background: 0 0% 55.29%;
+  --semantic-border: 0 0.45% 56.27%;
+  --semantic-foreground: 0 0% 100%;
+  --shadow-color: 0 0% 4.31%;
+  --sidebar: 0 0% 100%;
+  --sidebar-accent: 201.11 100% 89.41%;
+  --sidebar-accent-foreground: 202.17 79.31% 11.37%;
+  --sidebar-border: 0 0% 0%;
+  --sidebar-foreground: 0 0% 3.92%;
+  --sidebar-primary: 199.84 100% 50.2%;
+  --sidebar-primary-foreground: 0 0% 0%;
+  --sidebar-ring: 199.84 100% 50.2%;
+  --surface: 0 0% 95.29%;
+  --surface-foreground: 0 0% 3.92%;
   --success: 142.09 70.56% 45.29%;
   --success-foreground: 0 0% 3.92%;
   --color-success-100: 140.63 84.21% 92.55%;
@@ -51,26 +73,48 @@
 }
 
 .dark:root {
+  --accent: 202.5 64.86% 14.51%;
+  --accent-foreground: 201.11 100% 89.41%;
   --background: 0 0% 12.16%;
-  --foreground: 0 0% 98.04%;
+  --border: 0 0% 0%;
   --card: 0 0% 10.2%;
   --card-foreground: 0 0% 98.04%;
+  --code: 0 0% 14.9%;
+  --code-foreground: 0 0% 98.04%;
+  --decor-accent: 200.19 46.85% 56.47%;
+  --decor-ink: 0 0% 0%;
+  --decor-paper: 0 0% 100%;
+  --destructive: 0 100% 70.98%;
+  --destructive-foreground: 0 10.64% 9.22%;
+  --foreground: 0 0% 98.04%;
+  --input: 200 8.57% 13.73%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.92%;
+  --overlay: 0 0% 0% / 50.2%;
   --popover: 0 0% 10.2%;
   --popover-foreground: 0 0% 98.04%;
   --primary: 199.84 100% 50.2%;
-  --primary-hover: 200.98 79.89% 64.9%;
   --primary-foreground: 0 0% 0%;
+  --primary-hover: 200.98 79.89% 64.9%;
+  --ring: 199.89 100% 65.1%;
   --secondary: 0 0% 98.04%;
   --secondary-foreground: 0 0% 5.88%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.92%;
-  --accent: 202.5 64.86% 14.51%;
-  --accent-foreground: 201.11 100% 89.41%;
-  --destructive: 0 100% 70.98%;
-  --destructive-foreground: 0 10.64% 9.22%;
-  --border: 0 0% 0%;
-  --input: 200 8.57% 13.73%;
-  --ring: 199.89 100% 65.1%;
+  --selection: 199.84 100% 50.2%;
+  --selection-foreground: 0 0% 0%;
+  --semantic-background: 30 2.63% 14.9%;
+  --semantic-border: 210 1.22% 32.16%;
+  --semantic-foreground: 0 0% 100%;
+  --shadow-color: 0 0% 23.92%;
+  --sidebar: 0 0% 12.16%;
+  --sidebar-accent: 202.5 64.86% 14.51%;
+  --sidebar-accent-foreground: 201.11 100% 89.41%;
+  --sidebar-border: 0 0% 0%;
+  --sidebar-foreground: 0 0% 98.04%;
+  --sidebar-primary: 199.84 100% 50.2%;
+  --sidebar-primary-foreground: 0 0% 0%;
+  --sidebar-ring: 199.89 100% 65.1%;
+  --surface: 0 0% 10.2%;
+  --surface-foreground: 0 0% 98.04%;
   --success: 142.09 70.56% 45.29%;
   --success-foreground: 0 0% 98.04%;
   --color-success-100: 140.63 84.21% 92.55%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indra-inter/neobrutalism-components",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -45,17 +45,20 @@
     "generate:design-tokens": "node ./scripts/generate-design-tokens.mjs",
     "test:badge-nativewind": "node ./scripts/test-badge-nativewind.mjs",
     "test:card-nativewind": "node ./scripts/test-card-nativewind.mjs",
+    "test:canonical-component-api": "node ./scripts/test-canonical-component-api.mjs",
     "test:bottom-sheet-drag-dismiss": "node ./scripts/test-bottom-sheet-drag-dismiss.mjs",
     "test:chat-list-item-slots": "node ./scripts/test-chat-list-item-slots.mjs",
-    "test:design-tokens": "node ./scripts/test-design-tokens.mjs",
+    "test:design-tokens": "node ./scripts/test-design-tokens.mjs && node ./scripts/test-theme-family-token-contract.mjs",
     "test:divider": "node ./scripts/test-divider.mjs",
     "test:icon-button-ghost": "node ./scripts/test-icon-button-ghost.mjs",
     "test:input-addon-padding": "node ./scripts/test-input-addon-padding.mjs",
     "test:list-item-nativewind": "node ./scripts/test-list-item-nativewind.mjs",
     "test:pin-code-field": "node ./scripts/test-pin-code-field.mjs",
-    "test:public-styling-contract": "node ./scripts/test-public-styling-contract.mjs",
+    "test:public-styling-contract": "node ./scripts/test-public-styling-contract.mjs && node ./scripts/test-theme-family-public-contract.mjs",
+    "test:semantic-color-contract": "node ./scripts/test-semantic-color-contract.mjs",
     "test:shared-styling": "node ./scripts/test-shared-styling.mjs",
     "test:styling-aliases": "node ./scripts/test-styling-aliases.mjs",
+    "test:theme-family-runtime": "node ./scripts/test-theme-family-runtime-contract.mjs",
     "test:tabs-figma-update": "node ./scripts/test-tabs-figma-update.mjs",
     "prepare": "pnpm build",
     "typecheck": "tsc --noEmit"

package/tokens.css

@@ -38,7 +38,7 @@
   --neo-decor-accent: 199.84 100% 50.2%;
   --neo-decor-ink: 0 0% 0%;
   --neo-decor-paper: 0 0% 100%;
-  --neo-background-color: 0 0% 0% / 50.2%;
+  --neo-overlay: 0 0% 0% / 50.2%;
   --neo-semantic-background: 0 0% 55.29%;
   --neo-semantic-border: 0 0.45% 56.27%;
   --neo-semantic-foreground: 0 0% 100%;
@@ -104,7 +104,7 @@
   --neo-decor-accent: 200.19 46.85% 56.47%;
   --neo-decor-ink: 0 0% 0%;
   --neo-decor-paper: 0 0% 100%;
-  --neo-background-color: 0 0% 0% / 50.2%;
+  --neo-overlay: 0 0% 0% / 50.2%;
   --neo-semantic-background: 30 2.63% 14.9%;
   --neo-semantic-border: 210 1.22% 32.16%;
   --neo-semantic-foreground: 0 0% 100%;