aural-ui 2.0.7 → 2.0.9

package/dist/components/switch/Switch.stories.tsx

@@ -3,6 +3,8 @@ import { Button } from "@components/button"
 import Label from "@components/label"
 import type { Meta, StoryObj } from "@storybook/react"
 
+import { CrossIcon, TickIcon } from "src/ui/icons"
+
 import { Switch } from "."
 
 const meta: Meta<typeof Switch> = {
@@ -90,3 +92,19 @@ export const WithForm: Story = {
     </form>
   ),
 }
+
+export const WithIcons: Story = {
+  args: {
+    checked: false,
+    onIcon: <TickIcon />,
+    offIcon: <CrossIcon />,
+  },
+}
+
+export const CheckedWithIcons: Story = {
+  args: {
+    checked: true,
+    onIcon: <TickIcon />,
+    offIcon: <CrossIcon />,
+  },
+}

package/dist/components/switch/index.tsx

@@ -2,33 +2,53 @@ import * as React from "react"
 import { cn } from "@lib/utils"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
 
+type SwitchWithIconsProps = React.ComponentPropsWithoutRef<
+  typeof SwitchPrimitives.Root
+> & {
+  offIcon?: React.ReactNode
+  onIcon?: React.ReactNode
+}
+
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+  SwitchWithIconsProps
+>(({ className, onIcon, offIcon, checked, disabled, ...props }, ref) => (
   <SwitchPrimitives.Root
+    ref={ref}
+    checked={checked}
+    disabled={disabled}
     className={cn(
-      "data-[state=checked]:not-[:disabled]:border-fm-divider-positive data-[state=checked]:not-[:disabled]:bg-fm-green-50 data-[state=unchecked]:not-[:disabled]:border-fm-divider-primary data-[state=unchecked]:not-[:disabled]:bg-fm-surface-primary data-[state=unchecked]:disabled:border-fm-divider-tertiary data-[state=unchecked]:disabled:bg-fm-surface-secondary data-[state=checked]:disabled:border-fm-green-100 data-[state=checked]:disabled:bg-fm-green-50 focus-visible:ring-fm-primary focus-visible:ring-offset-fm-green-50 hover:bg-fm-surface-secondary data-[state=unchecked]:not-[:disabled]:hover:bg-fm-surface-secondary h-8 w-14 rounded-full border border-solid transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-      "data-[state=unchecked]:not-[:disabled]:hover:border-fm-divider-primary relative disabled:cursor-not-allowed",
+      "data-[state=checked]:not-[:disabled]:border-fm-divider-positive data-[state=checked]:not-[:disabled]:bg-fm-green-50",
+      "data-[state=unchecked]:not-[:disabled]:border-fm-divider-primary data-[state=unchecked]:not-[:disabled]:bg-fm-surface-primary",
+      "data-[state=unchecked]:disabled:border-fm-divider-tertiary data-[state=unchecked]:disabled:bg-fm-surface-secondary",
+      "data-[state=checked]:disabled:border-fm-green-100 data-[state=checked]:disabled:bg-fm-green-50",
+      "focus-visible:ring-fm-primary focus-visible:ring-offset-fm-green-50",
+      "hover:bg-fm-surface-secondary data-[state=unchecked]:not-[:disabled]:hover:bg-fm-surface-secondary",
+      "data-[state=unchecked]:not-[:disabled]:hover:border-fm-divider-primary",
+      "relative h-8 w-14 rounded-full border border-solid transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
       className
     )}
     {...props}
-    ref={ref}
   >
     <span
-      className="font-fm-brand text-fm-positive data-[disabled=true]:text-fm-positive-tert absolute top-1/2 left-2 -translate-y-1/2 [font-size:var(--text-fm-sm)]"
-      data-state={props.checked ? "checked" : "unchecked"}
-      data-disabled={props.disabled || undefined}
+      className={cn(
+        "font-fm-brand text-fm-positive absolute top-1/2 left-2 -translate-y-1/2 [font-size:var(--text-fm-sm)]",
+        disabled && "text-fm-positive-tert"
+      )}
+      data-state={checked ? "checked" : "unchecked"}
+      data-disabled={disabled || undefined}
     >
-      ON
+      {onIcon ?? "ON"}
     </span>
+
     <span
       className="font-fm-brand text-fm-tertiary absolute top-1/2 right-1.5 -translate-y-1/2 [font-size:var(--text-fm-sm)]"
-      data-state={props.checked ? "checked" : "unchecked"}
-      data-disabled={props.disabled || undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      data-disabled={disabled || undefined}
     >
-      OFF
+      {offIcon ?? "OFF"}
     </span>
+
     <SwitchPrimitives.Thumb className="bg-fm-icon-active data-[disabled]:bg-fm-icon-inactive pointer-events-none z-10 block size-6 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1" />
   </SwitchPrimitives.Root>
 ))

package/dist/components/tabs/Tabs.stories.tsx

@@ -71,7 +71,8 @@ A beautiful and accessible tabs component built on top of Radix UI's Tabs primit
 ## Visual Effects
 
 ### Active Tab Glow
-The active tab features a stunning dual-layer gradient effect:
+The active tab features a stunning dual-layer gradient effect with configurable direction:
+- **Glow Direction**: Choose between "bottom" (default) or "top" glow positioning
 - **Bottom Layer**: Curved gradient line at the tab base
 - **Top Layer**: Blurred elliptical glow with screen blend mode
 - **Colors**: Red to purple to black gradient (#FF3E4C → #5200A3 → #0A0A0A)
@@ -113,6 +114,20 @@ The active tab features a stunning dual-layer gradient effect:
 </Tabs>
 \`\`\`
 
+### With Glow Direction
+\`\`\`tsx
+<Tabs defaultValue="overview" size="md">
+  <TabsList>
+    <TabsTrigger value="overview" glowDirection="bottom">Overview</TabsTrigger>
+    <TabsTrigger value="analytics" glowDirection="top">Analytics</TabsTrigger>
+    <TabsTrigger value="settings" glowDirection="bottom">Settings</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview content</TabsContent>
+  <TabsContent value="analytics">Analytics content</TabsContent>
+  <TabsContent value="settings">Settings content</TabsContent>
+</Tabs>
+\`\`\`
+
 ### Individual Size Override
 \`\`\`tsx
 <Tabs defaultValue="home" size="md">
@@ -135,6 +150,7 @@ The active tab features a stunning dual-layer gradient effect:
 
 ### TabsTrigger Props
 - **size**: "sm" | "md" | "lg" - Optional override for individual triggers
+- **glowDirection**: "bottom" | "top" - Direction of the glow effect (default: "bottom")
 - **value**: string - Unique identifier for the tab
 - **disabled**: boolean - Disable the tab trigger
 
@@ -1162,7 +1178,168 @@ export const ComplexContent: Story = {
   },
 }
 
-// 6. Interactive States (keeping the same as it demonstrates good functionality)
+// 6. Glow Direction Variations
+export const GlowDirectionVariations: Story = {
+  render: () => (
+    <div className="w-full max-w-4xl space-y-8">
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium text-white">
+          Bottom Glow (Default)
+        </h3>
+        <Tabs defaultValue="tab1" size="md" className="w-full">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="tab1" glowDirection="bottom">
+              Dashboard
+            </TabsTrigger>
+            <TabsTrigger value="tab2" glowDirection="bottom">
+              Reports
+            </TabsTrigger>
+            <TabsTrigger value="tab3" glowDirection="bottom">
+              Profile
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                Bottom glow creates an underline effect that emphasizes the
+                tab's connection to content below.
+              </p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab2" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                Perfect for interfaces where you want to draw attention to the
+                content area.
+              </p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab3" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                Creates a strong visual connection between the tab and its
+                associated content.
+              </p>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium text-white">Top Glow</h3>
+        <Tabs defaultValue="tab1" size="md" className="w-full">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="tab1" glowDirection="top">
+              Overview
+            </TabsTrigger>
+            <TabsTrigger value="tab2" glowDirection="top">
+              Analytics
+            </TabsTrigger>
+            <TabsTrigger value="tab3" glowDirection="top">
+              Settings
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                Top glow creates a subtle highlight effect above the active tab,
+                perfect for elevated interfaces.
+              </p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab2" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                Alternative glow direction for different visual effects.
+              </p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab3" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                Ideal for creating variety in your interface design.
+              </p>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium text-white">
+          Mixed Glow Directions
+        </h3>
+        <Tabs defaultValue="tab1" size="md" className="w-full">
+          <TabsList className="grid w-full grid-cols-4">
+            <TabsTrigger value="tab1" glowDirection="bottom">
+              Bottom Glow
+            </TabsTrigger>
+            <TabsTrigger value="tab2" glowDirection="top">
+              Top Glow
+            </TabsTrigger>
+            <TabsTrigger value="tab3" glowDirection="bottom">
+              Bottom Glow
+            </TabsTrigger>
+            <TabsTrigger value="tab4" glowDirection="top">
+              Top Glow
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                You can mix and match glow directions for different visual
+                effects.
+              </p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab2" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                Each tab can have its own glow direction for maximum
+                flexibility.
+              </p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab3" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                Useful for creating visual hierarchy or emphasizing specific
+                tabs.
+              </p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab4" className="mt-4">
+            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+              <p className="text-white/70">
+                Experiment with different combinations to achieve your desired
+                design.
+              </p>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-4">
+        <div className="text-sm text-blue-200">
+          <strong>Note:</strong> The glowDirection prop allows you to customize
+          the visual effect of active tabs. Use "bottom" (default) for an
+          underline-style glow or "top" for a subtle highlight effect. You can
+          mix different directions within the same tab group for creative
+          designs.
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates the glowDirection prop with different configurations. Shows top glow (default), bottom glow, and mixed directions for various visual effects.",
+      },
+    },
+  },
+}
+
+// 7. Interactive States (keeping the same as it demonstrates good functionality)
 export const InteractiveStates: Story = {
   render: () => {
     const [activeTab, setActiveTab] = React.useState("normal")

package/dist/components/tabs/index.tsx

@@ -55,19 +55,60 @@ function TabsList({
   )
 }
 
+type GlowDirection = "bottom" | "top"
+
 interface TabsTriggerProps
   extends React.ComponentProps<typeof TabsPrimitive.Trigger> {
-  size?: "sm" | "md" | "lg" // Optional override for individual triggers
   className?: string
+  size?: "sm" | "md" | "lg"
+  glowDirection?: GlowDirection
 }
 
 function TabsTrigger({
   className,
   size: sizeProp,
+  glowDirection = "bottom",
   ...props
 }: TabsTriggerProps) {
   const { size: contextSize } = React.useContext(TabsContext)
-  const size = sizeProp || contextSize // Individual size prop overrides context
+  const size = sizeProp || contextSize
+
+  const getGlowConfig = (direction: GlowDirection) => {
+    switch (direction) {
+      case "top":
+        return {
+          containerClass: "absolute top-0 left-0 w-full h-1/2",
+          ellipse: { cx: "44", cy: "15", rx: "32", ry: "4" },
+          gradientTransform: "matrix(0 -16.1429 32.0526 0 44 1)",
+          viewBox: "0 0 92 25",
+          dimensions: { width: "92", height: "25" },
+          filter: { x: "-4", y: "-15", width: "96", height: "40" },
+          edgeClass: "absolute top-0 left-0 w-full h-[3.2px]",
+          edgePath: "M0 1S19.503-.173 32 .022 64 1 64 1v1L0 1.995z",
+          edgeViewBox: "0 0 64 2",
+          edgeDimensions: { width: "64", height: "2" },
+          edgeGradientTransform: "matrix(0 -4.03571 32.0526 0 32 0)",
+        }
+
+      case "bottom":
+      default:
+        return {
+          containerClass: "absolute bottom-0 left-0 w-full h-1/2",
+          ellipse: { cx: "44", cy: "20", rx: "32", ry: "4" },
+          gradientTransform: "matrix(0 16.1429 -32.0526 0 44 24)",
+          viewBox: "0 0 92 25",
+          dimensions: { width: "92", height: "25" },
+          filter: { x: "-4", y: "0", width: "96", height: "40" },
+          edgeClass: "absolute bottom-0 left-0 w-full h-[3px]",
+          edgePath: "M0 1S19.503-.173 32 .022 64 1 64 1v1L0 1.995z",
+          edgeViewBox: "0 0 64 2",
+          edgeDimensions: { width: "64", height: "2" },
+          edgeGradientTransform: "matrix(0 4.03571 -32.0526 0 32 2)",
+        }
+    }
+  }
+
+  const config = getGlowConfig(glowDirection)
 
   return (
     <TabsPrimitive.Trigger
@@ -83,21 +124,26 @@ function TabsTrigger({
       {...props}
     >
       {props.children}
-      <div className="group-data-[state=active]:animate-fm-fadeIn group-hover:!animate-fm-fadeIn group-data-[state=inactive]:animate-fm-fadeOut pointer-events-none absolute top-0 right-0 -bottom-0.5 left-0 z-10">
+      <div
+        className={cn(
+          "group-data-[state=active]:animate-fm-fadeIn group-hover:!animate-fm-fadeIn group-data-[state=inactive]:animate-fm-fadeOut pointer-events-none absolute top-0 right-0 -bottom-0.5 left-0 z-10"
+        )}
+      >
+        {/* Main glow ellipse */}
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width="92"
-          height="25"
-          viewBox="0 0 92 25"
+          width={config.dimensions.width}
+          height={config.dimensions.height}
+          viewBox={config.viewBox}
           fill="none"
-          className="absolute bottom-0 h-1/2 w-full"
+          className={config.containerClass}
         >
           <g filter="url(#b)">
             <ellipse
-              cx="44"
-              cy="20"
-              rx="32"
-              ry="4"
+              cx={config.ellipse.cx}
+              cy={config.ellipse.cy}
+              rx={config.ellipse.rx}
+              ry={config.ellipse.ry}
               fill="url(#c)"
               style={{ mixBlendMode: "screen" }}
             />
@@ -109,7 +155,7 @@ function TabsTrigger({
               cy="0"
               r="1"
               gradientUnits="userSpaceOnUse"
-              gradientTransform="matrix(0 16.1429 -32.0526 0 44 24)"
+              gradientTransform={config.gradientTransform}
             >
               <stop stopColor="var(--color-fm-primary-600)" />
               <stop offset=".805" stopColor="var(--color-fm-secondary-300)" />
@@ -117,10 +163,10 @@ function TabsTrigger({
             </radialGradient>
             <filter
               id="b"
-              x="-4"
-              y="0"
-              width="96"
-              height="40"
+              x={config.filter.x}
+              y={config.filter.y}
+              width={config.filter.width}
+              height={config.filter.height}
               filterUnits="userSpaceOnUse"
               colorInterpolationFilters="sRGB"
             >
@@ -137,16 +183,18 @@ function TabsTrigger({
             </filter>
           </defs>
         </svg>
+
+        {/* Edge line */}
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width="64"
-          height="2"
-          viewBox="0 0 64 2"
+          width={config.edgeDimensions.width}
+          height={config.edgeDimensions.height}
+          viewBox={config.edgeViewBox}
           fill="none"
-          className="absolute bottom-0 h-[3px] w-full"
+          className={config.edgeClass}
         >
           <path
-            d="M0 1S19.503-.173 32 .022 64 1 64 1v1L0 1.995z"
+            d={config.edgePath}
             fill="url(#a)"
             style={{ mixBlendMode: "screen" }}
           />
@@ -157,7 +205,7 @@ function TabsTrigger({
               cy="0"
               r="1"
               gradientUnits="userSpaceOnUse"
-              gradientTransform="matrix(0 4.03571 -32.0526 0 32 2)"
+              gradientTransform={config.edgeGradientTransform}
             >
               <stop stopColor="var(--color-fm-primary-600)" />
               <stop offset=".61" stopColor="var(--color-fm-secondary-300)" />

package/dist/icons/index.ts

@@ -42,6 +42,7 @@ export * from "./light-bulb-simple-icon"
 export * from "./magic-book-icon"
 export * from "./maintenance-icon"
 export * from "./message-icon"
+export * from "./moon-icon"
 export * from "./move-horizontal-icon"
 export * from "./move-vertical-icon"
 export * from "./musical-note-icon"
@@ -60,6 +61,7 @@ export * from "./spinner-gradient-icon"
 export * from "./spinner-solid-icon"
 export * from "./spinner-solid-neutral-icon"
 export * from "./suggestion-icon"
+export * from "./sun-icon"
 export * from "./text-color-icon"
 export * from "./text-indicator-icon"
 export * from "./tick-circle-icon"