@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/filters/index.ts

@@ -1,28 +0,0 @@
-// Public API for @mohasinac/feat-filters
-
-export { FilterFacetSection } from "./FilterFacetSection";
-export type {
-  FilterFacetSectionProps,
-  FacetOption,
-} from "./FilterFacetSection";
-
-export { RangeFilter } from "./RangeFilter";
-export type { RangeFilterProps } from "./RangeFilter";
-
-export { SwitchFilter } from "./SwitchFilter";
-export type { SwitchFilterProps } from "./SwitchFilter";
-
-export { FilterPanel } from "./FilterPanel";
-export type {
-  FilterPanelProps,
-  FilterConfig,
-  UrlTable,
-  FacetSingleConfig,
-  FacetMultiConfig,
-  SwitchConfig,
-  RangeNumberConfig,
-  RangeDateConfig,
-} from "./FilterPanel";
-
-export { getFilterLabel, getFilterValue, cn } from "./filterUtils";
-export type { FilterOption } from "./filterUtils";

package/src/features/forms/Checkbox.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import { Div, Span } from "../../ui";
-import { cn, ERROR_BASE } from "./utils";
-
-export interface CheckboxProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "type"
-> {
-  label?: string;
-  suffix?: React.ReactNode;
-  error?: string;
-  indeterminate?: boolean;
-}
-
-export function Checkbox({
-  label,
-  suffix,
-  error,
-  indeterminate,
-  className = "",
-  checked,
-  ...props
-}: CheckboxProps) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  React.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.indeterminate = !!indeterminate;
-    }
-  }, [indeterminate]);
-
-  return (
-    <Div className="w-full">
-      <label className="flex flex-row items-center gap-3 cursor-pointer group">
-          <Div className="relative flex items-center justify-center flex-shrink-0">
-          <input
-            ref={inputRef}
-            type="checkbox"
-            checked={checked}
-            className={cn(
-              "peer w-5 h-5 rounded-md border-2 cursor-pointer",
-              "transition-all duration-200 appearance-none",
-              error
-                ? "border-red-400 dark:border-red-500"
-                : "border-zinc-300 dark:border-slate-600",
-              "checked:bg-primary-600 checked:border-primary-600",
-              "dark:checked:bg-secondary-500 dark:checked:border-secondary-500",
-              "hover:border-primary-400 dark:hover:border-secondary-400",
-              "focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1",
-              "dark:focus:ring-secondary-400/30 dark:focus:ring-offset-slate-900",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              className,
-            )}
-            {...props}
-          />
-          {/* Tick icon */}
-          <svg
-            className="absolute w-3 h-3 text-white pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity duration-150"
-            viewBox="0 0 12 12"
-            fill="none"
-            aria-hidden="true"
-          >
-            {indeterminate ? (
-              <line
-                x1="2"
-                y1="6"
-                x2="10"
-                y2="6"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-              />
-            ) : (
-              <path
-                d="M2 6L5 9L10 3"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            )}
-          </svg>
-          </Div>
-
-        {(label || suffix) && (
-          <Span className="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors">
-            {label}
-            {suffix}
-          </Span>
-        )}
-      </label>
-
-      {error && (
-        <p className={cn(ERROR_BASE, "mt-1.5")} role="alert">
-          {error}
-        </p>
-      )}
-    </Div>
-  );
-}

package/src/features/forms/Form.tsx

@@ -1,105 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div } from "../../ui";
-import { cn } from "./utils";
-
-// ─── Form ─────────────────────────────────────────────────────────────────────
-
-export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
-  children: React.ReactNode;
-}
-
-export function Form({ children, className = "", ...props }: FormProps) {
-  return (
-    <form className={cn("space-y-6 lg:space-y-8", className)} {...props}>
-      {children}
-    </form>
-  );
-}
-
-// ─── FormGroup ────────────────────────────────────────────────────────────────
-
-type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-
-const GAP_MAP: Record<GapToken, string> = {
-  none: "gap-0",
-  xs: "gap-2",
-  sm: "gap-3",
-  md: "gap-4 lg:gap-6",
-  lg: "gap-6 lg:gap-8",
-  xl: "gap-8 lg:gap-10",
-};
-
-export interface FormGroupProps {
-  children: React.ReactNode;
-  columns?: 1 | 2 | 3 | 4;
-  gap?: GapToken;
-  className?: string;
-}
-
-export function FormGroup({
-  children,
-  columns = 1,
-  gap = "md",
-  className = "",
-}: FormGroupProps) {
-  const gridClasses = {
-    1: "grid-cols-1",
-    2: "grid-cols-1 sm:grid-cols-2",
-    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
-    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-  };
-
-  return (
-    <Div className={cn("grid", gridClasses[columns], GAP_MAP[gap], className)}>
-      {children}
-    </Div>
-  );
-}
-
-// ─── FormFieldSpan ────────────────────────────────────────────────────────────
-
-/** Wraps a child so it spans full width inside a multi-column FormGroup. */
-export function FormFieldSpan({
-  children,
-  className = "",
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <Div className={cn("col-span-full", className)}>{children}</Div>;
-}
-
-// ─── FormActions ─────────────────────────────────────────────────────────────
-
-export interface FormActionsProps {
-  children: React.ReactNode;
-  align?: "left" | "center" | "right" | "between";
-  className?: string;
-}
-
-const ALIGN_MAP = {
-  left: "justify-start",
-  center: "justify-center",
-  right: "justify-end",
-  between: "justify-between",
-};
-
-export function FormActions({
-  children,
-  align = "right",
-  className = "",
-}: FormActionsProps) {
-  return (
-    <Div
-      className={cn(
-        "flex items-center gap-3 pt-2",
-        ALIGN_MAP[align],
-        className,
-      )}
-    >
-      {children}
-    </Div>
-  );
-}

package/src/features/forms/Input.tsx

@@ -1,127 +0,0 @@
-import React from "react";
-import { Div, Span } from "../../ui";
-import {
-  cn,
-  INPUT_BASE,
-  INPUT_ERROR,
-  INPUT_SUCCESS,
-  INPUT_DISABLED,
-  INPUT_WITH_ICON,
-  LABEL_BASE,
-  HELPER_BASE,
-  ERROR_BASE,
-} from "./utils";
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  error?: string;
-  helperText?: string;
-  icon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  success?: boolean;
-}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  function Input(
-    {
-      label,
-      error,
-      helperText,
-      icon,
-      rightIcon,
-      success,
-      className = "",
-      required,
-      disabled,
-      ...props
-    },
-    ref,
-  ) {
-    const stateClasses = error
-      ? INPUT_ERROR
-      : success
-        ? INPUT_SUCCESS
-        : disabled
-          ? INPUT_DISABLED
-          : "";
-
-    return (
-      <Div className="w-full">
-        {label && (
-          <label className={LABEL_BASE}>
-            {label}
-            {required && (
-              <Span className="text-red-500 ml-1" aria-hidden="true">
-                *
-              </Span>
-            )}
-          </label>
-        )}
-
-        <Div className="relative group">
-          {icon && (
-            <Div
-              className={cn(
-                "absolute left-3 top-1/2 -translate-y-1/2 transition-colors duration-150",
-                error
-                  ? "text-red-600 dark:text-red-400"
-                  : "text-zinc-400 dark:text-zinc-500",
-                "group-focus-within:text-primary-500 dark:group-focus-within:text-secondary-400",
-              )}
-            >
-              {icon}
-            </Div>
-          )}
-
-          <input
-            ref={ref}
-            className={cn(
-              "w-full",
-              INPUT_BASE,
-              icon ? INPUT_WITH_ICON : "",
-              rightIcon ? "pr-10" : "",
-              stateClasses,
-              className,
-            )}
-            disabled={disabled}
-            aria-invalid={error ? "true" : undefined}
-            aria-describedby={
-              error
-                ? `${props.id}-error`
-                : helperText
-                  ? `${props.id}-helper`
-                  : undefined
-            }
-            {...props}
-          />
-
-          {rightIcon && (
-            <Div
-              className={cn(
-                "absolute right-3 top-1/2 -translate-y-1/2 transition-colors duration-150",
-                error
-                  ? "text-red-600 dark:text-red-400"
-                  : "text-zinc-400 dark:text-zinc-500",
-              )}
-            >
-              {rightIcon}
-            </Div>
-          )}
-        </Div>
-
-        {error && (
-          <p id={`${props.id}-error`} className={ERROR_BASE} role="alert">
-            {error}
-          </p>
-        )}
-        {!error && helperText && (
-          <p id={`${props.id}-helper`} className={HELPER_BASE}>
-            {helperText}
-          </p>
-        )}
-      </Div>
-    );
-  },
-);
-
-Input.displayName = "Input";

package/src/features/forms/Radio.tsx

@@ -1,126 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div, Span } from "../../ui";
-import { cn, LABEL_BASE, ERROR_BASE } from "./utils";
-
-export interface RadioOption {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface RadioGroupProps {
-  name: string;
-  options: RadioOption[];
-  value?: string;
-  onChange?: (value: string) => void;
-  label?: string;
-  error?: string;
-  orientation?: "vertical" | "horizontal";
-  /** Visual style: "toggle" = pill selectors, "classic" = dot-style */
-  variant?: "toggle" | "classic";
-}
-
-export function RadioGroup({
-  name,
-  options,
-  value,
-  onChange,
-  label,
-  error,
-  orientation = "vertical",
-  variant = "toggle",
-}: RadioGroupProps) {
-  if (variant === "classic") {
-    return (
-      <Div className="w-full">
-        {label && <p className={LABEL_BASE}>{label}</p>}
-        <Div
-          className={cn(
-            "flex gap-3",
-            orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
-          )}
-        >
-          {options.map((option) => {
-            const isSelected = value === option.value;
-            return (
-              <label
-                key={option.value}
-                className={cn(
-                  "flex items-center gap-2.5 cursor-pointer",
-                  option.disabled && "opacity-50 cursor-not-allowed",
-                )}
-              >
-                <input
-                  type="radio"
-                  name={name}
-                  value={option.value}
-                  checked={isSelected}
-                  disabled={option.disabled}
-                  onChange={() => !option.disabled && onChange?.(option.value)}
-                  className="w-4 h-4 text-primary-600 dark:text-secondary-500 border-zinc-300 dark:border-slate-600 focus:ring-primary-500/30 dark:focus:ring-secondary-400/30"
-                />
-                <Span className="text-sm text-zinc-700 dark:text-zinc-300">
-                  {option.label}
-                </Span>
-              </label>
-            );
-          })}
-        </Div>
-        {error && (
-          <p className={ERROR_BASE} role="alert">
-            {error}
-          </p>
-        )}
-      </Div>
-    );
-  }
-
-  // Toggle variant — pill style
-  return (
-    <Div className="w-full">
-      {label && <p className={LABEL_BASE}>{label}</p>}
-      <Div
-        className={cn(
-          "flex gap-2",
-          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
-        )}
-        role="radiogroup"
-        aria-label={label}
-      >
-        {options.map((option) => {
-          const isSelected = value === option.value;
-          return (
-            <label
-              key={option.value}
-              className={cn(
-                "flex items-center justify-center px-4 py-2.5 rounded-xl border text-sm font-medium cursor-pointer transition-all duration-200",
-                isSelected
-                  ? "bg-primary-600 dark:bg-secondary-500 border-primary-600 dark:border-secondary-500 text-white shadow-sm"
-                  : "border-zinc-200 dark:border-slate-700 text-zinc-700 dark:text-zinc-300 hover:border-primary-400 dark:hover:border-secondary-400 hover:bg-primary-50/50 dark:hover:bg-secondary-900/20",
-                option.disabled && "opacity-50 cursor-not-allowed",
-              )}
-            >
-              <input
-                type="radio"
-                name={name}
-                value={option.value}
-                checked={isSelected}
-                disabled={option.disabled}
-                onChange={() => !option.disabled && onChange?.(option.value)}
-                className="sr-only"
-              />
-              {option.label}
-            </label>
-          );
-        })}
-      </Div>
-      {error && (
-        <p className={ERROR_BASE} role="alert">
-          {error}
-        </p>
-      )}
-    </Div>
-  );
-}

package/src/features/forms/Select.tsx

@@ -1,101 +0,0 @@
-import React from "react";
-import { Div, Span } from "../../ui";
-import {
-  cn,
-  INPUT_BASE,
-  INPUT_ERROR,
-  LABEL_BASE,
-  HELPER_BASE,
-  ERROR_BASE,
-} from "./utils";
-
-export interface SelectOption {
-  value: string;
-  label: string;
-}
-
-export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  label?: string;
-  error?: string;
-  helperText?: string;
-  options: SelectOption[];
-  placeholder?: string;
-}
-
-export function Select({
-  label,
-  error,
-  helperText,
-  options,
-  placeholder,
-  className = "",
-  required,
-  ...props
-}: SelectProps) {
-  return (
-    <Div className="w-full">
-      {label && (
-        <label className={LABEL_BASE}>
-          {label}
-          {required && (
-            <Span className="text-red-500 ml-1" aria-hidden="true">
-              *
-            </Span>
-          )}
-        </label>
-      )}
-
-      <Div className="relative group">
-        <select
-          className={cn(
-            INPUT_BASE,
-            "pr-10 appearance-none cursor-pointer",
-            error ? INPUT_ERROR : "",
-            className,
-          )}
-          aria-invalid={error ? "true" : undefined}
-          {...props}
-        >
-          {placeholder && (
-            <option value="" disabled>
-              {placeholder}
-            </option>
-          )}
-          {options.map((option) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-
-        {/* Chevron icon */}
-        <Div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none transition-colors duration-150">
-          <svg
-            className={cn(
-              "w-5 h-5 transition-transform duration-200",
-              error
-                ? "text-red-500 dark:text-red-400"
-                : "text-zinc-400 dark:text-zinc-500",
-            )}
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fillRule="evenodd"
-              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </Div>
-      </Div>
-
-      {error && (
-        <p className={ERROR_BASE} role="alert">
-          {error}
-        </p>
-      )}
-      {!error && helperText && <p className={HELPER_BASE}>{helperText}</p>}
-    </Div>
-  );
-}

package/src/features/forms/Slider.tsx

@@ -1,119 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div, Span } from "../../ui";
-import { cn, LABEL_BASE, ERROR_BASE } from "./utils";
-
-export interface SliderProps {
-  value?: number;
-  defaultValue?: number;
-  min?: number;
-  max?: number;
-  step?: number;
-  onChange?: (value: number) => void;
-  label?: string;
-  error?: string;
-  disabled?: boolean;
-  showValue?: boolean;
-  /** Format the displayed value. Defaults to `String(value)`. */
-  formatValue?: (value: number) => string;
-  className?: string;
-  id?: string;
-}
-
-/**
- * Slider — single-thumb range slider.
- */
-export function Slider({
-  value: controlledValue,
-  defaultValue = 0,
-  min = 0,
-  max = 100,
-  step = 1,
-  onChange,
-  label,
-  error,
-  disabled = false,
-  showValue = true,
-  formatValue,
-  className = "",
-  id,
-}: SliderProps) {
-  const [internalValue, setInternalValue] = React.useState(defaultValue);
-  const value = controlledValue !== undefined ? controlledValue : internalValue;
-  const sliderId = id ?? React.useId();
-  const pct = ((value - min) / (max - min)) * 100;
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newVal = Number(e.target.value);
-    if (controlledValue === undefined) setInternalValue(newVal);
-    onChange?.(newVal);
-  };
-
-  const displayValue = formatValue ? formatValue(value) : String(value);
-
-  return (
-    <Div className={cn("w-full space-y-2", className)}>
-      {(label || showValue) && (
-        <Div className="flex items-center justify-between">
-          {label && (
-            <label htmlFor={sliderId} className={LABEL_BASE}>
-              {label}
-            </label>
-          )}
-          {showValue && (
-            <Span className="text-sm font-semibold tabular-nums text-zinc-900 dark:text-zinc-100">
-              {displayValue}
-            </Span>
-          )}
-        </Div>
-      )}
-
-      <Div className="relative h-5 flex items-center">
-        {/* Track background */}
-        <Div className="absolute inset-y-0 flex items-center w-full">
-          <Div className="w-full h-1.5 rounded-full bg-zinc-200 dark:bg-slate-700">
-            <Div
-              className="h-full rounded-full bg-primary-500 dark:bg-secondary-500 transition-all"
-              style={{ width: `${pct}%` }}
-            />
-          </Div>
-        </Div>
-
-        <input
-          type="range"
-          id={sliderId}
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          disabled={disabled}
-          onChange={handleChange}
-          className={cn(
-            "relative w-full appearance-none bg-transparent cursor-pointer",
-            "focus:outline-none",
-            "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4",
-            "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white",
-            "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-500 dark:[&::-webkit-slider-thumb]:border-secondary-500",
-            "[&::-webkit-slider-thumb]:shadow-sm",
-            "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4",
-            "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white",
-            "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary-500 dark:[&::-moz-range-thumb]:border-secondary-500",
-            disabled && "opacity-50 cursor-not-allowed",
-          )}
-        />
-      </Div>
-
-      <Div className="flex items-center justify-between text-xs text-zinc-400 dark:text-zinc-500">
-        <Span>{formatValue ? formatValue(min) : min}</Span>
-        <Span>{formatValue ? formatValue(max) : max}</Span>
-      </Div>
-
-      {error && (
-        <p className={ERROR_BASE} role="alert">
-          {error}
-        </p>
-      )}
-    </Div>
-  );
-}