@axiomui/primitives 0.1.0

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 (5) hide show
  1. package/dist/index.cjs +190 -0
  2. package/dist/index.d.cts +49 -0
  3. package/dist/index.d.ts +49 -0
  4. package/dist/index.js +160 -0
  5. package/package.json +40 -0
package/dist/index.cjs ADDED
@@ -0,0 +1,190 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ Box: () => Box,
24
+ Flex: () => Flex,
25
+ Stack: () => Stack,
26
+ Text: () => Text
27
+ });
28
+ module.exports = __toCommonJS(index_exports);
29
+
30
+ // src/cx.ts
31
+ function cx(...classNames) {
32
+ return classNames.filter(Boolean).join(" ");
33
+ }
34
+
35
+ // src/Box.tsx
36
+ var import_jsx_runtime = require("react/jsx-runtime");
37
+ var displayClassNameMap = {
38
+ block: "block",
39
+ "inline-block": "inline-block",
40
+ inline: "inline",
41
+ flex: "flex",
42
+ "inline-flex": "inline-flex",
43
+ grid: "grid",
44
+ none: "hidden"
45
+ };
46
+ function Box(props) {
47
+ const { as, display, className, ...restProps } = props;
48
+ const Comp = as ?? "div";
49
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { className: cx(display ? displayClassNameMap[display] : void 0, className), ...restProps });
50
+ }
51
+
52
+ // src/Flex.tsx
53
+ var import_jsx_runtime2 = require("react/jsx-runtime");
54
+ var directionClassNameMap = {
55
+ row: "flex-row",
56
+ "row-reverse": "flex-row-reverse",
57
+ col: "flex-col",
58
+ "col-reverse": "flex-col-reverse"
59
+ };
60
+ var alignClassNameMap = {
61
+ start: "items-start",
62
+ center: "items-center",
63
+ end: "items-end",
64
+ baseline: "items-baseline",
65
+ stretch: "items-stretch"
66
+ };
67
+ var justifyClassNameMap = {
68
+ start: "justify-start",
69
+ center: "justify-center",
70
+ end: "justify-end",
71
+ between: "justify-between",
72
+ around: "justify-around",
73
+ evenly: "justify-evenly"
74
+ };
75
+ var wrapClassNameMap = {
76
+ nowrap: "flex-nowrap",
77
+ wrap: "flex-wrap",
78
+ "wrap-reverse": "flex-wrap-reverse"
79
+ };
80
+ var gapClassNameMap = {
81
+ 0: "gap-0",
82
+ 1: "gap-1",
83
+ 2: "gap-2",
84
+ 3: "gap-3",
85
+ 4: "gap-4",
86
+ 6: "gap-6",
87
+ 8: "gap-8"
88
+ };
89
+ function Flex(props) {
90
+ const { direction = "row", align, justify, wrap, gap, inline = false, className, ...restProps } = props;
91
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
92
+ Box,
93
+ {
94
+ ...restProps,
95
+ display: inline ? "inline-flex" : "flex",
96
+ className: cx(
97
+ directionClassNameMap[direction],
98
+ align ? alignClassNameMap[align] : void 0,
99
+ justify ? justifyClassNameMap[justify] : void 0,
100
+ wrap ? wrapClassNameMap[wrap] : void 0,
101
+ gap ? gapClassNameMap[gap] : void 0,
102
+ className
103
+ )
104
+ }
105
+ );
106
+ }
107
+
108
+ // src/Stack.tsx
109
+ var import_jsx_runtime3 = require("react/jsx-runtime");
110
+ var directionClassNameMap2 = {
111
+ vertical: "col",
112
+ horizontal: "row"
113
+ };
114
+ function Stack(props) {
115
+ const { direction = "vertical", gap = "2", align, justify, ...restProps } = props;
116
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
117
+ Flex,
118
+ {
119
+ ...restProps,
120
+ direction: directionClassNameMap2[direction],
121
+ gap,
122
+ ...align ? { align } : {},
123
+ ...justify ? { justify } : {}
124
+ }
125
+ );
126
+ }
127
+
128
+ // src/Text.tsx
129
+ var import_jsx_runtime4 = require("react/jsx-runtime");
130
+ var sizeClassNameMap = {
131
+ xs: "text-xs",
132
+ sm: "text-sm",
133
+ base: "text-base",
134
+ lg: "text-lg",
135
+ xl: "text-xl"
136
+ };
137
+ var weightClassNameMap = {
138
+ regular: "font-normal",
139
+ medium: "font-medium",
140
+ semibold: "font-semibold",
141
+ bold: "font-bold"
142
+ };
143
+ var toneClassNameMap = {
144
+ default: "text-gray-900",
145
+ muted: "text-gray-600",
146
+ brand: "text-brand-700",
147
+ success: "text-green-700",
148
+ warning: "text-amber-700",
149
+ danger: "text-red-700"
150
+ };
151
+ var alignClassNameMap2 = {
152
+ left: "text-left",
153
+ center: "text-center",
154
+ right: "text-right",
155
+ justify: "text-justify"
156
+ };
157
+ function Text(props) {
158
+ const {
159
+ as,
160
+ size = "base",
161
+ weight = "regular",
162
+ tone = "default",
163
+ align,
164
+ truncate = false,
165
+ className,
166
+ ...restProps
167
+ } = props;
168
+ const Comp = as ?? "span";
169
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
170
+ Comp,
171
+ {
172
+ className: cx(
173
+ sizeClassNameMap[size],
174
+ weightClassNameMap[weight],
175
+ toneClassNameMap[tone],
176
+ align ? alignClassNameMap2[align] : void 0,
177
+ truncate ? "truncate" : void 0,
178
+ className
179
+ ),
180
+ ...restProps
181
+ }
182
+ );
183
+ }
184
+ // Annotate the CommonJS export names for ESM import in node:
185
+ 0 && (module.exports = {
186
+ Box,
187
+ Flex,
188
+ Stack,
189
+ Text
190
+ });
package/dist/index.d.cts ADDED
@@ -0,0 +1,49 @@
1
+ import { ElementType, ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react';
2
+
3
+ type PrimitiveElement = ElementType;
4
+ type AsProp<TAs extends PrimitiveElement> = {
5
+ as?: TAs;
6
+ };
7
+ type PropsToOmit<TAs extends PrimitiveElement, TProps> = keyof (AsProp<TAs> & TProps);
8
+ type PolymorphicComponentProps<TAs extends PrimitiveElement, TProps = {}> = TProps & AsProp<TAs> & {
9
+ className?: string;
10
+ children?: ReactNode;
11
+ } & Omit<ComponentPropsWithoutRef<TAs>, PropsToOmit<TAs, TProps>>;
12
+
13
+ type BoxOwnProps = {
14
+ display?: 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'grid' | 'none';
15
+ };
16
+ type BoxProps<TAs extends PrimitiveElement = 'div'> = PolymorphicComponentProps<TAs, BoxOwnProps>;
17
+ declare function Box<TAs extends PrimitiveElement = 'div'>(props: BoxProps<TAs>): ReactElement;
18
+
19
+ type FlexOwnProps = {
20
+ direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
21
+ align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
22
+ justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
23
+ wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
24
+ gap?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
25
+ inline?: boolean;
26
+ };
27
+ type FlexProps = Omit<BoxProps<'div'>, 'display'> & FlexOwnProps;
28
+ declare function Flex(props: FlexProps): ReactElement;
29
+
30
+ type StackOwnProps = {
31
+ direction?: 'vertical' | 'horizontal';
32
+ gap?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
33
+ align?: 'start' | 'center' | 'end' | 'stretch';
34
+ justify?: 'start' | 'center' | 'end' | 'between';
35
+ };
36
+ type StackProps = Omit<FlexProps, 'direction' | 'gap' | 'align' | 'justify'> & StackOwnProps;
37
+ declare function Stack(props: StackProps): ReactElement;
38
+
39
+ type TextOwnProps = {
40
+ size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
41
+ weight?: 'regular' | 'medium' | 'semibold' | 'bold';
42
+ tone?: 'default' | 'muted' | 'brand' | 'success' | 'warning' | 'danger';
43
+ align?: 'left' | 'center' | 'right' | 'justify';
44
+ truncate?: boolean;
45
+ };
46
+ type TextProps<TAs extends PrimitiveElement = 'span'> = PolymorphicComponentProps<TAs, TextOwnProps>;
47
+ declare function Text<TAs extends PrimitiveElement = 'span'>(props: TextProps<TAs>): ReactElement;
48
+
49
+ export { Box, type BoxProps, Flex, type FlexProps, type PolymorphicComponentProps, type PrimitiveElement, Stack, type StackProps, Text, type TextProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ import { ElementType, ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react';
2
+
3
+ type PrimitiveElement = ElementType;
4
+ type AsProp<TAs extends PrimitiveElement> = {
5
+ as?: TAs;
6
+ };
7
+ type PropsToOmit<TAs extends PrimitiveElement, TProps> = keyof (AsProp<TAs> & TProps);
8
+ type PolymorphicComponentProps<TAs extends PrimitiveElement, TProps = {}> = TProps & AsProp<TAs> & {
9
+ className?: string;
10
+ children?: ReactNode;
11
+ } & Omit<ComponentPropsWithoutRef<TAs>, PropsToOmit<TAs, TProps>>;
12
+
13
+ type BoxOwnProps = {
14
+ display?: 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'grid' | 'none';
15
+ };
16
+ type BoxProps<TAs extends PrimitiveElement = 'div'> = PolymorphicComponentProps<TAs, BoxOwnProps>;
17
+ declare function Box<TAs extends PrimitiveElement = 'div'>(props: BoxProps<TAs>): ReactElement;
18
+
19
+ type FlexOwnProps = {
20
+ direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
21
+ align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
22
+ justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
23
+ wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
24
+ gap?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
25
+ inline?: boolean;
26
+ };
27
+ type FlexProps = Omit<BoxProps<'div'>, 'display'> & FlexOwnProps;
28
+ declare function Flex(props: FlexProps): ReactElement;
29
+
30
+ type StackOwnProps = {
31
+ direction?: 'vertical' | 'horizontal';
32
+ gap?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
33
+ align?: 'start' | 'center' | 'end' | 'stretch';
34
+ justify?: 'start' | 'center' | 'end' | 'between';
35
+ };
36
+ type StackProps = Omit<FlexProps, 'direction' | 'gap' | 'align' | 'justify'> & StackOwnProps;
37
+ declare function Stack(props: StackProps): ReactElement;
38
+
39
+ type TextOwnProps = {
40
+ size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
41
+ weight?: 'regular' | 'medium' | 'semibold' | 'bold';
42
+ tone?: 'default' | 'muted' | 'brand' | 'success' | 'warning' | 'danger';
43
+ align?: 'left' | 'center' | 'right' | 'justify';
44
+ truncate?: boolean;
45
+ };
46
+ type TextProps<TAs extends PrimitiveElement = 'span'> = PolymorphicComponentProps<TAs, TextOwnProps>;
47
+ declare function Text<TAs extends PrimitiveElement = 'span'>(props: TextProps<TAs>): ReactElement;
48
+
49
+ export { Box, type BoxProps, Flex, type FlexProps, type PolymorphicComponentProps, type PrimitiveElement, Stack, type StackProps, Text, type TextProps };
package/dist/index.js ADDED
@@ -0,0 +1,160 @@
1
+ // src/cx.ts
2
+ function cx(...classNames) {
3
+ return classNames.filter(Boolean).join(" ");
4
+ }
5
+
6
+ // src/Box.tsx
7
+ import { jsx } from "react/jsx-runtime";
8
+ var displayClassNameMap = {
9
+ block: "block",
10
+ "inline-block": "inline-block",
11
+ inline: "inline",
12
+ flex: "flex",
13
+ "inline-flex": "inline-flex",
14
+ grid: "grid",
15
+ none: "hidden"
16
+ };
17
+ function Box(props) {
18
+ const { as, display, className, ...restProps } = props;
19
+ const Comp = as ?? "div";
20
+ return /* @__PURE__ */ jsx(Comp, { className: cx(display ? displayClassNameMap[display] : void 0, className), ...restProps });
21
+ }
22
+
23
+ // src/Flex.tsx
24
+ import { jsx as jsx2 } from "react/jsx-runtime";
25
+ var directionClassNameMap = {
26
+ row: "flex-row",
27
+ "row-reverse": "flex-row-reverse",
28
+ col: "flex-col",
29
+ "col-reverse": "flex-col-reverse"
30
+ };
31
+ var alignClassNameMap = {
32
+ start: "items-start",
33
+ center: "items-center",
34
+ end: "items-end",
35
+ baseline: "items-baseline",
36
+ stretch: "items-stretch"
37
+ };
38
+ var justifyClassNameMap = {
39
+ start: "justify-start",
40
+ center: "justify-center",
41
+ end: "justify-end",
42
+ between: "justify-between",
43
+ around: "justify-around",
44
+ evenly: "justify-evenly"
45
+ };
46
+ var wrapClassNameMap = {
47
+ nowrap: "flex-nowrap",
48
+ wrap: "flex-wrap",
49
+ "wrap-reverse": "flex-wrap-reverse"
50
+ };
51
+ var gapClassNameMap = {
52
+ 0: "gap-0",
53
+ 1: "gap-1",
54
+ 2: "gap-2",
55
+ 3: "gap-3",
56
+ 4: "gap-4",
57
+ 6: "gap-6",
58
+ 8: "gap-8"
59
+ };
60
+ function Flex(props) {
61
+ const { direction = "row", align, justify, wrap, gap, inline = false, className, ...restProps } = props;
62
+ return /* @__PURE__ */ jsx2(
63
+ Box,
64
+ {
65
+ ...restProps,
66
+ display: inline ? "inline-flex" : "flex",
67
+ className: cx(
68
+ directionClassNameMap[direction],
69
+ align ? alignClassNameMap[align] : void 0,
70
+ justify ? justifyClassNameMap[justify] : void 0,
71
+ wrap ? wrapClassNameMap[wrap] : void 0,
72
+ gap ? gapClassNameMap[gap] : void 0,
73
+ className
74
+ )
75
+ }
76
+ );
77
+ }
78
+
79
+ // src/Stack.tsx
80
+ import { jsx as jsx3 } from "react/jsx-runtime";
81
+ var directionClassNameMap2 = {
82
+ vertical: "col",
83
+ horizontal: "row"
84
+ };
85
+ function Stack(props) {
86
+ const { direction = "vertical", gap = "2", align, justify, ...restProps } = props;
87
+ return /* @__PURE__ */ jsx3(
88
+ Flex,
89
+ {
90
+ ...restProps,
91
+ direction: directionClassNameMap2[direction],
92
+ gap,
93
+ ...align ? { align } : {},
94
+ ...justify ? { justify } : {}
95
+ }
96
+ );
97
+ }
98
+
99
+ // src/Text.tsx
100
+ import { jsx as jsx4 } from "react/jsx-runtime";
101
+ var sizeClassNameMap = {
102
+ xs: "text-xs",
103
+ sm: "text-sm",
104
+ base: "text-base",
105
+ lg: "text-lg",
106
+ xl: "text-xl"
107
+ };
108
+ var weightClassNameMap = {
109
+ regular: "font-normal",
110
+ medium: "font-medium",
111
+ semibold: "font-semibold",
112
+ bold: "font-bold"
113
+ };
114
+ var toneClassNameMap = {
115
+ default: "text-gray-900",
116
+ muted: "text-gray-600",
117
+ brand: "text-brand-700",
118
+ success: "text-green-700",
119
+ warning: "text-amber-700",
120
+ danger: "text-red-700"
121
+ };
122
+ var alignClassNameMap2 = {
123
+ left: "text-left",
124
+ center: "text-center",
125
+ right: "text-right",
126
+ justify: "text-justify"
127
+ };
128
+ function Text(props) {
129
+ const {
130
+ as,
131
+ size = "base",
132
+ weight = "regular",
133
+ tone = "default",
134
+ align,
135
+ truncate = false,
136
+ className,
137
+ ...restProps
138
+ } = props;
139
+ const Comp = as ?? "span";
140
+ return /* @__PURE__ */ jsx4(
141
+ Comp,
142
+ {
143
+ className: cx(
144
+ sizeClassNameMap[size],
145
+ weightClassNameMap[weight],
146
+ toneClassNameMap[tone],
147
+ align ? alignClassNameMap2[align] : void 0,
148
+ truncate ? "truncate" : void 0,
149
+ className
150
+ ),
151
+ ...restProps
152
+ }
153
+ );
154
+ }
155
+ export {
156
+ Box,
157
+ Flex,
158
+ Stack,
159
+ Text
160
+ };
package/package.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "name": "@axiomui/primitives",
3
+ "version": "0.1.0",
4
+ "private": false,
5
+ "type": "module",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js",
13
+ "require": "./dist/index.cjs",
14
+ "default": "./dist/index.js"
15
+ }
16
+ },
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "scripts": {
21
+ "build": "tsup src/index.ts --format esm,cjs --dts --clean",
22
+ "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
23
+ "lint": "tsc -p tsconfig.json --noEmit",
24
+ "test": "vitest run --passWithNoTests",
25
+ "typecheck": "tsc -p tsconfig.json --noEmit",
26
+ "clean": "rm -rf dist",
27
+ "prepublishOnly": "pnpm run build"
28
+ },
29
+ "publishConfig": {
30
+ "access": "public"
31
+ },
32
+ "peerDependencies": {
33
+ "react": "^18",
34
+ "react-dom": "^18"
35
+ },
36
+ "dependencies": {
37
+ "@axiomui/tokens": "workspace:*"
38
+ },
39
+ "sideEffects": false
40
+ }