@camox/ui 0.26.0 → 0.27.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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/badge.tsx +9 -2
  3. package/src/styles/globals.css +4 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@camox/ui",
3
- "version": "0.26.0",
3
+ "version": "0.27.0",
4
4
  "files": [
5
5
  "src"
6
6
  ],
package/src/components/badge.tsx CHANGED
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
5
5
  import { cn } from "../lib/utils";
6
6
 
7
7
  const badgeVariants = cva(
8
- "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:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 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!",
8
+ "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
9
9
  {
10
10
  variants: {
11
11
  variant: {
@@ -17,9 +17,14 @@ const badgeVariants = cva(
17
17
  ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
18
18
  link: "text-primary underline-offset-4 hover:underline",
19
19
  },
20
+ size: {
21
+ default: "h-5 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
22
+ sm: "h-4 px-1.5 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1",
23
+ },
20
24
  },
21
25
  defaultVariants: {
22
26
  variant: "default",
27
+ size: "default",
23
28
  },
24
29
  },
25
30
  );
@@ -27,6 +32,7 @@ const badgeVariants = cva(
27
32
  function Badge({
28
33
  className,
29
34
  variant = "default",
35
+ size = "default",
30
36
  render,
31
37
  ...props
32
38
  }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
@@ -34,7 +40,7 @@ function Badge({
34
40
  defaultTagName: "span",
35
41
  props: mergeProps<"span">(
36
42
  {
37
- className: cn(badgeVariants({ variant }), className),
43
+ className: cn(badgeVariants({ variant, size }), className),
38
44
  },
39
45
  props,
40
46
  ),
@@ -42,6 +48,7 @@ function Badge({
42
48
  state: {
43
49
  slot: "badge",
44
50
  variant,
51
+ size,
45
52
  },
46
53
  });
47
54
  }
package/src/styles/globals.css CHANGED
@@ -14,8 +14,8 @@
14
14
  --secondary-foreground: theme(--color-zinc-900);
15
15
  --muted: theme(--color-zinc-100);
16
16
  --muted-foreground: theme(--color-zinc-500);
17
- --accent: oklch(0.95 0.005 190);
18
- --accent-foreground: oklch(0.2 0.01 190);
17
+ --accent: oklch(95% 0.004 286);
18
+ --accent-foreground: oklch(20% 0.006 286);
19
19
  --destructive: theme(--color-red-600);
20
20
  --destructive-foreground: theme(--color-red-600);
21
21
  --border: theme(--color-zinc-200);
@@ -50,8 +50,8 @@
50
50
  --secondary-foreground: theme(--color-zinc-50);
51
51
  --muted: theme(--color-zinc-800);
52
52
  --muted-foreground: theme(--color-zinc-400);
53
- --accent: oklch(0.27 0.01 182);
54
- --accent-foreground: oklch(0.97 0.01 182);
53
+ --accent: oklch(24.2% 0.006 286);
54
+ --accent-foreground: theme(--color-zinc-50);
55
55
  --destructive: theme(--color-red-400);
56
56
  --destructive-foreground: theme(--color-red-500);
57
57
  --border: oklch(1 0 0 / 10%);