@btst/components 0.0.0-stage → 1.0.0-beta.0

package/dist/ui/src/components/tabs.cjs

@@ -0,0 +1,84 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const TabsPrimitive = require('@radix-ui/react-tabs');
+const utils = require('../lib/utils.cjs');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const TabsPrimitive__namespace = /*#__PURE__*/_interopNamespaceCompat(TabsPrimitive);
+
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Root,
+    {
+      "data-slot": "tabs",
+      className: utils.cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      "data-slot": "tabs-list",
+      className: utils.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
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: utils.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-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
+    {
+      "data-slot": "tabs-content",
+      className: utils.cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;

package/dist/ui/src/components/tabs.mjs

@@ -0,0 +1,65 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../lib/utils.mjs';
+
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    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
+}) {
+  return /* @__PURE__ */ jsx(
+    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-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/ui/src/components/textarea.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('../lib/utils.cjs');
+
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: utils.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
+    }
+  );
+}
+
+exports.Textarea = Textarea;

package/dist/ui/src/components/textarea.mjs

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.mjs';
+
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "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/dist/ui/src/hooks/use-debounce.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+const React = require('react');
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+  React.useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+exports.useDebounce = useDebounce;

package/dist/ui/src/hooks/use-debounce.mjs

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export { useDebounce };

package/dist/ui/src/lib/schema-converter.cjs

@@ -0,0 +1,94 @@
+'use strict';
+
+const z = require('zod');
+
+function extractStepGroupMap(jsonSchema) {
+  const stepGroupMap = {};
+  const properties = jsonSchema.properties;
+  if (!properties) return stepGroupMap;
+  for (const [fieldName, fieldSchema] of Object.entries(properties)) {
+    if (typeof fieldSchema.stepGroup === "number") {
+      stepGroupMap[fieldName] = fieldSchema.stepGroup;
+    }
+  }
+  return stepGroupMap;
+}
+function findDateFieldsWithConstraints(jsonSchema) {
+  const dateFields = {};
+  const properties = jsonSchema.properties;
+  if (!properties) return dateFields;
+  for (const [key, prop] of Object.entries(properties)) {
+    if (prop.type === "string" && prop.format === "date-time") {
+      if (prop.formatMinimum || prop.formatMaximum) {
+        dateFields[key] = {
+          min: prop.formatMinimum,
+          max: prop.formatMaximum
+        };
+      }
+    }
+  }
+  return dateFields;
+}
+function addDateValidations(schema, dateFieldsWithConstraints) {
+  if (Object.keys(dateFieldsWithConstraints).length === 0) {
+    return schema;
+  }
+  return schema.superRefine((data, ctx) => {
+    for (const [key, constraints] of Object.entries(dateFieldsWithConstraints)) {
+      const value = data[key];
+      if (value === void 0 || value === null || value === "") continue;
+      const dateValue = new Date(value);
+      if (isNaN(dateValue.getTime())) {
+        ctx.addIssue({
+          code: z.z.ZodIssueCode.custom,
+          message: "Invalid date",
+          path: [key]
+        });
+        continue;
+      }
+      if (constraints.min) {
+        const minDate = new Date(constraints.min);
+        if (dateValue < minDate) {
+          ctx.addIssue({
+            code: z.z.ZodIssueCode.custom,
+            message: `Date must be after ${minDate.toLocaleDateString()}`,
+            path: [key]
+          });
+        }
+      }
+      if (constraints.max) {
+        const maxDate = new Date(constraints.max);
+        if (dateValue > maxDate) {
+          ctx.addIssue({
+            code: z.z.ZodIssueCode.custom,
+            message: `Date must be before ${maxDate.toLocaleDateString()}`,
+            path: [key]
+          });
+        }
+      }
+    }
+  });
+}
+function attachStepsMetadata(schema, jsonSchema) {
+  const steps = jsonSchema.steps;
+  if (!steps || steps.length === 0) {
+    return schema;
+  }
+  const stepGroupMap = jsonSchema.stepGroupMap ?? extractStepGroupMap(jsonSchema);
+  return schema.meta({
+    steps,
+    stepGroupMap
+  });
+}
+function formSchemaToZod(jsonSchema) {
+  let schema = z.z.fromJSONSchema(jsonSchema);
+  if (schema && typeof schema.passthrough === "function") {
+    schema = schema.passthrough();
+  }
+  const dateFieldsWithConstraints = findDateFieldsWithConstraints(jsonSchema);
+  schema = addDateValidations(schema, dateFieldsWithConstraints);
+  schema = attachStepsMetadata(schema, jsonSchema);
+  return schema;
+}
+
+exports.formSchemaToZod = formSchemaToZod;

package/dist/ui/src/lib/schema-converter.mjs

@@ -0,0 +1,92 @@
+import { z } from 'zod';
+
+function extractStepGroupMap(jsonSchema) {
+  const stepGroupMap = {};
+  const properties = jsonSchema.properties;
+  if (!properties) return stepGroupMap;
+  for (const [fieldName, fieldSchema] of Object.entries(properties)) {
+    if (typeof fieldSchema.stepGroup === "number") {
+      stepGroupMap[fieldName] = fieldSchema.stepGroup;
+    }
+  }
+  return stepGroupMap;
+}
+function findDateFieldsWithConstraints(jsonSchema) {
+  const dateFields = {};
+  const properties = jsonSchema.properties;
+  if (!properties) return dateFields;
+  for (const [key, prop] of Object.entries(properties)) {
+    if (prop.type === "string" && prop.format === "date-time") {
+      if (prop.formatMinimum || prop.formatMaximum) {
+        dateFields[key] = {
+          min: prop.formatMinimum,
+          max: prop.formatMaximum
+        };
+      }
+    }
+  }
+  return dateFields;
+}
+function addDateValidations(schema, dateFieldsWithConstraints) {
+  if (Object.keys(dateFieldsWithConstraints).length === 0) {
+    return schema;
+  }
+  return schema.superRefine((data, ctx) => {
+    for (const [key, constraints] of Object.entries(dateFieldsWithConstraints)) {
+      const value = data[key];
+      if (value === void 0 || value === null || value === "") continue;
+      const dateValue = new Date(value);
+      if (isNaN(dateValue.getTime())) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Invalid date",
+          path: [key]
+        });
+        continue;
+      }
+      if (constraints.min) {
+        const minDate = new Date(constraints.min);
+        if (dateValue < minDate) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Date must be after ${minDate.toLocaleDateString()}`,
+            path: [key]
+          });
+        }
+      }
+      if (constraints.max) {
+        const maxDate = new Date(constraints.max);
+        if (dateValue > maxDate) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Date must be before ${maxDate.toLocaleDateString()}`,
+            path: [key]
+          });
+        }
+      }
+    }
+  });
+}
+function attachStepsMetadata(schema, jsonSchema) {
+  const steps = jsonSchema.steps;
+  if (!steps || steps.length === 0) {
+    return schema;
+  }
+  const stepGroupMap = jsonSchema.stepGroupMap ?? extractStepGroupMap(jsonSchema);
+  return schema.meta({
+    steps,
+    stepGroupMap
+  });
+}
+function formSchemaToZod(jsonSchema) {
+  let schema = z.fromJSONSchema(jsonSchema);
+  if (schema && typeof schema.passthrough === "function") {
+    schema = schema.passthrough();
+  }
+  const dateFieldsWithConstraints = findDateFieldsWithConstraints(jsonSchema);
+  schema = addDateValidations(schema, dateFieldsWithConstraints);
+  schema = attachStepsMetadata(schema, jsonSchema);
+  return schema;
+}
+
+export { formSchemaToZod };

package/dist/ui/src/lib/throttle.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+function throttle(callback, waitMs) {
+  let timerId = null;
+  let lastInvokeTime = 0;
+  let trailingArgs = null;
+  const invoke = (args) => {
+    lastInvokeTime = Date.now();
+    callback(...args);
+  };
+  const throttled = (...args) => {
+    const now = Date.now();
+    const remaining = waitMs - (now - lastInvokeTime);
+    if (lastInvokeTime === 0) {
+      invoke(args);
+      return;
+    }
+    if (remaining <= 0 || remaining > waitMs) {
+      if (timerId) {
+        clearTimeout(timerId);
+        timerId = null;
+      }
+      invoke(args);
+    } else {
+      trailingArgs = args;
+      if (!timerId) {
+        timerId = setTimeout(() => {
+          timerId = null;
+          if (trailingArgs) {
+            invoke(trailingArgs);
+            trailingArgs = null;
+          }
+        }, remaining);
+      }
+    }
+  };
+  throttled.cancel = () => {
+    if (timerId) {
+      clearTimeout(timerId);
+      timerId = null;
+    }
+    trailingArgs = null;
+    lastInvokeTime = 0;
+  };
+  throttled.flush = () => {
+    if (timerId && trailingArgs) {
+      clearTimeout(timerId);
+      timerId = null;
+      invoke(trailingArgs);
+      trailingArgs = null;
+    }
+  };
+  return throttled;
+}
+
+exports.throttle = throttle;

package/dist/ui/src/lib/throttle.mjs

@@ -0,0 +1,54 @@
+function throttle(callback, waitMs) {
+  let timerId = null;
+  let lastInvokeTime = 0;
+  let trailingArgs = null;
+  const invoke = (args) => {
+    lastInvokeTime = Date.now();
+    callback(...args);
+  };
+  const throttled = (...args) => {
+    const now = Date.now();
+    const remaining = waitMs - (now - lastInvokeTime);
+    if (lastInvokeTime === 0) {
+      invoke(args);
+      return;
+    }
+    if (remaining <= 0 || remaining > waitMs) {
+      if (timerId) {
+        clearTimeout(timerId);
+        timerId = null;
+      }
+      invoke(args);
+    } else {
+      trailingArgs = args;
+      if (!timerId) {
+        timerId = setTimeout(() => {
+          timerId = null;
+          if (trailingArgs) {
+            invoke(trailingArgs);
+            trailingArgs = null;
+          }
+        }, remaining);
+      }
+    }
+  };
+  throttled.cancel = () => {
+    if (timerId) {
+      clearTimeout(timerId);
+      timerId = null;
+    }
+    trailingArgs = null;
+    lastInvokeTime = 0;
+  };
+  throttled.flush = () => {
+    if (timerId && trailingArgs) {
+      clearTimeout(timerId);
+      timerId = null;
+      invoke(trailingArgs);
+      trailingArgs = null;
+    }
+  };
+  return throttled;
+}
+
+export { throttle };

package/dist/ui/src/lib/utils.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+const clsx = require('clsx');
+const tailwindMerge = require('tailwind-merge');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+exports.cn = cn;

package/dist/ui/src/lib/utils.mjs

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

package/dist/ui.css

@@ -0,0 +1,131 @@
+@import "tailwindcss";
+
+/* Scan UI components for Tailwind classes */
+
+
+
+
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+
+@source "./**/*.{mjs,cjs}";