[{"name":"button-51","type":"registry:component","files":[{"content":"\n\nFlow Button\n","type":"registry:component","target":"lib/components/button-51.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { PrimaryFlowButton } from '$lib/components/ui/flow-button';\n</script>\n\n<PrimaryFlowButton>Flow Button</PrimaryFlowButton>\n

"},{"content":"import PrimaryFlowButton, { type PrimaryFlowButtonProps } from './primary-flow-button.svelte';\nimport SecondaryFlowButton, { type SecondaryFlowButtonProps } from './secondary-flow-button.svelte';\n\nexport {\n\tPrimaryFlowButton,\n\tSecondaryFlowButton,\n\ttype PrimaryFlowButtonProps as PrimaryProps,\n\ttype SecondaryFlowButtonProps as SecondaryProps,\n\t//\n\ttype PrimaryFlowButtonProps,\n\ttype SecondaryFlowButtonProps\n};\n","type":"registry:file","target":"lib/components/ui/flow-button/index.ts","highlightedContent":"

import PrimaryFlowButton, { type PrimaryFlowButtonProps } from './primary-flow-button.svelte';\nimport SecondaryFlowButton, { type SecondaryFlowButtonProps } from './secondary-flow-button.svelte';\n\nexport {\n  PrimaryFlowButton,\n  SecondaryFlowButton,\n  type PrimaryFlowButtonProps as PrimaryProps,\n  type SecondaryFlowButtonProps as SecondaryProps,\n  //\n  type PrimaryFlowButtonProps,\n  type SecondaryFlowButtonProps\n};\n

"},{"content":"\n\n\n\n\n\tsvg]:px-6',\n\t\t\t// After - Border gradient effect with rotation\n\t\t\t'after:absolute after:-inset-30 after:-z-1 after:rounded-[inherit] after:border after:border-[inherit] after:bg-origin-border after:mask-exclude after:transition-transform after:duration-500',\n\t\t\t'after:bg-[conic-gradient(from_90deg_at_50%_50%,var(--primary),var(--primary)_50%,rgba(0,0,0,15%)_51%_99%,var(--primary))] hover:after:rotate-180 dark:after:bg-[conic-gradient(from_90deg_at_50%_50%,var(--primary),var(--primary)_50%,rgba(0,0,0,30%)_51%_99%,var(--primary))]'\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{@render children?.()}\n\t\n\n","type":"registry:file","target":"lib/components/ui/flow-button/primary-flow-button.svelte","highlightedContent":"

<script lang=\"ts\" module>\n  import { cn } from '$lib/utils';\n  import { Button, type ButtonProps } from '$lib/components/ui/button';\n\n  export type PrimaryFlowButtonProps = ButtonProps;\n</script>\n\n<script lang=\"ts\">\n  let {\n    children,\n    class: className,\n    variant = 'default',\n    size = 'default',\n    ref = $bindable(null),\n    ...props\n  }: PrimaryFlowButtonProps = $props();\n</script>\n\n<div\n  class={cn('relative isolate w-fit overflow-hidden rounded-lg ring-2 ring-primary/60', className)}\n>\n  <Button\n    bind:ref\n    {variant}\n    {size}\n    class={cn(\n      'relative rounded-lg border border-transparent bg-clip-padding duration-500 text-shadow-xs hover:bg-primary',\n      size === 'lg' && 'text-base has-[>svg]:px-6',\n      // After - Border gradient effect with rotation\n      'after:absolute after:-inset-30 after:-z-1 after:rounded-[inherit] after:border after:border-[inherit] after:bg-origin-border after:mask-exclude after:transition-transform after:duration-500',\n      'after:bg-[conic-gradient(from_90deg_at_50%_50%,var(--primary),var(--primary)_50%,rgba(0,0,0,15%)_51%_99%,var(--primary))] hover:after:rotate-180 dark:after:bg-[conic-gradient(from_90deg_at_50%_50%,var(--primary),var(--primary)_50%,rgba(0,0,0,30%)_51%_99%,var(--primary))]'\n    )}\n    {...props}\n  >\n    {@render children?.()}\n  </Button>\n</div>\n

"},{"content":"\n\n\n\n\n\tsvg]:px-6',\n\t\t\t// After - Border gradient effect with rotation\n\t\t\t'after:absolute after:-inset-30 after:-z-1 after:rounded-[inherit] after:border after:border-[inherit] after:bg-origin-border after:mask-exclude after:mask-clip-content after:transition-transform after:duration-500 after:[mask:linear-gradient(black,black),linear-gradient(black,black)]',\n\t\t\t'after:bg-[conic-gradient(from_90deg_at_50%_50%,var(--secondary),var(--secondary)_50%,rgba(0,0,0,15%)_51%_99%,var(--secondary))] hover:after:rotate-180 dark:after:bg-[conic-gradient(from_90deg_at_50%_50%,var(--secondary),var(--secondary)_50%,rgba(255,255,255,60%)_51%_99%,var(--secondary))]'\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{@render children?.()}\n\t\n\n","type":"registry:file","target":"lib/components/ui/flow-button/secondary-flow-button.svelte","highlightedContent":"

<script lang=\"ts\" module>\n  import { cn } from '$lib/utils';\n  import { Button, type ButtonProps } from '$lib/components/ui/button';\n\n  export type SecondaryFlowButtonProps = ButtonProps;\n</script>\n\n<script lang=\"ts\">\n  let {\n    children,\n    class: className,\n    variant = 'default',\n    size = 'default',\n    ref = $bindable(null),\n    ...props\n  }: SecondaryFlowButtonProps = $props();\n</script>\n\n<div\n  class={cn(\n    'relative isolate w-fit overflow-hidden rounded-lg ring-2 ring-secondary/60',\n    className\n  )}\n>\n  <Button\n    bind:ref\n    {variant}\n    {size}\n    class={cn(\n      'relative rounded-lg border border-transparent bg-clip-padding duration-500 text-shadow-xs hover:bg-secondary',\n      size === 'lg' && 'text-base has-[>svg]:px-6',\n      // After - Border gradient effect with rotation\n      'after:absolute after:-inset-30 after:-z-1 after:rounded-[inherit] after:border after:border-[inherit] after:bg-origin-border after:mask-exclude after:mask-clip-content after:transition-transform after:duration-500 after:[mask:linear-gradient(black,black),linear-gradient(black,black)]',\n      'after:bg-[conic-gradient(from_90deg_at_50%_50%,var(--secondary),var(--secondary)_50%,rgba(0,0,0,15%)_51%_99%,var(--secondary))] hover:after:rotate-180 dark:after:bg-[conic-gradient(from_90deg_at_50%_50%,var(--secondary),var(--secondary)_50%,rgba(255,255,255,60%)_51%_99%,var(--secondary))]'\n    )}\n    {...props}\n  >\n    {@render children?.()}\n  </Button>\n</div>\n

"}]},{"name":"button-52","type":"registry:component","files":[{"content":"\n\nOrion Button\n","type":"registry:component","target":"lib/components/button-52.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { PrimaryOrionButton } from '$lib/components/ui/orion-button';\n</script>\n\n<PrimaryOrionButton>Orion Button</PrimaryOrionButton>\n

"},{"content":"import PrimaryOrionButton, { type PrimaryOrionButtonProps } from './primary-orion-button.svelte';\nimport SecondaryOrionButton, {\n\ttype SecondaryOrionButtonProps\n} from './secondary-orion-button.svelte';\n\nexport {\n\tPrimaryOrionButton,\n\tSecondaryOrionButton,\n\ttype PrimaryOrionButtonProps as PrimaryProps,\n\ttype SecondaryOrionButtonProps as SecondaryProps,\n\t//\n\ttype PrimaryOrionButtonProps,\n\ttype SecondaryOrionButtonProps\n};\n","type":"registry:file","target":"lib/components/ui/orion-button/index.ts","highlightedContent":"

import PrimaryOrionButton, { type PrimaryOrionButtonProps } from './primary-orion-button.svelte';\nimport SecondaryOrionButton, {\n  type SecondaryOrionButtonProps\n} from './secondary-orion-button.svelte';\n\nexport {\n  PrimaryOrionButton,\n  SecondaryOrionButton,\n  type PrimaryOrionButtonProps as PrimaryProps,\n  type SecondaryOrionButtonProps as SecondaryProps,\n  //\n  type PrimaryOrionButtonProps,\n  type SecondaryOrionButtonProps\n};\n

"},{"content":"\n\n\n\nsvg]:px-6',\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t{@render children?.()}\n\n","type":"registry:file","target":"lib/components/ui/orion-button/primary-orion-button.svelte","highlightedContent":"

<script lang=\"ts\" module>\n  import { cn } from '$lib/utils';\n  import { Button, type ButtonProps } from '$lib/components/ui/button';\n\n  export type PrimaryOrionButtonProps = ButtonProps;\n</script>\n\n<script lang=\"ts\">\n  let {\n    children,\n    class: className,\n    variant = 'default',\n    size = 'default',\n    ref = $bindable(null),\n    ...props\n  }: PrimaryOrionButtonProps = $props();\n</script>\n\n<Button\n  bind:ref\n  {variant}\n  {size}\n  class={cn(\n    'border-0 shadow-[inset_0_2px_3px_0_var(--primary),inset_2px_-4px_4px_0_rgba(0,0,0,0.25),inset_-2px_4px_4px_0_rgba(255,255,255,0.35)] transition-shadow duration-300 hover:bg-primary hover:shadow-[inset_0_0_0_0_var(--primary),inset_1px_-1.5px_2px_0_rgba(0,0,0,0.25),inset_-1px_1.5px_2px_0_rgba(255,255,255,0.35)]',\n    size === 'lg' && 'text-base has-[>svg]:px-6',\n    className\n  )}\n  {...props}\n>\n  {@render children?.()}\n</Button>\n

"},{"content":"\n\n\n\nsvg]:px-6',\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t{@render children?.()}\n\n","type":"registry:file","target":"lib/components/ui/orion-button/secondary-orion-button.svelte","highlightedContent":"

<script lang=\"ts\" module>\n  import { cn } from '$lib/utils';\n  import { Button, type ButtonProps } from '$lib/components/ui/button';\n\n  export type SecondaryOrionButtonProps = ButtonProps;\n</script>\n\n<script lang=\"ts\">\n  let {\n    children,\n    class: className,\n    variant = 'default',\n    size = 'default',\n    ref = $bindable(null),\n    ...props\n  }: SecondaryOrionButtonProps = $props();\n</script>\n\n<Button\n  bind:ref\n  {variant}\n  {size}\n  class={cn(\n    'border-0 bg-secondary text-secondary-foreground shadow-[inset_0_2px_3px_0_var(--secondary),inset_2px_-4px_4px_0_rgba(0,0,0,0.25),inset_-2px_4px_4px_0_rgba(255,255,255,0.35)] transition-shadow duration-300 hover:bg-secondary hover:shadow-[inset_0_0_0_0_var(--secondary),inset_1px_-1.5px_2px_0_rgba(0,0,0,0.25),inset_-1px_1.5px_2px_0_rgba(255,255,255,0.35)]',\n    size === 'lg' && 'text-base has-[>svg]:px-6',\n    className\n  )}\n  {...props}\n>\n  {@render children?.()}\n</Button>\n

"}]},{"name":"button-53","type":"registry:component","files":[{"content":"\n\nGrow Button\n","type":"registry:component","target":"lib/components/button-53.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { PrimaryGrowButton } from '$lib/components/ui/grow-button';\n</script>\n\n<PrimaryGrowButton>Grow Button</PrimaryGrowButton>\n

"},{"content":"import PrimaryGrowButton, { type PrimaryGrowButtonProps } from './primary-grow-button.svelte';\nimport SecondaryGrowButton, { type SecondaryGrowButtonProps } from './secondary-grow-button.svelte';\n\nexport {\n\tPrimaryGrowButton,\n\tSecondaryGrowButton,\n\ttype PrimaryGrowButtonProps as PrimaryProps,\n\ttype SecondaryGrowButtonProps as SecondaryProps,\n\t//\n\ttype PrimaryGrowButtonProps,\n\ttype SecondaryGrowButtonProps\n};\n","type":"registry:file","target":"lib/components/ui/grow-button/index.ts","highlightedContent":"

import PrimaryGrowButton, { type PrimaryGrowButtonProps } from './primary-grow-button.svelte';\nimport SecondaryGrowButton, { type SecondaryGrowButtonProps } from './secondary-grow-button.svelte';\n\nexport {\n  PrimaryGrowButton,\n  SecondaryGrowButton,\n  type PrimaryGrowButtonProps as PrimaryProps,\n  type SecondaryGrowButtonProps as SecondaryProps,\n  //\n  type PrimaryGrowButtonProps,\n  type SecondaryGrowButtonProps\n};\n

"},{"content":"\n\n\n\nsvg]:px-6',\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t{@render children?.()}\n\n","type":"registry:file","target":"lib/components/ui/grow-button/primary-grow-button.svelte","highlightedContent":"

<script lang=\"ts\" module>\n  import { cn } from '$lib/utils';\n  import { Button, type ButtonProps } from '$lib/components/ui/button';\n\n  export type PrimaryGrowButtonProps = ButtonProps;\n</script>\n\n<script lang=\"ts\">\n  let {\n    children,\n    class: className,\n    variant = 'default',\n    size = 'default',\n    ref = $bindable(null),\n    ...props\n  }: PrimaryGrowButtonProps = $props();\n</script>\n\n<Button\n  bind:ref\n  {variant}\n  {size}\n  class={cn(\n    'rounded-lg duration-200 ease-in-out active:-translate-x-0.5 active:translate-y-0.5',\n    // default shadows\n    '[box-shadow:0px_1px_8px_0px_color-mix(in_oklab,white_7%,transparent)_inset,0px_0px_4.3px_0px_color-mix(in_oklab,var(--primary)_11%,transparent)_inset,0px_0px_0px_2.5px_var(--primary),0px_9px_21.7px_3px_color-mix(in_oklab,var(--primary)_40%,transparent),0px_-1px_0px_1px_color-mix(in_oklab,white_18%,transparent)_inset,0px_4px_4px_0px_color-mix(in_oklab,var(--primary)_16%,transparent)] dark:[box-shadow:0px_1px_8px_0px_color-mix(in_oklab,black_7%,transparent)_inset,0px_0px_4.3px_0px_color-mix(in_oklab,var(--primary)_11%,transparent)_inset,0px_0px_0px_2.5px_var(--primary),0px_9px_21.7px_3px_color-mix(in_oklab,var(--primary)_40%,transparent),0px_-1px_0px_1px_color-mix(in_oklab,black_18%,transparent)_inset,0px_4px_4px_0px_color-mix(in_oklab,var(--primary)_16%,transparent)]',\n    // shadows on active state\n    'active:[box-shadow:0px_1px_8px_0px_color-mix(in_oklab,white_7%,transparent)_inset,0px_0px_4.3px_0px_color-mix(in_oklab,var(--primary)_11%,transparent)_inset,0px_0px_0px_2.5px_var(--primary),0px_7px_12px_0px_color-mix(in_oklab,var(--primary)_60%,transparent),0px_-1px_0px_1px_color-mix(in_oklab,white_18%,transparent)_inset,0px_4px_4px_0px_color-mix(in_oklab,var(--primary)_16%,transparent)] dark:active:[box-shadow:0px_1px_8px_0px_color-mix(in_oklab,black_7%,transparent)_inset,0px_0px_4.3px_0px_color-mix(in_oklab,var(--primary)_11%,transparent)_inset,0px_0px_0px_2.5px_var(--primary),0px_7px_12px_0px_color-mix(in_oklab,var(--primary)_60%,transparent),0px_-1px_0px_1px_color-mix(in_oklab,black_18%,transparent)_inset,0px_4px_4px_0px_color-mix(in_oklab,var(--primary)_16%,transparent)]',\n    // shadows on focus state\n    'focus-visible:[box-shadow:0px_1px_8px_0px_color-mix(in_oklab,white_7%,transparent)_inset,0px_0px_4.3px_0px_color-mix(in_oklab,var(--primary)_11%,transparent)_inset,0px_0px_0px_2.5px_var(--primary),0px_7px_12px_0px_color-mix(in_oklab,var(--primary)_60%,transparent),0px_-1px_0px_1px_color-mix(in_oklab,white_18%,transparent)_inset,0px_4px_4px_0px_color-mix(in_oklab,var(--primary)_16%,transparent)] dark:focus-visible:[box-shadow:0px_1px_8px_0px_color-mix(in_oklab,black_7%,transparent)_inset,0px_0px_4.3px_0px_color-mix(in_oklab,var(--primary)_11%,transparent)_inset,0px_0px_0px_2.5px_var(--primary),0px_7px_12px_0px_color-mix(in_oklab,var(--primary)_60%,transparent),0px_-1px_0px_1px_color-mix(in_oklab,black_18%,transparent)_inset,0px_4px_4px_0px_color-mix(in_oklab,var(--primary)_16%,transparent)]',\n    size === 'lg' && 'text-base has-[>svg]:px-6',\n    className\n  )}\n  {...props}\n>\n  {@render children?.()}\n</Button>\n

"},{"content":"\n\n\n\nsvg]:px-6',\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t{@render children?.()}\n\n","type":"registry:file","target":"lib/components/ui/grow-button/secondary-grow-button.svelte","highlightedContent":"

<script lang=\"ts\" module>\n  import { cn } from '$lib/utils';\n  import { Button, type ButtonProps } from '$lib/components/ui/button';\n\n  export type SecondaryGrowButtonProps = ButtonProps;\n</script>\n\n<script lang=\"ts\">\n  let {\n    children,\n    class: className,\n    variant = 'default',\n    size = 'default',\n    ref = $bindable(null),\n    ...props\n  }: SecondaryGrowButtonProps = $props();\n</script>\n\n<Button\n  bind:ref\n  {variant}\n  {size}\n  class={cn(\n    'cursor-pointer rounded-lg border border-[color-mix(in_oklab,_var(--primary)_30%,_var(--card))] bg-[color-mix(in_oklab,_var(--primary)_10%,_var(--card))] text-primary hover:bg-[color-mix(in_oklab,_var(--primary)_15%,_var(--card))] active:scale-95',\n    size === 'lg' && 'text-base has-[>svg]:px-6',\n    className\n  )}\n  {...props}\n>\n  {@render children?.()}\n</Button>\n

"}]},{"name":"button-54","type":"registry:component","files":[{"content":"\n\nNeural Button\n","type":"registry:component","target":"lib/components/button-54.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { NeuralButton } from '$lib/components/ui/neural-button';\n</script>\n\n<NeuralButton>Neural Button</NeuralButton>\n

"},{"content":"\n\n\n\n\n\t\n\n","type":"registry:file","target":"lib/components/ui/neural-button/border-beam.svelte","highlightedContent":"

<script lang=\"ts\" module>\n  import type { Transition, MotionStyle } from 'motion-sv';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { motion } from 'motion-sv';\n  import { cn } from '$lib/utils';\n\n  export type BorderBeamProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n    size?: number;\n    duration?: number;\n    delay?: number;\n    colorFrom?: string;\n    colorTo?: string;\n    transition?: Transition;\n    reverse?: boolean;\n    initialOffset?: number;\n    borderWidth?: number;\n    style?: MotionStyle;\n  };\n</script>\n\n<script lang=\"ts\">\n  let {\n    class: className,\n    size = 50,\n    delay = 0,\n    duration = 6,\n    colorFrom = 'var(--destructive)',\n    colorTo = 'var(--primary)',\n    transition,\n    style = {},\n    reverse = false,\n    initialOffset = 0,\n    borderWidth = 1,\n    ...restProps\n  }: BorderBeamProps = $props();\n\n  const animateOffset = $derived(\n    reverse\n      ? [`${100 - initialOffset}%`, `${-initialOffset}%`]\n      : [`${initialOffset}%`, `${100 + initialOffset}%`]\n  );\n</script>\n\n<div\n  class=\"pointer-events-none absolute inset-0 rounded-[inherit] border-(length:--border-beam-width) border-transparent [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)] [mask-composite:intersect] [mask-clip:padding-box,border-box]\"\n  style:--border-beam-width=\"{borderWidth}px\"\n  {...restProps}\n>\n  <motion.div\n    class={cn(\n      'absolute aspect-square',\n      'rounded-full bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent',\n      className\n    )}\n    style={{\n      width: size,\n      offsetPath: `rect(0 auto auto 0 round ${size}px)`,\n      '--color-from': colorFrom,\n      '--color-to': colorTo,\n      ...style\n    }}\n    initial={{ offsetDistance: `${initialOffset}%` }}\n    animate={{ offsetDistance: animateOffset }}\n    transition={{\n      repeat: Infinity,\n      ease: 'linear',\n      duration,\n      delay: -delay,\n      ...(transition ?? {})\n    }}\n  />\n</div>\n

"},{"content":"import Root, { type NeuralButtonProps } from './neural-button.svelte';\nimport BorderBeam, { type BorderBeamProps } from './border-beam.svelte';\n\nexport {\n\tRoot,\n\tBorderBeam,\n\ttype NeuralButtonProps as Props,\n\t//\n\tRoot as NeuralButton,\n\ttype NeuralButtonProps,\n\ttype BorderBeamProps\n};\n","type":"registry:file","target":"lib/components/ui/neural-button/index.ts","highlightedContent":"

import Root, { type NeuralButtonProps } from './neural-button.svelte';\nimport BorderBeam, { type BorderBeamProps } from './border-beam.svelte';\n\nexport {\n  Root,\n  BorderBeam,\n  type NeuralButtonProps as Props,\n  //\n  Root as NeuralButton,\n  type NeuralButtonProps,\n  type BorderBeamProps\n};\n

"},{"content":"\n\n\n\n{#snippet backgroundDecorations()}\n\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n{/snippet}\n\n{#snippet overlayDecorations()}\n\t\n\t\n{/snippet}\n\nsvg]:px-6',\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t{@render backgroundDecorations()}\n\t{@render children?.()}\n\t{@render overlayDecorations()}\n\n","type":"registry:file","target":"lib/components/ui/neural-button/neural-button.svelte","highlightedContent":"

<script lang=\"ts\" module>\n  import { cn } from '$lib/utils';\n  import { Button, type ButtonProps } from '$lib/components/ui/button';\n  import BorderBeam from './border-beam.svelte';\n\n  export type NeuralButtonProps = ButtonProps;\n</script>\n\n<script lang=\"ts\">\n  let {\n    children,\n    class: className,\n    variant = 'default',\n    size = 'default',\n    ref = $bindable(null),\n    ...props\n  }: NeuralButtonProps = $props();\n</script>\n\n{#snippet backgroundDecorations()}\n  <span\n    class=\"pointer-events-none absolute inset-0 -z-1 bg-gradient-to-r from-neutral-900/20 to-white/20\"\n  >\n    <span\n      class=\"absolute inset-px rounded-[calc(var(--radius-xl)-1px)] bg-sky-600 dark:bg-sky-400/60\"\n    ></span>\n  </span>\n\n  <svg\n    width=\"98\"\n    height=\"40\"\n    viewBox=\"0 0 98 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"absolute inset-x-0 bottom-px h-12 w-full! blur-[6px]\"\n  >\n    <g filter=\"url(#filter0_f_28138_7760)\">\n      <path\n        d=\"M99 37.5708C60.3329 38.179 38.3917 38.106 -1 37.5708C-1 37.5708 2.65293 34.4541 7.59896 29.7774C12.545 25.1008 81.7895 24.0613 90.3618 30.737C98.9341 37.4128 99 37.5708 99 37.5708Z\"\n        fill=\"white\"\n      />\n    </g>\n    <defs>\n      <filter\n        id=\"filter0_f_28138_7760\"\n        x=\"-28.9\"\n        y=\"-1.9\"\n        width=\"155.8\"\n        height=\"67.8\"\n        filterUnits=\"userSpaceOnUse\"\n        color-interpolation-filters=\"sRGB\"\n      >\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n        <feGaussianBlur stdDeviation=\"13.95\" result=\"effect1_foregroundBlur_28138_7760\" />\n      </filter>\n    </defs>\n  </svg>\n{/snippet}\n\n{#snippet overlayDecorations()}\n  <span\n    class=\"pointer-events-none absolute inset-0 z-1 rounded-xl [box-shadow:0px_1px_1.6px_0px_color-mix(in_oklab,white_68%,transparent)_inset]\"\n  ></span>\n  <BorderBeam colorFrom=\"white\" colorTo=\"white\" size={35} />\n{/snippet}\n\n<Button\n  bind:ref\n  {variant}\n  {size}\n  class={cn(\n    'relative z-1 overflow-hidden rounded-xl bg-sky-600! text-white shadow-[0_0_0_2px_oklch(0.685_0.169_237.323/0.6)] transition-transform duration-200 ease-in-out hover:scale-105 active:scale-95 dark:bg-sky-400/60! dark:shadow-[0_0_0_2px_oklch(0.746_0.16_232.661/0.6)]',\n    size === 'lg' && 'text-base has-[>svg]:px-6',\n    className\n  )}\n  {...props}\n>\n  {@render backgroundDecorations()}\n  {@render children?.()}\n  {@render overlayDecorations()}\n</Button>\n

"}]},{"name":"button-55","type":"registry:component","files":[{"content":"\n\n

\n\tGlass Button\n

\n","type":"registry:component","target":"lib/components/button-55.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { GlassButton } from '$lib/components/ui/glass-button';\n</script>\n\n<div class=\"flex size-full items-center justify-center rounded-xl bg-gray-800\">\n  <GlassButton>Glass Button</GlassButton>\n</div>\n

"},{"content":"\n\n\n\nsvg]:px-6',\n\t\t'relative inline-flex shrink-0 rounded-lg !bg-transparent bg-clip-padding text-white!',\n\t\t// Glass effect\n\t\t'bg-linear-to-l from-white/15 to-white/25 backdrop-blur-xs',\n\t\t'before:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-[inherit] before:border before:border-transparent before:bg-origin-border',\n\t\t// Conic gradient\n\t\t'before:bg-[conic-gradient(from_var(--button-angle)_at_50%_50%,rgba(255,255,255,0.5),rgba(255,255,255,0)_10%_43%,rgba(255,255,255,0.5)_50%,rgba(255,255,255,0)_73%_93%,rgba(255,255,255,0.5))]',\n\t\t// Masking\n\t\t'before:[mask-image:linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] before:mask-exclude before:[mask-clip:content-box,border-box]',\n\t\t// Hover\n\t\t'before:transition-[--button-angle] before:duration-500 before:ease-in-out hover:before:[--button-angle:-125deg]',\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t{@render children?.()}\n\n","type":"registry:file","target":"lib/components/ui/glass-button/glass-button.svelte","highlightedContent":"

<script lang=\"ts\" module>\n  import { cn } from '$lib/utils';\n  import { Button, type ButtonProps } from '$lib/components/ui/button';\n\n  export type GlassButtonProps = ButtonProps;\n</script>\n\n<script lang=\"ts\">\n  let {\n    children,\n    class: className,\n    variant = 'default',\n    size = 'default',\n    ref = $bindable(null),\n    ...props\n  }: GlassButtonProps = $props();\n</script>\n\n<Button\n  bind:ref\n  {variant}\n  {size}\n  class={cn(\n    size === 'lg' && 'text-base has-[>svg]:px-6',\n    'relative inline-flex shrink-0 rounded-lg !bg-transparent bg-clip-padding text-white!',\n    // Glass effect\n    'bg-linear-to-l from-white/15 to-white/25 backdrop-blur-xs',\n    'before:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-[inherit] before:border before:border-transparent before:bg-origin-border',\n    // Conic gradient\n    'before:bg-[conic-gradient(from_var(--button-angle)_at_50%_50%,rgba(255,255,255,0.5),rgba(255,255,255,0)_10%_43%,rgba(255,255,255,0.5)_50%,rgba(255,255,255,0)_73%_93%,rgba(255,255,255,0.5))]',\n    // Masking\n    'before:[mask-image:linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] before:mask-exclude before:[mask-clip:content-box,border-box]',\n    // Hover\n    'before:transition-[--button-angle] before:duration-500 before:ease-in-out hover:before:[--button-angle:-125deg]',\n    className\n  )}\n  {...props}\n>\n  {@render children?.()}\n</Button>\n

"},{"content":"import Root, { type GlassButtonProps } from './glass-button.svelte';\n\nexport {\n\tRoot,\n\ttype GlassButtonProps as Props,\n\t//\n\tRoot as GlassButton,\n\ttype GlassButtonProps\n};\n","type":"registry:file","target":"lib/components/ui/glass-button/index.ts","highlightedContent":"

import Root, { type GlassButtonProps } from './glass-button.svelte';\n\nexport {\n  Root,\n  type GlassButtonProps as Props,\n  //\n  Root as GlassButton,\n  type GlassButtonProps\n};\n

"},{"content":"@property --button-angle {\n syntax: ;\n inherits: false;\n initial-value: -75deg;\n}","type":"registry:file","target":"app.css","highlightedContent":"

@property --button-angle {\n  syntax: <angle>;\n  inherits: false;\n  initial-value: -75deg;\n}

"}]}]

Shadcn Button

Animated Button