@gusarov-studio/rubik-ui 31.0.0 → 31.2.0

package/dist/BrandIcon/BrandIcon.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import type { Color } from "../types/Color";
+import type { ResponsiveValue } from "../foundation/breakpoints";
 import type { BrandIconGlyphProps, NamedColor } from "./types";
 import { type BrandIconGlyph } from "./glyphs";
 import "./BrandIcon.scss";
-export interface BrandIconProps extends BrandIconGlyphProps {
+export interface BrandIconProps extends Omit<BrandIconGlyphProps, "size"> {
     glyph: BrandIconGlyph;
     color?: NamedColor | Color;
+    size?: ResponsiveValue<string | number>;
 }
 declare const BrandIcon: React.ForwardRefExoticComponent<BrandIconProps & React.RefAttributes<SVGSVGElement>>;
 export { BrandIcon, type BrandIconGlyph };

package/dist/Text/Text.d.ts

@@ -1,13 +1,16 @@
 import React from "react";
 import type { NamedColor } from "./types";
 import type { Color } from "../types/Color";
+import type { ResponsiveValue } from "../foundation/breakpoints";
 import "./Text.scss";
 type TextSize = 8 | 10 | 12 | 13 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 36 | 40 | 48 | 56 | 60 | 64 | 72;
 type TextElement = HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement;
+type TextWeight = "inherit" | "thin" | "extra-light" | "light" | "regular" | "medium" | "semibold" | "bold" | "extra-bold" | "black" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+type TextAlign = "inherit" | "start" | "center" | "end" | "justify";
 interface TextProps extends React.HTMLAttributes<TextElement> {
-    size?: TextSize | `${TextSize}`;
-    weight?: "inherit" | "thin" | "extra-light" | "light" | "regular" | "medium" | "semibold" | "bold" | "extra-bold" | "black" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-    align?: "inherit" | "start" | "center" | "end" | "justify";
+    size?: ResponsiveValue<TextSize | `${TextSize}`>;
+    weight?: ResponsiveValue<TextWeight>;
+    align?: ResponsiveValue<TextAlign>;
     color?: NamedColor | Color;
     block?: boolean;
     truncate?: boolean;

package/dist/foundation/breakpoints/index.d.ts

@@ -0,0 +1,3 @@
+export { BREAKPOINTS } from "./types";
+export type { Breakpoint, ResponsiveValue } from "./types";
+export { getResponsiveClasses } from "./utils";

package/dist/foundation/breakpoints/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Available breakpoint keys for responsive design
+ */
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+/**
+ * Responsive value type that supports both primitive values and breakpoint objects
+ */
+export type ResponsiveValue<T> = T | (Partial<Record<Breakpoint, T>> & {
+    base?: T;
+});
+/**
+ * Breakpoint pixel values
+ */
+export declare const BREAKPOINTS: Record<Breakpoint, number>;

package/dist/foundation/breakpoints/utils.d.ts

@@ -0,0 +1,20 @@
+import type { ResponsiveValue } from "./types";
+/**
+ * Helper function to generate responsive class names from a ResponsiveValue
+ *
+ * @param value - The responsive value (primitive or breakpoint object)
+ * @param prefix - The CSS class prefix (e.g., "r-text--size")
+ * @param defaultValue - Optional default value if value is undefined
+ * @returns Array of CSS class names
+ *
+ * @example
+ * // Simple value
+ * getResponsiveClasses("16", "r-text--size")
+ * // Returns: ["r-text--size-16"]
+ *
+ * @example
+ * // Responsive object
+ * getResponsiveClasses({ base: "16", md: "20", lg: "24" }, "r-text--size")
+ * // Returns: ["r-text--size-16", "r-text--size-md-20", "r-text--size-lg-24"]
+ */
+export declare function getResponsiveClasses<T extends string | number>(value: ResponsiveValue<T> | undefined, prefix: string, defaultValue?: T): string[];