syntra-ui 0.1.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/components/button/Button.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PolymorphicComponent } from '../../primitives/polymorphic';
+import { SyntraStyleProps } from '../../primitives/style-props';
+import { ButtonVariant, ButtonSize, ButtonColorScheme } from './button.styles';
+interface ButtonOwnProps extends SyntraStyleProps {
+    variant?: ButtonVariant;
+    colorScheme?: ButtonColorScheme;
+    size?: ButtonSize;
+    loading?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    leftSection?: ReactNode;
+    rightSection?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Button: PolymorphicComponent<"button", ButtonOwnProps>;
+export { Button };
+export type { ButtonOwnProps };

package/dist/components/button/button.styles.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft' | 'link';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonColorScheme = 'primary' | 'neutral' | 'danger' | (string & {});
+declare const BUTTON_CSS = "\n.syntra-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n  user-select: none;\n  vertical-align: middle;\n  cursor: pointer;\n  font-family: inherit;\n  font-weight: var(--_btn-fw);\n  font-size: var(--_btn-fz);\n  height: var(--_btn-h);\n  padding-left: var(--_btn-px);\n  padding-right: var(--_btn-px);\n  gap: var(--_btn-gap);\n  border-radius: var(--_btn-radius);\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n  border: 1px solid var(--_btn-border, transparent);\n  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;\n  text-decoration: none;\n  outline: none;\n}\n.syntra-button:hover:not(:disabled):not([data-loading]) {\n  background: var(--_btn-bg-hover);\n  border-color: var(--_btn-border-hover, transparent);\n  color: var(--_btn-color-hover, var(--_btn-color));\n}\n.syntra-button:active:not(:disabled):not([data-loading]) {\n  background: var(--_btn-bg-active);\n}\n.syntra-button:focus-visible {\n  outline: 2px solid var(--_btn-ring);\n  outline-offset: 2px;\n}\n.syntra-button:disabled,\n.syntra-button[data-loading] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.syntra-button[data-loading] {\n  cursor: wait;\n  pointer-events: none;\n}\n.syntra-button[data-full-width] {\n  width: 100%;\n}\n.syntra-button[data-variant=\"link\"] {\n  height: auto;\n  padding-left: 0;\n  padding-right: 0;\n  background: transparent;\n  border-color: transparent;\n}\n.syntra-button[data-variant=\"link\"]:hover:not(:disabled) {\n  text-decoration: underline;\n  background: transparent;\n}\n.syntra-button-label[data-loading] {\n  opacity: 0;\n}\n.syntra-button-spinner {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n";
+declare function getButtonSizeStyles(size: ButtonSize): CSSProperties;
+declare function getButtonVariantStyles(variant: ButtonVariant, colorScheme: ButtonColorScheme): CSSProperties;
+export { BUTTON_CSS, getButtonSizeStyles, getButtonVariantStyles };
+export type { ButtonVariant, ButtonSize, ButtonColorScheme };

package/dist/components/button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonOwnProps } from './Button';
+export type { ButtonVariant, ButtonSize, ButtonColorScheme } from './button.styles';

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export { Button } from './button';
+export type { ButtonOwnProps, ButtonVariant, ButtonSize, ButtonColorScheme } from './button';
+export { Input } from './input';
+export type { InputOwnProps, InputProps, InputVariant, InputSize } from './input';
+export { Spinner } from './spinner';
+export type { SpinnerProps } from './spinner';

package/dist/components/input/Input.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, ReactNode, InputHTMLAttributes } from 'react';
+import { SyntraStyleProps } from '../../primitives/style-props';
+import { InputVariant, InputSize } from './input.styles';
+interface InputOwnProps extends SyntraStyleProps {
+    variant?: InputVariant;
+    size?: InputSize;
+    invalid?: boolean;
+    leftSection?: ReactNode;
+    rightSection?: ReactNode;
+    wrapperClassName?: string;
+    wrapperStyle?: CSSProperties;
+    className?: string;
+    style?: CSSProperties;
+}
+type InputProps = InputOwnProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof InputOwnProps>;
+declare const Input: import('react').ForwardRefExoticComponent<InputOwnProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof InputOwnProps> & import('react').RefAttributes<HTMLInputElement>>;
+export { Input };
+export type { InputOwnProps, InputProps };

package/dist/components/input/index.d.ts

@@ -0,0 +1,3 @@
+export { Input } from './Input';
+export type { InputOwnProps, InputProps } from './Input';
+export type { InputVariant, InputSize } from './input.styles';

package/dist/components/input/input.styles.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+type InputVariant = 'outline' | 'filled' | 'unstyled';
+type InputSize = 'xs' | 'sm' | 'md' | 'lg';
+declare const INPUT_CSS = "\n.syntra-input-wrapper {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  width: var(--_input-w, auto);\n  height: var(--_input-h);\n  padding-left: var(--_input-px);\n  padding-right: var(--_input-px);\n  gap: var(--_input-gap);\n  border-radius: var(--_input-radius);\n  background: var(--_input-bg);\n  border: 1px solid var(--_input-border, transparent);\n  font-family: inherit;\n  font-size: var(--_input-fz);\n  transition: border-color 150ms ease, box-shadow 150ms ease;\n}\n.syntra-input-wrapper:focus-within:not([data-disabled]):not([data-variant=\"unstyled\"]) {\n  border-color: var(--_input-focus-border);\n  box-shadow: 0 0 0 1px var(--_input-focus-border);\n}\n.syntra-input-wrapper[data-invalid]:not([data-disabled]) {\n  border-color: var(--_input-invalid-border);\n}\n.syntra-input-wrapper[data-invalid]:focus-within:not([data-disabled]) {\n  border-color: var(--_input-invalid-border);\n  box-shadow: 0 0 0 1px var(--_input-invalid-border);\n}\n.syntra-input-wrapper[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.syntra-input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  padding: 0;\n}\n.syntra-input::placeholder {\n  color: var(--syntra-color-foreground-muted);\n}\n.syntra-input:disabled {\n  cursor: not-allowed;\n}\n.syntra-input-section {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--syntra-color-foreground-muted);\n}\n";
+declare function getInputSizeStyles(size: InputSize): CSSProperties;
+declare function getInputVariantStyles(variant: InputVariant): CSSProperties;
+export { INPUT_CSS, getInputSizeStyles, getInputVariantStyles };
+export type { InputVariant, InputSize };

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+interface SpinnerProps {
+    size?: number | string;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Spinner({ size, color, className, style }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Spinner {
+    var displayName: string;
+}
+export { Spinner };
+export type { SpinnerProps };

package/dist/components/spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';

package/dist/defaults/borders.d.ts

@@ -0,0 +1,2 @@
+import { SyntraBorderRadius } from '../types';
+export declare const borderRadius: SyntraBorderRadius;

package/dist/defaults/colors.d.ts

@@ -0,0 +1,3 @@
+import { SyntraColors } from '../types';
+export declare const lightColors: SyntraColors;
+export declare const darkColors: SyntraColors;

package/dist/defaults/shadows.d.ts

@@ -0,0 +1,3 @@
+import { SyntraShadows } from '../types';
+export declare const lightShadows: SyntraShadows;
+export declare const darkShadows: SyntraShadows;

package/dist/defaults/spacing.d.ts

@@ -0,0 +1,2 @@
+import { SyntraSpacing } from '../types';
+export declare const spacing: SyntraSpacing;

package/dist/defaults/theme.d.ts

@@ -0,0 +1,3 @@
+import { SyntraTheme } from '../types';
+export declare const defaultLightTheme: SyntraTheme;
+export declare const defaultDarkTheme: SyntraTheme;

package/dist/defaults/transitions.d.ts

@@ -0,0 +1,2 @@
+import { SyntraTransitions } from '../types';
+export declare const transitions: SyntraTransitions;

package/dist/defaults/typography.d.ts

@@ -0,0 +1,2 @@
+import { SyntraTypography } from '../types';
+export declare const typography: SyntraTypography;

package/dist/hooks/useSyntra.d.ts

@@ -0,0 +1,2 @@
+import { SyntraContextValue } from '../types';
+export declare function useSyntra(): SyntraContextValue;

package/dist/hooks/useSyntraMode.d.ts

@@ -0,0 +1,2 @@
+import { ResolvedMode, SyntraMode } from '../types';
+export declare function useSyntraMode(): [ResolvedMode, (mode: SyntraMode) => void];

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { SyntraProvider } from './provider/SyntraProvider';
+export type { SyntraProviderProps } from './provider/SyntraProvider';
+export { useSyntra } from './hooks/useSyntra';
+export { useSyntraMode } from './hooks/useSyntraMode';
+export { Box, Text, Heading, Flex, Stack, Grid, Divider, VisuallyHidden, resolveStyleProps, extractStyleProps, } from './primitives';
+export type { BoxOwnProps, TextOwnProps, HeadingOwnProps, HeadingLevel, FlexOwnProps, StackOwnProps, GridOwnProps, DividerOwnProps, VisuallyHiddenOwnProps, SyntraStyleProps, SpaceProp, RadiusProp, ShadowProp, PolymorphicProps, PolymorphicPropsWithRef, PolymorphicComponent, } from './primitives';
+export { Button, Input, Spinner } from './components';
+export type { ButtonOwnProps, ButtonVariant, ButtonSize, ButtonColorScheme, InputOwnProps, InputProps, InputVariant, InputSize, SpinnerProps, } from './components';
+export { cn } from './utils/cn';
+export { createSyntraTheme } from './utils/createSyntraTheme';
+export { generateColorScale } from './utils/colorScale';
+export { deepMerge } from './utils/deepMerge';
+export { defaultLightTheme, defaultDarkTheme } from './defaults/theme';
+export { lightColors, darkColors } from './defaults/colors';
+export type { SyntraTheme, SyntraThemeInput, SyntraConfigInput, SyntraContextValue, SyntraMode, ResolvedMode, SyntraColors, SyntraColorsInput, ColorScale, GrayScale, SemanticColor, ColorInput, SyntraTypography, SyntraSpacing, SyntraBorderRadius, SyntraShadows, SyntraTransitions, DeepPartial, } from './types';

package/dist/primitives/Box.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import { PolymorphicComponent } from './polymorphic';
+import { SyntraStyleProps } from './style-props';
+interface BoxOwnProps extends SyntraStyleProps {
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Box: PolymorphicComponent<"div", BoxOwnProps>;
+export { Box };
+export type { BoxOwnProps };

package/dist/primitives/Divider.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+import { PolymorphicComponent } from './polymorphic';
+import { SyntraStyleProps } from './style-props';
+interface DividerOwnProps extends SyntraStyleProps {
+    className?: string;
+    style?: CSSProperties;
+    orientation?: 'horizontal' | 'vertical';
+    color?: string;
+    thickness?: string | number;
+    decorative?: boolean;
+}
+declare const Divider: PolymorphicComponent<"div", DividerOwnProps>;
+export { Divider };
+export type { DividerOwnProps };

package/dist/primitives/Flex.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { PolymorphicComponent } from './polymorphic';
+import { SyntraStyleProps, SpaceProp } from './style-props';
+interface FlexOwnProps extends SyntraStyleProps {
+    className?: string;
+    style?: CSSProperties;
+    direction?: CSSProperties['flexDirection'];
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+    wrap?: CSSProperties['flexWrap'];
+    gap?: SpaceProp;
+    gapX?: SpaceProp;
+    gapY?: SpaceProp;
+    inline?: boolean;
+}
+declare const Flex: PolymorphicComponent<"div", FlexOwnProps>;
+export { Flex };
+export type { FlexOwnProps };

package/dist/primitives/Grid.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { PolymorphicComponent } from './polymorphic';
+import { SyntraStyleProps, SpaceProp } from './style-props';
+interface GridOwnProps extends SyntraStyleProps {
+    className?: string;
+    style?: CSSProperties;
+    columns?: number | string;
+    rows?: number | string;
+    gap?: SpaceProp;
+    gapX?: SpaceProp;
+    gapY?: SpaceProp;
+    areas?: string;
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+    inline?: boolean;
+}
+declare const Grid: PolymorphicComponent<"div", GridOwnProps>;
+export { Grid };
+export type { GridOwnProps };

package/dist/primitives/Heading.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { PolymorphicComponent } from './polymorphic';
+import { SyntraStyleProps, FontSizeProp, FontWeightProp, LetterSpacingProp } from './style-props';
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface HeadingOwnProps extends SyntraStyleProps {
+    className?: string;
+    style?: CSSProperties;
+    level?: HeadingLevel;
+    size?: FontSizeProp;
+    weight?: FontWeightProp;
+    tracking?: LetterSpacingProp;
+}
+declare const Heading: PolymorphicComponent<"h2", HeadingOwnProps>;
+export { Heading };
+export type { HeadingOwnProps, HeadingLevel };

package/dist/primitives/Stack.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { PolymorphicComponent } from './polymorphic';
+import { SyntraStyleProps, SpaceProp } from './style-props';
+interface StackOwnProps extends SyntraStyleProps {
+    className?: string;
+    style?: CSSProperties;
+    direction?: 'vertical' | 'horizontal';
+    gap?: SpaceProp;
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+    wrap?: CSSProperties['flexWrap'];
+}
+declare const Stack: PolymorphicComponent<"div", StackOwnProps>;
+export { Stack };
+export type { StackOwnProps };

package/dist/primitives/Text.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { PolymorphicComponent } from './polymorphic';
+import { SyntraStyleProps, FontSizeProp, FontWeightProp, LineHeightProp, LetterSpacingProp } from './style-props';
+interface TextOwnProps extends SyntraStyleProps {
+    className?: string;
+    style?: CSSProperties;
+    size?: FontSizeProp;
+    weight?: FontWeightProp;
+    lineHeight?: LineHeightProp;
+    tracking?: LetterSpacingProp;
+    align?: CSSProperties['textAlign'];
+    truncate?: boolean;
+    lineClamp?: number;
+    mono?: boolean;
+    italic?: boolean;
+}
+declare const Text: PolymorphicComponent<"span", TextOwnProps>;
+export { Text };
+export type { TextOwnProps };

package/dist/primitives/VisuallyHidden.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { PolymorphicComponent } from './polymorphic';
+interface VisuallyHiddenOwnProps {
+    className?: string;
+    style?: CSSProperties;
+}
+declare const VisuallyHidden: PolymorphicComponent<"span", VisuallyHiddenOwnProps>;
+export { VisuallyHidden };
+export type { VisuallyHiddenOwnProps };

package/dist/primitives/index.d.ts

@@ -0,0 +1,19 @@
+export { Box } from './Box';
+export { Text } from './Text';
+export { Heading } from './Heading';
+export { Flex } from './Flex';
+export { Stack } from './Stack';
+export { Grid } from './Grid';
+export { Divider } from './Divider';
+export { VisuallyHidden } from './VisuallyHidden';
+export { resolveStyleProps, extractStyleProps } from './style-props';
+export type { BoxOwnProps } from './Box';
+export type { TextOwnProps } from './Text';
+export type { HeadingOwnProps, HeadingLevel } from './Heading';
+export type { FlexOwnProps } from './Flex';
+export type { StackOwnProps } from './Stack';
+export type { GridOwnProps } from './Grid';
+export type { DividerOwnProps } from './Divider';
+export type { VisuallyHiddenOwnProps } from './VisuallyHidden';
+export type { SyntraStyleProps, SpaceProp, RadiusProp, ShadowProp } from './style-props';
+export type { PolymorphicProps, PolymorphicPropsWithRef, PolymorphicComponent } from './polymorphic';

package/dist/primitives/polymorphic.d.ts

@@ -0,0 +1,13 @@
+import { ElementType, ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement } from 'react';
+type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
+type PolymorphicProps<C extends ElementType, OwnProps = object> = OwnProps & {
+    as?: C;
+} & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps | 'as'>;
+type PolymorphicPropsWithRef<C extends ElementType, OwnProps = object> = PolymorphicProps<C, OwnProps> & {
+    ref?: PolymorphicRef<C>;
+};
+type PolymorphicComponent<DefaultElement extends ElementType, OwnProps = object> = {
+    <C extends ElementType = DefaultElement>(props: PolymorphicPropsWithRef<C, OwnProps>): ReactElement | null;
+    displayName?: string;
+};
+export type { PolymorphicRef, PolymorphicProps, PolymorphicPropsWithRef, PolymorphicComponent, };

package/dist/primitives/style-props.d.ts

@@ -0,0 +1,75 @@
+import { CSSProperties } from 'react';
+type SpaceToken = 'px' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24;
+type RadiusToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+type ShadowToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type SpaceProp = SpaceToken | (string & {});
+type RadiusProp = RadiusToken | (string & {});
+type ShadowProp = ShadowToken | (string & {});
+type SizeProp = string | number;
+type FontSizeToken = '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+type FontWeightToken = 'regular' | 'medium' | 'semibold' | 'bold';
+type LineHeightToken = 'tight' | 'normal' | 'relaxed';
+type LetterSpacingToken = 'tight' | 'normal' | 'wide';
+type FontSizeProp = FontSizeToken | (string & {});
+type FontWeightProp = FontWeightToken | (string & {});
+type LineHeightProp = LineHeightToken | (string & {});
+type LetterSpacingProp = LetterSpacingToken | (string & {});
+interface SyntraStyleProps {
+    p?: SpaceProp;
+    px?: SpaceProp;
+    py?: SpaceProp;
+    pt?: SpaceProp;
+    pr?: SpaceProp;
+    pb?: SpaceProp;
+    pl?: SpaceProp;
+    m?: SpaceProp;
+    mx?: SpaceProp;
+    my?: SpaceProp;
+    mt?: SpaceProp;
+    mr?: SpaceProp;
+    mb?: SpaceProp;
+    ml?: SpaceProp;
+    gap?: SpaceProp;
+    gapX?: SpaceProp;
+    gapY?: SpaceProp;
+    w?: SizeProp;
+    h?: SizeProp;
+    minW?: SizeProp;
+    minH?: SizeProp;
+    maxW?: SizeProp;
+    maxH?: SizeProp;
+    display?: CSSProperties['display'];
+    position?: CSSProperties['position'];
+    overflow?: CSSProperties['overflow'];
+    inset?: SizeProp;
+    top?: SizeProp;
+    right?: SizeProp;
+    bottom?: SizeProp;
+    left?: SizeProp;
+    bg?: string;
+    color?: string;
+    opacity?: CSSProperties['opacity'];
+    radius?: RadiusProp;
+    shadow?: ShadowProp;
+    border?: string;
+    borderColor?: string;
+    borderWidth?: SizeProp;
+    flex?: CSSProperties['flex'];
+    flexGrow?: CSSProperties['flexGrow'];
+    flexShrink?: CSSProperties['flexShrink'];
+    flexBasis?: CSSProperties['flexBasis'];
+    alignSelf?: CSSProperties['alignSelf'];
+    justifySelf?: CSSProperties['justifySelf'];
+}
+declare function resolveFontSize(value: string, prefix: string): string;
+declare function resolveFontWeight(value: string, prefix: string): string;
+declare function resolveLineHeight(value: string, prefix: string): string;
+declare function resolveLetterSpacing(value: string, prefix: string): string;
+declare function resolveStyleProps(props: SyntraStyleProps, prefix?: string): CSSProperties;
+declare function extractStyleProps<T extends Record<string, unknown>>(props: T): {
+    styleProps: SyntraStyleProps;
+    rest: Record<string, unknown>;
+};
+export { resolveStyleProps, extractStyleProps };
+export { resolveFontSize, resolveFontWeight, resolveLineHeight, resolveLetterSpacing };
+export type { SyntraStyleProps, SpaceProp, RadiusProp, ShadowProp, SizeProp, FontSizeProp, FontWeightProp, LineHeightProp, LetterSpacingProp, };

package/dist/provider/SyntraContext.d.ts

@@ -0,0 +1,2 @@
+import { SyntraContextValue } from '../types';
+export declare const SyntraContext: import('react').Context<SyntraContextValue | null>;

package/dist/provider/SyntraProvider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SyntraMode, SyntraThemeInput } from '../types';
+export interface SyntraProviderProps {
+    theme?: SyntraThemeInput;
+    darkTheme?: SyntraThemeInput;
+    mode?: SyntraMode;
+    cssVarPrefix?: string;
+    children: ReactNode;
+}
+export declare function SyntraProvider({ theme: themeInput, darkTheme: darkThemeInput, mode: initialMode, cssVarPrefix, children, }: SyntraProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/provider/cssVars.d.ts

@@ -0,0 +1,6 @@
+import { SyntraTheme } from '../types';
+type FlattenResult = Record<string, string>;
+export declare function themeToCssVars(theme: SyntraTheme, prefix?: string): FlattenResult;
+export declare function injectCssVars(theme: SyntraTheme, prefix?: string, element?: HTMLElement): void;
+export declare function removeCssVars(prefix?: string, element?: HTMLElement): void;
+export {};