@ronnydrori/jupiter-ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,396 @@
+import { ButtonProps } from '@mantine/core';
+import { CheckboxProps } from '@mantine/core';
+import { CSSVariablesResolver } from '@mantine/core';
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MantineColorsTuple } from '@mantine/core';
+import { MantineTheme } from '@mantine/core';
+import { MantineThemeOverride } from '@mantine/core';
+import { ReactNode } from 'react';
+import { SelectProps } from '@mantine/core';
+import { StyledComponent } from '@emotion/styled';
+import { TextInputProps } from '@mantine/core';
+import { Theme } from '@emotion/react';
+
+export declare const borderRadius: Partial<Record<TokenScaleKey, string>>;
+
+export declare type BorderRadiusToken = keyof typeof borderRadius;
+
+export declare const borderStyle: {
+    readonly solid: "solid";
+    readonly dashed: "dashed";
+    readonly dotted: "dotted";
+    readonly none: "none";
+};
+
+export declare type BorderStyleToken = keyof typeof borderStyle;
+
+/**
+ * Border tokens for the Jupiter Design System
+ * Follows Mantine's approach - borders are not theme properties in Mantine v7
+ * Use these tokens directly in your components or via the 'bd' style prop
+ *
+ * @see https://mantine.dev/styles/style-props/
+ */
+export declare const borderWidth: {
+    readonly none: "0";
+    readonly thin: "1px";
+    readonly base: "1px";
+    readonly medium: "2px";
+    readonly thick: "4px";
+};
+
+export declare type BorderWidthToken = keyof typeof borderWidth;
+
+export declare const breakpoints: Partial<Record<TokenScaleKey, string>>;
+
+export declare type BreakpointToken = keyof typeof breakpoints;
+
+/**
+ * Button variant mappings from Jupiter semantic variants to Mantine variants
+ */
+export declare const buttonVariants: Record<JupiterVariant, ButtonProps['variant']>;
+
+/**
+ * Checkbox variant mappings from Jupiter semantic variants to Mantine variants
+ */
+export declare const checkboxVariants: Record<JupiterVariant, CheckboxProps['variant']>;
+
+export declare const colorScaleToTuple: (scale?: Record<string | number, string>) => MantineColorsTuple;
+
+/**
+ * Create Jupiter theme using only Mantine's theme structure
+ * All values come from design tokens - no hardcoded values
+ * Light/dark mode variations are handled via CSS variables
+ */
+export declare const createJupiterTheme: (colors: Record<string, Record<string | number, string>>) => MantineThemeOverride;
+
+/**
+ * CSS Variables resolver for light/dark mode specific values
+ * These variables will automatically switch based on the color scheme
+ */
+export declare const cssVariablesResolverFactory: (colors: Record<string, Record<string | number, string>>) => CSSVariablesResolver;
+
+export declare const darkShadows: Partial<Record<TokenScaleKey, string>>;
+
+export declare const fontFamily: {
+    readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+    readonly serif: "Georgia, Cambria, \"Times New Roman\", Times, serif";
+    readonly mono: "Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+};
+
+export declare type FontFamilyToken = keyof typeof fontFamily;
+
+export declare const fontSize: Partial<Record<TokenScaleKey, string>>;
+
+export declare type FontSizeToken = keyof typeof fontSize;
+
+export declare const fontWeight: {
+    readonly thin: 100;
+    readonly extralight: 200;
+    readonly light: 300;
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+    readonly extrabold: 800;
+    readonly black: 900;
+};
+
+export declare type FontWeightToken = keyof typeof fontWeight;
+
+/**
+ * Input variant mappings from Jupiter semantic variants to Mantine variants
+ */
+export declare const inputVariants: Record<JupiterVariant, TextInputProps['variant']>;
+
+export declare const JpButton: StyledComponent<Pick<Omit<JpButtonProps, "ref"> & default_2.RefAttributes<HTMLButtonElement>, "autoContrast" | "radius" | "fontWeight" | "fontSize" | "classNames" | "styles" | "vars" | "children" | "ref" | "variant" | "gradient" | "leftSection" | "rightSection" | "disabled" | "size" | "style" | "p" | "td" | "key" | "height" | "type" | "width" | "className" | "color" | "onClick" | "unstyled" | "data-disabled" | "justify" | "fullWidth" | "loading" | "loaderProps" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "m" | "my" | "mx" | "mt" | "mb" | "ms" | "me" | "ml" | "mr" | "py" | "px" | "pt" | "pb" | "ps" | "pe" | "pl" | "pr" | "bd" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "top" | "left" | "bottom" | "right" | "inset" | "display" | "flex" | "padding" | "margin" | "asChild"> & {
+theme?: Theme;
+}, {}, {}>;
+
+export declare interface JpButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
+    size?: BreakpointToken;
+    variant?: JupiterVariant;
+    onClick?: default_2.MouseEventHandler<HTMLButtonElement>;
+    /** Alias for fz (font size) */
+    fontSize?: ButtonProps['fz'];
+    /** Alias for fw (font weight) */
+    fontWeight?: ButtonProps['fw'];
+    /** Alias for w (width) */
+    width?: ButtonProps['w'];
+    /** Alias for h (height) */
+    height?: ButtonProps['h'];
+    /** Alias for p (padding) */
+    padding?: ButtonProps['p'];
+    /** Alias for m (margin) */
+    margin?: ButtonProps['m'];
+    /**
+     * Button type (submit, button, reset)
+     */
+    type?: default_2.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    ref?: default_2.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+}
+
+/**
+ * Jupiter theme extends MantineTheme with typed 'other' property
+ */
+export declare interface JupiterTheme extends MantineTheme {
+}
+
+export declare const JupiterThemeProvider: ({ children, defaultMode, colors, }: JupiterThemeProviderProps) => JSX_2.Element;
+
+export declare interface JupiterThemeProviderProps {
+    children: ReactNode;
+    defaultMode?: ThemeMode;
+    colors: Record<string, Record<string | number, string>>;
+}
+
+/**
+ * Jupiter semantic variants that describe intent
+ */
+export declare type JupiterVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+
+export declare const letterSpacing: {
+    readonly tighter: "-0.05em";
+    readonly tight: "-0.025em";
+    readonly normal: "0em";
+    readonly wide: "0.025em";
+    readonly wider: "0.05em";
+    readonly widest: "0.1em";
+};
+
+export declare type LetterSpacingToken = keyof typeof letterSpacing;
+
+export declare const lineHeight: {
+    readonly none: "1";
+    readonly tight: "1.25";
+    readonly snug: "1.375";
+    readonly normal: "1.5";
+    readonly relaxed: "1.625";
+    readonly loose: "2";
+};
+
+export declare type LineHeightToken = keyof typeof lineHeight;
+
+/**
+ * Select variant mappings from Jupiter semantic variants to Mantine variants
+ */
+export declare const selectVariants: Record<JupiterVariant, SelectProps['variant']>;
+
+export declare const semanticSpacing: Partial<Record<TokenScaleKey, string>>;
+
+export declare type SemanticSpacingToken = keyof typeof semanticSpacing;
+
+export declare const shadows: Partial<Record<TokenScaleKey, string>>;
+
+export declare type ShadowToken = keyof typeof shadows;
+
+export declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 7: "28px";
+    readonly 8: "32px";
+    readonly 9: "36px";
+};
+
+export declare type SpacingToken = keyof typeof spacing;
+
+export declare const textStyles: {
+    readonly h1: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 700;
+        readonly lineHeight: "1.25";
+        readonly letterSpacing: "-0.025em";
+    };
+    readonly h2: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 700;
+        readonly lineHeight: "1.25";
+        readonly letterSpacing: "-0.025em";
+    };
+    readonly h3: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 600;
+        readonly lineHeight: "1.375";
+        readonly letterSpacing: "0em";
+    };
+    readonly h4: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 600;
+        readonly lineHeight: "1.375";
+        readonly letterSpacing: "0em";
+    };
+    readonly h5: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 600;
+        readonly lineHeight: "1.5";
+        readonly letterSpacing: "0em";
+    };
+    readonly h6: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 600;
+        readonly lineHeight: "1.5";
+        readonly letterSpacing: "0em";
+    };
+    readonly body: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 400;
+        readonly lineHeight: "1.5";
+        readonly letterSpacing: "0em";
+    };
+    readonly bodySmall: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 400;
+        readonly lineHeight: "1.5";
+        readonly letterSpacing: "0em";
+    };
+    readonly caption: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 400;
+        readonly lineHeight: "1.5";
+        readonly letterSpacing: "0.025em";
+    };
+    readonly button: {
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 500;
+        readonly lineHeight: "1";
+        readonly letterSpacing: "0.025em";
+    };
+    readonly code: {
+        readonly fontFamily: "Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+        readonly fontSize: string | undefined;
+        readonly fontWeight: 400;
+        readonly lineHeight: "1.5";
+    };
+};
+
+export declare type TextStyleToken = keyof typeof textStyles;
+
+declare interface ThemeContextValue {
+    mode: ThemeMode;
+    toggleMode: () => void;
+    setMode: (mode: ThemeMode) => void;
+}
+
+declare type ThemeMode = 'light' | 'dark';
+
+declare type TokenScaleKey = 'none' | 'inner' | 'outline' | 'full' | 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+
+export declare function usePalette(projectName: string): {
+    primary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+    };
+    secondary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+    };
+    neutral: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        "950": string;
+    };
+    success: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+    };
+    warning: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+    };
+    error: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+    };
+    info: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+    };
+    general: {
+        white: string;
+        black: string;
+        transparent: string;
+    };
+};
+
+export declare function useThemeContext(): ThemeContextValue;
+
+export declare const zIndex: {
+    readonly hide: -1;
+    readonly base: 0;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly fixed: 1200;
+    readonly modalBackdrop: 1300;
+    readonly modal: 1400;
+    readonly popover: 1500;
+    readonly tooltip: 1600;
+    readonly notification: 1700;
+    readonly max: 9999;
+};
+
+export declare type ZIndexToken = keyof typeof zIndex;
+
+export { }