@pathscale/ui 0.0.141 → 0.0.143

package/dist/components/accordion/index.d.ts

@@ -1 +1 @@
-export { default } from "./Accordion";
+export { default, type AccordionProps } from "./Accordion";

package/dist/components/alert/index.d.ts

@@ -1 +1 @@
-export { default } from "./Alert";
+export { default, type AlertProps } from "./Alert";

package/dist/components/background/index.d.ts

@@ -1 +1 @@
-export { default } from "./Background";
+export { default, type BackgroundProps } from "./Background";

package/dist/components/badge/index.d.ts

@@ -1 +1 @@
-export { default } from "./Badge";
+export { default, type BadgeProps } from "./Badge";

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -3,7 +3,7 @@ import type { IComponentBaseProps } from "../types";
 export interface BottomSheetProps extends IComponentBaseProps {
     isOpen: boolean;
     onClose: () => void;
-    children?: any;
+    children?: import("solid-js").JSX.Element;
     closeOnOverlayClick?: boolean;
     closeOnSwipeDown?: boolean;
 }

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import { type JSX, type Component } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-type BreadcrumbProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
+export type BreadcrumbProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
     innerProps?: JSX.HTMLAttributes<HTMLUListElement>;
 };
 declare const Breadcrumbs: Component<BreadcrumbProps>;

package/dist/components/breadcrumbs/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Breadcrumbs } from "./Breadcrumbs";
+export type { BreadcrumbProps } from "./Breadcrumbs";
 export { default as BreadcrumbsItem } from "./BreadcrumbsItem";

package/dist/components/button/index.d.ts

@@ -1 +1 @@
-export { default } from "./Button";
+export { default, type ButtonProps } from "./Button";

package/dist/components/card/index.d.ts

@@ -1 +1 @@
-export { default } from "./Card";
+export { default, type CardProps } from "./Card";

package/dist/components/chatbubble/index.d.ts

@@ -1 +1 @@
-export { default } from "./ChatBubble";
+export { default, type ChatBubbleProps } from "./ChatBubble";

package/dist/components/checkbox/index.d.ts

@@ -1 +1 @@
-export { default } from "./Checkbox";
+export { default, type CheckboxProps } from "./Checkbox";

package/dist/components/codemockup/CodeMockup.d.ts

@@ -1,5 +1,5 @@
 import { type JSX, type ParentProps } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-type CodeMockupProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type CodeMockupProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
 declare const CodeMockup: (props: ParentProps<CodeMockupProps>) => JSX.Element;
 export default CodeMockup;

package/dist/components/codemockup/index.d.ts

@@ -1,2 +1,2 @@
-export { default as CodeMockup } from "./CodeMockup";
+export { default as CodeMockup, type CodeMockupProps } from "./CodeMockup";
 export { default as CodeMockupLine } from "./CodeMockupLine";

package/dist/components/collapse/index.d.ts

@@ -1,4 +1,4 @@
 export { default as CollapseContent } from "./CollapseContent";
 export { CollapseTitle, Summary } from "./CollapseTitle";
 export { default as CollapseDetails } from "./CollapseDetails";
-export { default as Collapse } from "./Collapse";
+export { default as Collapse, type CollapseProps } from "./Collapse";

package/dist/components/confirm-dialog/ConfirmDialog.d.ts

@@ -0,0 +1,14 @@
+import type { JSX, ParentProps } from "solid-js";
+import type { ComponentColor, IComponentBaseProps } from "../types";
+export type ConfirmDialogProps = ParentProps<IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDialogElement>, "children"> & {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message?: JSX.Element;
+    confirmText?: string;
+    cancelText?: string;
+    confirmColor?: ComponentColor;
+    loading?: boolean;
+}>;
+export default function ConfirmDialog(props: ConfirmDialogProps): JSX.Element;

package/dist/components/confirm-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ConfirmDialog } from "./ConfirmDialog";
+export type { ConfirmDialogProps } from "./ConfirmDialog";

package/dist/components/connectionstatus/ConnectionStatus.d.ts

@@ -1,4 +1,4 @@
-import { type Component } from "solid-js";
+import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type ConnectionState = "connecting" | "connected" | "disconnected" | "error";
 export interface ConnectionStatusProps extends IComponentBaseProps {
@@ -49,7 +49,7 @@ export interface ConnectionStatusProps extends IComponentBaseProps {
     /**
      * Custom style
      */
-    style?: any;
+    style?: JSX.CSSProperties;
     /**
      * Data theme
      */

package/dist/components/countdown/index.d.ts

@@ -1 +1 @@
-export { default } from "./Countdown";
+export { default, type CountdownProps } from "./Countdown";

package/dist/components/diff/index.d.ts

@@ -1 +1 @@
-export { default } from "./Diff";
+export { default, type DiffProps } from "./Diff";

package/dist/components/divider/index.d.ts

@@ -1,2 +1,3 @@
 import Divider from "./Divider";
+export type { DividerProps } from "./Divider";
 export default Divider;

package/dist/components/dropdown/DropdownItem.d.ts

@@ -13,7 +13,9 @@ type NoAnchorProps = {
     closeOnClick?: boolean;
 };
 export type DropdownItemProps = (AnchorProps | ButtonProps | NoAnchorProps) & {
+    id?: string;
     "aria-selected"?: boolean;
+    role?: JSX.HTMLAttributes<HTMLLIElement>["role"];
 };
 declare const DropdownItem: (props: DropdownItemProps) => JSX.Element;
 export default DropdownItem;

package/dist/components/dropdown/DropdownMenu.d.ts

@@ -3,6 +3,7 @@ import type { IComponentBaseProps } from "../types";
 export type DropdownMenuProps = JSX.HTMLAttributes<HTMLUListElement> & IComponentBaseProps & {
     id?: string;
     hideOverflow?: boolean;
+    role?: string;
     "aria-labelledby"?: string;
 };
 declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element;

package/dist/components/dropdown/DropdownToggle.d.ts

@@ -10,6 +10,7 @@ export type DropdownToggleProps = Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>
     "aria-haspopup"?: boolean | "menu" | "listbox" | "dialog" | "grid" | "tree";
     "aria-expanded"?: boolean;
     "aria-controls"?: string;
+    "aria-activedescendant"?: string;
 };
 declare const DropdownToggle: (props: DropdownToggleProps) => JSX.Element;
 export type SummaryProps = JSX.HTMLAttributes<HTMLElement>;

package/dist/components/dropdown/index.d.ts

@@ -1,2 +1,3 @@
 import Dropdown from "./Dropdown";
+export type { DropdownProps } from "./Dropdown";
 export default Dropdown;

package/dist/components/dropdown-select/DropdownSelect.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from "solid-js";
+import type { ComponentSize, IComponentBaseProps } from "../types";
+export type DropdownSelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type DropdownSelectProps = IComponentBaseProps & {
+    options: DropdownSelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    showCheckmark?: boolean;
+    size?: ComponentSize;
+    "aria-label"?: string;
+    labelRenderer?: (value: string, option?: DropdownSelectOption) => JSX.Element;
+    optionRenderer?: (option: DropdownSelectOption, selected: boolean, highlighted: boolean) => JSX.Element;
+};
+declare const DropdownSelect: (props: DropdownSelectProps) => JSX.Element;
+export default DropdownSelect;

package/dist/components/dropdown-select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DropdownSelect } from "./DropdownSelect";
+export type { DropdownSelectProps, DropdownSelectOption } from "./DropdownSelect";

package/dist/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,11 @@
+import { type JSX, type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type EmptyStateProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "title"> & {
+    icon?: string;
+    iconSize?: number;
+    image?: JSX.Element;
+    title?: JSX.Element;
+    description?: JSX.Element;
+};
+declare const EmptyState: Component<EmptyStateProps>;
+export default EmptyState;

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EmptyState } from "./EmptyState";
+export type { EmptyStateProps } from "./EmptyState";

package/dist/components/fieldset/Fieldset.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps, ComponentSize } from "../types";
+export type FieldsetGap = ComponentSize | "none";
+export type FieldsetProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLFieldSetElement> & {
+    legend?: JSX.Element | string;
+    description?: string;
+    disabled?: boolean;
+    gap?: FieldsetGap;
+};
+declare const Fieldset: (props: FieldsetProps) => JSX.Element;
+export default Fieldset;

package/dist/components/fieldset/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Fieldset } from "./Fieldset";
+export type { FieldsetProps } from "./Fieldset";

package/dist/components/fileinput/index.d.ts

@@ -1 +1 @@
-export { default } from "./FileInput";
+export { default, type FileInputProps } from "./FileInput";

package/dist/components/flex/index.d.ts

@@ -1 +1 @@
-export { default } from "./Flex";
+export { default, type FlexProps } from "./Flex";

package/dist/components/form-actions/FormActions.d.ts

@@ -0,0 +1,14 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type FormActionsLayout = "single" | "split" | "center";
+export type FormActionsProps = IComponentBaseProps & {
+    submitText?: string;
+    cancelText?: string;
+    isLoading?: boolean;
+    isValid?: boolean;
+    onCancel?: () => void;
+    layout?: FormActionsLayout;
+    children?: JSX.Element;
+} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children">;
+declare const FormActions: (props: FormActionsProps) => JSX.Element;
+export default FormActions;

package/dist/components/form-actions/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FormActions } from "./FormActions";
+export type { FormActionsProps } from "./FormActions";

package/dist/components/glow-card/GlowCard.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import "./GlowCard.css";
+export type GlowCardProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement>;
+export default function GlowCard(props: GlowCardProps): JSX.Element;

package/dist/components/glow-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GlowCard } from "./GlowCard";
+export type { GlowCardProps } from "./GlowCard";

package/dist/components/grid/index.d.ts

@@ -1 +1 @@
-export { default } from "./Grid";
+export { default, type GridProps } from "./Grid";

package/dist/components/kbd/index.d.ts

@@ -1 +1 @@
-export { default } from "./Kbd";
+export { default, type KbdProps } from "./Kbd";

package/dist/components/link/index.d.ts

@@ -1 +1 @@
-export { default } from "./Link";
+export { default, type LinkProps } from "./Link";

package/dist/components/loading/index.d.ts

@@ -1 +1 @@
-export { default } from "./Loading";
+export { default, type LoadingProps } from "./Loading";

package/dist/components/mask/index.d.ts

@@ -1,2 +1,3 @@
 import Mask from "./Mask";
+export type { MaskProps } from "./Mask";
 export default Mask;

package/dist/components/pagination/Pagination.d.ts

@@ -1,4 +1,5 @@
+import { type JSX } from "solid-js";
 import { type JoinProps } from "../join/Join";
 export type PaginationProps = JoinProps;
-declare const Pagination: (props: JoinProps) => import("solid-js").JSX.Element;
+declare const Pagination: (props: PaginationProps) => JSX.Element;
 export default Pagination;

package/dist/components/progress/index.d.ts

@@ -1 +1 @@
-export { default } from "./Progress";
+export { default, type ProgressProps } from "./Progress";

package/dist/components/radialprogress/index.d.ts

@@ -1 +1 @@
-export { default } from "./RadialProgress";
+export { default, type RadialProgressProps } from "./RadialProgress";

package/dist/components/radio/index.d.ts

@@ -1 +1 @@
-export { default } from "./Radio";
+export { default, type RadioProps } from "./Radio";

package/dist/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,25 @@
+import { type JSX } from "solid-js";
+import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
+export type RadioGroupOption = {
+    value: string;
+    label: JSX.Element | string;
+    disabled?: boolean;
+};
+type RadioGroupBaseProps = {
+    name: string;
+    label?: string;
+    options: RadioGroupOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: ComponentSize;
+    color?: ComponentColor;
+    direction?: "horizontal" | "vertical";
+    error?: string;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+export type RadioGroupProps = RadioGroupBaseProps & IComponentBaseProps;
+declare const RadioGroup: (props: RadioGroupProps) => JSX.Element;
+export default RadioGroup;

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./RadioGroup";
+export type { RadioGroupProps, RadioGroupOption } from "./RadioGroup";

package/dist/components/range/index.d.ts

@@ -1 +1 @@
-export { default } from "./Range";
+export { default, type RangeProps } from "./Range";

package/dist/components/range-slider/RangeSlider.d.ts

@@ -0,0 +1,21 @@
+import { type JSX } from "solid-js";
+import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
+type SliderFieldBaseProps = {
+    label?: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    formatValue?: (value: number) => string;
+    color?: ComponentColor;
+    size?: ComponentSize;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+export type SliderFieldProps = SliderFieldBaseProps & IComponentBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof SliderFieldBaseProps>;
+declare const SliderField: (props: SliderFieldProps) => JSX.Element;
+export default SliderField;

package/dist/components/range-slider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SliderField } from "./RangeSlider";
+export type { SliderFieldProps } from "./RangeSlider";

package/dist/components/select/index.d.ts

@@ -1 +1 @@
-export { default } from "./Select";
+export { default, type SelectProps } from "./Select";

package/dist/components/skeleton/index.d.ts

@@ -1 +1 @@
-export { default } from "./Skeleton";
+export { default, type SkeletonProps } from "./Skeleton";

package/dist/components/skip-link/SkipLink.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SkipLinkProps = IComponentBaseProps & {
+    href?: string;
+    children?: JSX.Element;
+} & Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children" | "class" | "className" | "style">;
+export default function SkipLink(props: SkipLinkProps): JSX.Element;

package/dist/components/skip-link/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkipLink } from "./SkipLink";
+export type { SkipLinkProps } from "./SkipLink";

package/dist/components/stat-card/index.d.ts

@@ -1 +1 @@
-export { default } from "./StatCard";
+export { default, type StatCardProps } from "./StatCard";

package/dist/components/stats/index.d.ts

@@ -1 +1 @@
-export { default } from "./Stats";
+export { default, type StatsProps } from "./Stats";

package/dist/components/steps/index.d.ts

@@ -1,2 +1,3 @@
 import Steps from "./Steps";
+export type { StepsProps } from "./Steps";
 export default Steps;

package/dist/components/swap/index.d.ts

@@ -1 +1 @@
-export { default } from "./Swap";
+export { default, type SwapProps } from "./Swap";

package/dist/components/switch-field/SwitchField.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from "solid-js";
+import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
+type SwitchFieldBaseProps = {
+    label: string;
+    description?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: ComponentSize;
+    color?: ComponentColor;
+    error?: string;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+export type SwitchFieldProps = SwitchFieldBaseProps & IComponentBaseProps;
+declare const SwitchField: (props: SwitchFieldProps) => JSX.Element;
+export default SwitchField;

package/dist/components/switch-field/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SwitchField } from "./SwitchField";
+export type { SwitchFieldProps } from "./SwitchField";

package/dist/components/textarea/index.d.ts

@@ -1 +1 @@
-export { default } from "./Textarea";
+export { default, type TextareaProps } from "./Textarea";

package/dist/components/timeline/Timeline.d.ts

@@ -1,6 +1,6 @@
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-type TimelineProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLUListElement> & {
+export type TimelineProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLUListElement> & {
     vertical?: boolean;
     horizontal?: boolean;
     responsive?: boolean;

package/dist/components/timeline/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Timeline } from "./Timeline";
+export { default as Timeline, type TimelineProps } from "./Timeline";
 export { default as TimelineItem } from "./TimelineItem";
 export { default as TimelineStart } from "./TimelineStart";
 export { default as TimelineMiddle } from "./TimelineMiddle";

package/dist/components/toast/index.d.ts

@@ -1 +1 @@
-export { default } from "./Toast";
+export { default, type ToastProps } from "./Toast";

package/dist/components/toastcontainer/ToastContainer.d.ts

@@ -1,2 +1,3 @@
 import { type Component } from "solid-js";
-export declare const ToastContainer: Component;
+import type { ToastStackProps } from "./ToastStack";
+export declare const ToastContainer: Component<ToastStackProps>;

package/dist/components/toggle/index.d.ts

@@ -1 +1 @@
-export { default } from "./Toggle";
+export { default, type ToggleProps } from "./Toggle";

package/dist/components/tooltip/index.d.ts

@@ -1 +1 @@
-export { default } from "./Tooltip";
+export { default, type TooltipProps } from "./Tooltip";

package/dist/components/video-preview/VideoPreview.d.ts

@@ -0,0 +1,21 @@
+import { type Accessor, type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+type VideoPreviewBaseProps = {
+    /**
+     * Reactive accessor for the MediaStream to display
+     */
+    stream: Accessor<MediaStream | null>;
+    /**
+     * Whether the video should be muted
+     * @default true
+     */
+    muted?: boolean;
+    /**
+     * Whether to mirror the video (applies scaleX(-1))
+     * @default false
+     */
+    mirror?: boolean;
+};
+export type VideoPreviewProps = VideoPreviewBaseProps & IComponentBaseProps & Omit<JSX.VideoHTMLAttributes<HTMLVideoElement>, keyof VideoPreviewBaseProps>;
+export declare const VideoPreview: Component<VideoPreviewProps>;
+export default VideoPreview;

package/dist/components/video-preview/index.d.ts

@@ -0,0 +1,2 @@
+export { default as VideoPreview } from "./VideoPreview";
+export type { VideoPreviewProps } from "./VideoPreview";

package/dist/glow-card/GlowCard.css

@@ -0,0 +1,65 @@
+.glow-card {
+  --glow-color-border: oklch(100% 0 0 / 0.3);
+  --glow-color-bg: oklch(100% 0 0 / 0.1);
+  position: relative;
+  border-radius: inherit;
+}
+
+.glow-card::before,
+.glow-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.glow-card::before {
+  background: radial-gradient(
+    250px circle at var(--mouse-x) var(--mouse-y),
+    var(--glow-color-border),
+    transparent 80%
+  );
+  z-index: 1;
+  inset: -1px;
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  padding: 1px;
+}
+
+.glow-card::after {
+  background: radial-gradient(
+    400px circle at var(--mouse-x) var(--mouse-y),
+    var(--glow-color-bg),
+    transparent 80%
+  );
+  z-index: 0;
+}
+
+.glow-card:hover::before,
+.glow-card:hover::after {
+  opacity: 1;
+}
+
+[data-theme="light"] .glow-card::before {
+  --glow-color-border: oklch(30% 0.15 260 / 0.4);
+}
+
+[data-theme="light"] .glow-card::after {
+  --glow-color-bg: oklch(30% 0.15 260 / 0.15);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glow-card::before,
+  .glow-card::after {
+    opacity: 0 !important;
+  }
+}

package/dist/index.css

@@ -0,0 +1,56 @@
+.glow-card {
+  --glow-color-border: oklch(100% 0 0 / .3);
+  --glow-color-bg: oklch(100% 0 0 / .1);
+  border-radius: inherit;
+  position: relative;
+}
+
+.glow-card:before, .glow-card:after {
+  content: "";
+  border-radius: inherit;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .3s;
+  position: absolute;
+  inset: 0;
+}
+
+.glow-card:before {
+  background: radial-gradient(250px circle at var(--mouse-x) var(--mouse-y), var(--glow-color-border), transparent 80%);
+  z-index: 1;
+  -webkit-mask-composite: xor;
+  padding: 1px;
+  inset: -1px;
+  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+  mask-position: 0 0, 0 0;
+  mask-size: auto, auto;
+  mask-repeat: repeat, repeat;
+  mask-clip: content-box, border-box;
+  mask-origin: content-box, border-box;
+  mask-composite: exclude;
+  mask-mode: match-source, match-source;
+}
+
+.glow-card:after {
+  background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), var(--glow-color-bg), transparent 80%);
+  z-index: 0;
+}
+
+.glow-card:hover:before, .glow-card:hover:after {
+  opacity: 1;
+}
+
+[data-theme="light"] .glow-card:before {
+  --glow-color-border: oklch(30% .15 260 / .4);
+}
+
+[data-theme="light"] .glow-card:after {
+  --glow-color-bg: oklch(30% .15 260 / .15);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glow-card:before, .glow-card:after {
+    opacity: 0 !important;
+  }
+}
+