@base-framework/ui 0.0.0

package/dist/templates.es.js

@@ -0,0 +1,10 @@
+import { A as s, F as l, M as m, a as p, T as o } from "./aside-template-D0KANPjh.js";
+import { B as T } from "./bside-template-CDbINL4X.js";
+export {
+  s as AsideTemplate,
+  T as BsideTemplate,
+  l as FullTemplate,
+  m as MainColumn,
+  p as Template,
+  o as TopBar
+};

package/dist/tooltip-DCszmsxe.js

@@ -0,0 +1,324 @@
+import { Span as c, Div as l, Legend as b, Fieldset as f, Input as x } from "@base-framework/atoms";
+import { Atom as s, Html as C } from "@base-framework/base";
+import { a as u } from "./veil-B9GQfH0d.js";
+import { f as p, e as h, g as y } from "./inputs-BF3C3KfF.js";
+const a = {
+  gray: {
+    backgroundColor: "bg-gray-50",
+    textColor: "text-gray-600",
+    ringColor: "ring-gray-500/10"
+  },
+  red: {
+    backgroundColor: "bg-red-50",
+    textColor: "text-red-700",
+    ringColor: "ring-red-600/10"
+  },
+  yellow: {
+    backgroundColor: "bg-yellow-50",
+    textColor: "text-yellow-800",
+    ringColor: "ring-yellow-600/20"
+  },
+  green: {
+    backgroundColor: "bg-green-50",
+    textColor: "text-green-700",
+    ringColor: "ring-green-600/20"
+  },
+  blue: {
+    backgroundColor: "bg-blue-50",
+    textColor: "text-blue-700",
+    ringColor: "ring-blue-700/10"
+  },
+  indigo: {
+    backgroundColor: "bg-indigo-50",
+    textColor: "text-indigo-700",
+    ringColor: "ring-indigo-700/10"
+  },
+  purple: {
+    backgroundColor: "bg-purple-50",
+    textColor: "text-purple-700",
+    ringColor: "ring-purple-700/10"
+  },
+  pink: {
+    backgroundColor: "bg-pink-50",
+    textColor: "text-pink-700",
+    ringColor: "ring-pink-700/10"
+  },
+  primary: {
+    backgroundColor: "bg-primary",
+    textColor: "text-primary-foreground",
+    ringColor: "ring-primary/10"
+  },
+  secondary: {
+    backgroundColor: "bg-secondary",
+    textColor: "text-secondary-foreground",
+    ringColor: "ring-secondary/10"
+  },
+  destructive: {
+    backgroundColor: "bg-destructive",
+    textColor: "text-destructive-foreground",
+    ringColor: "ring-destructive/10"
+  },
+  warning: {
+    backgroundColor: "bg-warning",
+    textColor: "text-warning-foreground",
+    ringColor: "ring-warning/10"
+  },
+  outline: {
+    backgroundColor: "bg-background",
+    textColor: "text-primary",
+    ringColor: "ring-input"
+  },
+  ghost: {
+    backgroundColor: "bg-background",
+    textColor: "text-primary",
+    ringColor: "ring-background"
+  },
+  link: {
+    backgroundColor: "bg-background",
+    textColor: "text-primary",
+    ringColor: "ring-background"
+  }
+}, k = (t) => a[t] || a.gray, w = (t) => {
+  const { backgroundColor: r, textColor: e, ringColor: o } = k(t);
+  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${r} ${e} ${o}`;
+}, F = s((t, r) => {
+  const e = w(t == null ? void 0 : t.type);
+  return c({ ...t, class: e }, r);
+}), T = s((t, r) => {
+  const e = t.margin ?? "my-5 mx-5", o = t.padding ?? "p-4";
+  return l({
+    ...t,
+    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${o} ${t.class || ""}`
+  }, r);
+}), $ = s((t, r) => b({
+  ...t,
+  class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
+}, r)), L = s((t, r) => {
+  const e = t.border === "full" ? "border rounded-md" : "border-t";
+  return f({
+    ...t,
+    class: `p-6 ${e} ${t.class || ""}`
+  }, [
+    t.legend && $(t.legend),
+    l({ class: "flex flex-auto flex-col space-y-6" }, r)
+  ]);
+}), I = u(
+  {
+    /**
+     * This will create the initial state of the RangeSlider.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        value: this.value ?? 0,
+        min: this.min ?? 0,
+        max: this.max ?? 100,
+        filledPercentage: this.getFillPercentage(this.value)
+      };
+    },
+    /**
+     * This will get the fill percentage of the range slider.
+     *
+     * @param {number} value
+     * @returns {number}
+     */
+    getFillPercentage(t) {
+      return (t - this.min) / (this.max - this.min) * 100;
+    },
+    /**
+     * This will render the RangeSlider component.
+     *
+     * @returns {object}
+     */
+    render() {
+      return l({ class: "relative w-full h-4 flex items-center" }, [
+        // Track
+        l({ class: "absolute h-2 w-full rounded-full bg-muted" }),
+        // Filled Track
+        l({
+          class: "absolute h-2 bg-primary rounded-full",
+          style: "width: [[filledPercentage]]%"
+        }),
+        // Thumb
+        l({
+          class: `
+					absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
+					ring-offset-background transition-colors focus-visible:outline-none
+					focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+					disabled:pointer-events-none disabled:opacity-50 transform -translate-x-1/2
+				`.trim(),
+          style: "left: [[filledPercentage]]%"
+        }),
+        // Hidden Range Input
+        x({
+          type: "range",
+          min: "[[min]]",
+          max: "[[max]]",
+          value: "[[value]]",
+          // Incorporate your new classes here
+          class: `
+					absolute w-full h-full opacity-0 cursor-pointer
+					${p}
+					${h}
+					${this.class || ""}
+				`.trim(),
+          bind: this.bind,
+          input: (t) => {
+            const r = Number(t.target.value);
+            this.state.value = r, this.state.filledPercentage = this.getFillPercentage(r), typeof this.change == "function" && this.change(r);
+          }
+        })
+      ]);
+    }
+  }
+), G = s((t) => ({
+  tag: "select",
+  ...t,
+  class: `${y} ${t.class || ""}`.trim(),
+  onCreated(r) {
+    t.options && C.setupSelectOptions(r, t.options);
+  }
+})), v = (t) => !t || isNaN(t) ? null : t, i = (t, r) => {
+  const e = t, o = 16, n = 2 * Math.PI * o, d = e / 100 * n, m = `
+    <svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+        <!-- Background Circle -->
+        <circle
+            cx="18"
+            cy="18"
+            r="${o}"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="4"
+            class="bg-muted"
+            stroke-opacity="0.2"
+        />
+        <!-- Progress Circle -->
+        <circle
+            cx="18"
+            cy="18"
+            r="${o}"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="4"
+            class="stroke-primary"
+            stroke-dasharray="${n}"
+            stroke-dashoffset="${n - d}"
+            stroke-linecap="round"
+            class="${r}"
+        />
+        <!-- Percentage Text -->
+        <text
+            x="18"
+            y="20"
+            class="text-[0.25em] font-medium fill-primary"
+            text-anchor="middle"
+            dominant-baseline="middle">
+            ${e}%
+        </text>
+    </svg>
+    `;
+  return l({
+    class: "circle-graph text-inherit",
+    html: m
+  });
+}, R = s((t) => {
+  const r = t.progress || 0, e = t.class || "", o = i(r, e);
+  return l({
+    class: "circle-graph-wrap",
+    onSet: [
+      t.prop,
+      (n) => (n = v(n), n ? i(n, e) : o)
+    ]
+  }, [o]);
+}), P = () => l({
+  class: "absolute h-full rounded-full bg-primary transition-all duration-300",
+  style: "width: [[progress]]%;"
+}), O = u(
+  {
+    /**
+     * This will render the progress bar component.
+     *
+     * @returns {object}
+     */
+    render() {
+      return l({ class: "relative w-full h-4 rounded-full bg-muted" }, [
+        P()
+      ]);
+    },
+    /**
+     * This will initialize the state.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        progress: this.progress ?? 0
+      };
+    },
+    /**
+     * This will reset the progress bar.
+     *
+     * @returns {void}
+     */
+    reset() {
+      this.state.progress = 0;
+    },
+    /**
+     * This will update the progress bar from a file upload.
+     *
+     * @param {object} evt
+     * @returns {void}
+     */
+    uploadProgress(t) {
+      if (t.lengthComputable) {
+        const e = Math.round(t.loaded * 100 / t.total);
+        this.set(e);
+      }
+    },
+    /**
+     * This will set the progress of the progress bar.
+     *
+     * @param {number} progress
+     * @returns {void}
+     */
+    set(t) {
+      t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
+    }
+  }
+), V = ({ class: t, shape: r = "rectangle", width: e = "w-full", height: o = "h-4" }) => l({
+  class: `bg-muted animate-pulse ${e} ${o} ${r === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
+}), g = {
+  top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
+  "top-right": "bottom-full left-full transform -translate-x-1 mb-2",
+  "top-left": "bottom-full right-full transform translate-x-1 mb-2",
+  bottom: "top-full left-1/2 transform -translate-x-1/2 mt-2",
+  "bottom-right": "top-full left-full transform -translate-x-1 mt-2",
+  "bottom-left": "top-full right-full transform translate-x-1 mt-2",
+  left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
+  right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
+}, S = (t) => g[t] || g.top, D = s(({ position: t = "top", content: r }, e) => {
+  const o = S(t);
+  return Array.isArray(e) === !1 && (e = [e]), l({ class: "relative group inline-block" }, [
+    ...e,
+    // Tooltip box
+    c({
+      class: `
+                absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
+                group-hover:opacity-100 transition-opacity duration-200 ${o} pointer-events-none
+            `
+    }, r)
+  ]);
+});
+export {
+  F as B,
+  T as C,
+  L as F,
+  $ as L,
+  O as P,
+  I as R,
+  G as S,
+  D as T,
+  R as a,
+  V as b
+};

package/dist/types/components/atoms/atoms.d.ts

@@ -0,0 +1,15 @@
+export * from "./badges/badge.js";
+export * from "./buttons/buttons.js";
+export * from "./cards/card.js";
+export * from "./form/fieldset.js";
+export * from "./form/inputs/checkbox.js";
+export * from "./form/inputs/inputs.js";
+export * from "./form/inputs/range-slider.js";
+export * from "./form/legend.js";
+export * from "./form/select.js";
+export * from "./icon.js";
+export * from "./progress/circle-graph.js";
+export * from "./progress/progress-bar.js";
+export * from "./skeleton.js";
+export * from "./tooltip.js";
+export * from "./veil.js";

package/dist/types/components/atoms/badges/badge.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This will create a badge.
+ *
+ * @param {object} props
+ * @param {array} children
+ * @returns {object}
+ */
+export const Badge: Function;

package/dist/types/components/atoms/buttons/buttons.d.ts

@@ -0,0 +1,17 @@
+/**
+ * This will create a button by variant or default.
+ *
+ * @param {object} props
+ * @param {array} children
+ * @returns {object}
+ */
+export const Button: Function;
+export default Button;
+/**
+ * This will create a primary button that has a loading icon.
+ *
+ * @param {object} props
+ * @param {array} children
+ * @returns {object}
+ */
+export const LoadingButton: Function;

package/dist/types/components/atoms/cards/card.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This will create a card.
+ *
+ * @param {object} props
+ * @param {array} children
+ * @returns {object}
+ */
+export const Card: Function;

package/dist/types/components/atoms/form/fieldset.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This will create a select component.
+ *
+ * @param {object} props
+ * @param {array} children
+ * @returns {object}
+ */
+export const Fieldset: Function;
+export default Fieldset;

package/dist/types/components/atoms/form/inputs/checkbox.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Checkbox
+ *
+ * This will create an accessible checkbox component.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+export const Checkbox: import("node_modules/@base-framework/base/dist/types/modules/component/jot.js").ComponentConstructor;
+export default Checkbox;

package/dist/types/components/atoms/form/inputs/input-classes.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @constant {string} sizeClass
+ * Common size & spacing classes for inputs.
+ */
+export const sizeClass: "flex h-10 w-full px-3 py-2 text-sm";
+/**
+ * @constant {string} borderClass
+ * Common border & background classes for inputs.
+ */
+export const borderClass: "rounded-md border border-input bg-background";
+/**
+ * @constant {string} focusClass
+ * Common focus and ring classes for inputs.
+ */
+export const focusClass: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
+/**
+ * @constant {string} disabledClass
+ * Common classes for disabled state.
+ */
+export const disabledClass: "disabled:cursor-not-allowed disabled:opacity-50";
+/**
+ * @constant {string} placeholderClass
+ * Common classes for placeholder text.
+ */
+export const placeholderClass: "placeholder:text-muted-foreground";
+/**
+ * @constant {string} commonInputClasses
+ * Composed classes for text-like inputs (text, email, tel, etc.).
+ */
+export const commonInputClasses: "flex h-10 w-full px-3 py-2 text-sm rounded-md border border-input bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50";

package/dist/types/components/atoms/form/inputs/inputs.d.ts

@@ -0,0 +1,113 @@
+/**
+ * A basic Input atom that reuses common classes.
+ *
+ * @param {object} props Props passed to the BaseInput.
+ * @returns {object} A BaseInput element with common classes.
+ */
+export const Input: Function;
+/**
+ * Input component specifically for telephone numbers.
+ *
+ * @param {object} props Props passed to the Input.
+ * @returns {object} An Input element of type "tel" with phone formatting.
+ */
+export const TelInput: Function;
+/**
+ * Input component specifically for email addresses.
+ *
+ * @param {object} props Props passed to the Input.
+ * @returns {object} An Input element of type "email".
+ */
+export const EmailInput: Function;
+/**
+ * Textarea component reusing parts of the common classes.
+ *
+ * @param {object} props Props passed to the BaseTextarea.
+ * @returns {object} A BaseTextarea element.
+ */
+export const Textarea: Function;
+export function Radio(props?: object): object;
+/**
+ * Input component specifically for dates.
+ *
+ * @param {object} props Props passed to the BaseInput.
+ * @returns {object} A BaseInput element of type "date".
+ */
+export const DateInput: Function;
+/**
+ * Input component specifically for times.
+ *
+ * @param {object} props Props passed to the BaseInput.
+ * @returns {object} A BaseInput element of type "time".
+ */
+export const TimeInput: Function;
+/**
+ * Input component specifically for datetime-local.
+ *
+ * @param {object} props Props passed to the BaseInput.
+ * @returns {object} A BaseInput element of type "datetime-local".
+ */
+export const DateTimeInput: Function;
+/**
+ * Input component specifically for months.
+ *
+ * @param {object} props Props passed to the BaseInput.
+ * @returns {object} A BaseInput element of type "month".
+ */
+export const MonthInput: Function;
+/**
+ * Input component specifically for weeks.
+ *
+ * @param {object} props Props passed to the BaseInput.
+ * @returns {object} A BaseInput element of type "week".
+ */
+export const WeekInput: Function;
+/**
+ * Input component specifically for numbers.
+ *
+ * @param {object} props Props passed to the Input.
+ * @returns {object} An Input element of type "number".
+ */
+export const NumberInput: Function;
+/**
+ * Input component specifically for passwords.
+ *
+ * @param {object} props Props passed to the Input.
+ * @returns {object} An Input element of type "password".
+ */
+export const PasswordInput: Function;
+/**
+ * Input component specifically for search.
+ *
+ * @param {object} props Props passed to the Input.
+ * @returns {object} An Input element of type "search".
+ */
+export const SearchInput: Function;
+/**
+ * Input component specifically for URLs.
+ *
+ * @param {object} props Props passed to the Input.
+ * @returns {object} An Input element of type "url".
+ */
+export const UrlInput: Function;
+/**
+ * Input component specifically for hidden fields.
+ *
+ * @param {object} props Props passed to the Input.
+ * @returns {object} An Input element of type "hidden".
+ */
+export const HiddenInput: Function;
+/**
+ * Input component specifically for color pickers.
+ *
+ * @param {object} props Props passed to the BaseInput.
+ * @returns {object} A BaseInput element of type "color".
+ */
+export const ColorInput: Function;
+/**
+ * Input component specifically for file uploads.
+ *
+ * @param {object} props Props passed to the BaseInput.
+ * @returns {object} A BaseInput element of type "file".
+ */
+export const FileInput: Function;

package/dist/types/components/atoms/form/inputs/range-slider.d.ts

@@ -0,0 +1,10 @@
+/**
+ * RangeSlider
+ *
+ * Creates a range slider with a custom style matching the provided design.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+export const RangeSlider: import("node_modules/@base-framework/base/dist/types/modules/component/jot.js").ComponentConstructor;
+export default RangeSlider;

package/dist/types/components/atoms/form/legend.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This will create a select component.
+ *
+ * @param {object} props
+ * @param {array} children
+ * @returns {object}
+ */
+export const Legend: Function;
+export default Legend;

package/dist/types/components/atoms/form/select.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This will create a select component.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+export const Select: Function;
+export default Select;

package/dist/types/components/atoms/icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This will create an icon atom with size support.
+ *
+ * @param {object} props
+ * @param {array} children
+ * @returns {object}
+ */
+export const Icon: Function;

package/dist/types/components/atoms/progress/circle-graph.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This will create a circle graph with Tailwind styling.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+export const CircleGraph: Function;

package/dist/types/components/atoms/progress/progress-bar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Progress Bar
+ *
+ * This will create a progress bar component.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+export const ProgressBar: import("node_modules/@base-framework/base/dist/types/modules/component/jot.js").ComponentConstructor;

package/dist/types/components/atoms/progress/semi-circle-graph.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This will create a semi-circle graph with Tailwind styling.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+export const SemiCircleGraph: Function;

package/dist/types/components/atoms/skeleton.d.ts

@@ -0,0 +1,2 @@
+export function Skeleton({ class: className, shape, width, height }: object): object;
+export default Skeleton;

package/dist/types/components/atoms/tooltip.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Tooltip Component
+ *
+ * A customizable tooltip that can be positioned around a target element.
+ *
+ * @param {object} props
+ * @param {string} props.position - The position of the tooltip relative to the target ('top', 'top-right', 'top-left', 'bottom', 'bottom-right', 'bottom-left')
+ * @param {string} props.text - The text content of the tooltip.
+ * @param {array} children - The children
+ * @returns {object}
+ */
+export const Tooltip: Function;

package/dist/types/components/atoms/veil.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Veil Component
+ *
+ * This will create a component that can accept data from a parent component
+ * or it will use the parent's data or context data to set a local context
+ * to act as if it's data scope is the parent component.
+ *
+ * @class
+ */
+export class Veil extends Component {
+    /**
+     * This will get the child scope instance of the component.
+     *
+     * @returns {object}
+     */
+    getChildScope(): object;
+    /**
+     * This will set the component context.
+     *
+     * @param {object|null} context
+     * @returns {object|null}
+     */
+    setContext(context: object | null): object | null;
+}
+export function VeilJot(props: any): import("node_modules/@base-framework/base/dist/types/modules/component/jot").ComponentConstructor;
+import { Component } from "@base-framework/base";

package/dist/types/components/icons/icons.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Icons
+ *
+ * These icons are from the Heroicons library.
+ *
+ * @link https://heroicons.com/
+ *
+ * @type {object}
+ */
+export const Icons: object;