@object-ui/components 0.3.0 → 0.5.0

package/src/ui/index.ts

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 export * from './accordion';
 export * from './alert-dialog';
 export * from './alert';
@@ -5,13 +13,11 @@ export * from './aspect-ratio';
 export * from './avatar';
 export * from './badge';
 export * from './breadcrumb';
-export * from './button-group';
 export * from './button';
 export * from './calendar';
-export * from './calendar-view';
 export * from './card';
 export * from './carousel';
-export * from './chatbot';
+export * from './chart';
 export * from './checkbox';
 export * from './collapsible';
 export * from './command';
@@ -19,16 +25,10 @@ export * from './context-menu';
 export * from './dialog';
 export * from './drawer';
 export * from './dropdown-menu';
-export * from './empty';
-export * from './field';
-export * from './filter-builder';
 export * from './form';
 export * from './hover-card';
-export * from './input-group';
 export * from './input-otp';
 export * from './input';
-export * from './item';
-export * from './kbd';
 export * from './label';
 export * from './menubar';
 export * from './navigation-menu';
@@ -45,12 +45,12 @@ export * from './sidebar';
 export * from './skeleton';
 export * from './slider';
 export * from './sonner';
-export * from './spinner';
+export { Toaster } from './sonner';
 export * from './switch';
 export * from './table';
 export * from './tabs';
 export * from './textarea';
-export * from './timeline';
 export * from './toggle-group';
 export * from './toggle';
 export * from './tooltip';
+export * from './typography';

package/src/ui/input-otp.tsx

@@ -1,61 +1,56 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+"use client"
+
 import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import { Dot } from "lucide-react"
 
 import { cn } from "../lib/utils"
 
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
-}) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName
-      )}
-      className={cn("disabled:cursor-not-allowed", className)}
-      {...props}
-    />
-  )
-}
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
 
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-otp-group"
-      className={cn("flex items-center gap-3", className)}
-      {...props}
-    />
-  )
-}
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
 
-function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  index: number
-}) {
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
 
   return (
     <div
-      data-slot="input-otp-slot"
-      data-active={isActive}
+      ref={ref}
       className={cn(
-        "relative flex h-14 w-11 items-center justify-center text-lg font-mono transition-all duration-300 outline-none rounded-md",
-        "bg-slate-950/60 border-2 border-slate-800 text-slate-500", // Default state (Inactive)
-        "data-[active=true]:border-cyan-400 data-[active=true]:text-cyan-300 data-[active=true]:bg-cyan-950/20", // Active/Focused
-        "data-[active=true]:shadow-[0_0_20px_rgba(6,182,212,0.5),inset_0_0_10px_rgba(6,182,212,0.1)]", // Glow
-        "data-[active=true]:-translate-y-1 data-[active=true]:scale-105", // Lift effect
-        isActive && "animate-pulse-subtle", // Custom subtle pulse for active slot
-        char && "border-cyan-500/50 text-cyan-100 bg-cyan-950/10 shadow-[0_0_10px_rgba(6,182,212,0.2)]", // Filled state
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
         className
       )}
       {...props}
@@ -63,19 +58,22 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-cyan-400 h-6 w-0.5 duration-1000 shadow-[0_0_8px_cyan]" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>
   )
-}
+})
+InputOTPSlot.displayName = "InputOTPSlot"
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <div className="w-2 h-2 rounded-full bg-cyan-500/50 shadow-[0_0_10px_cyan]" />
-    </div>
-  )
-}
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/ui/input.tsx

@@ -1,24 +1,30 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as React from "react"
 
 import { cn } from "../lib/utils"
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "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",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
 Input.displayName = "Input"
 
 export { Input }

package/src/ui/label.tsx

@@ -1,24 +1,34 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 "use client"
 
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
 
 export { Label }