aural-ui 2.0.5 → 2.0.7

package/dist/components/drawer/index.tsx

@@ -0,0 +1,205 @@
+import * as React from "react"
+import { Overlay } from "@components/overlay"
+import { cva, VariantProps } from "class-variance-authority"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "src/ui/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+interface IDrawerOverlay {
+  opacity?: "high" | "medium" | "low" | "none"
+  glass?: "high" | "medium" | "low" | "none"
+  noise?: "high" | "medium" | "low" | "none"
+  classes?: {
+    overlay?: string
+    content?: string
+    root?: string
+  }
+}
+
+function DrawerOverlay({
+  className,
+  opacity,
+  glass,
+  noise,
+  classes,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay> & IDrawerOverlay) {
+  return (
+    <DrawerPrimitive.Overlay data-slot="drawer-overlay" asChild {...props}>
+      <Overlay
+        opacity={opacity}
+        glass={glass}
+        noise={noise}
+        className={cn(
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50",
+          className,
+          classes?.overlay
+        )}
+      />
+    </DrawerPrimitive.Overlay>
+  )
+}
+
+export const drawerVariants = cva(
+  "flex flex-col gap-5 w-full rounded-fm-s p-4  relative group/drawer-content fixed z-50 h-auto py-2 text-white",
+  {
+    variants: {
+      variant: {
+        neutral:
+          "bg-fm-surface-frosted/20 border-solid border-fm-divider-secondary backdrop-blur-sm",
+        gradient:
+          "bg-fm-surface-primary [background-image:var(--color-fm-gradient-white)] border-0",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+    },
+  }
+)
+
+interface DrawerContentProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof drawerVariants> {
+  showOverlay?: boolean
+  showSwipeButton?: boolean
+}
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  DrawerContentProps & IDrawerOverlay
+>(
+  (
+    {
+      variant,
+      className,
+      opacity,
+      glass,
+      noise,
+      children,
+      classes,
+      showOverlay = true,
+      showSwipeButton = false,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <DrawerPortal data-slot="drawer-portal">
+        {showOverlay && (
+          <DrawerOverlay
+            opacity={opacity}
+            glass={glass}
+            noise={noise}
+            classes={classes}
+          />
+        )}
+        <DrawerPrimitive.Content
+          ref={ref}
+          data-slot="drawer-content"
+          className={cn(
+            drawerVariants({ variant }),
+            "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
+            "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
+            "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-lg data-[vaul-drawer-direction=right]:sm:max-w-sm",
+            "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-lg data-[vaul-drawer-direction=left]:sm:max-w-sm",
+            className,
+            classes?.content
+          )}
+          {...props}
+        >
+          {showSwipeButton && (
+            <div className="bg-fm-surface-primary mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+          )}
+          {children}
+        </DrawerPrimitive.Content>
+      </DrawerPortal>
+    )
+  }
+)
+DrawerContent.displayName = DrawerPrimitive.Content.displayName
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("font-semibold text-white", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-white", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

package/dist/components/drawer/meta.ts

@@ -0,0 +1,64 @@
+export const meta = {
+  dependencies: {
+    vaul: "^1.1.2",
+  },
+  internalDependencies: [],
+  tokens: [
+    "--color-fm-surface-frosted",
+    "--color-fm-divider-secondary",
+    "--color-fm-surface-primary",
+    "--color-white",
+    "--color-fm-white-alpha-16",
+    "--color-fm-white-alpha-0",
+    "--color-fm-gradient-white",
+    "--spacing-fm-4",
+    "--spacing-fm-5",
+    "--spacing-fm-2",
+    "--spacing-fm-24",
+    "--text-fm-sm",
+    "--font-fm-semibold",
+    "--z-index-50",
+    "--border-radius-fm-s",
+    "--border-radius-lg",
+    "--border-radius-t-lg",
+    "--border-radius-b-lg",
+    "--border-radius-l-lg",
+    "--border-radius-r-lg",
+    "--shadow-lg",
+  ],
+  props: {
+    DrawerContent: {
+      showOverlay: {
+        type: "boolean",
+        default: true,
+        description: "Whether to show the overlay behind the drawer",
+      },
+      showSwipeButton: {
+        type: "boolean",
+        default: false,
+        description:
+          "Whether to show the swipe indicator button at the top of the drawer",
+      },
+      variant: {
+        type: "string",
+        default: "neutral",
+        description: "The visual variant of the drawer (neutral or gradient)",
+      },
+      opacity: {
+        type: "string",
+        default: "medium",
+        description: "Overlay opacity level (high, medium, low, none)",
+      },
+      glass: {
+        type: "string",
+        default: "low",
+        description: "Overlay glass effect level (high, medium, low, none)",
+      },
+      noise: {
+        type: "string",
+        default: "low",
+        description: "Overlay noise texture level (high, medium, low, none)",
+      },
+    },
+  },
+}

package/dist/icons/index.ts

@@ -70,3 +70,4 @@ export * from "./vertical-menu-icon"
 export * from "./git-branch-icon"
 export * from "./git-fork-icon"
 export * from "./import-left-arrow-folder-icon"
+export * from "./star-icon"