@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 ADDED
@@ -0,0 +1,11 @@
1
+ # @websolutespa/ask-ui
2
+
3
+ [![npm version](https://badge.fury.io/js/%40websolutespa%2Fask-ui.svg)](https://badge.fury.io/js/%40websolutespa%2Fask-ui)
4
+
5
+ [![status alpha](https://img.shields.io/badge/status-alpha-red.svg)](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,4 @@
1
+ //#region src/hooks/use-mobile.d.ts
2
+ declare function useIsMobile(): boolean;
3
+ //#endregion
4
+ export { useIsMobile };
@@ -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 };
@@ -0,0 +1,2 @@
1
+ import { t as cn } from "../utils-Dnvgforf.mjs";
2
+ export { cn };
@@ -0,0 +1,2 @@
1
+ import { t as cn } from "../utils-XdqGR1qq.mjs";
2
+ export { cn };
@@ -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
+ }
@@ -0,0 +1,2 @@
1
+ import { t as cn } from "./utils-Dnvgforf.mjs";
2
+ export { cn };
package/dist/index.mjs ADDED
@@ -0,0 +1,2 @@
1
+ import { t as cn } from "./utils-XdqGR1qq.mjs";
2
+ export { cn };