@konopskidev/ui 0.1.1 → 0.1.2
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/dist/components/ui/badge.d.ts +1 -1
- package/dist/components/ui/badge.d.ts.map +1 -1
- package/dist/components/ui/badge.js +1 -0
- package/dist/components/ui/badge.js.map +1 -1
- package/dist/components/ui/card.d.ts +9 -6
- package/dist/components/ui/card.d.ts.map +1 -1
- package/dist/components/ui/card.js +6 -12
- package/dist/components/ui/card.js.map +1 -1
- package/dist/components/ui/dialog.d.ts.map +1 -1
- package/dist/components/ui/dialog.js +0 -2
- package/dist/components/ui/dialog.js.map +1 -1
- package/dist/components/ui/table.js +2 -2
- package/dist/components/ui/table.js.map +1 -1
- package/package.json +7 -2
- package/src/styles/theme.css +2 -0
- package/src/styles/tokens.css +8 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type VariantProps } from 'class-variance-authority';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
|
-
variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
|
|
4
|
+
variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | "tag" | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
6
|
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
|
|
7
7
|
asChild?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,aAAa;;
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,aAAa;;8EAmBlB,CAAC;AAEF,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,qBAW3F;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -11,6 +11,7 @@ var badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center
|
|
|
11
11
|
destructive: "bg-destructive/10 text-destructive focus-visible:outline-destructive dark:bg-destructive/20 dark:focus-visible:outline-destructive [a]:hover:bg-destructive/20",
|
|
12
12
|
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
|
13
13
|
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
|
14
|
+
tag: "h-auto items-baseline rounded-sm border-border bg-transparent px-2 py-0.5 text-[13px] leading-normal font-normal text-muted-foreground hover:border-foreground/30 hover:text-foreground",
|
|
14
15
|
link: "text-primary underline-offset-4 hover:underline"
|
|
15
16
|
} },
|
|
16
17
|
defaultVariants: { variant: "default" }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from 'cn';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\nconst badgeVariants = cva(\n 'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:ring-[3px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n destructive:\n 'bg-destructive/10 text-destructive focus-visible:outline-destructive dark:bg-destructive/20 dark:focus-visible:outline-destructive [a]:hover:bg-destructive/20',\n outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n\nfunction Badge({\n className,\n variant = 'default',\n asChild = false,\n ...props\n}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n const Comp = asChild ? Slot.Root : 'span';\n\n return (\n <Comp\n data-slot=\"badge\"\n data-variant={variant}\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n );\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;AAKA,IAAM,gBAAgB,IACpB,ybACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,WAAW;EACX,aACE;EACF,SAAS;EACT,OAAO;EACP,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,MAAM,EACb,WACA,UAAU,WACV,UAAU,OACV,GAAG,SACyF;CAC5F,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL"}
|
|
1
|
+
{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from 'cn';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\nconst badgeVariants = cva(\n 'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:ring-[3px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n destructive:\n 'bg-destructive/10 text-destructive focus-visible:outline-destructive dark:bg-destructive/20 dark:focus-visible:outline-destructive [a]:hover:bg-destructive/20',\n outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n tag: 'h-auto items-baseline rounded-sm border-border bg-transparent px-2 py-0.5 text-[13px] leading-normal font-normal text-muted-foreground hover:border-foreground/30 hover:text-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n\nfunction Badge({\n className,\n variant = 'default',\n asChild = false,\n ...props\n}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n const Comp = asChild ? Slot.Root : 'span';\n\n return (\n <Comp\n data-slot=\"badge\"\n data-variant={variant}\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n );\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;AAKA,IAAM,gBAAgB,IACpB,ybACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,WAAW;EACX,aACE;EACF,SAAS;EACT,OAAO;EACP,KAAK;EACL,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,MAAM,EACb,WACA,UAAU,WACV,UAAU,OACV,GAAG,SACyF;CAC5F,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -5,22 +5,25 @@ type CardProps = React.ComponentProps<'div'> & {
|
|
|
5
5
|
};
|
|
6
6
|
declare function Card({ className, interactive, ...props }: CardProps): React.JSX.Element;
|
|
7
7
|
declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
8
|
-
|
|
8
|
+
interface CardTitleProps extends React.ComponentProps<'div'> {
|
|
9
|
+
/** Render as a different element (e.g. h2, h3) while preserving styling. */
|
|
10
|
+
asChild?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare function CardTitle({ className, asChild, ...props }: CardTitleProps): React.JSX.Element;
|
|
9
13
|
declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
10
14
|
declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
11
15
|
declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
12
16
|
declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
13
|
-
interface CardImageProps
|
|
14
|
-
src?: string | null;
|
|
15
|
-
alt: string;
|
|
16
|
-
/** Tailwind aspect ratio utility for the media box. */
|
|
17
|
+
interface CardImageProps {
|
|
17
18
|
aspect?: string;
|
|
19
|
+
className?: string;
|
|
20
|
+
children?: React.ReactNode;
|
|
18
21
|
}
|
|
19
22
|
/**
|
|
20
23
|
* A bleeding card image, sized by aspect ratio. Framework-agnostic on purpose:
|
|
21
24
|
* this package never imports a framework-specific image component, so the same
|
|
22
25
|
* card works in Vite, Astro, Next or a plain HTML page.
|
|
23
26
|
*/
|
|
24
|
-
declare function CardImage({ className,
|
|
27
|
+
declare function CardImage({ className, aspect, children }: CardImageProps): React.JSX.Element;
|
|
25
28
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardAction, CardContent, CardImage, type CardProps, type CardImageProps, };
|
|
26
29
|
//# sourceMappingURL=card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7C,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,WAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAYpE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIvE;AAED,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC1D,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAU1E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,MAAuB,EAAE,QAAQ,EAAE,EAAE,cAAc,qBASlF;AACD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,UAAU,EACV,WAAW,EACX,SAAS,EACT,KAAK,SAAS,EACd,KAAK,cAAc,GACpB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { cn } from "cn";
|
|
2
|
+
import { Slot } from "radix-ui";
|
|
2
3
|
import "react";
|
|
3
4
|
import { jsx } from "react/jsx-runtime";
|
|
4
5
|
// src/components/ui/card.tsx
|
|
@@ -16,8 +17,9 @@ function CardHeader({ className, ...props }) {
|
|
|
16
17
|
...props
|
|
17
18
|
});
|
|
18
19
|
}
|
|
19
|
-
function CardTitle({ className, ...props }) {
|
|
20
|
-
|
|
20
|
+
function CardTitle({ className, asChild = false, ...props }) {
|
|
21
|
+
const Comp = asChild ? Slot.Root : "div";
|
|
22
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
21
23
|
"data-slot": "card-title",
|
|
22
24
|
className: cn("font-display text-h3 font-semibold tracking-tight", className),
|
|
23
25
|
...props
|
|
@@ -56,19 +58,11 @@ function CardFooter({ className, ...props }) {
|
|
|
56
58
|
* this package never imports a framework-specific image component, so the same
|
|
57
59
|
* card works in Vite, Astro, Next or a plain HTML page.
|
|
58
60
|
*/
|
|
59
|
-
function CardImage({ className,
|
|
60
|
-
if (!src) return null;
|
|
61
|
+
function CardImage({ className, aspect = "aspect-video", children }) {
|
|
61
62
|
return /* @__PURE__ */ jsx("div", {
|
|
62
63
|
"data-slot": "card-image",
|
|
63
64
|
className: cn("relative overflow-hidden rounded-t-sm", aspect, className),
|
|
64
|
-
children
|
|
65
|
-
src,
|
|
66
|
-
alt,
|
|
67
|
-
loading: "lazy",
|
|
68
|
-
decoding: "async",
|
|
69
|
-
className: "h-full w-full object-cover",
|
|
70
|
-
...props
|
|
71
|
-
})
|
|
65
|
+
children
|
|
72
66
|
});
|
|
73
67
|
}
|
|
74
68
|
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["import { cn } from 'cn';\nimport * as React from 'react';\n\ntype CardProps = React.ComponentProps<'div'> & {\n /** Adds a subtle hover affordance for cards that behave as links. */\n interactive?: boolean;\n};\n\nfunction Card({ className, interactive = false, ...props }: CardProps) {\n return (\n <div\n data-slot=\"card\"\n className={cn(\n 'flex flex-col card',\n interactive && 'transition-colors hover:border-foreground/25',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div data-slot=\"card-header\" className={cn('flex flex-col gap-2 p-5', className)} {...props} />\n );\n}\n\nfunction CardTitle({ className, ...props }:
|
|
1
|
+
{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["import { cn } from 'cn';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\ntype CardProps = React.ComponentProps<'div'> & {\n /** Adds a subtle hover affordance for cards that behave as links. */\n interactive?: boolean;\n};\n\nfunction Card({ className, interactive = false, ...props }: CardProps) {\n return (\n <div\n data-slot=\"card\"\n className={cn(\n 'flex flex-col card',\n interactive && 'transition-colors hover:border-foreground/25',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div data-slot=\"card-header\" className={cn('flex flex-col gap-2 p-5', className)} {...props} />\n );\n}\n\ninterface CardTitleProps extends React.ComponentProps<'div'> {\n /** Render as a different element (e.g. h2, h3) while preserving styling. */\n asChild?: boolean;\n}\n\nfunction CardTitle({ className, asChild = false, ...props }: CardTitleProps) {\n const Comp = asChild ? Slot.Root : 'div';\n\n return (\n <Comp\n data-slot=\"card-title\"\n className={cn('font-display text-h3 font-semibold tracking-tight', className)}\n {...props}\n />\n );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn('text-base leading-relaxed text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-action\"\n className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n {...props}\n />\n );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn('flex flex-col gap-2 p-5 pt-0', className)}\n {...props}\n />\n );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn('flex items-center p-5 pt-0', className)}\n {...props}\n />\n );\n}\n\ninterface CardImageProps {\n aspect?: string;\n className?: string;\n children?: React.ReactNode;\n}\n\n/**\n * A bleeding card image, sized by aspect ratio. Framework-agnostic on purpose:\n * this package never imports a framework-specific image component, so the same\n * card works in Vite, Astro, Next or a plain HTML page.\n */\nfunction CardImage({ className, aspect = 'aspect-video', children }: CardImageProps) {\n return (\n <div\n data-slot=\"card-image\"\n className={cn('relative overflow-hidden rounded-t-sm', aspect, className)}\n >\n {children}\n </div>\n );\n}\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardDescription,\n CardAction,\n CardContent,\n CardImage,\n type CardProps,\n type CardImageProps,\n};\n"],"mappings":";;;;;AASA,SAAS,KAAK,EAAE,WAAW,cAAc,OAAO,GAAG,SAAoB;CACrE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sBACA,eAAe,gDACf,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAElG;AAOA,SAAS,UAAU,EAAE,WAAW,UAAU,OAAO,GAAG,SAAyB;CAC3E,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mDAAmD,SAAS;EAC1E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;;;;;;AAaA,SAAS,UAAU,EAAE,WAAW,SAAS,gBAAgB,YAA4B;CACnF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,QAAQ,SAAS;EAEvE;CACE,CAAA;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAE9E;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAExF;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,qBAEtF;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,qBAwBA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIzE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,eAAuB,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,qBAeA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQ/F;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAW1D;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/ui/dialog.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/ui/dialog.tsx"],"sourcesContent":["import { cn } from 'cn';\nimport { XIcon } from 'lucide-react';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { Button } from './button';\n\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n return (\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed inset-0 isolate z-[var(--z-index-overlay)] bg-black/80 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n showCloseButton?: boolean;\n}) {\n return (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-1/3 left-1/2 z-[var(--z-index-modal)] grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-sm border border-border bg-background p-6 shadow-lg duration-200 outline-none sm:max-w-lg md:top-1/2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-open:slide-in-from-top-[20%] data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:slide-out-to-top-[20%]',\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n <Button variant=\"ghost\" size=\"icon-sm\" className=\"absolute top-4 right-4\">\n <XIcon className=\"size-5\" />\n <span className=\"sr-only\">Close modal</span>\n </Button>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DialogPortal>\n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div data-slot=\"dialog-header\" className={cn('flex flex-col gap-1.5', className)} {...props} />\n );\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n showCloseButton?: boolean;\n}) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close asChild>\n <Button variant=\"outline\">Close</Button>\n </DialogPrimitive.Close>\n )}\n </div>\n );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn('font-display text-h3 leading-none font-semibold tracking-tight', className)}\n {...props}\n />\n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\n 'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n"],"mappings":";;;;;;;AAOA,SAASA,SAAO,EAAE,GAAG,SAA4D;CAC/E,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EAAE,GAAG,SAA+D;CACzF,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,oBAACA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,qKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,GAAG,SAGF;CACD,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,sbACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACA,mBACC,oBAACA,OAAgB,OAAjB;GAAuB,aAAU;GAAe,SAAA;GAC9C,UAAA,qBAAC,QAAD;IAAQ,SAAQ;IAAQ,MAAK;IAAU,WAAU;IAAjD,UAAA,CACE,oBAAC,OAAD,EAAO,WAAU,SAAU,CAAA,GAC3B,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAiB,CAAA,CACrC;;EACa,CAAA,CAEF;CACb,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAElG;AAEA,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;EAHN,UAAA,CAKG,UACA,mBACC,oBAACA,OAAgB,OAAjB;GAAuB,SAAA;GACrB,UAAA,oBAAC,QAAD;IAAQ,SAAQ;IAAU,UAAA;GAAa,CAAA;EAClB,CAAA,CAEtB;;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,sGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -44,14 +44,14 @@ function TableRow({ className, ...props }) {
|
|
|
44
44
|
function TableHead({ className, ...props }) {
|
|
45
45
|
return /* @__PURE__ */ jsx("th", {
|
|
46
46
|
"data-slot": "table-head",
|
|
47
|
-
className: cn("p-2 text-left align-middle font-bold whitespace-nowrap text-muted-foreground
|
|
47
|
+
className: cn("p-2 text-left align-middle font-bold whitespace-nowrap text-muted-foreground has-[[role=checkbox]]:pr-0", className),
|
|
48
48
|
...props
|
|
49
49
|
});
|
|
50
50
|
}
|
|
51
51
|
function TableCell({ className, ...props }) {
|
|
52
52
|
return /* @__PURE__ */ jsx("td", {
|
|
53
53
|
"data-slot": "table-cell",
|
|
54
|
-
className: cn("p-2 align-middle
|
|
54
|
+
className: cn("p-2 align-middle has-[[role=checkbox]]:pr-0", className),
|
|
55
55
|
...props
|
|
56
56
|
});
|
|
57
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/ui/table.tsx"],"sourcesContent":["import { cn } from 'cn';\nimport * as React from 'react';\n\nfunction Table({ className, ...props }: React.ComponentProps<'table'>) {\n return (\n <div data-slot=\"table-container\" className=\"relative w-full overflow-auto\">\n <table\n data-slot=\"table\"\n className={cn('w-full caption-bottom font-sans text-sm', className)}\n {...props}\n />\n </div>\n );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b', className)} {...props} />;\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n return (\n <tbody\n data-slot=\"table-body\"\n className={cn('[&_tr:last-child]:border-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n return (\n <tr\n data-slot=\"table-row\"\n className={cn(\n 'border-b border-border transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n return (\n <th\n data-slot=\"table-head\"\n className={cn(\n 'p-2 text-left align-middle font-bold whitespace-nowrap text-muted-foreground
|
|
1
|
+
{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/ui/table.tsx"],"sourcesContent":["import { cn } from 'cn';\nimport * as React from 'react';\n\nfunction Table({ className, ...props }: React.ComponentProps<'table'>) {\n return (\n <div data-slot=\"table-container\" className=\"relative w-full overflow-auto\">\n <table\n data-slot=\"table\"\n className={cn('w-full caption-bottom font-sans text-sm', className)}\n {...props}\n />\n </div>\n );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b', className)} {...props} />;\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n return (\n <tbody\n data-slot=\"table-body\"\n className={cn('[&_tr:last-child]:border-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n return (\n <tr\n data-slot=\"table-row\"\n className={cn(\n 'border-b border-border transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n return (\n <th\n data-slot=\"table-head\"\n className={cn(\n 'p-2 text-left align-middle font-bold whitespace-nowrap text-muted-foreground has-[[role=checkbox]]:pr-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n return (\n <td\n data-slot=\"table-cell\"\n className={cn('p-2 align-middle has-[[role=checkbox]]:pr-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {\n return (\n <caption\n data-slot=\"table-caption\"\n className={cn('mt-4 text-sm text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n"],"mappings":";;;;AAGA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAwC;CACrE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAkB,WAAU;EACzC,UAAA,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,2CAA2C,SAAS;GAClE,GAAI;EACL,CAAA;CACE,CAAA;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAe,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClG;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAwC;CACzE,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAqC;CACrE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,2HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,2GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,+CAA+C,SAAS;EACtE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAA0C;CAC9E,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@konopskidev/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "The konopskidev design system: shadcn/ui components styled with the konopskidev tokens on Tailwind CSS v4.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"shadcn",
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
"./package.json": "./package.json"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
|
+
"lucide-react": ">=0.4 <2",
|
|
55
56
|
"react": "^19.0.0",
|
|
56
57
|
"react-dom": "^19.0.0",
|
|
57
58
|
"tailwindcss": "^4.0.0"
|
|
@@ -59,6 +60,9 @@
|
|
|
59
60
|
"peerDependenciesMeta": {
|
|
60
61
|
"tailwindcss": {
|
|
61
62
|
"optional": true
|
|
63
|
+
},
|
|
64
|
+
"lucide-react": {
|
|
65
|
+
"optional": true
|
|
62
66
|
}
|
|
63
67
|
},
|
|
64
68
|
"engines": {
|
|
@@ -113,6 +117,8 @@
|
|
|
113
117
|
},
|
|
114
118
|
"dependencies": {
|
|
115
119
|
"@base-ui/react": "^1.9.0",
|
|
120
|
+
"@radix-ui/react-dialog": "^1.1.1",
|
|
121
|
+
"@radix-ui/react-slot": "^1.1.1",
|
|
116
122
|
"@shadcn/react": "^0.3.1",
|
|
117
123
|
"class-variance-authority": "^0.7.1",
|
|
118
124
|
"cmdk": "^1.1.1",
|
|
@@ -120,7 +126,6 @@
|
|
|
120
126
|
"date-fns": "^4.4.0",
|
|
121
127
|
"embla-carousel-react": "^8.6.0",
|
|
122
128
|
"input-otp": "^1.5.0",
|
|
123
|
-
"lucide-react": "^1.62.0",
|
|
124
129
|
"radix-ui": "^1.8.1",
|
|
125
130
|
"react-day-picker": "^10.0.2",
|
|
126
131
|
"react-resizable-panels": "^4.15.0",
|
package/src/styles/theme.css
CHANGED
|
@@ -61,6 +61,8 @@
|
|
|
61
61
|
--color-muted-foreground: var(--muted-foreground);
|
|
62
62
|
--color-accent: var(--accent);
|
|
63
63
|
--color-accent-foreground: var(--accent-foreground);
|
|
64
|
+
--color-success: var(--success);
|
|
65
|
+
--color-success-foreground: var(--success-foreground);
|
|
64
66
|
--color-destructive: var(--destructive);
|
|
65
67
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
66
68
|
--color-border: var(--border);
|
package/src/styles/tokens.css
CHANGED
|
@@ -35,6 +35,10 @@
|
|
|
35
35
|
--muted-foreground: #5d6670;
|
|
36
36
|
--accent: #f2f3f4;
|
|
37
37
|
--accent-foreground: #1d2329;
|
|
38
|
+
|
|
39
|
+
--success: #1f7a4d;
|
|
40
|
+
--success-foreground: #ffffff;
|
|
41
|
+
|
|
38
42
|
--destructive: #b4362f;
|
|
39
43
|
--destructive-foreground: #ffffff;
|
|
40
44
|
|
|
@@ -108,6 +112,10 @@
|
|
|
108
112
|
--muted-foreground: #98a2ac;
|
|
109
113
|
--accent: #232a31;
|
|
110
114
|
--accent-foreground: #e6e9ec;
|
|
115
|
+
|
|
116
|
+
--success: #42be80;
|
|
117
|
+
--success-foreground: #14181c;
|
|
118
|
+
|
|
111
119
|
--destructive: #e07b73;
|
|
112
120
|
--destructive-foreground: #14181c;
|
|
113
121
|
|