@base-framework/ui/dist/inputs-9udyzkHR.js

This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.

import { Div as u, Label as h, Checkbox as m, Span as $, OnState as p, I as x, Input as r, Textarea as k } from "@base-framework/atoms";
import { Jot as g, Atom as s } from "@base-framework/base";
import { Icons as y } from "./icons.es.js";
const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-border bg-input", o = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", a = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", l = "placeholder:text-muted-foreground", f = `${I} ${n} ${o} ${l} ${a}`, C = ({ id: e, checked: c, bind: t, required: d }) => m({
  id: e,
  cache: "checkbox",
  class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
  aria: {
    checked: ["checked"]
  },
  required: d,
  checked: c,
  bind: t
}), v = () => $({ class: "absolute text-xs pointer-events-none" }, [
  p(
    "checked",
    (e) => e ? x({
      class: "w-2 h-2 pointer-events-none",
      html: y.check
    }) : null
  )
]), w = ({ id: e, bind: c, checked: t, required: d, clickHandler: b }) => u({
  class: `relative flex items-center justify-center w-5 h-5 transition-colors duration-200 hover:border-accent-foreground
			rounded-md border
			${o}
			${a}`.trim(),
  onState: [
    "checked",
    {
      "bg-primary": !0,
      "text-primary-foreground": !0,
      "border-primary": !0
    }
  ],
  role: "checkbox",
  aria: {
    checked: ["checked"]
  },
  tabIndex: 0,
  click: b
}, [
  C({ bind: c, checked: t, id: e, required: d }),
  v()
]), T = ({ id: e, label: c, clickHandler: t }) => h({
  class: "text-base cursor-pointer",
  htmlFor: e,
  click: t
}, c), L = g(
  {
    /**
     * This will initialize the state of the checkbox.
     *
     * @returns {object}
     */
    state() {
      return {
        // @ts-ignore
        checked: this.checked ?? !1
      };
    },
    /**
     * This is added to check the checkbox after the component is rendered
     * to see if the bind updated the checked value.
     *
     * @returns {void}
     */
    after() {
      this.state.checked = this.checkbox.checked;
    },
    /**
     * This will handle the click event for the checkbox.
     *
     * @param {object} e
     * @returns {void}
     */
    clickHandler(e) {
      e.preventDefault(), e.stopPropagation(), this.state.toggle("checked"), this.checkbox.checked = this.state.checked, typeof this.onChange == "function" && this.onChange(this.state.checked, this);
    },
    /**
     * This will render the checkbox component.
     *
     * @returns {object}
     */
    render() {
      const e = this.getId(), c = (t) => this.clickHandler(t);
      return u({ class: `flex items-center gap-x-2 cursor-pointer ${this.class || ""}` }, [
        w({
          id: e,
          // @ts-ignore
          bind: this.bind,
          // @ts-ignore
          checked: this.state.checked,
          // @ts-ignore
          required: this.required,
          // @ts-ignore
          clickHandler: c
        }),
        // @ts-ignore
        this.label && T({ id: e, label: this.label, clickHandler: c })
      ]);
    }
  }
), H = (e) => {
  if (!e || e.length === 0) return "";
  const t = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
  return t ? t[2] ? `(${t[1]}) ${t[2]}${t[3] ? "-" + t[3] : ""}` : t[1] || "" : e;
}, D = (e) => {
  const c = e.target, t = H(c.value);
  t && (c.value = t);
}, i = s((e) => r({
  ...e,
  class: `${f} ${e.class || ""}`.trim()
})), M = s((e) => i({
  ...e,
  type: "tel",
  name: e.name || "Phone",
  label: e.label || "Phone",
  placeholder: "(555) 555-5555",
  pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
  keyup: D
})), S = s((e) => i({
  ...e,
  type: "email",
  name: e.name || "Email",
  label: e.label || "Email",
  placeholder: "Email address"
})), q = s((e) => k({
  ...e,
  as: "textarea",
  class: `flex w-full h-24 px-3 py-2 text-sm ${n} ${o} ${l} ${a} ${e.class || ""}`.trim()
})), R = (e = {}) => u({ class: "flex items-center gap-x-2" }, [
  r({
    ...e,
    type: "radio",
    class: "cursor-pointer appearance-none h-4 w-4 border rounded-full checked:border-primary checked:bg-primary focus:ring focus:ring-primary".trim()
  }),
  e.label && h({ forHTML: e.value, class: "cursor-pointer" }, e.label)
]), U = s((e) => r({
  ...e,
  type: "date",
  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
})), W = s((e) => r({
  ...e,
  type: "time",
  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
})), j = s((e) => r({
  ...e,
  type: "datetime-local",
  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
})), z = s((e) => r({
  ...e,
  type: "month",
  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
})), A = s((e) => r({
  ...e,
  type: "week",
  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
})), B = s((e) => i({
  ...e,
  type: "number"
})), J = s((e) => i({
  ...e,
  type: "password"
}));
s((e) => i({
  ...e,
  type: "search"
}));
const O = s((e) => i({
  ...e,
  type: "url"
})), G = s((e) => i({
  ...e,
  type: "hidden"
})), K = s((e) => r({
  ...e,
  type: "color",
  class: `${n} text-foreground p-0 ${a} ${e.class || ""}`.trim()
}));
s((e) => m({
  ...e,
  class: `flex h-4 w-4 text-foreground ${n} ${o} ${a} ${e.class || ""}`.trim()
}));
const E = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", Q = s((e) => r({
  ...e,
  type: "file",
  class: `${f} ${E} ${e.class || ""}`.trim()
}));
export {
  L as C,
  U as D,
  S as E,
  Q as F,
  G as H,
  i as I,
  z as M,
  B as N,
  J as P,
  R,
  M as T,
  O as U,
  A as W,
  q as a,
  W as b,
  j as c,
  K as d,
  a as e,
  o as f,
  f as g
};