stoop 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +142 -51
  3. package/dist/api/create-theme.d.ts +13 -0
  4. package/dist/api/css.d.ts +16 -0
  5. package/dist/api/global-css.d.ts +18 -0
  6. package/dist/api/keyframes.d.ts +16 -0
  7. package/dist/api/provider.d.ts +19 -0
  8. package/dist/api/styled.d.ts +41 -0
  9. package/dist/api/use-theme.d.ts +13 -0
  10. package/dist/constants.d.ts +21 -0
  11. package/dist/core/cache.d.ts +39 -0
  12. package/dist/core/compiler.d.ts +19 -0
  13. package/dist/core/theme-manager.d.ts +30 -0
  14. package/dist/core/variants.d.ts +15 -0
  15. package/dist/create-stoop.d.ts +12 -0
  16. package/dist/index.d.ts +6 -6
  17. package/dist/index.js +13 -156
  18. package/dist/inject/browser.d.ts +59 -0
  19. package/dist/inject/dedup.d.ts +29 -0
  20. package/dist/inject/index.d.ts +41 -0
  21. package/dist/inject/ssr.d.ts +28 -0
  22. package/dist/types/index.d.ts +141 -0
  23. package/dist/types/react-polymorphic-types.d.ts +17 -0
  24. package/dist/utils/string.d.ts +102 -0
  25. package/dist/utils/theme-map.d.ts +25 -0
  26. package/dist/utils/theme-validation.d.ts +13 -0
  27. package/dist/utils/theme.d.ts +43 -0
  28. package/dist/utils/type-guards.d.ts +26 -0
  29. package/dist/utils/utilities.d.ts +14 -0
  30. package/package.json +65 -41
  31. package/dist/components/Badge/index.d.ts +0 -13
  32. package/dist/components/Badge/styles.d.ts +0 -3
  33. package/dist/components/Badge/types.d.ts +0 -13
  34. package/dist/components/Button/index.d.ts +0 -14
  35. package/dist/components/Button/styles.d.ts +0 -6
  36. package/dist/components/Button/types.d.ts +0 -22
  37. package/dist/components/Card/index.d.ts +0 -14
  38. package/dist/components/Card/styles.d.ts +0 -16
  39. package/dist/components/Card/types.d.ts +0 -18
  40. package/dist/components/Input/index.d.ts +0 -13
  41. package/dist/components/Input/styles.d.ts +0 -3
  42. package/dist/components/Input/types.d.ts +0 -8
  43. package/dist/components/Menu/index.d.ts +0 -13
  44. package/dist/components/Menu/styles.d.ts +0 -9
  45. package/dist/components/Menu/types.d.ts +0 -26
  46. package/dist/components/Modal/index.d.ts +0 -14
  47. package/dist/components/Modal/styles.d.ts +0 -14
  48. package/dist/components/Modal/types.d.ts +0 -18
  49. package/dist/components/Popover/index.d.ts +0 -13
  50. package/dist/components/Popover/styles.d.ts +0 -4
  51. package/dist/components/Popover/types.d.ts +0 -16
  52. package/dist/components/Provider/GlobalStyles.d.ts +0 -10
  53. package/dist/components/Provider/StoopProvider.d.ts +0 -41
  54. package/dist/components/Provider/index.d.ts +0 -2
  55. package/dist/components/Section/index.d.ts +0 -15
  56. package/dist/components/Section/styles.d.ts +0 -5
  57. package/dist/components/Section/types.d.ts +0 -20
  58. package/dist/components/Select/index.d.ts +0 -13
  59. package/dist/components/Select/styles.d.ts +0 -7
  60. package/dist/components/Select/types.d.ts +0 -30
  61. package/dist/components/Stack/index.d.ts +0 -16
  62. package/dist/components/Stack/styles.d.ts +0 -10
  63. package/dist/components/Stack/types.d.ts +0 -42
  64. package/dist/components/Tabs/index.d.ts +0 -13
  65. package/dist/components/Tabs/styles.d.ts +0 -8
  66. package/dist/components/Tabs/types.d.ts +0 -20
  67. package/dist/components/Text/index.d.ts +0 -14
  68. package/dist/components/Text/styles.d.ts +0 -4
  69. package/dist/components/Text/types.d.ts +0 -21
  70. package/dist/components/Textarea/index.d.ts +0 -15
  71. package/dist/components/Textarea/styles.d.ts +0 -3
  72. package/dist/components/Textarea/types.d.ts +0 -10
  73. package/dist/components/index.d.ts +0 -27
  74. package/dist/hooks/index.d.ts +0 -5
  75. package/dist/hooks/useBreakpoints.d.ts +0 -14
  76. package/dist/hooks/useEventListener.d.ts +0 -6
  77. package/dist/hooks/useFloating.d.ts +0 -18
  78. package/dist/hooks/useOutsideClick.d.ts +0 -6
  79. package/dist/hooks/usePortal.d.ts +0 -9
  80. package/dist/styles/compiler.d.ts +0 -25
  81. package/dist/styles/index.d.ts +0 -2
  82. package/dist/styles/theme.d.ts +0 -495
  83. package/dist/styles/types.d.ts +0 -66
@@ -0,0 +1,141 @@
1
+ /**
2
+ * Core TypeScript type definitions for Stoop.
3
+ * Defines CSS objects, themes, variants, styled components, and instance types.
4
+ */
5
+ import type { ComponentType, ElementType, JSX, ReactNode } from "react";
6
+ import type { PolymorphicPropsWithRef } from "react-polymorphic-types";
7
+ import type { createTheme } from "../api/create-theme";
8
+ import type { createCSSFunction } from "../api/css";
9
+ import type { createGlobalCSSFunction } from "../api/global-css";
10
+ import type { createKeyframesFunction } from "../api/keyframes";
11
+ import type { createStyledFunction } from "../api/styled";
12
+ export type CSSPropertyValue = string | number;
13
+ export interface StyledComponentRef {
14
+ readonly __stoopClassName: string;
15
+ readonly __isStoopStyled: true;
16
+ toString(): string;
17
+ }
18
+ export interface CSS {
19
+ [property: string]: CSSPropertyValue | CSS | Variants | unknown[] | undefined;
20
+ }
21
+ export interface Variants {
22
+ [variantName: string]: {
23
+ [variantValue: string]: CSS;
24
+ };
25
+ }
26
+ export interface VariantProps {
27
+ [variantName: string]: string | number | boolean | undefined;
28
+ }
29
+ export type HTMLElements = keyof JSX.IntrinsicElements;
30
+ export type StylableElement = HTMLElements | ElementType;
31
+ export interface StyledBaseProps {
32
+ css?: CSS;
33
+ }
34
+ export type UtilityFunction = (value: CSSPropertyValue | CSS | undefined) => CSS;
35
+ /**
36
+ * Theme scale type - represents valid keys from DefaultTheme.
37
+ * Used for type-safe theme scale references throughout the codebase.
38
+ */
39
+ export type ThemeScale = keyof DefaultTheme;
40
+ /**
41
+ * Theme interface - strictly enforces only these 12 approved scales.
42
+ * Custom theme scales are NOT allowed.
43
+ * Media queries are also supported as part of the theme.
44
+ */
45
+ export interface DefaultTheme {
46
+ colors?: Record<string, string>;
47
+ opacities?: Record<string, string | number>;
48
+ space?: Record<string, string>;
49
+ radii?: Record<string, string>;
50
+ sizes?: Record<string, string>;
51
+ fonts?: Record<string, string>;
52
+ fontWeights?: Record<string, string | number>;
53
+ fontSizes?: Record<string, string>;
54
+ letterSpacings?: Record<string, string>;
55
+ shadows?: Record<string, string>;
56
+ zIndices?: Record<string, string | number>;
57
+ transitions?: Record<string, string>;
58
+ media?: Record<string, string>;
59
+ }
60
+ /**
61
+ * Theme type - strictly enforces DefaultTheme structure.
62
+ * No custom scales are allowed.
63
+ */
64
+ export type Theme = DefaultTheme;
65
+ export interface StoopConfig {
66
+ theme: DefaultTheme;
67
+ themes?: Record<string, DefaultTheme>;
68
+ media?: Record<string, string>;
69
+ utils?: Record<string, UtilityFunction>;
70
+ prefix?: string;
71
+ themeMap?: Record<string, ThemeScale>;
72
+ }
73
+ export type VariantKeys<T extends Variants> = keyof T;
74
+ export type VariantPropsFromConfig<T extends Variants> = {
75
+ [K in VariantKeys<T>]?: keyof T[K] | boolean | number;
76
+ };
77
+ type StyledOwnProps<VariantsConfig extends Variants> = StyledBaseProps & (VariantsConfig extends Record<string, never> ? {} : VariantPropsFromConfig<VariantsConfig>);
78
+ export type StyledComponentProps<DefaultElement extends ElementType, VariantsConfig extends Variants = {}> = PolymorphicPropsWithRef<StyledOwnProps<VariantsConfig>, DefaultElement>;
79
+ export interface ThemeContextValue {
80
+ theme: Theme;
81
+ themeName?: string;
82
+ }
83
+ export interface ThemeManagementContextValue {
84
+ theme: Theme;
85
+ themeName: string;
86
+ setTheme: (themeName: string) => void;
87
+ toggleTheme: () => void;
88
+ availableThemes: readonly string[];
89
+ }
90
+ export interface GetCssTextOptions {
91
+ theme?: Theme;
92
+ includeThemeVars?: boolean;
93
+ }
94
+ export interface ProviderProps {
95
+ children: ReactNode;
96
+ defaultTheme?: string;
97
+ storageKey?: string;
98
+ attribute?: string;
99
+ }
100
+ export interface StoopInstance {
101
+ styled: ReturnType<typeof createStyledFunction>;
102
+ css: ReturnType<typeof createCSSFunction>;
103
+ createTheme: ReturnType<typeof createTheme>;
104
+ globalCss: ReturnType<typeof createGlobalCSSFunction>;
105
+ keyframes: ReturnType<typeof createKeyframesFunction>;
106
+ theme: DefaultTheme;
107
+ /**
108
+ * Gets all generated CSS text for server-side rendering.
109
+ * Always includes theme CSS variables.
110
+ *
111
+ * @param theme - Optional theme (name or object) to include vars for (defaults to default theme)
112
+ * @returns CSS text string with theme variables and component styles
113
+ */
114
+ getCssText: (theme?: string | Theme) => string;
115
+ config: StoopConfig;
116
+ /**
117
+ * Pre-compiles CSS objects to warm the cache.
118
+ * Useful for eliminating FOUC by pre-compiling common styles.
119
+ *
120
+ * @param styles - Array of CSS objects to pre-compile
121
+ */
122
+ warmCache: (styles: CSS[]) => void;
123
+ /**
124
+ * Preloads a theme by injecting its CSS variables before React renders.
125
+ * Useful for preventing FOUC when loading a non-default theme from localStorage.
126
+ *
127
+ * @param theme - Theme to preload (theme name string or Theme object)
128
+ */
129
+ preloadTheme: (theme: string | Theme) => void;
130
+ /**
131
+ * Provider component for managing theme state and updates.
132
+ * Only available if themes were provided in createStoop config.
133
+ */
134
+ Provider?: ComponentType<ProviderProps>;
135
+ /**
136
+ * Hook to access theme management context.
137
+ * Only available if themes were provided in createStoop config.
138
+ */
139
+ useTheme?: () => ThemeManagementContextValue;
140
+ }
141
+ export {};
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Type declaration for react-polymorphic-types to work around package.json exports issue.
3
+ */
4
+
5
+ declare module "react-polymorphic-types" {
6
+ import type { ElementType, ComponentPropsWithRef, ComponentPropsWithoutRef } from "react";
7
+
8
+ export type PolymorphicPropsWithRef<
9
+ OwnProps,
10
+ DefaultElement extends ElementType,
11
+ > = OwnProps & ComponentPropsWithRef<DefaultElement>;
12
+
13
+ export type PolymorphicPropsWithoutRef<
14
+ OwnProps,
15
+ DefaultElement extends ElementType,
16
+ > = OwnProps & ComponentPropsWithoutRef<DefaultElement>;
17
+ }
@@ -0,0 +1,102 @@
1
+ /**
2
+ * String utility functions.
3
+ * Provides hashing for class name generation, camelCase to kebab-case conversion,
4
+ * and CSS sanitization utilities for security.
5
+ */
6
+ /**
7
+ * Generates a hash string from an input string.
8
+ *
9
+ * @param str - String to hash
10
+ * @returns Hashed string
11
+ */
12
+ export declare function hash(str: string): string;
13
+ /**
14
+ * Generates a hash string from an object by stringifying it.
15
+ *
16
+ * @param obj - Object to hash
17
+ * @returns Hashed string
18
+ */
19
+ export declare function hashObject(obj: unknown): string;
20
+ /**
21
+ * Converts a camelCase string to kebab-case.
22
+ *
23
+ * @param str - String to convert
24
+ * @returns Kebab-case string
25
+ */
26
+ export declare function toKebabCase(str: string): string;
27
+ /**
28
+ * Escapes CSS property values to prevent injection attacks.
29
+ * Escapes quotes, semicolons, and other special characters.
30
+ *
31
+ * @param value - Value to escape
32
+ * @returns Escaped value string
33
+ */
34
+ export declare function escapeCSSValue(value: string | number): string;
35
+ /**
36
+ * Validates and sanitizes CSS selectors to prevent injection attacks.
37
+ * Only allows safe selector characters. Returns empty string for invalid selectors.
38
+ *
39
+ * @param selector - Selector to sanitize
40
+ * @returns Sanitized selector string or empty string if invalid
41
+ */
42
+ export declare function sanitizeCSSSelector(selector: string): string;
43
+ /**
44
+ * Validates and sanitizes CSS variable names to prevent injection attacks.
45
+ * CSS custom properties must start with -- and contain only valid characters.
46
+ *
47
+ * @param name - Variable name to sanitize
48
+ * @returns Sanitized variable name
49
+ */
50
+ export declare function sanitizeCSSVariableName(name: string): string;
51
+ /**
52
+ * Escapes CSS variable values to prevent injection attacks.
53
+ *
54
+ * @param value - Value to escape
55
+ * @returns Escaped value string
56
+ */
57
+ export declare function escapeCSSVariableValue(value: string | number): string;
58
+ /**
59
+ * Sanitizes prefix for use in CSS selectors and class names.
60
+ * Only allows alphanumeric characters, hyphens, and underscores.
61
+ *
62
+ * @param prefix - Prefix to sanitize
63
+ * @returns Sanitized prefix string
64
+ */
65
+ export declare function sanitizePrefix(prefix: string): string;
66
+ /**
67
+ * Escapes prefix for use in CSS attribute selectors.
68
+ *
69
+ * @param prefix - Prefix to escape
70
+ * @returns Escaped prefix string
71
+ */
72
+ export declare function escapePrefixForSelector(prefix: string): string;
73
+ /**
74
+ * Sanitizes media query strings to prevent injection attacks.
75
+ * Only allows safe characters for media queries.
76
+ *
77
+ * @param mediaQuery - Media query string to sanitize
78
+ * @returns Sanitized media query string or empty string if invalid
79
+ */
80
+ export declare function sanitizeMediaQuery(mediaQuery: string): string;
81
+ /**
82
+ * Sanitizes CSS class names to prevent injection attacks.
83
+ * Only allows valid CSS class name characters.
84
+ *
85
+ * @param className - Class name(s) to sanitize
86
+ * @returns Sanitized class name string
87
+ */
88
+ export declare function sanitizeClassName(className: string): string;
89
+ /**
90
+ * Sanitizes CSS property names to prevent injection attacks.
91
+ *
92
+ * @param propertyName - Property name to sanitize
93
+ * @returns Sanitized property name
94
+ */
95
+ export declare function sanitizeCSSPropertyName(propertyName: string): string;
96
+ /**
97
+ * Validates keyframe percentage keys (e.g., "0%", "50%", "from", "to").
98
+ *
99
+ * @param key - Keyframe key to validate
100
+ * @returns True if key is valid
101
+ */
102
+ export declare function validateKeyframeKey(key: string): boolean;
@@ -0,0 +1,25 @@
1
+ /**
2
+ * ThemeMap utilities for property-aware token resolution.
3
+ * Maps CSS properties to theme scales for deterministic token resolution.
4
+ */
5
+ import type { ThemeScale } from "../types";
6
+ import { APPROVED_THEME_SCALES, DEFAULT_THEME_MAP } from "../constants";
7
+ export { APPROVED_THEME_SCALES, DEFAULT_THEME_MAP };
8
+ export type { ThemeScale };
9
+ /**
10
+ * Auto-detects theme scale from CSS property name using pattern matching.
11
+ * Used as fallback when property is not in DEFAULT_THEME_MAP.
12
+ *
13
+ * @param property - CSS property name
14
+ * @returns Theme scale name or undefined if no pattern matches
15
+ */
16
+ export declare function autoDetectScale(property: string): ThemeScale | undefined;
17
+ /**
18
+ * Gets the theme scale for a CSS property.
19
+ * Checks user themeMap first, then default themeMap, then pattern matching.
20
+ *
21
+ * @param property - CSS property name
22
+ * @param userThemeMap - Optional user-provided themeMap override
23
+ * @returns Theme scale name or undefined if no mapping found
24
+ */
25
+ export declare function getScaleForProperty(property: string, userThemeMap?: Record<string, ThemeScale>): ThemeScale | undefined;
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Theme validation utilities.
3
+ * Ensures theme objects only contain approved scales.
4
+ */
5
+ import type { DefaultTheme } from "../types";
6
+ /**
7
+ * Validates that a theme object only contains approved scales.
8
+ *
9
+ * @param theme - Theme object to validate
10
+ * @returns Validated theme as DefaultTheme
11
+ * @throws Error if theme contains invalid scales (in development)
12
+ */
13
+ export declare function validateTheme(theme: unknown): DefaultTheme;
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Theme token resolution utilities.
3
+ * Converts theme tokens to CSS variables for runtime theme switching.
4
+ * Uses cached token index for efficient lookups and theme comparison.
5
+ */
6
+ import type { CSS, Theme, ThemeScale } from "../types";
7
+ /**
8
+ * Compares two themes for equality by structure and values.
9
+ * Excludes 'media' property from comparison since it's not a CSS variable scale.
10
+ *
11
+ * @param theme1 - First theme to compare
12
+ * @param theme2 - Second theme to compare
13
+ * @returns True if themes are equal, false otherwise
14
+ */
15
+ export declare function themesAreEqual(theme1: Theme | null, theme2: Theme | null): boolean;
16
+ /**
17
+ * Converts a theme token string to a CSS variable reference.
18
+ *
19
+ * @param token - Token string (e.g., "$primary" or "$colors$primary")
20
+ * @param theme - Optional theme for token resolution
21
+ * @param property - Optional CSS property name for scale detection
22
+ * @param themeMap - Optional theme scale mappings
23
+ * @returns CSS variable reference string
24
+ */
25
+ export declare function tokenToCSSVar(token: string, theme?: Theme, property?: string, themeMap?: Record<string, ThemeScale>): string;
26
+ /**
27
+ * Generates CSS custom properties from a theme object.
28
+ *
29
+ * @param theme - Theme object to convert to CSS variables
30
+ * @param prefix - Optional prefix for CSS variable names
31
+ * @returns CSS string with :root selector and CSS variables
32
+ */
33
+ export declare function generateCSSVariables(theme: Theme, prefix?: string): string;
34
+ /**
35
+ * Recursively replaces theme tokens with CSS variable references in a CSS object.
36
+ *
37
+ * @param obj - CSS object to process
38
+ * @param theme - Optional theme for token resolution
39
+ * @param themeMap - Optional theme scale mappings
40
+ * @param property - Optional CSS property name for scale detection
41
+ * @returns CSS object with tokens replaced by CSS variables
42
+ */
43
+ export declare function replaceThemeTokensWithVars(obj: CSS, theme?: Theme, themeMap?: Record<string, ThemeScale>, property?: string): CSS;
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Type guard utilities.
3
+ * Provides runtime type checking for CSS objects, themes, and styled component references.
4
+ */
5
+ import type { CSS, Theme } from "../types";
6
+ /**
7
+ * Type guard for CSS objects.
8
+ *
9
+ * @param value - Value to check
10
+ * @returns True if value is a CSS object
11
+ */
12
+ export declare function isCSSObject(value: unknown): value is CSS;
13
+ /**
14
+ * Type guard for valid CSS objects (excludes styled component references).
15
+ *
16
+ * @param value - Value to check
17
+ * @returns True if value is a valid CSS object
18
+ */
19
+ export declare function isValidCSSObject(value: unknown): value is CSS;
20
+ /**
21
+ * Type guard for theme objects.
22
+ *
23
+ * @param value - Value to check
24
+ * @returns True if value is a theme object
25
+ */
26
+ export declare function isThemeObject(value: unknown): value is Theme;
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Utility function application.
3
+ * Applies utility functions (e.g., px, py) to transform shorthand properties into CSS.
4
+ * Recursively processes nested CSS objects.
5
+ */
6
+ import type { CSS, UtilityFunction } from "../types";
7
+ /**
8
+ * Applies utility functions to transform shorthand properties into CSS.
9
+ *
10
+ * @param styles - CSS object to process
11
+ * @param utils - Optional utility functions object
12
+ * @returns CSS object with utilities applied
13
+ */
14
+ export declare function applyUtilities(styles: CSS, utils?: Record<string, UtilityFunction>): CSS;
package/package.json CHANGED
@@ -1,14 +1,32 @@
1
1
  {
2
2
  "name": "stoop",
3
- "description": "A lightweight, polymorphic React component library with intuitive design tokens and built-in styling system.",
4
- "version": "0.1.0",
3
+ "description": "CSS-in-JS library with type inference, theme creation, and variants support.",
4
+ "version": "0.2.1",
5
5
  "author": "Jackson Dolman <mail@dolmios.com>",
6
- "license": "MIT",
7
- "type": "module",
8
- "sideEffects": false,
9
6
  "main": "./dist/index.js",
10
- "module": "./dist/index.js",
11
- "types": "./dist/index.d.ts",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/dolmios/stoop.git"
10
+ },
11
+ "bugs": {
12
+ "url": "https://github.com/dolmios/stoop/issues"
13
+ },
14
+ "homepage": "https://github.com/dolmios/stoop#readme",
15
+ "dependencies": {
16
+ "react-polymorphic-types": "^2.0.0"
17
+ },
18
+ "devDependencies": {
19
+ "@types/node": "^22.17.0",
20
+ "@types/react": "^19.1.9",
21
+ "@types/react-dom": "^19.1.7",
22
+ "bun-types": "^1.2.19",
23
+ "eslint": "^9.32.0",
24
+ "eslint-config-dolmios": "^2.0.10",
25
+ "prettier": "^3.6.2",
26
+ "react": "^19.1.1",
27
+ "react-dom": "^19.1.1",
28
+ "typescript": "^5.9.2"
29
+ },
12
30
  "exports": {
13
31
  ".": {
14
32
  "types": "./dist/index.d.ts",
@@ -20,46 +38,52 @@
20
38
  "dist"
21
39
  ],
22
40
  "keywords": [
41
+ "css variables",
42
+ "css-in-ts",
43
+ "css-in-ts alternative",
44
+ "css-in-js",
45
+ "css-in-js alternative",
46
+ "emotion",
47
+ "emotion alternative",
48
+ "lightweight",
49
+ "minimal",
50
+ "next.js",
51
+ "nextjs",
52
+ "performance",
23
53
  "react",
24
- "components",
25
- "ui",
26
- "design-system",
54
+ "react styling",
55
+ "stitches",
56
+ "stitches alternative",
57
+ "stitches-alternative",
27
58
  "styled-components",
28
- "polymorphic",
29
- "css-in-js",
30
- "layout",
31
- "typescript"
59
+ "styled-components alternative",
60
+ "styling",
61
+ "theme",
62
+ "theme switching",
63
+ "type-safe",
64
+ "typescript",
65
+ "variants"
32
66
  ],
33
- "devDependencies": {
34
- "@types/node": "^22.17.0",
35
- "@types/react": "^19.1.9",
36
- "@types/react-dom": "^19.1.7",
37
- "bun-types": "^1.2.19",
38
- "clsx": "^2.1.1",
39
- "eslint": "^9.32.0",
40
- "eslint-config-dolmios": "^2.0.10",
41
- "prettier": "^3.6.2",
42
- "react": "^19.1.1",
43
- "react-dom": "^19.1.1",
44
- "typescript": "^5.9.2"
45
- },
67
+ "license": "MIT",
46
68
  "peerDependencies": {
47
- "react": ">=19.0.0",
48
- "react-dom": ">=19.0.0"
69
+ "react": ">=16.8.0",
70
+ "react-dom": ">=16.8.0"
49
71
  },
72
+ "prettier": "eslint-config-dolmios/configs/prettier",
73
+ "sideEffects": false,
74
+ "type": "module",
50
75
  "scripts": {
51
- "build": "bun run build:clean && bun run build:types && bun run build:js",
76
+ "build": "bun run build:clean && bun run build:js && bun run build:types && bun run build:copy-declarations",
52
77
  "build:clean": "rm -rf dist",
78
+ "build:copy-declarations": "mkdir -p dist/types && cp src/types/react-polymorphic-types.d.ts dist/types/react-polymorphic-types.d.ts 2>/dev/null || true",
53
79
  "build:js": "bun build ./src/index.ts --outdir ./dist --target browser --minify --jsx=react --splitting --external react --external react-dom",
54
- "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist --jsx react-jsx src/index.ts",
55
- "dev": "bun run build && bun run preview/dev.ts",
56
- "lint": "eslint src --fix",
57
- "format": "prettier --write src",
58
- "prepare": "bun run build",
59
- "kill": "kill $(lsof -t -i:3000)"
60
- },
61
- "prettier": "eslint-config-dolmios/configs/prettier",
62
- "dependencies": {
63
- "@floating-ui/dom": "^1.7.3"
80
+ "build:types": "bunx tsc src/index.ts src/**/*.ts --declaration --emitDeclarationOnly --outDir dist --skipLibCheck --jsx react-jsx --module ESNext --moduleResolution bundler --target ES2022 --lib dom,dom.iterable,esnext --rootDir src",
81
+ "dev": "bun run build && bun --bun preview/index.html",
82
+ "format": "prettier --write src preview",
83
+ "kill": "lsof -ti:3000,420 | xargs kill -9 2>/dev/null || true",
84
+ "lint": "eslint . --ext .ts,.tsx --fix",
85
+ "test": "bun test",
86
+ "test:coverage": "bun test --coverage",
87
+ "test:watch": "bun test --watch"
64
88
  }
65
- }
89
+ }
@@ -1,13 +0,0 @@
1
- import type { JSX } from "react";
2
- import type { BadgeProps } from "./types";
3
- /**
4
- * Badge - Display component for labels, status, and categories
5
- *
6
- * Solid color design with dark background and light text
7
- * Can be clickable with hover states
8
- *
9
- * Examples:
10
- * <Badge>New</Badge>
11
- * <Badge clickable>Interactive</Badge>
12
- */
13
- export declare function Badge({ bottom, clickable, css, top, ...props }: BadgeProps): JSX.Element;
@@ -1,3 +0,0 @@
1
- export declare const BadgeStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
2
- clickable?: boolean | "false" | "true";
3
- } & import("react").RefAttributes<HTMLSpanElement>>;
@@ -1,13 +0,0 @@
1
- import type { ComponentPropsWithoutRef } from "react";
2
- import type { SpacingToken } from "../../styles/theme";
3
- import type { CSSObject } from "../../styles/types";
4
- export interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
5
- /** Whether the badge is clickable */
6
- clickable?: boolean;
7
- /** Add margin-top */
8
- top?: SpacingToken;
9
- /** Add margin-bottom */
10
- bottom?: SpacingToken;
11
- /** Custom CSS styles */
12
- css?: CSSObject;
13
- }
@@ -1,14 +0,0 @@
1
- import type { JSX } from "react";
2
- import type { ButtonProps } from "./types";
3
- /**
4
- * Button - Interactive button component
5
- *
6
- * Sharp edges design with brand colors and multiple variants
7
- * Supports loading states, sizing, and polymorphic rendering
8
- *
9
- * Examples:
10
- * <Button variant="primary">Primary Action</Button>
11
- * <Button variant="secondary" size="small">Secondary</Button>
12
- * <Button as="a" href="/link">Link Button</Button>
13
- */
14
- export declare function Button({ block, bottom, children, css, disabled, loading, size, top, variant, ...props }: ButtonProps): JSX.Element;
@@ -1,6 +0,0 @@
1
- export declare const ButtonStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
2
- variant?: boolean | "minimal" | "primary" | "secondary";
3
- block?: boolean | "false" | "true";
4
- loading?: boolean | "false" | "true";
5
- size?: boolean | "small" | "normal";
6
- } & import("react").RefAttributes<HTMLButtonElement>>;
@@ -1,22 +0,0 @@
1
- import type { ComponentPropsWithoutRef } from "react";
2
- import type { SpacingToken } from "../../styles/theme";
3
- import type { CSSObject } from "../../styles/types";
4
- /**
5
- * Button component props
6
- */
7
- export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
8
- /** Button variant */
9
- variant?: "primary" | "secondary" | "minimal";
10
- /** Button size */
11
- size?: "normal" | "small";
12
- /** Full width button */
13
- block?: boolean;
14
- /** Loading state */
15
- loading?: boolean;
16
- /** Add margin-top */
17
- top?: SpacingToken;
18
- /** Add margin-bottom */
19
- bottom?: SpacingToken;
20
- /** Custom CSS styles */
21
- css?: CSSObject;
22
- }
@@ -1,14 +0,0 @@
1
- import type { JSX } from "react";
2
- import type { CardProps } from "./types";
3
- /**
4
- * Card - Container component for grouping related content
5
- *
6
- * Sharp edges design with multiple variants and optional header/footer
7
- * Supports interactive states and flexible padding
8
- *
9
- * Examples:
10
- * <Card variant="default">Basic card content</Card>
11
- * <Card variant="bordered" header="Title">Card with header</Card>
12
- * <Card clickable padding="default">Interactive card</Card>
13
- */
14
- export declare function Card({ as, children, clickable, css, footer, header, onClick, padding, variant, ...props }: CardProps): JSX.Element;
@@ -1,16 +0,0 @@
1
- export declare const CardStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
2
- variant?: boolean | "default" | "bordered";
3
- padding?: boolean | "small" | "default" | "minimal";
4
- clickable?: boolean | "false" | "true";
5
- } & import("react").RefAttributes<HTMLDivElement>>;
6
- export declare const CardHeaderStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
7
- padding?: boolean | "small" | "default" | "minimal";
8
- } & import("react").RefAttributes<HTMLDivElement>>;
9
- export declare const CardFooterStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
10
- padding?: boolean | "small" | "default" | "minimal";
11
- } & import("react").RefAttributes<HTMLDivElement>>;
12
- export declare const CardContentStyled: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../../styles/types").StyledBaseProps & {
13
- padding?: boolean | "small" | "default" | "minimal";
14
- hasFooter?: boolean | "false" | "true";
15
- hasHeader?: boolean | "false" | "true";
16
- } & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,18 +0,0 @@
1
- import type { ComponentPropsWithoutRef, ReactNode, JSX } from "react";
2
- import type { CSSObject } from "../../styles/types";
3
- export interface CardProps extends ComponentPropsWithoutRef<"div"> {
4
- /** HTML element to render as */
5
- as?: keyof JSX.IntrinsicElements;
6
- /** Header content */
7
- header?: ReactNode;
8
- /** Footer content */
9
- footer?: ReactNode;
10
- /** Card variant */
11
- variant?: "default" | "bordered";
12
- /** Padding size */
13
- padding?: "default" | "small" | "minimal";
14
- /** Whether the card is interactive/clickable */
15
- clickable?: boolean;
16
- /** Custom CSS styles */
17
- css?: CSSObject;
18
- }
@@ -1,13 +0,0 @@
1
- import { JSX } from "react";
2
- import type { InputProps } from "./types";
3
- /**
4
- * Input - Form input component with clean, accessible design
5
- *
6
- * Sharp edges design with consistent styling and form validation support
7
- * Supports all native input attributes
8
- *
9
- * Examples:
10
- * <Input placeholder="Enter text" />
11
- * <Input state="error" />
12
- */
13
- export declare function Input({ state, ...props }: InputProps): JSX.Element;