@websolutespa/ask-ui 1.0.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.
- package/README.md +11 -0
- package/dist/exports/components.d.mts +21 -0
- package/dist/exports/components.mjs +47 -0
- package/dist/exports/hooks.d.mts +4 -0
- package/dist/exports/hooks.mjs +18 -0
- package/dist/exports/lib.d.mts +2 -0
- package/dist/exports/lib.mjs +2 -0
- package/dist/globals.css +130 -0
- package/dist/index.d.mts +2 -0
- package/dist/index.mjs +2 -0
- package/dist/styles.css +8052 -0
- package/dist/utils-Dnvgforf.d.mts +6 -0
- package/dist/utils-XdqGR1qq.mjs +8 -0
- package/package.json +98 -0
package/README.md
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# @websolutespa/ask-ui
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/%40websolutespa%2Fask-ui)
|
|
4
|
+
|
|
5
|
+
[](https://shields.io/)
|
|
6
|
+
|
|
7
|
+
Ask UI module of the [Ask Repository](https://github.com/websolutespa/ask) by [websolute](https://www.websolute.com/).
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
##### *this library is for internal usage and not production ready*
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
+
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
|
+
|
|
6
|
+
//#region src/components/button.d.ts
|
|
7
|
+
declare const buttonVariants: (props?: ({
|
|
8
|
+
variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
|
|
9
|
+
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
10
|
+
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
11
|
+
declare function Button({
|
|
12
|
+
className,
|
|
13
|
+
variant,
|
|
14
|
+
size,
|
|
15
|
+
asChild,
|
|
16
|
+
...props
|
|
17
|
+
}: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
18
|
+
asChild?: boolean;
|
|
19
|
+
}): _$react_jsx_runtime0.JSX.Element;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { t as cn } from "../utils-XdqGR1qq.mjs";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { Slot } from "radix-ui";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/button.tsx
|
|
7
|
+
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none cursor-pointer focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
8
|
+
variants: {
|
|
9
|
+
variant: {
|
|
10
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
11
|
+
outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/0 dark:hover:bg-input/15",
|
|
12
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
13
|
+
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
14
|
+
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
15
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
16
|
+
},
|
|
17
|
+
size: {
|
|
18
|
+
default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
19
|
+
xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
20
|
+
sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
|
|
21
|
+
lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
22
|
+
icon: "size-9",
|
|
23
|
+
"icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
|
|
24
|
+
"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
|
|
25
|
+
"icon-lg": "size-10"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
defaultVariants: {
|
|
29
|
+
variant: "default",
|
|
30
|
+
size: "default"
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
|
|
34
|
+
return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
|
|
35
|
+
"data-slot": "button",
|
|
36
|
+
"data-variant": variant,
|
|
37
|
+
"data-size": size,
|
|
38
|
+
className: cn(buttonVariants({
|
|
39
|
+
variant,
|
|
40
|
+
size,
|
|
41
|
+
className
|
|
42
|
+
})),
|
|
43
|
+
...props
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
//#endregion
|
|
47
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//#region src/hooks/use-mobile.ts
|
|
3
|
+
const MOBILE_BREAKPOINT = 768;
|
|
4
|
+
function useIsMobile() {
|
|
5
|
+
const [isMobile, setIsMobile] = React.useState(void 0);
|
|
6
|
+
React.useEffect(() => {
|
|
7
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
8
|
+
const onChange = () => {
|
|
9
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
10
|
+
};
|
|
11
|
+
mql.addEventListener("change", onChange);
|
|
12
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
13
|
+
return () => mql.removeEventListener("change", onChange);
|
|
14
|
+
}, []);
|
|
15
|
+
return !!isMobile;
|
|
16
|
+
}
|
|
17
|
+
//#endregion
|
|
18
|
+
export { useIsMobile };
|
package/dist/globals.css
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "tw-animate-css";
|
|
3
|
+
@import "shadcn/tailwind.css";
|
|
4
|
+
|
|
5
|
+
@source "../../ask-plugin/**/*.{ts,tsx}";
|
|
6
|
+
@source "../../../apps/**/*.{ts,tsx}";
|
|
7
|
+
@source "./**/*.{ts,tsx}";
|
|
8
|
+
|
|
9
|
+
@custom-variant dark (&:is(.dark *));
|
|
10
|
+
|
|
11
|
+
@theme inline {
|
|
12
|
+
--font-heading: var(--font-sans);
|
|
13
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
14
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
15
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
16
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
17
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
18
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
19
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
20
|
+
--color-sidebar: var(--sidebar);
|
|
21
|
+
--color-chart-5: var(--chart-5);
|
|
22
|
+
--color-chart-4: var(--chart-4);
|
|
23
|
+
--color-chart-3: var(--chart-3);
|
|
24
|
+
--color-chart-2: var(--chart-2);
|
|
25
|
+
--color-chart-1: var(--chart-1);
|
|
26
|
+
--color-ring: var(--ring);
|
|
27
|
+
--color-input: var(--input);
|
|
28
|
+
--color-border: var(--border);
|
|
29
|
+
--color-destructive: var(--destructive);
|
|
30
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
31
|
+
--color-accent: var(--accent);
|
|
32
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
33
|
+
--color-muted: var(--muted);
|
|
34
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
35
|
+
--color-secondary: var(--secondary);
|
|
36
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
37
|
+
--color-primary: var(--primary);
|
|
38
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
39
|
+
--color-popover: var(--popover);
|
|
40
|
+
--color-card-foreground: var(--card-foreground);
|
|
41
|
+
--color-card: var(--card);
|
|
42
|
+
--color-foreground: var(--foreground);
|
|
43
|
+
--color-background: var(--background);
|
|
44
|
+
--radius-sm: calc(var(--radius) * 0.6);
|
|
45
|
+
--radius-md: calc(var(--radius) * 0.8);
|
|
46
|
+
--radius-lg: var(--radius);
|
|
47
|
+
--radius-xl: calc(var(--radius) * 1.4);
|
|
48
|
+
--radius-2xl: calc(var(--radius) * 1.8);
|
|
49
|
+
--radius-3xl: calc(var(--radius) * 2.2);
|
|
50
|
+
--radius-4xl: calc(var(--radius) * 2.6);
|
|
51
|
+
--font-sans: var(--font-sans);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:root {
|
|
55
|
+
--background: oklch(1 0 0);
|
|
56
|
+
--foreground: oklch(0.145 0 0);
|
|
57
|
+
--card: oklch(1 0 0);
|
|
58
|
+
--card-foreground: oklch(0.145 0 0);
|
|
59
|
+
--popover: oklch(1 0 0);
|
|
60
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
61
|
+
--primary: oklch(0.205 0 0);
|
|
62
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
63
|
+
--secondary: oklch(0.97 0 0);
|
|
64
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
65
|
+
--muted: oklch(0.97 0 0);
|
|
66
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
67
|
+
--accent: oklch(0.97 0 0);
|
|
68
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
69
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
70
|
+
--border: oklch(0.922 0 0);
|
|
71
|
+
--input: oklch(0.922 0 0);
|
|
72
|
+
--ring: oklch(0.708 0 0);
|
|
73
|
+
--chart-1: oklch(0.87 0 0);
|
|
74
|
+
--chart-2: oklch(0.556 0 0);
|
|
75
|
+
--chart-3: oklch(0.439 0 0);
|
|
76
|
+
--chart-4: oklch(0.371 0 0);
|
|
77
|
+
--chart-5: oklch(0.269 0 0);
|
|
78
|
+
--radius: 0.625rem;
|
|
79
|
+
--sidebar: oklch(0.985 0 0);
|
|
80
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
81
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
82
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
83
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
84
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
85
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
86
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.dark {
|
|
90
|
+
--background: oklch(0.145 0 0);
|
|
91
|
+
--foreground: oklch(0.985 0 0);
|
|
92
|
+
--card: oklch(0.205 0 0);
|
|
93
|
+
--card-foreground: oklch(0.985 0 0);
|
|
94
|
+
--popover: oklch(0.205 0 0);
|
|
95
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
96
|
+
--primary: oklch(0.922 0 0);
|
|
97
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
98
|
+
--secondary: oklch(0.269 0 0);
|
|
99
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
100
|
+
--muted: oklch(0.269 0 0);
|
|
101
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
102
|
+
--accent: oklch(0.269 0 0);
|
|
103
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
104
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
105
|
+
--border: oklch(1 0 0 / 10%);
|
|
106
|
+
--input: oklch(1 0 0 / 15%);
|
|
107
|
+
--ring: oklch(0.556 0 0);
|
|
108
|
+
--chart-1: oklch(0.87 0 0);
|
|
109
|
+
--chart-2: oklch(0.556 0 0);
|
|
110
|
+
--chart-3: oklch(0.439 0 0);
|
|
111
|
+
--chart-4: oklch(0.371 0 0);
|
|
112
|
+
--chart-5: oklch(0.269 0 0);
|
|
113
|
+
--sidebar: oklch(0.205 0 0);
|
|
114
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
115
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
116
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
117
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
118
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
119
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
120
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@layer base {
|
|
124
|
+
* {
|
|
125
|
+
@apply border-border outline-ring/50;
|
|
126
|
+
}
|
|
127
|
+
body {
|
|
128
|
+
@apply bg-background text-foreground;
|
|
129
|
+
}
|
|
130
|
+
}
|
package/dist/index.d.mts
ADDED
package/dist/index.mjs
ADDED