@machinerd/js-module 0.2.1 → 0.2.3
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.
- package/README.md +18 -5
- package/dist/styles/index.css +3 -3
- package/dist/ui/client-only/index.d.cts +8 -8
- package/dist/ui/client-only/index.d.mts +8 -8
- package/dist/ui/index.cjs +1 -1
- package/dist/ui/index.d.cts +16 -16
- package/dist/ui/index.d.mts +9 -9
- package/dist/ui/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# JS-Module
|
|
2
|
+
|
|
2
3
|
- install
|
|
4
|
+
|
|
3
5
|
```bash
|
|
4
6
|
npm install @machinerd/js-module
|
|
5
7
|
# or
|
|
@@ -9,22 +11,33 @@ pnpm add @machinerd/js-module
|
|
|
9
11
|
```
|
|
10
12
|
|
|
11
13
|
- api client
|
|
14
|
+
|
|
12
15
|
```js
|
|
13
|
-
import apiClient from
|
|
16
|
+
import apiClient from "@machinerd/js-module";
|
|
14
17
|
```
|
|
15
18
|
|
|
16
19
|
- function
|
|
20
|
+
|
|
17
21
|
```js
|
|
18
|
-
import { sleep }
|
|
22
|
+
import { sleep } from "@machinerd/js-module/util";
|
|
19
23
|
```
|
|
20
24
|
|
|
21
25
|
- components
|
|
26
|
+
|
|
22
27
|
```js
|
|
23
|
-
import { Button }
|
|
24
|
-
import
|
|
28
|
+
import { Button } from "@machinerd/js-module/ui";
|
|
29
|
+
import "@machinerd/js-module/styles/index.css";
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
- components (client-side only)
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
import { Carousel } from "@machinerd/js-module/ui/client";
|
|
36
|
+
import "@machinerd/js-module/styles/index.css";
|
|
25
37
|
```
|
|
26
38
|
|
|
27
39
|
- hooks
|
|
40
|
+
|
|
28
41
|
```js
|
|
29
|
-
import { useOutsideClick }
|
|
42
|
+
import { useOutsideClick } from "@machinerd/js-module/hooks";
|
|
30
43
|
```
|
package/dist/styles/index.css
CHANGED
|
@@ -51,9 +51,6 @@
|
|
|
51
51
|
.komc\:absolute {
|
|
52
52
|
position: absolute;
|
|
53
53
|
}
|
|
54
|
-
.komc\:fixed {
|
|
55
|
-
position: fixed;
|
|
56
|
-
}
|
|
57
54
|
.komc\:relative {
|
|
58
55
|
position: relative;
|
|
59
56
|
}
|
|
@@ -291,6 +288,9 @@
|
|
|
291
288
|
.komc\:min-w-0 {
|
|
292
289
|
min-width: calc(var(--komc-spacing) * 0);
|
|
293
290
|
}
|
|
291
|
+
.komc\:flex-1 {
|
|
292
|
+
flex: 1;
|
|
293
|
+
}
|
|
294
294
|
.komc\:shrink-0 {
|
|
295
295
|
flex-shrink: 0;
|
|
296
296
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react0 from "react";
|
|
2
2
|
import React$1, { ComponentProps, HTMLAttributes } from "react";
|
|
3
3
|
import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
|
|
4
|
-
import * as
|
|
4
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
5
5
|
|
|
6
6
|
//#region src/ui/client-only/carousel/carousel-context.d.ts
|
|
7
7
|
type CarouselApi = UseEmblaCarouselType[1];
|
|
@@ -57,33 +57,33 @@ declare function Carousel({
|
|
|
57
57
|
className,
|
|
58
58
|
children,
|
|
59
59
|
...props
|
|
60
|
-
}: CarouselProps$1):
|
|
60
|
+
}: CarouselProps$1): react_jsx_runtime1.JSX.Element;
|
|
61
61
|
//#endregion
|
|
62
62
|
//#region src/ui/client-only/carousel/carousel-wrapper.d.ts
|
|
63
63
|
declare function CarouselWrapper({
|
|
64
64
|
className,
|
|
65
65
|
...props
|
|
66
|
-
}: React$1.ComponentProps<'div'>):
|
|
66
|
+
}: React$1.ComponentProps<'div'>): react_jsx_runtime1.JSX.Element;
|
|
67
67
|
//#endregion
|
|
68
68
|
//#region src/ui/client-only/carousel/carousel-item.d.ts
|
|
69
69
|
declare function CarouselItem({
|
|
70
70
|
className,
|
|
71
71
|
...props
|
|
72
|
-
}: React$1.ComponentProps<'div'>):
|
|
72
|
+
}: React$1.ComponentProps<'div'>): react_jsx_runtime1.JSX.Element;
|
|
73
73
|
//#endregion
|
|
74
74
|
//#region src/ui/client-only/carousel/carousel-previous.d.ts
|
|
75
75
|
declare function CarouselPrevious({
|
|
76
76
|
children,
|
|
77
77
|
className,
|
|
78
78
|
...props
|
|
79
|
-
}: React$1.ComponentProps<'button'>):
|
|
79
|
+
}: React$1.ComponentProps<'button'>): react_jsx_runtime1.JSX.Element;
|
|
80
80
|
//#endregion
|
|
81
81
|
//#region src/ui/client-only/carousel/carousel-next.d.ts
|
|
82
82
|
declare function CarouselNext({
|
|
83
83
|
children,
|
|
84
84
|
className,
|
|
85
85
|
...props
|
|
86
|
-
}: React$1.ComponentProps<'button'>):
|
|
86
|
+
}: React$1.ComponentProps<'button'>): react_jsx_runtime1.JSX.Element;
|
|
87
87
|
//#endregion
|
|
88
88
|
//#region src/ui/client-only/tooltip/tooltip-container.d.ts
|
|
89
89
|
type SubPlacement = 'start' | 'end';
|
|
@@ -131,6 +131,6 @@ interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
131
131
|
* @param defaultOpen - Default open state of the tooltip
|
|
132
132
|
* @param placement - Placement of the tooltip
|
|
133
133
|
*/
|
|
134
|
-
declare const TooltipContainer:
|
|
134
|
+
declare const TooltipContainer: react0.ForwardRefExoticComponent<TooltipContainerProps & react0.RefAttributes<HTMLDivElement>>;
|
|
135
135
|
//#endregion
|
|
136
136
|
export { Carousel, type CarouselApi, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, CarouselWrapper, TooltipContainer as Tooltip, type TooltipContainerProps as TooltipProps };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react4 from "react";
|
|
2
2
|
import React$1, { ComponentProps, HTMLAttributes } from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime4 from "react/jsx-runtime";
|
|
4
4
|
import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
|
|
5
5
|
|
|
6
6
|
//#region src/ui/client-only/carousel/carousel-context.d.ts
|
|
@@ -57,33 +57,33 @@ declare function Carousel({
|
|
|
57
57
|
className,
|
|
58
58
|
children,
|
|
59
59
|
...props
|
|
60
|
-
}: CarouselProps$1):
|
|
60
|
+
}: CarouselProps$1): react_jsx_runtime4.JSX.Element;
|
|
61
61
|
//#endregion
|
|
62
62
|
//#region src/ui/client-only/carousel/carousel-wrapper.d.ts
|
|
63
63
|
declare function CarouselWrapper({
|
|
64
64
|
className,
|
|
65
65
|
...props
|
|
66
|
-
}: React$1.ComponentProps<'div'>):
|
|
66
|
+
}: React$1.ComponentProps<'div'>): react_jsx_runtime4.JSX.Element;
|
|
67
67
|
//#endregion
|
|
68
68
|
//#region src/ui/client-only/carousel/carousel-item.d.ts
|
|
69
69
|
declare function CarouselItem({
|
|
70
70
|
className,
|
|
71
71
|
...props
|
|
72
|
-
}: React$1.ComponentProps<'div'>):
|
|
72
|
+
}: React$1.ComponentProps<'div'>): react_jsx_runtime4.JSX.Element;
|
|
73
73
|
//#endregion
|
|
74
74
|
//#region src/ui/client-only/carousel/carousel-previous.d.ts
|
|
75
75
|
declare function CarouselPrevious({
|
|
76
76
|
children,
|
|
77
77
|
className,
|
|
78
78
|
...props
|
|
79
|
-
}: React$1.ComponentProps<'button'>):
|
|
79
|
+
}: React$1.ComponentProps<'button'>): react_jsx_runtime4.JSX.Element;
|
|
80
80
|
//#endregion
|
|
81
81
|
//#region src/ui/client-only/carousel/carousel-next.d.ts
|
|
82
82
|
declare function CarouselNext({
|
|
83
83
|
children,
|
|
84
84
|
className,
|
|
85
85
|
...props
|
|
86
|
-
}: React$1.ComponentProps<'button'>):
|
|
86
|
+
}: React$1.ComponentProps<'button'>): react_jsx_runtime4.JSX.Element;
|
|
87
87
|
//#endregion
|
|
88
88
|
//#region src/ui/client-only/tooltip/tooltip-container.d.ts
|
|
89
89
|
type SubPlacement = 'start' | 'end';
|
|
@@ -131,6 +131,6 @@ interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
131
131
|
* @param defaultOpen - Default open state of the tooltip
|
|
132
132
|
* @param placement - Placement of the tooltip
|
|
133
133
|
*/
|
|
134
|
-
declare const TooltipContainer:
|
|
134
|
+
declare const TooltipContainer: react4.ForwardRefExoticComponent<TooltipContainerProps & react4.RefAttributes<HTMLDivElement>>;
|
|
135
135
|
//#endregion
|
|
136
136
|
export { Carousel, type CarouselApi, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, CarouselWrapper, TooltipContainer as Tooltip, type TooltipContainerProps as TooltipProps };
|
package/dist/ui/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../util-CDkao6z3.cjs`);let n=require(`clsx`);n=e.t(n);let r=require(`react`);r=e.t(r);let i=require(`react/jsx-runtime`),a=require(`class-variance-authority`);function o({className:e,items:t,render:a,...o}){return(0,i.jsx)(`nav`,{"data-komc":!0,className:(0,n.default)(`komc:
|
|
1
|
+
const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../util-CDkao6z3.cjs`);let n=require(`clsx`);n=e.t(n);let r=require(`react`);r=e.t(r);let i=require(`react/jsx-runtime`),a=require(`class-variance-authority`);function o({className:e,items:t,render:a,...o}){return(0,i.jsx)(`nav`,{"data-komc":!0,className:(0,n.default)(`komc:sticky komc:bottom-0 komc:left-0 komc:right-0`,`komc:border-t komc:border-neutral-200 komc:bg-white komc:z-10`,e),...o,children:(0,i.jsx)(`div`,{className:`komc:grid komc:min-h-15`,style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((e,t)=>(0,i.jsx)(r.default.Fragment,{children:a(e)},t))})})}const s=(0,a.cva)(t.f(`komc:inline-flex komc:justify-center komc:items-center komc:w-full`,`komc:transition-colors komc:duration-200 komc:relative`,`komc:*:transition-colors komc:*:duration-200`,`komc:disabled:cursor-default komc:disabled:opacity-50 komc:disabled:pointer-events-none`,`komc:whitespace-nowrap komc:shrink-0 komc:outline-none`),{variants:{size:{xs:`komc:h-7.5`,sm:`komc:h-8`,base:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`},gap:{none:`komc:gap-0`,xs:`komc:gap-1`,sm:`komc:gap-2`,md:`komc:gap-3`,lg:`komc:gap-4`,xl:`komc:gap-5`},outline:{line:`komc:border`,solid:`komc:border-transparent`,clear:`komc:border-none`,dashed:`komc:border-dashed`,dotted:`komc:border-dotted`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`,"2.5xl":`komc:rounded-[20px]`,"3xl":`komc:rounded-3xl`,full:`komc:rounded-full`},variant:{default:``,ghost:`komc:bg-transparent komc:text-neutral-900`,white:`komc:bg-white komc:text-neutral-900 komc:hover:bg-neutral-100`,blue:`komc:bg-blue-500 komc:text-white komc:hover:bg-blue-600`,night:`komc:bg-[#2c5cb7] komc:text-white komc:hover:bg-[#26539F]`,charcoal:`komc:bg-[#36454F] komc:text-white komc:hover:bg-[#2E3A43]`,slate:`komc:bg-[#4A5565] komc:text-white komc:hover:bg-[#424A57]`,red:`komc:bg-[#C8313A] komc:text-white komc:hover:bg-[#B02B33]`,yellow:`komc:bg-[#E7FF14] komc:text-black komc:hover:bg-[#D4E600]`,black:`komc:bg-[rgb(95,95,96)] komc:text-white komc:hover:bg-[rgb(76,76,77)] komc:active:bg-[rgb(76,76,77)]`}},defaultVariants:{size:void 0,outline:void 0,rounded:void 0,variant:void 0}}),c=(0,r.forwardRef)(({children:e=`button`,type:t=`button`,size:n=`md`,gap:r=`sm`,outline:a=`line`,rounded:o=`sm`,variant:c=`blue`,className:l,...u},d)=>(0,i.jsx)(`button`,{ref:d,type:t,"data-komc":!0,className:s({size:n,outline:a,gap:r,rounded:o,variant:c,className:l}),...u,children:e}));var l=c;function u({condition:e,wrapper:t,children:n}){return e?t(n):n}const d=(0,a.cva)(`komc:flex komc:flex-col komc:w-full komc:mx-auto`,{variants:{maxWidth:{none:``,xs:`komc:max-w-xs`,sm:`komc:max-w-sm`,md:`komc:max-w-md`,lg:`komc:max-w-lg`,xl:`komc:max-w-xl`,"2xl":`komc:max-w-2xl`,"3xl":`komc:max-w-3xl`,"4xl":`komc:max-w-4xl`,"5xl":`komc:max-w-5xl`,"6xl":`komc:max-w-6xl`,"7xl":`komc:max-w-7xl`,full:`komc:max-w-full`}},defaultVariants:{maxWidth:`full`}});function f({className:e,children:t,maxWidth:r,...a}){return(0,i.jsx)(`footer`,{"data-komc":!0,className:(0,n.default)(`komc:block komc:w-full komc:h-full`,`komc:bg-white komc:border-t komc:border-neutral-200`,e),...a,children:(0,i.jsx)(`div`,{className:d({maxWidth:r}),children:t})})}const p=(0,a.cva)(t.f(`komc:flex komc:items-center`,`komc:mx-auto komc:min-h-10`),{variants:{maxWidth:{none:``,sm:`komc:max-w-sm`,md:`komc:max-w-md`,lg:`komc:max-w-lg`,xl:`komc:max-w-xl`,"2xl":`komc:max-w-2xl`,"3xl":`komc:max-w-3xl`,"4xl":`komc:max-w-4xl`,"5xl":`komc:max-w-5xl`,"6xl":`komc:max-w-6xl`,"7xl":`komc:max-w-7xl`,"8xl":`komc:max-w-330`,full:`komc:max-w-full`},size:{sm:`komc:h-10`,md:`komc:h-12`,lg:`komc:h-14`,xl:`komc:h-16`,"2xl":`komc:h-18`,"3xl":`komc:h-20`,"4xl":`komc:h-22`,"4.25xl":`komc:h-22.5`,"5xl":`komc:h-24`,"6xl":`komc:h-26`,"7xl":`komc:h-28`,"8xl":`komc:h-30`,full:`komc:h-full`}},defaultVariants:{maxWidth:`full`,size:`xl`}});function m({children:e,maxWidth:t,size:r,className:a,...o}){return(0,i.jsx)(`header`,{"data-komc":!0,className:(0,n.default)(`komc:w-full komc:sticky komc:top-0 komc:z-1000 komc:bg-white`,`komc:transition-all komc:duration-200`,a),...o,children:(0,i.jsx)(`div`,{className:p({maxWidth:t,size:r}),children:e})})}const h=(0,a.cva)(t.f(`komc:flex komc:items-center komc:w-full komc:px-2`,`komc:[&>input]:outline-none komc:[&>input]:w-full`,`komc:[&>input]:focus:ring-0 komc:[&>input]:focus:ring-offset-0`,`komc:[&>input]:h-full`),{variants:{size:{xs:`komc:h-7.5`,sm:`komc:h-8`,base:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`},gap:{none:`komc:gap-0`,xs:`komc:gap-1`,sm:`komc:gap-2`,md:`komc:gap-3`,lg:`komc:gap-4`,xl:`komc:gap-5`},outline:{line:`komc:border`,solid:`komc:border-transparent`,clear:`komc:border-none`,dashed:`komc:border-dashed`,dotted:`komc:border-dotted`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`}}}),g=(0,r.forwardRef)(({prefix:e=null,surffix:t=null,size:n=`lg`,gap:r=`xl`,outline:a=`line`,rounded:o=`lg`,className:s,...c},l)=>(0,i.jsxs)(`div`,{"data-komc":!0,className:h({size:n,gap:r,outline:a,rounded:o,className:s}),children:[e,(0,i.jsx)(`input`,{ref:l,type:`text`,...c}),t]}));var _=g;const v=(0,a.cva)(`komc:w-full komc:mx-auto komc:relative`,{variants:{type:{main:`komc:flex komc:flex-col`,content:`komc:grow komc:my-0`},maxWidth:{none:``,xs:`komc:max-w-xs komc:xl:max-w-full`,sm:`komc:max-w-sm komc:xl:max-w-full`,md:`komc:max-w-md komc:xl:max-w-full`,lg:`komc:max-w-lg komc:xl:max-w-full`,xl:`komc:max-w-xl komc:xl:max-w-full`,"2xl":`komc:max-w-2xl komc:xl:max-w-full`,"3xl":`komc:max-w-3xl komc:xl:max-w-full`,full:`komc:max-w-full`}},defaultVariants:{type:`main`,maxWidth:`full`}});function y({children:e,className:t,type:n,maxWidth:r,...a}){return(0,i.jsx)(`div`,{"data-komc":!0,className:v({type:n,maxWidth:r,className:t}),...a,children:e})}const b=(0,a.cva)(t.f(`komc:w-full komc:animate-pulse komc:bg-gray-200`),{variants:{size:{xs:`komc:h-4`,sm:`komc:h-8`,md:`komc:h-12`,lg:`komc:h-16`,xl:`komc:h-20`,"2xl":`komc:h-24`,"3xl":`komc:h-28`,square:`komc:h-auto komc:aspect-square`,full:`komc:h-full`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`,"3xl":`komc:rounded-3xl`,full:`komc:rounded-full`}},defaultVariants:{size:`sm`,rounded:`sm`}});function x({size:e,rounded:t,width:n,height:r,className:a,...o}){let s=n?typeof n==`string`?n:`${n}px`:void 0,c=r?typeof r==`string`?r:`${r}px`:void 0;return(0,i.jsx)(`div`,{"data-komc":!0,className:b({size:e,rounded:t,className:a}),style:{width:s,height:c},...o})}exports.BottomAppBar=o,exports.Button=l,exports.ConditionalWrapper=u,exports.Footer=f,exports.Header=m,exports.Input=_,exports.Layout=y,exports.Skeleton=x;
|
package/dist/ui/index.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react2 from "react";
|
|
2
2
|
import React$1, { HTMLAttributes } from "react";
|
|
3
|
-
import * as
|
|
4
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime4 from "react/jsx-runtime";
|
|
4
|
+
import * as class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
5
|
import { VariantProps } from "class-variance-authority";
|
|
6
6
|
|
|
7
7
|
//#region src/ui/bottom-app-bar/bottom-app-bar.d.ts
|
|
@@ -27,7 +27,7 @@ declare const classes$5: (props?: ({
|
|
|
27
27
|
outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
|
|
28
28
|
rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2.5xl" | "full" | null | undefined;
|
|
29
29
|
variant?: "default" | "ghost" | "white" | "blue" | "night" | "charcoal" | "slate" | "red" | "yellow" | "black" | null | undefined;
|
|
30
|
-
} &
|
|
30
|
+
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
31
31
|
interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'suffix' | 'prefix'>, VariantProps<typeof classes$5> {
|
|
32
32
|
/**
|
|
33
33
|
* @param size - Height of the button
|
|
@@ -96,7 +96,7 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
96
96
|
* @param rounded - Border radius of the button
|
|
97
97
|
* @param variant - Variant of the button
|
|
98
98
|
*/
|
|
99
|
-
declare const Button:
|
|
99
|
+
declare const Button: react2.ForwardRefExoticComponent<ButtonProps & react2.RefAttributes<HTMLButtonElement>>;
|
|
100
100
|
//#endregion
|
|
101
101
|
//#region src/ui/conditional-wrapper/conditional-wrapper.d.ts
|
|
102
102
|
interface ConditionalWrapperProps {
|
|
@@ -113,12 +113,12 @@ declare function ConditionalWrapper({
|
|
|
113
113
|
condition,
|
|
114
114
|
wrapper,
|
|
115
115
|
children
|
|
116
|
-
}: ConditionalWrapperProps):
|
|
116
|
+
}: ConditionalWrapperProps): react2.ReactNode;
|
|
117
117
|
//#endregion
|
|
118
118
|
//#region src/ui/footer/footer.d.ts
|
|
119
119
|
declare const classes$4: (props?: ({
|
|
120
120
|
maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "full" | "4xl" | "5xl" | "6xl" | "7xl" | null | undefined;
|
|
121
|
-
} &
|
|
121
|
+
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
122
122
|
interface FooterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$4> {
|
|
123
123
|
/**
|
|
124
124
|
* @param maxWidth - Maximum width of the footer
|
|
@@ -145,13 +145,13 @@ declare function Footer({
|
|
|
145
145
|
children,
|
|
146
146
|
maxWidth,
|
|
147
147
|
...props
|
|
148
|
-
}: FooterProps):
|
|
148
|
+
}: FooterProps): react_jsx_runtime4.JSX.Element;
|
|
149
149
|
//#endregion
|
|
150
150
|
//#region src/ui/header/header.d.ts
|
|
151
151
|
declare const classes$3: (props?: ({
|
|
152
152
|
maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "full" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | null | undefined;
|
|
153
153
|
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "4.25xl" | null | undefined;
|
|
154
|
-
} &
|
|
154
|
+
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
155
155
|
interface HeaderProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$3> {
|
|
156
156
|
children?: React.ReactNode;
|
|
157
157
|
/**
|
|
@@ -200,7 +200,7 @@ declare function Header({
|
|
|
200
200
|
size,
|
|
201
201
|
className,
|
|
202
202
|
...props
|
|
203
|
-
}: HeaderProps):
|
|
203
|
+
}: HeaderProps): react_jsx_runtime4.JSX.Element;
|
|
204
204
|
//#endregion
|
|
205
205
|
//#region src/ui/input/input.d.ts
|
|
206
206
|
declare const classes$2: (props?: ({
|
|
@@ -208,7 +208,7 @@ declare const classes$2: (props?: ({
|
|
|
208
208
|
gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
|
|
209
209
|
outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
|
|
210
210
|
rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | null | undefined;
|
|
211
|
-
} &
|
|
211
|
+
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
212
212
|
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'surffix' | 'size'>, VariantProps<typeof classes$2> {
|
|
213
213
|
/**
|
|
214
214
|
* @param size - Height of the input
|
|
@@ -260,13 +260,13 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
|
|
|
260
260
|
* @param outline - Outline of the input
|
|
261
261
|
* @param rounded - Border radius of the input
|
|
262
262
|
*/
|
|
263
|
-
declare const Input:
|
|
263
|
+
declare const Input: react2.ForwardRefExoticComponent<InputProps & react2.RefAttributes<HTMLInputElement>>;
|
|
264
264
|
//#endregion
|
|
265
265
|
//#region src/ui/layout/layout.d.ts
|
|
266
266
|
declare const classes$1: (props?: ({
|
|
267
267
|
type?: "content" | "main" | null | undefined;
|
|
268
268
|
maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "full" | null | undefined;
|
|
269
|
-
} &
|
|
269
|
+
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
270
270
|
interface LayoutProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$1> {
|
|
271
271
|
/**
|
|
272
272
|
* @param type - Type of the layout
|
|
@@ -298,13 +298,13 @@ declare function Layout({
|
|
|
298
298
|
type,
|
|
299
299
|
maxWidth,
|
|
300
300
|
...props
|
|
301
|
-
}: LayoutProps):
|
|
301
|
+
}: LayoutProps): react_jsx_runtime4.JSX.Element;
|
|
302
302
|
//#endregion
|
|
303
303
|
//#region src/ui/skeleton/skeleton.d.ts
|
|
304
304
|
declare const classes: (props?: ({
|
|
305
305
|
size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "square" | null | undefined;
|
|
306
306
|
rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "full" | null | undefined;
|
|
307
|
-
} &
|
|
307
|
+
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
308
308
|
interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes> {
|
|
309
309
|
/**
|
|
310
310
|
* @param width - Width of the skeleton
|
|
@@ -361,6 +361,6 @@ declare function Skeleton({
|
|
|
361
361
|
height,
|
|
362
362
|
className,
|
|
363
363
|
...props
|
|
364
|
-
}: SkeletonProps):
|
|
364
|
+
}: SkeletonProps): react_jsx_runtime4.JSX.Element;
|
|
365
365
|
//#endregion
|
|
366
366
|
export { BottomAppBar, type BottomAppBarProps, Button, type ButtonProps, ConditionalWrapper, type ConditionalWrapperProps, Footer, type FooterProps, Header, type HeaderProps, Input, type InputProps, Layout, type LayoutProps, Skeleton, type SkeletonProps };
|
package/dist/ui/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react0 from "react";
|
|
2
2
|
import React$1, { HTMLAttributes } from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
4
|
import { VariantProps } from "class-variance-authority";
|
|
5
5
|
import * as class_variance_authority_types0 from "class-variance-authority/types";
|
|
6
6
|
|
|
@@ -96,7 +96,7 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
96
96
|
* @param rounded - Border radius of the button
|
|
97
97
|
* @param variant - Variant of the button
|
|
98
98
|
*/
|
|
99
|
-
declare const Button:
|
|
99
|
+
declare const Button: react0.ForwardRefExoticComponent<ButtonProps & react0.RefAttributes<HTMLButtonElement>>;
|
|
100
100
|
//#endregion
|
|
101
101
|
//#region src/ui/conditional-wrapper/conditional-wrapper.d.ts
|
|
102
102
|
interface ConditionalWrapperProps {
|
|
@@ -113,7 +113,7 @@ declare function ConditionalWrapper({
|
|
|
113
113
|
condition,
|
|
114
114
|
wrapper,
|
|
115
115
|
children
|
|
116
|
-
}: ConditionalWrapperProps):
|
|
116
|
+
}: ConditionalWrapperProps): react0.ReactNode;
|
|
117
117
|
//#endregion
|
|
118
118
|
//#region src/ui/footer/footer.d.ts
|
|
119
119
|
declare const classes$4: (props?: ({
|
|
@@ -145,7 +145,7 @@ declare function Footer({
|
|
|
145
145
|
children,
|
|
146
146
|
maxWidth,
|
|
147
147
|
...props
|
|
148
|
-
}: FooterProps):
|
|
148
|
+
}: FooterProps): react_jsx_runtime0.JSX.Element;
|
|
149
149
|
//#endregion
|
|
150
150
|
//#region src/ui/header/header.d.ts
|
|
151
151
|
declare const classes$3: (props?: ({
|
|
@@ -200,7 +200,7 @@ declare function Header({
|
|
|
200
200
|
size,
|
|
201
201
|
className,
|
|
202
202
|
...props
|
|
203
|
-
}: HeaderProps):
|
|
203
|
+
}: HeaderProps): react_jsx_runtime0.JSX.Element;
|
|
204
204
|
//#endregion
|
|
205
205
|
//#region src/ui/input/input.d.ts
|
|
206
206
|
declare const classes$2: (props?: ({
|
|
@@ -260,7 +260,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
|
|
|
260
260
|
* @param outline - Outline of the input
|
|
261
261
|
* @param rounded - Border radius of the input
|
|
262
262
|
*/
|
|
263
|
-
declare const Input:
|
|
263
|
+
declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<HTMLInputElement>>;
|
|
264
264
|
//#endregion
|
|
265
265
|
//#region src/ui/layout/layout.d.ts
|
|
266
266
|
declare const classes$1: (props?: ({
|
|
@@ -298,7 +298,7 @@ declare function Layout({
|
|
|
298
298
|
type,
|
|
299
299
|
maxWidth,
|
|
300
300
|
...props
|
|
301
|
-
}: LayoutProps):
|
|
301
|
+
}: LayoutProps): react_jsx_runtime0.JSX.Element;
|
|
302
302
|
//#endregion
|
|
303
303
|
//#region src/ui/skeleton/skeleton.d.ts
|
|
304
304
|
declare const classes: (props?: ({
|
|
@@ -361,6 +361,6 @@ declare function Skeleton({
|
|
|
361
361
|
height,
|
|
362
362
|
className,
|
|
363
363
|
...props
|
|
364
|
-
}: SkeletonProps):
|
|
364
|
+
}: SkeletonProps): react_jsx_runtime0.JSX.Element;
|
|
365
365
|
//#endregion
|
|
366
366
|
export { BottomAppBar, type BottomAppBarProps, Button, type ButtonProps, ConditionalWrapper, type ConditionalWrapperProps, Footer, type FooterProps, Header, type HeaderProps, Input, type InputProps, Layout, type LayoutProps, Skeleton, type SkeletonProps };
|
package/dist/ui/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{f as e}from"../util-BrmjOcya.mjs";import t from"clsx";import n,{forwardRef as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";function s({className:e,items:r,render:a,...o}){return i(`nav`,{"data-komc":!0,className:t(`komc:
|
|
1
|
+
import{f as e}from"../util-BrmjOcya.mjs";import t from"clsx";import n,{forwardRef as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";function s({className:e,items:r,render:a,...o}){return i(`nav`,{"data-komc":!0,className:t(`komc:sticky komc:bottom-0 komc:left-0 komc:right-0`,`komc:border-t komc:border-neutral-200 komc:bg-white komc:z-10`,e),...o,children:i(`div`,{className:`komc:grid komc:min-h-15`,style:{gridTemplateColumns:`repeat(${r.length}, 1fr)`},children:r.map((e,t)=>i(n.Fragment,{children:a(e)},t))})})}const c=o(e(`komc:inline-flex komc:justify-center komc:items-center komc:w-full`,`komc:transition-colors komc:duration-200 komc:relative`,`komc:*:transition-colors komc:*:duration-200`,`komc:disabled:cursor-default komc:disabled:opacity-50 komc:disabled:pointer-events-none`,`komc:whitespace-nowrap komc:shrink-0 komc:outline-none`),{variants:{size:{xs:`komc:h-7.5`,sm:`komc:h-8`,base:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`},gap:{none:`komc:gap-0`,xs:`komc:gap-1`,sm:`komc:gap-2`,md:`komc:gap-3`,lg:`komc:gap-4`,xl:`komc:gap-5`},outline:{line:`komc:border`,solid:`komc:border-transparent`,clear:`komc:border-none`,dashed:`komc:border-dashed`,dotted:`komc:border-dotted`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`,"2.5xl":`komc:rounded-[20px]`,"3xl":`komc:rounded-3xl`,full:`komc:rounded-full`},variant:{default:``,ghost:`komc:bg-transparent komc:text-neutral-900`,white:`komc:bg-white komc:text-neutral-900 komc:hover:bg-neutral-100`,blue:`komc:bg-blue-500 komc:text-white komc:hover:bg-blue-600`,night:`komc:bg-[#2c5cb7] komc:text-white komc:hover:bg-[#26539F]`,charcoal:`komc:bg-[#36454F] komc:text-white komc:hover:bg-[#2E3A43]`,slate:`komc:bg-[#4A5565] komc:text-white komc:hover:bg-[#424A57]`,red:`komc:bg-[#C8313A] komc:text-white komc:hover:bg-[#B02B33]`,yellow:`komc:bg-[#E7FF14] komc:text-black komc:hover:bg-[#D4E600]`,black:`komc:bg-[rgb(95,95,96)] komc:text-white komc:hover:bg-[rgb(76,76,77)] komc:active:bg-[rgb(76,76,77)]`}},defaultVariants:{size:void 0,outline:void 0,rounded:void 0,variant:void 0}});var l=r(({children:e=`button`,type:t=`button`,size:n=`md`,gap:r=`sm`,outline:a=`line`,rounded:o=`sm`,variant:s=`blue`,className:l,...u},d)=>i(`button`,{ref:d,type:t,"data-komc":!0,className:c({size:n,outline:a,gap:r,rounded:o,variant:s,className:l}),...u,children:e}));function u({condition:e,wrapper:t,children:n}){return e?t(n):n}const d=o(`komc:flex komc:flex-col komc:w-full komc:mx-auto`,{variants:{maxWidth:{none:``,xs:`komc:max-w-xs`,sm:`komc:max-w-sm`,md:`komc:max-w-md`,lg:`komc:max-w-lg`,xl:`komc:max-w-xl`,"2xl":`komc:max-w-2xl`,"3xl":`komc:max-w-3xl`,"4xl":`komc:max-w-4xl`,"5xl":`komc:max-w-5xl`,"6xl":`komc:max-w-6xl`,"7xl":`komc:max-w-7xl`,full:`komc:max-w-full`}},defaultVariants:{maxWidth:`full`}});function f({className:e,children:n,maxWidth:r,...a}){return i(`footer`,{"data-komc":!0,className:t(`komc:block komc:w-full komc:h-full`,`komc:bg-white komc:border-t komc:border-neutral-200`,e),...a,children:i(`div`,{className:d({maxWidth:r}),children:n})})}const p=o(e(`komc:flex komc:items-center`,`komc:mx-auto komc:min-h-10`),{variants:{maxWidth:{none:``,sm:`komc:max-w-sm`,md:`komc:max-w-md`,lg:`komc:max-w-lg`,xl:`komc:max-w-xl`,"2xl":`komc:max-w-2xl`,"3xl":`komc:max-w-3xl`,"4xl":`komc:max-w-4xl`,"5xl":`komc:max-w-5xl`,"6xl":`komc:max-w-6xl`,"7xl":`komc:max-w-7xl`,"8xl":`komc:max-w-330`,full:`komc:max-w-full`},size:{sm:`komc:h-10`,md:`komc:h-12`,lg:`komc:h-14`,xl:`komc:h-16`,"2xl":`komc:h-18`,"3xl":`komc:h-20`,"4xl":`komc:h-22`,"4.25xl":`komc:h-22.5`,"5xl":`komc:h-24`,"6xl":`komc:h-26`,"7xl":`komc:h-28`,"8xl":`komc:h-30`,full:`komc:h-full`}},defaultVariants:{maxWidth:`full`,size:`xl`}});function m({children:e,maxWidth:n,size:r,className:a,...o}){return i(`header`,{"data-komc":!0,className:t(`komc:w-full komc:sticky komc:top-0 komc:z-1000 komc:bg-white`,`komc:transition-all komc:duration-200`,a),...o,children:i(`div`,{className:p({maxWidth:n,size:r}),children:e})})}const h=o(e(`komc:flex komc:items-center komc:w-full komc:px-2`,`komc:[&>input]:outline-none komc:[&>input]:w-full`,`komc:[&>input]:focus:ring-0 komc:[&>input]:focus:ring-offset-0`,`komc:[&>input]:h-full`),{variants:{size:{xs:`komc:h-7.5`,sm:`komc:h-8`,base:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`},gap:{none:`komc:gap-0`,xs:`komc:gap-1`,sm:`komc:gap-2`,md:`komc:gap-3`,lg:`komc:gap-4`,xl:`komc:gap-5`},outline:{line:`komc:border`,solid:`komc:border-transparent`,clear:`komc:border-none`,dashed:`komc:border-dashed`,dotted:`komc:border-dotted`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`}}});var g=r(({prefix:e=null,surffix:t=null,size:n=`lg`,gap:r=`xl`,outline:o=`line`,rounded:s=`lg`,className:c,...l},u)=>a(`div`,{"data-komc":!0,className:h({size:n,gap:r,outline:o,rounded:s,className:c}),children:[e,i(`input`,{ref:u,type:`text`,...l}),t]}));const _=o(`komc:w-full komc:mx-auto komc:relative`,{variants:{type:{main:`komc:flex komc:flex-col`,content:`komc:grow komc:my-0`},maxWidth:{none:``,xs:`komc:max-w-xs komc:xl:max-w-full`,sm:`komc:max-w-sm komc:xl:max-w-full`,md:`komc:max-w-md komc:xl:max-w-full`,lg:`komc:max-w-lg komc:xl:max-w-full`,xl:`komc:max-w-xl komc:xl:max-w-full`,"2xl":`komc:max-w-2xl komc:xl:max-w-full`,"3xl":`komc:max-w-3xl komc:xl:max-w-full`,full:`komc:max-w-full`}},defaultVariants:{type:`main`,maxWidth:`full`}});function v({children:e,className:t,type:n,maxWidth:r,...a}){return i(`div`,{"data-komc":!0,className:_({type:n,maxWidth:r,className:t}),...a,children:e})}const y=o(e(`komc:w-full komc:animate-pulse komc:bg-gray-200`),{variants:{size:{xs:`komc:h-4`,sm:`komc:h-8`,md:`komc:h-12`,lg:`komc:h-16`,xl:`komc:h-20`,"2xl":`komc:h-24`,"3xl":`komc:h-28`,square:`komc:h-auto komc:aspect-square`,full:`komc:h-full`},rounded:{none:`komc:rounded-none`,sm:`komc:rounded-sm`,md:`komc:rounded-md`,lg:`komc:rounded-lg`,xl:`komc:rounded-xl`,"2xl":`komc:rounded-2xl`,"3xl":`komc:rounded-3xl`,full:`komc:rounded-full`}},defaultVariants:{size:`sm`,rounded:`sm`}});function b({size:e,rounded:t,width:n,height:r,className:a,...o}){let s=n?typeof n==`string`?n:`${n}px`:void 0,c=r?typeof r==`string`?r:`${r}px`:void 0;return i(`div`,{"data-komc":!0,className:y({size:e,rounded:t,className:a}),style:{width:s,height:c},...o})}export{s as BottomAppBar,l as Button,u as ConditionalWrapper,f as Footer,m as Header,g as Input,v as Layout,b as Skeleton};
|