@socprime/react-ui 0.0.5

package/ui/Editor/monacoSetup.js

@@ -0,0 +1,38 @@
+import { loader } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+self.MonacoEnvironment = {
+  getWorker(_workerId, label) {
+    switch (label) {
+      case "json":
+        return new Worker(
+          new URL("monaco-editor/esm/vs/language/json/json.worker.js", import.meta.url),
+          { type: "module" }
+        );
+      case "css":
+      case "scss":
+      case "less":
+        return new Worker(
+          new URL("monaco-editor/esm/vs/language/css/css.worker.js", import.meta.url),
+          { type: "module" }
+        );
+      case "html":
+      case "handlebars":
+      case "razor":
+        return new Worker(
+          new URL("monaco-editor/esm/vs/language/html/html.worker.js", import.meta.url),
+          { type: "module" }
+        );
+      case "typescript":
+      case "javascript":
+        return new Worker(
+          new URL("monaco-editor/esm/vs/language/typescript/ts.worker.js", import.meta.url),
+          { type: "module" }
+        );
+      default:
+        return new Worker(new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url), {
+          type: "module"
+        });
+    }
+  }
+};
+loader.config({ monaco });

package/ui/Editor/theme.js

@@ -0,0 +1,50 @@
+let themesDefined = false;
+const defineCustomThemes = (monaco) => {
+  if (themesDefined) {
+    return;
+  }
+  monaco.editor.defineTheme("light", {
+    base: "vs",
+    inherit: true,
+    rules: [],
+    colors: {
+      "editor.background": "#F9FAFB",
+      "editor.foreground": "#cfd0d3"
+    }
+  });
+  monaco.editor.defineTheme("dark", {
+    base: "vs-dark",
+    inherit: true,
+    rules: [],
+    colors: {
+      "editor.background": "#1F2232",
+      "editor.foreground": "#cfd0d3"
+    }
+  });
+  themesDefined = true;
+};
+const setTheme = (monaco, theme) => {
+  monaco.editor.setTheme(theme);
+};
+const editorOptionsFn = (readOnly, options) => ({
+  minimap: { enabled: false },
+  fontSize: 14,
+  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  lineNumbers: "on",
+  readOnly,
+  scrollBeyondLastLine: false,
+  wordWrap: "on",
+  automaticLayout: true,
+  tabSize: 2,
+  insertSpaces: true,
+  renderWhitespace: "selection",
+  matchBrackets: "always",
+  folding: true,
+  showFoldingControls: "always",
+  ...options
+});
+export {
+  defineCustomThemes,
+  editorOptionsFn,
+  setTheme
+};

package/ui/EmptyState/EmptyState.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+import { cn } from "../../lib/cn.js";
+const EmptyState = ({
+  Icon,
+  IconNode,
+  title,
+  description,
+  path,
+  action,
+  actions,
+  className,
+  classNameContent
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("bg-background flex h-full w-full items-center justify-center", className), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center px-4 py-16", classNameContent), children: [
+    Icon && /* @__PURE__ */ jsx("div", { className: "bg-success/10 mb-6 flex h-24 w-24 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(Icon, { size: 48, className: "text-success" }) }),
+    IconNode && IconNode,
+    title && /* @__PURE__ */ jsx("h3", { className: "text-default mb-3 text-2xl font-semibold", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-gray-chateau mb-8 max-w-md text-center text-xs", children: description }),
+    path && /* @__PURE__ */ jsx(Button, { to: path, variant: "primary", size: "l", children: action }),
+    actions
+  ] }) });
+};
+export {
+  EmptyState
+};

package/ui/EmptyState/index.js

@@ -0,0 +1,4 @@
+import { EmptyState } from "./EmptyState.js";
+export {
+  EmptyState
+};

package/ui/Field/Field.js

@@ -0,0 +1,204 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useMemo } from "react";
+import { Label } from "../Label/Label.js";
+import { Separator } from "../Separator/Separator.js";
+import { cn } from "../../lib/cn.js";
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+      horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className),
+      ...props
+    }
+  );
+}
+function FieldLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+    if (uniqueErrors?.length === 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-destructive text-sm font-normal", className),
+      ...props,
+      children: content
+    }
+  );
+}
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle
+};

package/ui/Field/index.js

@@ -0,0 +1,24 @@
+import {
+  Field as Field2,
+  FieldContent as FieldContent2,
+  FieldDescription as FieldDescription2,
+  FieldError as FieldError2,
+  FieldGroup as FieldGroup2,
+  FieldLabel as FieldLabel2,
+  FieldLegend as FieldLegend2,
+  FieldSeparator as FieldSeparator2,
+  FieldSet as FieldSet2,
+  FieldTitle as FieldTitle2
+} from "./Field.js";
+export {
+  Field2 as Field,
+  FieldContent2 as FieldContent,
+  FieldDescription2 as FieldDescription,
+  FieldError2 as FieldError,
+  FieldGroup2 as FieldGroup,
+  FieldLabel2 as FieldLabel,
+  FieldLegend2 as FieldLegend,
+  FieldSeparator2 as FieldSeparator,
+  FieldSet2 as FieldSet,
+  FieldTitle2 as FieldTitle
+};

package/ui/HelperText/HelperText.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+const HelperText = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("p", { className, children });
+};
+export {
+  HelperText
+};

package/ui/HelperText/index.js

@@ -0,0 +1,4 @@
+import { HelperText } from "./HelperText.js";
+export {
+  HelperText
+};

package/ui/Input/Input.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { cn } from "../../lib/cn.js";
+import { Loader2 } from "lucide-react";
+const Input = ({
+  className,
+  type,
+  loading,
+  iconLeft,
+  iconRight,
+  tooltip,
+  parentClassName,
+  ...props
+}) => {
+  const element = /* @__PURE__ */ jsxs("div", { className: cn("relative", parentClassName), children: [
+    iconLeft && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2", children: iconLeft }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        "data-slot": "input",
+        className: cn(
+          "text-default placeholder:text-gray-chateau border-border flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-xs transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:ring-success/40 focus-visible:border-success focus-visible:ring-[2px]",
+          iconLeft && "pl-9",
+          iconRight && "pr-9",
+          className
+        ),
+        autoComplete: "off",
+        ...props
+      }
+    ),
+    iconRight && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: iconRight }),
+    loading && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ jsx(Loader2, { className: "text-gray-chateau size-4 animate-spin" }) })
+  ] });
+  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: element }) : element;
+};
+export {
+  Input
+};

package/ui/Input/index.js

@@ -0,0 +1,4 @@
+import { Input } from "./Input.js";
+export {
+  Input
+};

package/ui/InputNumber/InputNumber.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { forwardRef, useCallback, useRef } from "react";
+const InputNumber = forwardRef(
+  ({ className, parentClassName, min, max, step = 1, onChange, onValueChange, ...props }, ref) => {
+    const innerRef = useRef(null);
+    const stepNum = Number(step);
+    const minNum = min != null ? Number(min) : void 0;
+    const maxNum = max != null ? Number(max) : void 0;
+    const setRefs = useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const clamp = useCallback(
+      (val) => {
+        let v = val;
+        if (minNum != null) v = Math.max(minNum, v);
+        if (maxNum != null) v = Math.min(maxNum, v);
+        return v;
+      },
+      [minNum, maxNum]
+    );
+    const nudge = (direction) => {
+      const input = innerRef.current;
+      if (!input) return;
+      const current = parseInt(input.value, 10) || 0;
+      const next = clamp(current + direction * stepNum);
+      const nativeSet = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      ).set;
+      nativeSet.call(input, String(next));
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("group/number relative", parentClassName), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: setRefs,
+          type: "number",
+          "data-slot": "input",
+          className: cn(
+            "text-default placeholder:text-gray-chateau border-border flex h-9 w-full min-w-0 [appearance:textfield] rounded-md border px-3 py-1 pr-10 text-xs transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+            "focus-visible:ring-success/40 focus-visible:border-success focus-visible:ring-[2px]",
+            className
+          ),
+          min,
+          max,
+          step,
+          onChange,
+          autoComplete: "off",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "border-border absolute top-[1px] right-[1px] bottom-[1px] flex flex-col border-l opacity-0 transition-opacity group-hover/number:opacity-100", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            className: "hover:bg-hover text-gray-chateau/50 flex flex-1 items-center justify-center px-1 transition-colors",
+            onClick: () => nudge(1),
+            children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "bg-border h-px" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            className: "hover:bg-hover text-gray-chateau/50 flex flex-1 items-center justify-center px-1 transition-colors",
+            onClick: () => nudge(-1),
+            children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+InputNumber.displayName = "InputNumber";
+export {
+  InputNumber
+};

package/ui/InputNumber/index.js

@@ -0,0 +1,4 @@
+import { InputNumber } from "./InputNumber.js";
+export {
+  InputNumber
+};

package/ui/InputPassword/InputPassword.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { useState } from "react";
+import { Input } from "../Input/Input.js";
+const InputPassword = ({ ...props }) => {
+  const [showPassword, setShowPassword] = useState(false);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      type: showPassword ? "text" : "password",
+      iconRight: showPassword ? /* @__PURE__ */ jsx(
+        EyeOffIcon,
+        {
+          onClick: () => setShowPassword(!showPassword),
+          className: "text-gray-chateau size-4"
+        }
+      ) : /* @__PURE__ */ jsx(
+        EyeIcon,
+        {
+          onClick: () => setShowPassword(!showPassword),
+          className: "text-gray-chateau size-4"
+        }
+      )
+    }
+  );
+};
+export {
+  InputPassword
+};

package/ui/InputPassword/index.js

@@ -0,0 +1,4 @@
+import { InputPassword } from "./InputPassword.js";
+export {
+  InputPassword
+};

package/ui/Label/Label.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../../lib/cn.js";
+const Label = ({ className, component = "label", ...props }) => {
+  const clsasses = cn(
+    "flex items-center gap-2 text-xs leading-none 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
+  );
+  return component === "label" ? /* @__PURE__ */ jsx(LabelPrimitive.Root, { className: clsasses, ...props }) : /* @__PURE__ */ jsx("span", { className: clsasses, ...props });
+};
+export {
+  Label
+};

package/ui/Label/LabelInfo.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { cn } from "../../lib/cn.js";
+import { InfoIcon } from "lucide-react";
+import { Label } from "./Label.js";
+const LabelInfo = ({ className, tooltipProps, ...props }) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(Label, { ...props }),
+    /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps, children: /* @__PURE__ */ jsx(InfoIcon, { className: "text-gray-chateau size-4" }) })
+  ] });
+};
+export {
+  LabelInfo
+};

package/ui/Label/index.js

@@ -0,0 +1,6 @@
+import { Label } from "./Label.js";
+import { LabelInfo } from "./LabelInfo.js";
+export {
+  Label,
+  LabelInfo
+};