@nimbus-ds/styles 9.18.0-rc.1 → 9.19.0-rc.1

package/dist/index.d.ts

@@ -13,6 +13,35 @@ export interface ThemeProviderContextProps {
 	currentTheme: Theme;
 }
 export declare const useTheme: () => ThemeProviderContextProps;
+/**
+ * Creates a linear gradient with flexible direction and multiple color stops
+ * @param direction - The direction of the gradient (e.g., "180deg", "to right", "45deg")
+ * @param colorStops - Variable number of color stops (e.g., "red", "blue 50%", "rgba(0,255,0,0.8)")
+ * @returns CSS linear-gradient string
+ *
+ * @example
+ * createLinearGradient("180deg", "red", "blue")
+ * createLinearGradient("to right", "red 0%", "yellow 50%", "blue 100%")
+ * createLinearGradient("45deg", "rgba(255,0,0,0.5)", "transparent")
+ */
+export declare const createLinearGradient: (direction: string, ...colorStops: string[]) => string;
+/**
+ * Creates a border gradient with a fallback background color.
+ * @param gradient - The gradient to use for the border. Commonly the return value of createLinearGradient function.
+ * @param backgroundColor - The background color to use for the fallback.
+ * @returns An array with the fallback background color and the border gradient.
+ * @example Use case with vanilla-extract:
+ * ```ts
+ * const variants = vanillaStyle({
+ *   background: createBorderGradient(gradients.aiGradient, "white"),
+ *   border: `${varsThemeBase.shape.border.width[2]} solid transparent`, // Defines the gradient width, and makes the border transparent to ensure the gradient is visible.
+ * });
+ * ```
+ */
+export declare const createBorderGradient: (gradient: string, backgroundColor: string) => [
+	string,
+	string
+];
 export declare const badge: {
 	classnames: {
 		surface: Record<"primary" | "success" | "warning" | "danger" | "neutral", string>;
@@ -2901,7 +2930,7 @@ export declare const checkbox: {
 };
 export declare const chip: {
 	classnames: {
-		base: string;
+		appearance: Record<"neutral", string>;
 		chip_close_icon_container: string;
 	};
 };
@@ -3113,7 +3142,7 @@ export declare const input: {
 		input: string;
 		container: string;
 		container__icon: string;
-		container__icon_append: Record<"end" | "start", string>;
+		container__icon_append: Record<"start" | "end", string>;
 		container__button: string;
 		appearance: Record<"success" | "warning" | "danger" | "neutral", string>;
 	};