@bccampus/ui-components 0.1.0 → 0.2.0

package/dist/page-section.d.ts

@@ -0,0 +1,14 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { JSX } from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+
+export declare function PageSection({ className, px, py, ...props }: PageSectionProps): JSX.Element;
+
+export declare type PageSectionProps = React.ComponentProps<"div"> & VariantProps<typeof pageSectionVariants>;
+
+declare const pageSectionVariants: (props?: ({
+    px?: "none" | "default" | "sm" | "lg" | "xl" | null | undefined;
+    py?: "none" | "default" | "sm" | "lg" | "xl" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/page-section.js

@@ -0,0 +1,31 @@
+import { j as s } from "./jsx-runtime-BzflLqGi.js";
+import { c as a } from "./utils-CRiPKpXj.js";
+import { c as i } from "./index-CQhYMnjT.js";
+const p = i("group @container/page-section relative w-full", {
+  variants: {
+    px: {
+      none: "px-0",
+      default: "px-section",
+      sm: "px-sextion-sm",
+      lg: "px-section-lg",
+      xl: "px-section-xl"
+    },
+    py: {
+      none: "py-0",
+      default: "py-section",
+      sm: "py-sextion-sm",
+      lg: "py-section-lg",
+      xl: "py-section-xl"
+    }
+  },
+  defaultVariants: {
+    px: "default",
+    py: "default"
+  }
+});
+function r({ className: t, px: e, py: n, ...o }) {
+  return /* @__PURE__ */ s.jsx("div", { "data-slot": "page-section", className: a(p({ px: e, py: n }), t), ...o });
+}
+export {
+  r as PageSection
+};

package/dist/page.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react/jsx-runtime';
+
+export declare function Page({ className, ...props }: PageProps): JSX.Element;
+
+export declare type PageProps = React.ComponentProps<"div">;
+
+export { }

package/dist/page.js

@@ -0,0 +1,8 @@
+import { j as t } from "./jsx-runtime-BzflLqGi.js";
+import { c as e } from "./utils-CRiPKpXj.js";
+function i({ className: a, ...r }) {
+  return /* @__PURE__ */ t.jsx("div", { "data-slot": "page", className: e("group @container/page relative w-full", a), ...r });
+}
+export {
+  i as Page
+};

package/dist/search-input.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react/jsx-runtime';
+
+export declare function SearchInput({ className, ...props }: SearchInputProps): JSX.Element;
+
+export declare type SearchInputProps = React.ComponentProps<"input">;
+
+export { }

package/dist/search-input.js

@@ -0,0 +1,23 @@
+import { j as e } from "./jsx-runtime-BzflLqGi.js";
+import { c } from "./utils-CRiPKpXj.js";
+import { Input as o } from "./input.js";
+import { c as s } from "./createLucideIcon-CzehbSja.js";
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const a = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], n = s("search", a);
+function u({ className: r, ...t }) {
+  return /* @__PURE__ */ e.jsxs("div", { className: c("relative", r), children: [
+    /* @__PURE__ */ e.jsx(o, { ...t }),
+    /* @__PURE__ */ e.jsx(n, { className: "absolute size-4 top-1/2 right-3 -translate-y-1/2 pointer-events-none text-primary" })
+  ] });
+}
+export {
+  u as SearchInput
+};

package/dist/tag.d.ts

@@ -4,12 +4,12 @@ import { VariantProps } from 'class-variance-authority';
 
 export declare function Tag({ className, size, variant, asChild, ...props }: TagProps): JSX.Element;
 
-declare interface TagProps extends VariantProps<typeof tagVariants>, React.ComponentProps<"div"> {
+export declare interface TagProps extends VariantProps<typeof tagVariants>, React.ComponentProps<"div"> {
     asChild?: boolean;
 }
 
 export declare const tagVariants: (props?: ({
-    variant?: "default" | "button" | null | undefined;
+    variant?: "button" | "default" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & ClassProp) | undefined) => string;
 

package/dist/tag.js

@@ -1,7 +1,8 @@
-import { j as r } from "./jsx-runtime-BzflLqGi.js";
-import { c as o, S as l } from "./index-DcqAdr0d.js";
-import { c as d } from "./utils-CRiPKpXj.js";
-const p = o(
+import { j as n } from "./jsx-runtime-BzflLqGi.js";
+import { S as o } from "./index-DlfV3JTY.js";
+import { c as l } from "./index-CQhYMnjT.js";
+import { c as p } from "./utils-CRiPKpXj.js";
+const d = l(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm bg-complement-3 text-white [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
   {
     variants: {
@@ -22,11 +23,11 @@ const p = o(
     }
   }
 );
-function m({ className: i, size: e, variant: t, asChild: s = !1, ...a }) {
-  const n = s ? l : "div";
-  return /* @__PURE__ */ r.jsx(n, { "data-slot": "tag", className: d(p({ variant: t, size: e, className: i })), ...a });
+function u({ className: i, size: t, variant: e, asChild: s = !1, ...a }) {
+  const r = s ? o : "div";
+  return /* @__PURE__ */ n.jsx(r, { "data-slot": "tag", className: p(d({ variant: e, size: t }), i), ...a });
 }
 export {
-  m as Tag,
-  p as tagVariants
+  u as Tag,
+  d as tagVariants
 };

package/dist/ui-components.d.ts

@@ -1,79 +1,107 @@
 import { ClassProp } from 'class-variance-authority/types';
-import { JSX } from 'react/jsx-runtime';
-import { JSX as JSX_2 } from 'react';
+import { JSX } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { VariantProps } from 'class-variance-authority';
 
-export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): JSX.Element;
+export declare function Banner({ className, size, variant, dismissible, children, ...props }: BannerProps): JSX_2.Element | null;
 
-declare type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+export declare interface BannerProps extends VariantProps<typeof bannerVariants>, React.ComponentProps<"div"> {
+    dismissible?: boolean;
+}
+
+declare const bannerVariants: (props?: ({
+    variant?: "default" | "alert" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare function Button({ className, variant, size, block, asChild, ...props }: ButtonProps): JSX_2.Element;
+
+export declare type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 };
 
 export declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    block?: boolean | null | undefined;
+    size?: "text" | "default" | "sm" | "lg" | "icon" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function Caption({ className, variant, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof captionVariants> & {
     asChild?: boolean;
-}): JSX.Element;
+}): JSX_2.Element;
 
 export declare const captionVariants: (props?: ({
     variant?: "default" | "light" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare function Card<T extends boolean = false>({ className, asLink, variant, noBorder, ...props }: CardProps<T>): JSX.Element;
+export declare function Card<T extends boolean = false>({ className, asLink, bordered, rounded, ...props }: CardProps<T>): JSX_2.Element;
 
-export declare function CardBody({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
+export declare function CardArea({ name, className, ...props }: CardAreaProps): JSX_2.Element;
 
-export declare function CardCaption(props: React.ComponentProps<"div">): JSX.Element;
+declare type CardAreaProps = React.ComponentProps<"div"> & {
+    name: string;
+};
 
-export declare function CardContent(props: React.ComponentProps<"div">): JSX.Element;
+export declare function CardCaption(props: React.ComponentProps<"div">): JSX_2.Element;
 
-export declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
+export declare function CardContent(props: React.ComponentProps<"div">): JSX_2.Element;
 
-export declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
+export declare function CardImage({ className, ...props }: React.ComponentProps<"img">): JSX_2.Element;
 
-export declare function CardImage({ className, ...props }: React.ComponentProps<"img">): JSX.Element;
+export declare function CardItemGroup({ className, ...props }: React.ComponentProps<"div">): JSX_2.Element;
 
-export declare function CardMedia({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
+export declare function CardMedia({ className, ...props }: React.ComponentProps<"div">): JSX_2.Element;
 
-export declare function CardMeta(props: React.ComponentProps<"div">): JSX.Element;
+export declare function CardMeta(props: React.ComponentProps<"div">): JSX_2.Element;
 
-declare type CardProps<T extends boolean> = (T extends true ? React.ComponentProps<"a"> : React.ComponentProps<"div">) & VariantProps<typeof cardVariants> & {
+export declare type CardProps<T extends boolean> = (T extends true ? React.ComponentProps<"a"> : React.ComponentProps<"div">) & VariantProps<typeof cardVariants> & {
     asLink?: T;
 };
 
-export declare function CardSubtitle({ size, className, ...props }: CardTitleProps): JSX.Element;
+export declare function CardSubcaption(props: React.ComponentProps<"div">): JSX_2.Element;
 
-export declare function CardTitle({ size, className, ...props }: CardTitleProps): JSX.Element;
+export declare function CardSubtitle({ size, className, ...props }: CardTitleProps): JSX_2.Element;
+
+export declare function CardTitle({ size, className, ...props }: CardTitleProps): JSX_2.Element;
 
 declare type CardTitleProps = React.ComponentProps<"div"> & {
     size?: "sm" | "md" | "lg";
 };
 
+export declare function CardToolbar({ className, ...props }: React.ComponentProps<"div">): JSX_2.Element;
+
 declare const cardVariants: (props?: ({
-    variant?: "default" | "dark" | null | undefined;
-    noBorder?: boolean | null | undefined;
+    bordered?: boolean | null | undefined;
+    rounded?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare function HorizontalList({ className, children, toolbarLocation, ...props }: HorizontalListProps): JSX.Element;
+export declare function HorizontalList({ variant, className, children, toolbarLocation, scrollBy, ...props }: HorizontalListProps): JSX_2.Element;
 
-declare interface HorizontalListProps extends React.ComponentProps<"div"> {
+export declare interface HorizontalListProps extends VariantProps<typeof horizontalListVariants>, React.ComponentProps<"div"> {
     toolbarLocation?: "bottom" | "top";
+    scrollBy?: number;
 }
 
-export declare function IconGenerator({ pattern, tileSize, tileClassName, tileBgClassName, renderChildren, ...props }: IconGeneratorProps): JSX.Element;
+declare const horizontalListVariants: (props?: ({
+    variant?: "overflow" | "contain" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare function IconGenerator({ pattern, tileSize, tileClassName, tileBgClassName, renderChildren, fit, ...props }: IconGeneratorProps): JSX_2.Element;
 
 declare interface IconGeneratorProps extends Omit<React.ComponentProps<"svg">, "children" | "width" | "height" | "overflow"> {
     pattern?: (TileShape | TileConfig)[][];
     tileSize?: number;
     tileClassName?: string;
     tileBgClassName?: string;
-    renderChildren?: (paths: (JSX_2.Element | null)[], width: number, height: number) => React.ReactNode;
+    fit?: "none" | "fill" | "width" | "height";
+    renderChildren?: (paths: (JSX.Element | null)[], width: number, height: number) => React.ReactNode;
 }
 
-export declare function MaskedImageGenerator({ src, imageFit, imagePosition, maskType, ...props }: MaskedImageGeneratorProps): JSX.Element;
+export declare function Input({ className, ...props }: InputProps): JSX_2.Element;
+
+export declare type InputProps = React.ComponentProps<"input">;
+
+export declare function MaskedImageGenerator({ src, imageFit, imagePosition, maskType, ...props }: MaskedImageGeneratorProps): JSX_2.Element;
 
 declare interface MaskedImageGeneratorProps extends IconGeneratorProps {
     src: string;
@@ -82,14 +110,41 @@ declare interface MaskedImageGeneratorProps extends IconGeneratorProps {
     maskType?: "alpha" | "luminance";
 }
 
-export declare function Tag({ className, size, variant, asChild, ...props }: TagProps): JSX.Element;
+export declare function Overlay({ className, position, ...props }: OverlayProps): JSX_2.Element;
+
+export declare type OverlayProps = React.ComponentProps<"div"> & VariantProps<typeof overlayVariants>;
+
+declare const overlayVariants: (props?: ({
+    position?: "b" | "br" | "tr" | "r" | "t" | "l" | "tl" | "bl" | "c" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare function Page({ className, ...props }: PageProps): JSX_2.Element;
+
+export declare function PageHeader({ children, ...props }: React.ComponentProps<"div">): JSX_2.Element;
+
+export declare type PageProps = React.ComponentProps<"div">;
+
+export declare function PageSection({ className, px, py, ...props }: PageSectionProps): JSX_2.Element;
+
+export declare type PageSectionProps = React.ComponentProps<"div"> & VariantProps<typeof pageSectionVariants>;
+
+declare const pageSectionVariants: (props?: ({
+    px?: "none" | "default" | "sm" | "lg" | "xl" | null | undefined;
+    py?: "none" | "default" | "sm" | "lg" | "xl" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare function SearchInput({ className, ...props }: SearchInputProps): JSX_2.Element;
+
+export declare type SearchInputProps = React.ComponentProps<"input">;
+
+export declare function Tag({ className, size, variant, asChild, ...props }: TagProps): JSX_2.Element;
 
-declare interface TagProps extends VariantProps<typeof tagVariants>, React.ComponentProps<"div"> {
+export declare interface TagProps extends VariantProps<typeof tagVariants>, React.ComponentProps<"div"> {
     asChild?: boolean;
 }
 
 export declare const tagVariants: (props?: ({
-    variant?: "default" | "button" | null | undefined;
+    variant?: "button" | "default" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & ClassProp) | undefined) => string;
 

package/dist/ui-components.js

@@ -1,29 +1,44 @@
-import { Button as t, buttonVariants as o } from "./button.js";
-import { Caption as d, captionVariants as n } from "./caption.js";
-import { Card as i, CardBody as p, CardCaption as m, CardContent as f, CardFooter as x, CardHeader as s, CardImage as g, CardMedia as l, CardMeta as u, CardSubtitle as I, CardTitle as M } from "./card.js";
-import { Tag as b, tagVariants as c } from "./tag.js";
-import { HorizontalList as G } from "./horizontal-list.js";
-import { IconGenerator as T } from "./icon-generator.js";
-import { MaskedImageGenerator as y } from "./masked-image-generator.js";
+import { IconGenerator as a } from "./icon-generator.js";
+import { MaskedImageGenerator as e } from "./masked-image-generator.js";
+import { Caption as n, captionVariants as m } from "./caption.js";
+import { Banner as C } from "./banner.js";
+import { Button as x, buttonVariants as i } from "./button.js";
+import { Card as u, CardArea as I, CardCaption as c, CardContent as l, CardImage as s, CardItemGroup as b, CardMedia as S, CardMeta as G, CardSubcaption as M, CardSubtitle as P, CardTitle as T, CardToolbar as V } from "./card.js";
+import { HorizontalList as H } from "./horizontal-list.js";
+import { Input as k } from "./input.js";
+import { Overlay as y } from "./overlay.js";
+import { PageHeader as A } from "./page-header.js";
+import { PageSection as O } from "./page-section.js";
+import { Page as q } from "./page.js";
+import { SearchInput as D } from "./search-input.js";
+import { Tag as F, tagVariants as J } from "./tag.js";
 export {
-  t as Button,
-  d as Caption,
-  i as Card,
-  p as CardBody,
-  m as CardCaption,
-  f as CardContent,
-  x as CardFooter,
-  s as CardHeader,
-  g as CardImage,
-  l as CardMedia,
-  u as CardMeta,
-  I as CardSubtitle,
-  M as CardTitle,
-  G as HorizontalList,
-  T as IconGenerator,
-  y as MaskedImageGenerator,
-  b as Tag,
-  o as buttonVariants,
-  n as captionVariants,
-  c as tagVariants
+  C as Banner,
+  x as Button,
+  n as Caption,
+  u as Card,
+  I as CardArea,
+  c as CardCaption,
+  l as CardContent,
+  s as CardImage,
+  b as CardItemGroup,
+  S as CardMedia,
+  G as CardMeta,
+  M as CardSubcaption,
+  P as CardSubtitle,
+  T as CardTitle,
+  V as CardToolbar,
+  H as HorizontalList,
+  a as IconGenerator,
+  k as Input,
+  e as MaskedImageGenerator,
+  y as Overlay,
+  q as Page,
+  A as PageHeader,
+  O as PageSection,
+  D as SearchInput,
+  F as Tag,
+  i as buttonVariants,
+  m as captionVariants,
+  J as tagVariants
 };

package/package.json

@@ -1,40 +1,68 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
-  "packageManager": "yarn@4.10.2",
+  "packageManager": "yarn@4.10.3",
   "exports": {
     ".": {
       "types": "./dist/ui-components.d.ts",
       "import": "./dist/ui-components.js"
     },
-    "./button": {
-      "types": "./dist/button.d.ts",
-      "import": "./dist/button.js"
+    "./icon-generator": {
+      "types": "./dist/icon-generator.d.ts",
+      "import": "./dist/icon-generator.js"
+    },
+    "./masked-image-generator": {
+      "types": "./dist/masked-image-generator.d.ts",
+      "import": "./dist/masked-image-generator.js"
     },
     "./caption": {
       "types": "./dist/caption.d.ts",
       "import": "./dist/caption.js"
     },
+    "./banner": {
+      "types": "./dist/banner.d.ts",
+      "import": "./dist/banner.js"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js"
+    },
     "./card": {
       "types": "./dist/card.d.ts",
       "import": "./dist/card.js"
     },
-    "./tag": {
-      "types": "./dist/tag.d.ts",
-      "import": "./dist/tag.js"
-    },
     "./horizontal-list": {
       "types": "./dist/horizontal-list.d.ts",
       "import": "./dist/horizontal-list.js"
     },
-    "./icon-generator": {
-      "types": "./dist/icon-generator.d.ts",
-      "import": "./dist/icon-generator.js"
+    "./input": {
+      "types": "./dist/input.d.ts",
+      "import": "./dist/input.js"
     },
-    "./masked-image-generator": {
-      "types": "./dist/masked-image-generator.d.ts",
-      "import": "./dist/masked-image-generator.js"
+    "./overlay": {
+      "types": "./dist/overlay.d.ts",
+      "import": "./dist/overlay.js"
+    },
+    "./page-header": {
+      "types": "./dist/page-header.d.ts",
+      "import": "./dist/page-header.js"
+    },
+    "./page-section": {
+      "types": "./dist/page-section.d.ts",
+      "import": "./dist/page-section.js"
+    },
+    "./page": {
+      "types": "./dist/page.d.ts",
+      "import": "./dist/page.js"
+    },
+    "./search-input": {
+      "types": "./dist/search-input.d.ts",
+      "import": "./dist/search-input.js"
+    },
+    "./tag": {
+      "types": "./dist/tag.d.ts",
+      "import": "./dist/tag.js"
     },
     "./utils": {
       "types": "./dist/utils.d.ts",
@@ -53,6 +81,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@bccampus/media-kit": "^0.1.1",
     "@bcgov/bc-sans": "^2.1.0",
     "@fontsource-variable/inter-tight": "^5.2.7",
     "@ladle/react": "^5.0.3",

package/src/components/ui/banner.tsx

@@ -0,0 +1,48 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+import { Button } from "./button";
+import { X } from "lucide-react";
+
+const bannerVariants = cva("flex flex-row items-center justify-between px-section text-sm", {
+  variants: {
+    variant: {
+      default: "bg-complement-3 text-white",
+      alert: "bg-complement-2-200 text-black",
+    },
+    size: {
+      default: "py-2",
+      sm: "py-1",
+      lg: "py-3 text-md font-semibold",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+export interface BannerProps extends VariantProps<typeof bannerVariants>, React.ComponentProps<"div"> {
+  dismissible?: boolean;
+}
+
+function Banner({ className, size, variant, dismissible, children, ...props }: BannerProps) {
+  const [dismissed, setDismissed] = useState(false);
+
+  if (dismissed) return null;
+
+  return (
+    <div className={cn(bannerVariants({ variant, size }), className)} {...props}>
+      <div className="flex-auto text-center">{children}</div>
+      {dismissible && (
+        <div>
+          <Button variant="ghost" size="icon" className="size-6 text-white" onClick={() => setDismissed(true)}>
+            <X />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { Banner };

package/src/components/ui/button.tsx

@@ -1,47 +1,52 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-secondary dark:bg-complement-1-50 dark:text-brand-1 dark:hover:bg-complement-1-100",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-background hover:text-primary dark:bg-complement-1-500 dark:text-foreground dark:hover:bg-complement-1-600",
-        outline:
-          "border border-primary bg-transparent hover:border-secondary hover:bg-secondary/10 dark:border-input dark:hover:bg-input/50",
-        ghost: "text-secondary hover:bg-primary/10 dark:text-foreground dark:hover:bg-complement-1-800",
-        link: "text-primary underline-offset-4 hover:underline",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-      },
-      size: {
-        default: "h-9 px-6 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-type ButtonProps = React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  };
-
-function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
-  const Comp = asChild ? Slot : "button";
-
-  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size }), className)} {...props} />;
-}
-
-export { Button, buttonVariants };
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-secondary dark:bg-complement-1-100 dark:text-brand-1 dark:hover:bg-complement-1-50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-background hover:text-primary dark:bg-complement-1-500 dark:text-foreground dark:hover:bg-complement-1-600",
+        outline:
+          "border border-primary bg-transparent hover:border-secondary hover:bg-secondary/10 dark:border-input dark:hover:bg-input/50",
+        ghost: "text-primary hover:text-secondary dark:text-foreground dark:hover:bg-complement-1-800",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      },
+      block: {
+        false: "w-fit",
+        true: "w-full",
+      },
+      size: {
+        default: "h-9 px-6 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        text: "py-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      block: false,
+    },
+  }
+);
+
+export type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  };
+
+function Button({ className, variant, size, block, asChild = false, ...props }: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
+
+  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, block }), className)} {...props} />;
+}
+
+export { Button, buttonVariants };