@idealyst/theme 1.2.14 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/theme",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "description": "Theming system for Idealyst Framework",
   "readme": "README.md",
   "main": "src/index.ts",

package/src/styleBuilder.ts

@@ -24,6 +24,7 @@ export type ComponentName =
   | 'Badge'
   | 'Breadcrumb'
   | 'Button'
+  | 'CameraPreview'
   | 'Card'
   | 'Checkbox'
   | 'Chip'
@@ -38,6 +39,7 @@ export type ComponentName =
   | 'Link'
   | 'List'
   | 'Menu'
+  | 'MenuItem'
   | 'Popover'
   | 'Pressable'
   | 'Progress'
@@ -59,16 +61,36 @@ export type ComponentName =
 
 export type StyleCallback<TTheme, TStyles> = (theme: TTheme) => TStyles;
 
+/**
+ * Permissive variant type that accepts any variant configuration.
+ * The actual variant names are determined at build time by Unistyles.
+ */
+export type PermissiveVariants = Record<string, string | number | boolean | undefined>;
+
+/**
+ * Return type for defineStyle that preserves style keys and adds useVariants.
+ * Style values are typed as 'any' to allow both static styles and dynamic functions.
+ */
+export type DefineStyleResult<TStyles> = {
+  [K in keyof TStyles]: TStyles[K];
+} & {
+  /**
+   * Apply variant values to the stylesheet.
+   * Variant names are inferred from the 'variants' property in style definitions.
+   */
+  useVariants: (variants: PermissiveVariants) => void;
+};
+
 /**
  * Define base styles for a component.
  * Babel transforms this to StyleSheet.create with merged extensions.
  */
-export function defineStyle<TTheme, TStyles>(
+export function defineStyle<TTheme, TStyles extends Record<string, unknown>>(
   _componentName: ComponentName,
   styles: StyleCallback<TTheme, TStyles>
-): ReturnType<typeof StyleSheet.create> {
+): DefineStyleResult<TStyles> {
   // Babel replaces this - runtime fallback for dev
-  return StyleSheet.create(styles as any);
+  return StyleSheet.create(styles as any) as DefineStyleResult<TStyles>;
 }
 
 /**

package/src/variants/color.ts

@@ -1,7 +1,8 @@
-import { ColorValue, Pallet, Theme } from "../theme";
+import { ColorValue, Pallet, Shade, Theme } from "../theme";
 
 export function getColorFromString(theme: Theme, color: string): ColorValue {
-    const [colorName, shade] = color.split('.') as [Pallet, string | undefined];
+    const [colorName, shadeStr] = color.split('.') as [Pallet, string | undefined];
     const colorPallet = theme.colors.pallet;
-    return colorPallet[colorName]?.[shade || '500']
+    const shade = (shadeStr ? Number(shadeStr) : 500) as Shade;
+    return colorPallet[colorName]?.[shade];
 }