@opensite/ui 0.0.7 → 0.0.9
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 +46 -0
- package/dist/button-variants-CSFRwdBy.d.cts +14 -0
- package/dist/button-variants-CSFRwdBy.d.ts +14 -0
- package/dist/button.cjs +1 -1
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +2 -5
- package/dist/button.d.ts +2 -5
- package/dist/button.js +1 -1
- package/dist/button.js.map +1 -1
- package/dist/components.cjs +430 -26
- package/dist/components.cjs.map +1 -1
- package/dist/components.d.cts +5 -2
- package/dist/components.d.ts +5 -2
- package/dist/components.js +425 -23
- package/dist/components.js.map +1 -1
- package/dist/dynamic-icon.cjs +90 -19
- package/dist/dynamic-icon.cjs.map +1 -1
- package/dist/dynamic-icon.d.cts +12 -6
- package/dist/dynamic-icon.d.ts +12 -6
- package/dist/dynamic-icon.js +90 -19
- package/dist/dynamic-icon.js.map +1 -1
- package/dist/feature-showcase.cjs +123 -66
- package/dist/feature-showcase.cjs.map +1 -1
- package/dist/feature-showcase.js +119 -62
- package/dist/feature-showcase.js.map +1 -1
- package/dist/hooks.cjs +207 -0
- package/dist/hooks.cjs.map +1 -0
- package/dist/hooks.d.cts +2 -0
- package/dist/hooks.d.ts +2 -0
- package/dist/hooks.js +185 -0
- package/dist/hooks.js.map +1 -0
- package/dist/index.cjs +432 -26
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.js +426 -23
- package/dist/index.js.map +1 -1
- package/dist/media-hover-ctas.cjs +75 -0
- package/dist/media-hover-ctas.cjs.map +1 -0
- package/dist/media-hover-ctas.d.cts +83 -0
- package/dist/media-hover-ctas.d.ts +83 -0
- package/dist/media-hover-ctas.js +73 -0
- package/dist/media-hover-ctas.js.map +1 -0
- package/dist/pressable.cjs +332 -0
- package/dist/pressable.cjs.map +1 -0
- package/dist/pressable.d.cts +132 -0
- package/dist/pressable.d.ts +132 -0
- package/dist/pressable.js +310 -0
- package/dist/pressable.js.map +1 -0
- package/dist/registry.cjs +240 -66
- package/dist/registry.cjs.map +1 -1
- package/dist/registry.js +237 -63
- package/dist/registry.js.map +1 -1
- package/dist/types.d.cts +58 -1
- package/dist/types.d.ts +58 -1
- package/dist/use-navigation.cjs +206 -0
- package/dist/use-navigation.cjs.map +1 -0
- package/dist/use-navigation.d.cts +49 -0
- package/dist/use-navigation.d.ts +49 -0
- package/dist/use-navigation.js +184 -0
- package/dist/use-navigation.js.map +1 -0
- package/package.json +22 -1
package/README.md
CHANGED
|
@@ -256,6 +256,52 @@ import { AlternatingBlocks } from "@opensite/ui/blocks/about/alternating-blocks"
|
|
|
256
256
|
|
|
257
257
|
**Note:** Blocks are now organized by category. Import path includes category: `@opensite/ui/blocks/[category]/[block-name]`
|
|
258
258
|
|
|
259
|
+
#### MediaHoverCtas
|
|
260
|
+
|
|
261
|
+
Two-column CTA grid that reveals background imagery or color on hover. Located in the `cta` category.
|
|
262
|
+
|
|
263
|
+
```tsx
|
|
264
|
+
import { MediaHoverCtas } from "@opensite/ui/blocks/cta/media-hover-ctas";
|
|
265
|
+
|
|
266
|
+
<MediaHoverCtas
|
|
267
|
+
items={[
|
|
268
|
+
{
|
|
269
|
+
content: (
|
|
270
|
+
<div>
|
|
271
|
+
<h3 className="mb-3 text-xl font-semibold">Our Mission</h3>
|
|
272
|
+
<p className="text-muted-foreground">Deliver remarkable experiences.</p>
|
|
273
|
+
</div>
|
|
274
|
+
),
|
|
275
|
+
onHoverImgSrc: "/images/mission.jpg",
|
|
276
|
+
altText: "Our Mission"
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
content: (
|
|
280
|
+
<div>
|
|
281
|
+
<h3 className="mb-3 text-xl font-semibold">Our Vision</h3>
|
|
282
|
+
<p className="text-muted-foreground">Build the future of our industry.</p>
|
|
283
|
+
</div>
|
|
284
|
+
),
|
|
285
|
+
initialBackgroundColor: "var(--brand-100)",
|
|
286
|
+
onHoverBackgroundColor: "var(--brand-900)"
|
|
287
|
+
}
|
|
288
|
+
]}
|
|
289
|
+
/>
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
**Props:**
|
|
293
|
+
- `items?: MediaHoverCtaItem[]` - Array of CTA items (default: [])
|
|
294
|
+
- `content?: ReactNode` - Content to render inside the card
|
|
295
|
+
- `onHoverImgSrc?: string` - Image URL to reveal on hover
|
|
296
|
+
- `imgHoverClassName?: string` - Additional classes for hover image
|
|
297
|
+
- `altText?: string` - Alt text for hover image (leave empty for decorative)
|
|
298
|
+
- `cardHref?: string` - Optional href to make the card a link
|
|
299
|
+
- `initialBackgroundColor?: string` - CSS color value or variable for base background
|
|
300
|
+
- `onHoverBackgroundColor?: string` - CSS color value or variable for hover background (ignored when hover image is used)
|
|
301
|
+
- `sectionClassName?: string` - Additional classes for section wrapper
|
|
302
|
+
- `gridClassName?: string` - Additional classes for grid container
|
|
303
|
+
- `optixFlowConfig?: { apiKey: string; compression?: number }` - Optional Optix Flow config for `@page-speed/img`
|
|
304
|
+
|
|
259
305
|
### Block Registry
|
|
260
306
|
|
|
261
307
|
Semantic registry for AI-driven component selection. Maps semantic concepts to available UI blocks.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Button variants using class-variance-authority (cva).
|
|
5
|
+
*
|
|
6
|
+
* This is extracted to a separate file to avoid importing @radix-ui/react-slot
|
|
7
|
+
* when only the variants are needed (e.g., in Pressable component).
|
|
8
|
+
*/
|
|
9
|
+
declare const buttonVariants: (props?: ({
|
|
10
|
+
variant?: "link" | "secondary" | "outline" | "default" | "destructive" | "ghost" | null | undefined;
|
|
11
|
+
size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
12
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
|
+
|
|
14
|
+
export { buttonVariants as b };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Button variants using class-variance-authority (cva).
|
|
5
|
+
*
|
|
6
|
+
* This is extracted to a separate file to avoid importing @radix-ui/react-slot
|
|
7
|
+
* when only the variants are needed (e.g., in Pressable component).
|
|
8
|
+
*/
|
|
9
|
+
declare const buttonVariants: (props?: ({
|
|
10
|
+
variant?: "link" | "secondary" | "outline" | "default" | "destructive" | "ghost" | null | undefined;
|
|
11
|
+
size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
12
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
|
+
|
|
14
|
+
export { buttonVariants as b };
|
package/dist/button.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var reactSlot = require('@radix-ui/react-slot');
|
|
4
|
-
var classVarianceAuthority = require('class-variance-authority');
|
|
5
4
|
var clsx = require('clsx');
|
|
6
5
|
var tailwindMerge = require('tailwind-merge');
|
|
6
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
7
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
|
|
9
9
|
// components/ui/button.tsx
|
package/dist/button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../lib/utils.ts","../components/ui/button.tsx"],"names":["twMerge","clsx","cva","Slot","jsx"],"mappings":";;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;
|
|
1
|
+
{"version":3,"sources":["../lib/utils.ts","../lib/button-variants.ts","../components/ui/button.tsx"],"names":["twMerge","clsx","cva","Slot","jsx"],"mappings":";;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACGO,IAAM,cAAA,GAAiBC,0BAAA;AAAA,EAC5B,icAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,oLAAA;AAAA,QACT,WAAA,EACE,+QAAA;AAAA,QACF,OAAA,EACE,kZAAA;AAAA,QACF,SAAA,EACE,gMAAA;AAAA,QACF,KAAA,EACE,0OAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,0IAAA;AAAA,QACT,EAAA,EAAI,+JAAA;AAAA,QACJ,EAAA,EAAI,0IAAA;AAAA,QACJ,EAAA,EAAI,uJAAA;AAAA,QACJ,IAAA,EAAM,wCAAA;AAAA,QACN,SAAA,EAAW,qCAAA;AAAA,QACX,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AChCA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAGK;AACH,EAAA,MAAM,IAAA,GAAO,UAAUC,cAAA,GAAO,QAAA;AAE9B,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"button.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cva } from \"class-variance-authority\";\n\n/**\n * Button variants using class-variance-authority (cva).\n * \n * This is extracted to a separate file to avoid importing @radix-ui/react-slot\n * when only the variants are needed (e.g., in Pressable component).\n */\nexport const buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button 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\",\n {\n variants: {\n variant: {\n default: \"bg-[var(--button-default-bg,hsl(var(--primary)))] text-[var(--button-default-fg,hsl(var(--primary-foreground)))] hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]\",\n destructive:\n \"bg-[var(--button-destructive-bg,hsl(var(--destructive)))] text-[var(--button-destructive-fg,white)] hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border-[var(--button-outline-border-width,1px)] border-[var(--button-outline-border,hsl(var(--border)))] bg-[var(--button-outline-bg,hsl(var(--background)))] text-[var(--button-outline-fg,inherit)] shadow-xs hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))] dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-[var(--button-secondary-bg,hsl(var(--secondary)))] text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))] hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]\",\n ghost:\n \"bg-[var(--button-ghost-bg,transparent)] text-[var(--button-ghost-fg,inherit)] hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))] dark:hover:bg-accent/50\",\n link: \"text-[var(--button-link-fg,hsl(var(--primary)))] underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n sm: \"h-[var(--button-height-sm,2rem)] rounded-button gap-1.5 px-[var(--button-padding-x-sm,0.75rem)] has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]\",\n md: \"h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n lg: \"h-[var(--button-height-lg,2.5rem)] rounded-button px-[var(--button-padding-x-lg,1.5rem)] has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]\",\n icon: \"size-[var(--button-height-md,2.25rem)]\",\n \"icon-sm\": \"size-[var(--button-height-sm,2rem)]\",\n \"icon-lg\": \"size-[var(--button-height-lg,2.5rem)]\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../../lib/button-variants\"\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n"]}
|
package/dist/button.d.cts
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
2
|
import * as React from 'react';
|
|
4
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import { b as buttonVariants } from './button-variants-CSFRwdBy.cjs';
|
|
5
|
+
import 'class-variance-authority/types';
|
|
5
6
|
|
|
6
|
-
declare const buttonVariants: (props?: ({
|
|
7
|
-
variant?: "secondary" | "link" | "outline" | "default" | "destructive" | "ghost" | null | undefined;
|
|
8
|
-
size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
9
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
7
|
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
11
8
|
asChild?: boolean;
|
|
12
9
|
}): react_jsx_runtime.JSX.Element;
|
package/dist/button.d.ts
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
2
|
import * as React from 'react';
|
|
4
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import { b as buttonVariants } from './button-variants-CSFRwdBy.js';
|
|
5
|
+
import 'class-variance-authority/types';
|
|
5
6
|
|
|
6
|
-
declare const buttonVariants: (props?: ({
|
|
7
|
-
variant?: "secondary" | "link" | "outline" | "default" | "destructive" | "ghost" | null | undefined;
|
|
8
|
-
size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
9
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
7
|
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
11
8
|
asChild?: boolean;
|
|
12
9
|
}): react_jsx_runtime.JSX.Element;
|
package/dist/button.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Slot } from '@radix-ui/react-slot';
|
|
2
|
-
import { cva } from 'class-variance-authority';
|
|
3
2
|
import { clsx } from 'clsx';
|
|
4
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
// components/ui/button.tsx
|
package/dist/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../lib/utils.ts","../components/ui/button.tsx"],"names":[],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;
|
|
1
|
+
{"version":3,"sources":["../lib/utils.ts","../lib/button-variants.ts","../components/ui/button.tsx"],"names":[],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACGO,IAAM,cAAA,GAAiB,GAAA;AAAA,EAC5B,icAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,oLAAA;AAAA,QACT,WAAA,EACE,+QAAA;AAAA,QACF,OAAA,EACE,kZAAA;AAAA,QACF,SAAA,EACE,gMAAA;AAAA,QACF,KAAA,EACE,0OAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,0IAAA;AAAA,QACT,EAAA,EAAI,+JAAA;AAAA,QACJ,EAAA,EAAI,0IAAA;AAAA,QACJ,EAAA,EAAI,uJAAA;AAAA,QACJ,IAAA,EAAM,wCAAA;AAAA,QACN,SAAA,EAAW,qCAAA;AAAA,QACX,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AChCA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAGK;AACH,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,QAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"button.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cva } from \"class-variance-authority\";\n\n/**\n * Button variants using class-variance-authority (cva).\n * \n * This is extracted to a separate file to avoid importing @radix-ui/react-slot\n * when only the variants are needed (e.g., in Pressable component).\n */\nexport const buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button 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\",\n {\n variants: {\n variant: {\n default: \"bg-[var(--button-default-bg,hsl(var(--primary)))] text-[var(--button-default-fg,hsl(var(--primary-foreground)))] hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]\",\n destructive:\n \"bg-[var(--button-destructive-bg,hsl(var(--destructive)))] text-[var(--button-destructive-fg,white)] hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border-[var(--button-outline-border-width,1px)] border-[var(--button-outline-border,hsl(var(--border)))] bg-[var(--button-outline-bg,hsl(var(--background)))] text-[var(--button-outline-fg,inherit)] shadow-xs hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))] dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-[var(--button-secondary-bg,hsl(var(--secondary)))] text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))] hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]\",\n ghost:\n \"bg-[var(--button-ghost-bg,transparent)] text-[var(--button-ghost-fg,inherit)] hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))] dark:hover:bg-accent/50\",\n link: \"text-[var(--button-link-fg,hsl(var(--primary)))] underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n sm: \"h-[var(--button-height-sm,2rem)] rounded-button gap-1.5 px-[var(--button-padding-x-sm,0.75rem)] has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]\",\n md: \"h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n lg: \"h-[var(--button-height-lg,2.5rem)] rounded-button px-[var(--button-padding-x-lg,1.5rem)] has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]\",\n icon: \"size-[var(--button-height-md,2.25rem)]\",\n \"icon-sm\": \"size-[var(--button-height-sm,2rem)]\",\n \"icon-lg\": \"size-[var(--button-height-lg,2.5rem)]\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../../lib/button-variants\"\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n"]}
|