@omnikit-js/ui 0.5.4 → 0.6.0

package/src/components/ui/select.tsx

@@ -1,185 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-import { cn } from "../../lib/utils"
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}

package/src/components/ui/separator.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "../../lib/utils"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }

package/src/components/ui/switch.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
-
-import { cn } from "../../lib/utils"
-
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }

package/src/components/ui/tabs.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-
-import { cn } from "../../lib/utils"
-
-function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-hidden", className)}
-      {...props}
-    />
-  )
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/ui/textarea.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../lib/utils"
-
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Textarea }

package/src/components/ui/tooltip.tsx

@@ -1,30 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "../../lib/utils"
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/index.ts

@@ -1,13 +0,0 @@
-// Server component export (for Next.js App Router)
-export { default as Billing } from './components/BillingServer';
-
-// Client component export (for pages that need client-side only)
-export { default as BillingClient } from './components/BillingClient';
-
-// Re-export types for convenience
-export interface BillingProps {
-  userId: string;
-  apiUrl?: string;
-  apiKey?: string;
-  projectId?: string;
-}

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/src/styles/globals.css

@@ -1 +0,0 @@
-@import "tailwindcss";

package/src/styles/isolated.css

@@ -1,316 +0,0 @@
-/* Isolated styles for @omnikit-js/ui to prevent conflicts */
-
-/* Reset and scope all component styles */
-.omnikit-billing-component {
-  /* Create a new stacking context */
-  isolation: isolate;
-  /* Reset inherited styles */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  line-height: 1.5;
-  color: #111827;
-}
-
-/* Progress bar specific fixes */
-.omnikit-billing-component .omnikit-progress {
-  width: 100%;
-  height: 0.5rem;
-  background-color: #e5e7eb !important;
-  border-radius: 9999px;
-  overflow: hidden;
-  position: relative;
-}
-
-.omnikit-billing-component .omnikit-progress-fill {
-  height: 100%;
-  background-color: #10b981 !important; /* Green for success */
-  transition: width 0.3s ease;
-  position: relative;
-  z-index: 1;
-}
-
-/* Different states for progress */
-.omnikit-billing-component .omnikit-progress-fill.warning {
-  background-color: #f59e0b !important; /* Amber for warning */
-}
-
-.omnikit-billing-component .omnikit-progress-fill.danger {
-  background-color: #ef4444 !important; /* Red for danger */
-}
-
-/* Override any conflicting progress styles */
-.omnikit-billing-component [role="progressbar"] {
-  background-color: #e5e7eb !important;
-}
-
-.omnikit-billing-component [role="progressbar"] > div:first-child {
-  background-color: #10b981 !important;
-}
-
-/* Fix border issues */
-.omnikit-billing-component .border {
-  border-width: 1px !important;
-  border-style: solid !important;
-  border-color: #e5e7eb !important;
-}
-
-.omnikit-billing-component .border-border {
-  border-color: #e5e7eb !important;
-}
-
-/* Card styles - removed large borders */
-.omnikit-billing-component .omnikit-card,
-.omnikit-billing-component [data-slot="card"] {
-  background-color: transparent;
-  border: none !important;
-  border-radius: 0.75rem;
-  box-shadow: none !important;
-  padding: 0 !important;
-}
-
-/* Pricing card specific styles */
-.omnikit-billing-component .pricing-card {
-  background-color: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1) !important;
-  border-radius: 0.75rem;
-  padding: 0 !important;
-  overflow: hidden;
-}
-
-.omnikit-billing-component .pricing-card.current {
-  border-color: #3b82f6 !important;
-  background-color: rgba(59, 130, 246, 0.1);
-}
-
-/* Card content padding */
-.omnikit-billing-component .pricing-card [data-slot="card-header"],
-.omnikit-billing-component .pricing-card [data-slot="card-content"],
-.omnikit-billing-component .pricing-card [data-slot="card-footer"] {
-  padding: 1.5rem !important;
-}
-
-/* Text colors for dark mode */
-.omnikit-billing-component .text-foreground {
-  color: #f9fafb !important;
-}
-
-.omnikit-billing-component .text-muted-foreground {
-  color: #9ca3af !important;
-}
-
-.omnikit-billing-component .text-gray-500 {
-  color: #9ca3af !important;
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .omnikit-billing-component {
-    color: #f9fafb;
-  }
-  
-  .omnikit-billing-component .pricing-card {
-    background-color: rgba(31, 41, 55, 0.5);
-    border-color: rgba(255, 255, 255, 0.1) !important;
-  }
-  
-  .omnikit-billing-component .border,
-  .omnikit-billing-component .border-border {
-    border-color: #374151 !important;
-  }
-  
-  .omnikit-billing-component .omnikit-progress {
-    background-color: #374151 !important;
-  }
-}
-
-/* Layout fixes */
-.omnikit-billing-component .flex {
-  display: flex !important;
-}
-
-.omnikit-billing-component .inline-flex {
-  display: inline-flex !important;
-}
-
-.omnikit-billing-component .flex-col {
-  flex-direction: column !important;
-}
-
-.omnikit-billing-component .flex-1 {
-  flex: 1 1 0% !important;
-}
-
-.omnikit-billing-component .items-center {
-  align-items: center !important;
-}
-
-.omnikit-billing-component .items-start {
-  align-items: flex-start !important;
-}
-
-.omnikit-billing-component .justify-center {
-  justify-content: center !important;
-}
-
-.omnikit-billing-component .justify-between {
-  justify-content: space-between !important;
-}
-
-/* Grid layout fixes */
-.omnikit-billing-component .grid {
-  display: grid !important;
-}
-
-.omnikit-billing-component .gap-1 {
-  gap: 0.25rem !important;
-}
-
-.omnikit-billing-component .gap-2 {
-  gap: 0.5rem !important;
-}
-
-.omnikit-billing-component .gap-3 {
-  gap: 0.75rem !important;
-}
-
-.omnikit-billing-component .gap-4 {
-  gap: 1rem !important;
-}
-
-.omnikit-billing-component .gap-6 {
-  gap: 1.5rem !important;
-}
-
-/* Space utilities */
-.omnikit-billing-component .space-y-1 > * + * {
-  margin-top: 0.25rem !important;
-}
-
-.omnikit-billing-component .space-y-2 > * + * {
-  margin-top: 0.5rem !important;
-}
-
-.omnikit-billing-component .space-y-3 > * + * {
-  margin-top: 0.75rem !important;
-}
-
-.omnikit-billing-component .space-y-4 > * + * {
-  margin-top: 1rem !important;
-}
-
-.omnikit-billing-component .space-x-2 > * + * {
-  margin-left: 0.5rem !important;
-}
-
-.omnikit-billing-component .space-x-4 > * + * {
-  margin-left: 1rem !important;
-}
-
-/* Responsive grid */
-@media (min-width: 768px) {
-  .omnikit-billing-component .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-  }
-  
-  .omnikit-billing-component .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .omnikit-billing-component .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
-  }
-}
-
-/* Tab styles */
-.omnikit-billing-component [data-slot="tabs"] {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 0.5rem !important;
-}
-
-.omnikit-billing-component [data-slot="tabs-list"] {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  border-radius: 0.375rem !important;
-  background-color: rgba(255, 255, 255, 0.05) !important;
-  padding: 0.25rem !important;
-}
-
-.omnikit-billing-component [data-slot="tabs-trigger"] {
-  padding: 0.375rem 0.75rem !important;
-  font-size: 0.875rem !important;
-  font-weight: 500 !important;
-  color: rgba(255, 255, 255, 0.6) !important;
-  transition: all 0.2s !important;
-}
-
-.omnikit-billing-component [data-slot="tabs-trigger"][data-state="active"] {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-  color: white !important;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
-}
-
-/* Section background override */
-.omnikit-billing-component > div {
-  background-color: transparent !important;
-}
-
-/* Button styles */
-.omnikit-billing-component button {
-  font-weight: 500 !important;
-}
-
-.omnikit-billing-component button[data-variant="secondary"],
-.omnikit-billing-component .bg-secondary {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-  color: #f9fafb !important;
-}
-
-.omnikit-billing-component button[data-variant="secondary"]:hover,
-.omnikit-billing-component .bg-secondary:hover {
-  background-color: rgba(255, 255, 255, 0.15) !important;
-}
-
-/* Badge styles */
-.omnikit-billing-component [data-slot="badge"] {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-  color: #f9fafb !important;
-}
-
-/* Import base Tailwind styles */
-@import "tailwindcss";
-
-/* Component-specific overrides that need higher specificity */
-.omnikit-billing-component .shadow-xs {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-}
-
-.omnikit-billing-component .shadow-sm {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
-}
-
-.omnikit-billing-component .shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
-}
-
-.omnikit-billing-component .rounded-xs {
-  border-radius: 0.125rem !important;
-}
-
-.omnikit-billing-component .rounded-sm {
-  border-radius: 0.25rem !important;
-}
-
-.omnikit-billing-component .rounded-md {
-  border-radius: 0.375rem !important;
-}
-
-.omnikit-billing-component .rounded-lg {
-  border-radius: 0.5rem !important;
-}
-
-.omnikit-billing-component .rounded-xl {
-  border-radius: 0.75rem !important;
-}