npm - @bccampus/ui-components - Versions diffs - 0.1.0 - Mend

@bccampus/ui-components 0.1.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 (68) hide show

package/README.md +69 -0
package/components.json +22 -0
package/dist/@bccampus-ui-components-0.1.0.tgz +0 -0
package/dist/button.d.ts +16 -0
package/dist/button.js +36 -0
package/dist/caption.d.ts +13 -0
package/dist/caption.js +27 -0
package/dist/card.d.ts +40 -0
package/dist/card.js +130 -0
package/dist/horizontal-list.d.ts +9 -0
package/dist/horizontal-list.js +145 -0
package/dist/icon-generator.d.ts +50 -0
package/dist/icon-generator.js +270 -0
package/dist/index-DcqAdr0d.js +102 -0
package/dist/jsx-runtime-BzflLqGi.js +282 -0
package/dist/masked-image-generator.d.ts +57 -0
package/dist/masked-image-generator.js +29 -0
package/dist/mockServiceWorker.js +348 -0
package/dist/tag.d.ts +16 -0
package/dist/tag.js +32 -0
package/dist/ui-components.d.ts +132 -0
package/dist/ui-components.js +29 -0
package/dist/utils-CRiPKpXj.js +2743 -0
package/dist/utils.d.ts +5 -0
package/dist/utils.js +4 -0
package/eslint.config.js +31 -0
package/index.html +13 -0
package/package.json +85 -0
package/public/mockServiceWorker.js +348 -0
package/src/App.tsx +14 -0
package/src/assets/icons/icon_01.svg +6 -0
package/src/assets/icons/icon_02.svg +6 -0
package/src/assets/icons/icon_03.svg +6 -0
package/src/assets/icons/icon_04.svg +6 -0
package/src/assets/icons/icon_05.svg +4 -0
package/src/assets/icons/icon_06.svg +4 -0
package/src/assets/images/bg_pattern_01.png +0 -0
package/src/assets/images/bg_pattern_02.png +0 -0
package/src/assets/images/bg_pattern_03.png +0 -0
package/src/assets/images/bg_pattern_04.png +0 -0
package/src/assets/images/image_01.jpg +0 -0
package/src/assets/images/image_02.jpg +0 -0
package/src/assets/images/image_03.webp +0 -0
package/src/assets/images/image_04.png +0 -0
package/src/assets/images/image_05.jpg +0 -0
package/src/components/ui/button.tsx +47 -0
package/src/components/ui/card.tsx +147 -0
package/src/components/ui/horizontal-list.tsx +50 -0
package/src/components/ui/icon-generator/generate-tiles.tsx +243 -0
package/src/components/ui/icon-generator/icon-generator.tsx +51 -0
package/src/components/ui/icon-generator/masked-image-generator.tsx +38 -0
package/src/components/ui/icon-generator/types.ts +53 -0
package/src/components/ui/index.ts +7 -0
package/src/components/ui/tag.tsx +39 -0
package/src/components/ui/typography/caption.tsx +32 -0
package/src/lib/utils.ts +6 -0
package/src/main.tsx +12 -0
package/src/styles/all.css +4 -0
package/src/styles/colors.css +106 -0
package/src/styles/fonts.css +9 -0
package/src/styles/index.css +7 -0
package/src/styles/theme.css +126 -0
package/src/styles/typography.css +479 -0
package/src/vite-env.d.ts +1 -0
package/tsconfig.app.json +38 -0
package/tsconfig.json +19 -0
package/tsconfig.node.json +25 -0
package/vite.config.ts +44 -0

package/dist/utils.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export { }

package/dist/utils.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { c as r } from "./utils-CRiPKpXj.js";
+export {
+  r as cn
+};

package/eslint.config.js ADDED Viewed

@@ -0,0 +1,31 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks, { rules } from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+  // shadcn components
+  {
+    files: ['src/components/ui/**/*.{ts,tsx}'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+    },
+  },
+])

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,85 @@
+{
+  "name": "@bccampus/ui-components",
+  "version": "0.1.0",
+  "type": "module",
+  "packageManager": "yarn@4.10.2",
+  "exports": {
+    ".": {
+      "types": "./dist/ui-components.d.ts",
+      "import": "./dist/ui-components.js"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./caption": {
+      "types": "./dist/caption.d.ts",
+      "import": "./dist/caption.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"
+    },
+    "./masked-image-generator": {
+      "types": "./dist/masked-image-generator.d.ts",
+      "import": "./dist/masked-image-generator.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js"
+    },
+    "./all.css": "./src/styles/all.css",
+    "./colors.css": "./src/styles/colors.css",
+    "./fonts.css": "./src/styles/fonts.css",
+    "./theme.css": "./src/styles/theme.css",
+    "./typography.css": "./src/styles/typography.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@bcgov/bc-sans": "^2.1.0",
+    "@fontsource-variable/inter-tight": "^5.2.7",
+    "@ladle/react": "^5.0.3",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.13",
+    "tw-animate-css": "^1.3.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.35.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react-swc": "^4.0.1",
+    "eslint": "^9.35.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.4.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.43.0",
+    "vite": "^7.1.6",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

package/public/mockServiceWorker.js ADDED Viewed

@@ -0,0 +1,348 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ */
+const PACKAGE_VERSION = '2.11.2'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+addEventListener('install', function () {
+  self.skipWaiting()
+})
+addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
+  if (!clientId || !self.clients) {
+    return
+  }
+  const client = await self.clients.get(clientId)
+  if (!client) {
+    return
+  }
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+      break
+    }
+  }
+})
+addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+  // Bypass navigation requests.
+  if (event.request.mode === 'navigate') {
+    return
+  }
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
+    return
+  }
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been terminated (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+})
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ */
+async function handleRequest(event, requestId, requestInterceptedAt) {
+  const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
+        },
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
+  }
+  return response
+}
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @returns {Promise<Response>}
+ */
+async function getResponse(event, client, requestId, requestInterceptedAt) {
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = event.request.clone()
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+    return fetch(requestClone, { headers })
+  }
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+  // Notify the client that a request has been intercepted.
+  const serializedRequest = await serializeRequest(event.request)
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        interceptedAt: requestInterceptedAt,
+        ...serializedRequest,
+      },
+    },
+    [serializedRequest.body],
+  )
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+  return passthrough()
+}
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+      resolve(event.data)
+    }
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
+  })
+}
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+  const mockedResponse = new Response(response.body, response)
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+  return mockedResponse
+}
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import { Button } from "@/components/ui/button";
+function App() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center">
+      <h1 className="font-inter-tight scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">
+        Taxing Laughter: The Joke Tax Chronicles
+      </h1>
+      <Button>Click Here</Button>
+    </div>
+  );
+}
+export default App;

package/src/assets/icons/icon_01.svg ADDED Viewed

@@ -0,0 +1,6 @@
+<svg width="298" height="298" viewBox="0 0 298 298" xmlns="http://www.w3.org/2000/svg">
+<path d="M298 0.00782553L298 149.008C215.71 149.008 149 82.2982 149 0.00780599L298 0.00782553Z" fill="currentColor" />
+<path d="M1.3026e-05 0.0078125L149 0.00782553C149 82.2983 82.2904 149.008 0 149.008L1.3026e-05 0.0078125Z" class="fill-current" />
+<path d="M149 149.008L298 149.008C298 231.298 231.29 298.008 149 298.008L149 149.008Z" class="fill-current" />
+<path d="M149 149.008L149 298.008C66.7096 298.008 -1.07911e-05 231.298 0 149.008L149 149.008Z" class="fill-current" />
+</svg>

package/src/assets/icons/icon_02.svg ADDED Viewed

@@ -0,0 +1,6 @@
+<svg width="298" height="298" viewBox="0 0 298 298" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3026e-05 298.008L149 298.008C149 215.717 82.2904 149.008 1.3026e-05 149.008L1.3026e-05 298.008Z" fill="#2E5776"/>
+<path d="M1.3026e-05 0.0078125L149 0.00785158C149 82.2983 82.2904 149.008 -2.6052e-05 149.008L1.3026e-05 0.0078125Z" fill="#2E5776"/>
+<path d="M298 149.008L149 149.008C149 231.298 215.71 298.008 298 298.008L298 149.008Z" fill="#2E5776"/>
+<path d="M298 149.008L149 149.008C149 66.7173 215.71 0.00778372 298 0.0078125L298 149.008Z" fill="#2E5776"/>
+</svg>

package/src/assets/icons/icon_03.svg ADDED Viewed

@@ -0,0 +1,6 @@
+<svg width="299" height="299" viewBox="0 0 299 299" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.937513 0.0625L149.938 0.062513C149.938 82.3529 83.2279 149.063 0.9375 149.062L0.937513 0.0625Z" fill="#2E5776"/>
+<path d="M0.937513 149.062L149.938 149.063C149.938 231.353 83.2279 298.063 0.9375 298.062L0.937513 149.062Z" fill="#2E5776"/>
+<path d="M149.938 0.0625L298.938 0.062513C298.938 82.3529 232.228 149.063 149.938 149.062L149.938 0.0625Z" fill="#2E5776"/>
+<path d="M149.938 149.062L298.938 149.063C298.938 231.353 232.228 298.063 149.938 298.062L149.938 149.062Z" fill="#2E5776"/>
+</svg>

package/src/assets/icons/icon_04.svg ADDED Viewed

@@ -0,0 +1,6 @@
+<svg width="298" height="299" viewBox="0 0 298 299" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3026e-05 0.0703125L149 0.0703255C149 82.3608 82.2904 149.07 0 149.07L1.3026e-05 0.0703125Z" fill="#2E5776"/>
+<path d="M0 298.07L6.513e-06 149.07C82.2904 149.07 149 215.78 149 298.07L0 298.07Z" fill="#2E5776"/>
+<path d="M298 0.0703255L298 149.07C215.71 149.07 149 82.3607 149 0.070306L298 0.0703255Z" fill="#2E5776"/>
+<path d="M298 298.07L149 298.07C149 215.78 215.71 149.07 298 149.07L298 298.07Z" fill="#2E5776"/>
+</svg>

package/src/assets/icons/icon_05.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg width="298" height="298" viewBox="0 0 298 298" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M149 149C231.29 149 298 215.71 298 298H0C0 215.71 66.7096 149 149 149Z" fill="#2E5776"/>
+<path d="M149 149C66.7096 149 5.83194e-06 82.2904 1.3026e-05 -2.6052e-05L298 0C298 82.2904 231.29 149 149 149Z" fill="#2E5776"/>
+</svg>

package/src/assets/icons/icon_06.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg width="298" height="298" viewBox="0 0 298 298" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M149 149C149 66.7096 215.71 -2.91597e-06 298 -6.513e-06L298 298C215.71 298 149 231.29 149 149Z" fill="#2E5776"/>
+<path d="M149 149C149 231.29 82.2904 298 -1.3026e-05 298L0 -6.513e-06C82.2904 -2.91597e-06 149 66.7096 149 149Z" fill="#2E5776"/>
+</svg>

package/src/assets/images/bg_pattern_01.png ADDED Viewed

Binary file

package/src/assets/images/bg_pattern_02.png ADDED Viewed

Binary file

package/src/assets/images/bg_pattern_03.png ADDED Viewed

Binary file

package/src/assets/images/bg_pattern_04.png ADDED Viewed

Binary file

package/src/assets/images/image_01.jpg ADDED Viewed

Binary file

package/src/assets/images/image_02.jpg ADDED Viewed

Binary file

package/src/assets/images/image_03.webp ADDED Viewed

Binary file

package/src/assets/images/image_04.png ADDED Viewed

Binary file

package/src/assets/images/image_05.jpg ADDED Viewed

Binary file

package/src/components/ui/button.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+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 };