modula-ui 1.0.0

package/src/components/ui/slider.jsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React.useMemo(() =>
+    Array.isArray(value)
+      ? value
+      : Array.isArray(defaultValue)
+        ? defaultValue
+        : [min, max], [value, defaultValue, min, max])
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}>
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}>
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )} />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider }

package/src/components/ui/tooltip.jsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return (<TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />);
+}
+
+function Tooltip({
+  ...props
+}) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}>
+        {children}
+        <TooltipPrimitive.Arrow
+          className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/data/componentData.js

@@ -0,0 +1,12 @@
+import { VideoConference } from "@/library/pages/VideoConference";
+import { ReservationsOverview } from "@/library/pages/ReservationsOverview";
+import { FitnessOverview } from "@/library/pages/FitnessPage";
+import { GroupChat } from "@/library/pages/GroupChat";
+
+
+export const components = {
+  VideoConference,
+  GroupChat,
+  // ReservationsOverview,
+  // FitnessOverview
+};

package/src/hooks/use-mobile.js

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange);
+  }, [])
+
+  return !!isMobile
+}

package/src/lib/utils.js

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

package/src/library/components/Alert.jsx

@@ -0,0 +1,27 @@
+export const  alert = {
+    name: 'Alert',
+    code: `<div className="bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg">
+  <div className="flex items-start">
+    <div className="flex-1">
+      <p className="font-medium">Info Alert</p>
+      <p className="text-sm mt-1">This is an informational message.</p>
+    </div>
+  </div>
+</div>
+
+<!-- Variants -->
+<div className="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">Success Alert</div>
+<div className="bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg">Warning Alert</div>
+<div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">Error Alert</div>`,
+    preview: (
+      <div className="space-y-3">
+        <div className="bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg">
+          <p className="font-medium">Info Alert</p>
+          <p className="text-sm mt-1">This is an informational message.</p>
+        </div>
+        <div className="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
+          <p className="font-medium">Success!</p>
+        </div>
+      </div>
+    )
+  };

package/src/library/components/Badge.jsx

@@ -0,0 +1,19 @@
+  export const badge = {
+    name: 'Badge',
+    code: `<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
+  Badge
+</span>
+
+<!-- Variants -->
+<span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">Success</span>
+<span className="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">Warning</span>
+<span className="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">Error</span>`,
+    preview: (
+      <div className="flex flex-wrap gap-2">
+        <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">Primary</span>
+        <span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">Success</span>
+        <span className="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">Warning</span>
+        <span className="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">Error</span>
+      </div>
+    )
+  };

package/src/library/components/Button.jsx

@@ -0,0 +1,31 @@
+import { Button } from "@/components/ui/button";
+
+export const button = {
+  name: 'Button',
+  code: `<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors font-medium">
+  Button
+</button>
+
+<!-- Variants -->
+<button className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">Secondary</button>
+<button className="px-4 py-2 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50">Outline</button>
+<button className="px-4 py-2 text-blue-600 hover:bg-blue-50 rounded-lg">Ghost</button>`,
+  preview: (
+    <div className="flex flex-wrap gap-2">
+      <Button
+      
+       className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors font-medium">
+        Primary
+      </Button>
+      <Button className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium">
+        Secondary
+      </Button>
+      <Button className="px-4 py-2 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition-colors font-medium">
+        Outline
+      </Button>
+      <button className="px-4 py-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors font-medium">
+        Ghost
+      </button>
+    </div>
+  ),
+};

package/src/library/components/Card.jsx

@@ -0,0 +1,25 @@
+export const card = {
+  name: 'Card',
+  code: `<div className="bg-white rounded-lg shadow-md p-6 border border-gray-200">
+  <h3 className="text-xl font-bold mb-2">Card Title</h3>
+  <p className="text-gray-600">Card content goes here. Add any elements you need.</p>
+</div>
+
+<!-- With hover effect -->
+<div className="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6 border border-gray-200">
+  <h3 className="text-xl font-bold mb-2">Hover Card</h3>
+  <p className="text-gray-600">This card has a hover effect.</p>
+</div>`,
+  preview: (
+    <div className="grid gap-4 md:grid-cols-2">
+      <div className="bg-white rounded-lg shadow-md p-6 border border-gray-200">
+        <h3 className="text-xl font-bold mb-2">Card Title</h3>
+        <p className="text-gray-600">Card content goes here. Add any elements you need.</p>
+      </div>
+      <div className="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6 border border-gray-200">
+        <h3 className="text-xl font-bold mb-2">Hover Card</h3>
+        <p className="text-gray-600">This card has a hover effect.</p>
+      </div>
+    </div>
+  ),
+};

package/src/library/components/Input.jsx

@@ -0,0 +1,35 @@
+export const input =  {
+    name: 'Input',
+    code: `<input 
+  type="text" 
+  placeholder="Enter text..." 
+  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+/>
+
+<!-- With label -->
+<div className="space-y-2">
+  <label className="block text-sm font-medium text-gray-700">Email</label>
+  <input 
+    type="email" 
+    placeholder="your@email.com"
+    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+  />
+</div>`,
+    preview: (
+      <div className="space-y-4 max-w-md">
+        <input 
+          type="text" 
+          placeholder="Enter text..." 
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">Email</label>
+          <input 
+            type="email" 
+            placeholder="your@email.com"
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          />
+        </div>
+      </div>
+    )
+  };

package/src/library/components/Modal.jsx

@@ -0,0 +1,26 @@
+export const modal = {
+    name: 'Modal',
+    code: `<!-- Modal Overlay -->
+<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+  <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+    <h2 className="text-2xl font-bold mb-4">Modal Title</h2>
+    <p className="text-gray-600 mb-6">Modal content goes here. Add any elements you need.</p>
+    <div className="flex justify-end gap-2">
+      <button className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">Cancel</button>
+      <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Confirm</button>
+    </div>
+  </div>
+</div>`,
+    preview: (
+      <div className="relative h-64 bg-gray-100 rounded-lg flex items-center justify-center">
+        <div className="bg-white rounded-lg shadow-xl max-w-sm w-full p-6 m-4">
+          <h2 className="text-xl font-bold mb-2">Modal Preview</h2>
+          <p className="text-gray-600 text-sm mb-4">This is how the modal looks.</p>
+          <div className="flex justify-end gap-2">
+            <button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">Cancel</button>
+            <button className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">Confirm</button>
+          </div>
+        </div>
+      </div>
+    )
+  };

package/src/library/components/Textarea.jsx

@@ -0,0 +1,15 @@
+export const textarea = {
+    name: 'Textarea',
+    code: `<textarea 
+  placeholder="Enter your message..." 
+  rows="4"
+  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+></textarea>`,
+    preview: (
+      <textarea 
+        placeholder="Enter your message..." 
+        rows="4"
+        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+      ></textarea>
+    )
+  };

package/src/library/components/Toggle.jsx

@@ -0,0 +1,16 @@
+export const  toggle = {
+    name: 'Toggle Switch',
+    code: `<!-- Toggle Switch (using checkbox) -->
+<label className="relative inline-flex items-center cursor-pointer">
+  <input type="checkbox" className="sr-only peer" />
+  <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+  <span className="ml-3 text-sm font-medium text-gray-700">Toggle me</span>
+</label>`,
+    preview: (
+      <label className="relative inline-flex items-center cursor-pointer">
+        <input type="checkbox" className="sr-only peer" />
+        <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+        <span className="ml-3 text-sm font-medium text-gray-700">Toggle me</span>
+      </label>
+    )
+  };