@regardio/react 0.3.3 → 0.4.0

package/dist/components/item.js

@@ -1,309 +1,512 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from '../utils/cn';
-import { Link } from './link';
-export const priorities = {
-    high: [],
-    low: [],
-    medium: [],
+import { defineConfig } from 'cva';
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import React, { createContext, useCallback, isValidElement, cloneElement, useContext } from 'react';
+import { NavLink } from 'react-router';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+// src/utils/cn.ts
+var { cva, compose } = defineConfig({
+  hooks: {
+    onComplete: (className) => {
+      return twMerge(className);
+    }
+  }
+});
+var lowerCaseSzett = (text, _returnType) => {
+  const processString = (str) => {
+    const parts = str.split(/(ß)/g);
+    return parts.map(
+      (part, index) => part === "\xDF" ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "lowercase",
+          children: part
+        },
+        index.toString()
+      ) : part
+    );
+  };
+  if (typeof text === "string") {
+    return processString(text);
+  }
+  if (isValidElement(text)) {
+    const element = text;
+    const { children, ...props } = element.props;
+    return cloneElement(element, {
+      ...props,
+      children: lowerCaseSzett(children)
+    });
+  }
+  if (Array.isArray(text)) {
+    return text.map((child, index) => /* @__PURE__ */ jsx(React.Fragment, { children: lowerCaseSzett(child) }, index.toString()));
+  }
+  return text;
 };
-export const paddingValues = {
-    default: '',
-    gutter: 'p-grid-gutter',
+var PathResolverContext = createContext(null);
+PathResolverContext.Provider;
+function usePathResolver() {
+  return useContext(PathResolverContext);
+}
+var LinkBase = ({
+  className,
+  to,
+  routeKey,
+  children,
+  onClick,
+  viewTransition = true,
+  ...props
+}) => {
+  const pathResolver = usePathResolver();
+  let path;
+  if (routeKey && pathResolver) {
+    path = pathResolver(routeKey);
+  } else if (typeof to === "string") {
+    path = to;
+  } else {
+    path = to?.pathname ?? "";
+    if (to?.search) path += to.search;
+    if (to?.hash) path += to.hash;
+  }
+  const isExternal = path.startsWith("tel:") || path.startsWith("mailto:") || path.startsWith("#") || path.startsWith("http");
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (path.startsWith("tel:") || path.startsWith("mailto:")) {
+        return;
+      }
+      if (path.startsWith("#")) {
+        event.preventDefault();
+        const element = document.getElementById(path.substring(1));
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth" });
+        }
+        return;
+      }
+      if (path.startsWith("http")) {
+        event.preventDefault();
+        window.open(path, "_blank", "noopener,noreferrer");
+        return;
+      }
+    },
+    [onClick, path]
+  );
+  if (!path) {
+    return /* @__PURE__ */ jsx(Fragment, { children: typeof children === "function" ? null : children });
+  }
+  if (isExternal) {
+    const externalState = {
+      isActive: false,
+      isPending: false,
+      isTransitioning: false
+    };
+    const resolvedClassName = typeof className === "function" ? className(externalState) : className;
+    const resolvedStyle = typeof props.style === "function" ? props.style(externalState) : props.style;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: resolvedClassName,
+        href: path,
+        onClick: handleClick,
+        style: resolvedStyle,
+        children: typeof children === "function" ? children(externalState) : children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    NavLink,
+    {
+      ...props,
+      className,
+      onClick: handleClick,
+      to: path,
+      viewTransition,
+      children
+    }
+  );
 };
-export const width = {
-    full: ['col-span-12'],
-    lg: ['col-span-12', '@xs:col-span-8', '@md:col-span-8', '@xl:col-span-8'],
-    md: ['col-span-12', '@xs:col-span-6', '@md:col-span-6', '@xl:col-span-6'],
-    sm: ['col-span-6', '@xs:col-span-6', '@md:col-span-4', '@xl:col-span-4'],
-    xl: ['col-span-12', '@xs:col-span-8', '@md:col-span-9', '@xl:col-span-10'],
-    xs: ['col-span-6', '@xs:col-span-4', '@md:col-span-3', '@xl:col-span-2'],
+var link = cva({
+  base: [],
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    arrow: {
+      darr: "darr",
+      larr: "larr",
+      rarr: "rarr",
+      uarr: "uarr"
+    },
+    variant: {
+      button: [
+        "block",
+        "button",
+        "mt-s",
+        "relative",
+        "rarr",
+        "text-right",
+        "text-sm",
+        "tracking-wider",
+        "uppercase"
+      ],
+      code: ["font-monospace"],
+      link: ["rarr", "!bg-transparent", "uppercase", "!tracking-wider"],
+      navtitle: ["block", "uppercase", "tracking-wider"],
+      primary: [],
+      subtitle: ["text-lg"]
+    }
+  }
+});
+var Link = ({
+  arrow,
+  children,
+  className,
+  routeKey,
+  to,
+  variant,
+  viewTransition,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    LinkBase,
+    {
+      ...props,
+      className: link({
+        arrow,
+        className,
+        variant
+      }),
+      routeKey,
+      to,
+      viewTransition,
+      children: lowerCaseSzett(children)
+    }
+  );
 };
-export const height = {
-    1: ['row-span-1'],
-    2: ['row-span-2'],
-    3: ['row-span-3'],
-    4: ['row-span-4'],
-    5: ['row-span-5'],
-    6: ['row-span-6'],
+var priorities = {
+  high: [],
+  low: [],
+  medium: []
 };
-export const themeColors = {
-    black: [],
-    blue: [],
-    coral: [],
-    cyan: [],
-    gray: [],
-    green: [],
-    lime: [],
-    neutral: [],
-    olive: [],
-    orange: [],
-    pink: [],
-    purple: [],
-    red: [],
-    teal: [],
-    unstyled: [],
-    white: [],
-    yellow: [],
+var paddingValues = {
+  default: "",
+  gutter: "p-grid-gutter"
 };
-const item = cva({
-    base: ['relative'],
-    compoundVariants: [
-        {
-            className: ['bg-gray-300/20', 'black:bg-black/20'],
-            priority: 'low',
-            themeColor: 'black',
-        },
-        {
-            className: ['bg-gray-300/50', 'black:bg-black/50'],
-            priority: 'medium',
-            themeColor: 'black',
-        },
-        {
-            className: ['bg-gray-300/90', 'black:bg-black/90'],
-            priority: 'high',
-            themeColor: 'black',
-        },
-        {
-            className: ['bg-blue-300/20', 'black:bg-blue-500/20'],
-            priority: 'low',
-            themeColor: 'blue',
-        },
-        {
-            className: ['bg-blue-300/50', 'black:bg-blue-500/50'],
-            priority: 'medium',
-            themeColor: 'blue',
-        },
-        {
-            className: ['bg-blue-300/90', 'black:bg-blue-500/80'],
-            priority: 'high',
-            themeColor: 'blue',
-        },
-        {
-            className: ['bg-coral-300/20', 'black:bg-coral-500/20'],
-            priority: 'low',
-            themeColor: 'coral',
-        },
-        {
-            className: ['bg-coral-300/50', 'black:bg-coral-500/50'],
-            priority: 'medium',
-            themeColor: 'coral',
-        },
-        {
-            className: ['bg-coral-300/90', 'black:bg-coral-500/80'],
-            priority: 'high',
-            themeColor: 'coral',
-        },
-        {
-            className: ['bg-cyan-300/20', 'black:bg-cyan-500/20'],
-            priority: 'low',
-            themeColor: 'cyan',
-        },
-        {
-            className: ['bg-cyan-300/50', 'black:bg-cyan-500/50'],
-            priority: 'medium',
-            themeColor: 'cyan',
-        },
-        {
-            className: ['bg-cyan-300/90', 'black:bg-cyan-500/80'],
-            priority: 'high',
-            themeColor: 'cyan',
-        },
-        {
-            className: ['bg-green-300/20', 'black:bg-green-500/20'],
-            priority: 'low',
-            themeColor: 'green',
-        },
-        {
-            className: ['bg-green-300/50', 'black:bg-green-500/50'],
-            priority: 'medium',
-            themeColor: 'green',
-        },
-        {
-            className: ['bg-green-300/90', 'black:bg-green-500/80'],
-            priority: 'high',
-            themeColor: 'green',
-        },
-        {
-            className: ['bg-lime-300/20', 'black:bg-lime-500/20'],
-            priority: 'low',
-            themeColor: 'lime',
-        },
-        {
-            className: ['bg-lime-300/50', 'black:bg-lime-500/50'],
-            priority: 'medium',
-            themeColor: 'lime',
-        },
-        {
-            className: ['bg-lime-300/90', 'black:bg-lime-500/80'],
-            priority: 'high',
-            themeColor: 'lime',
-        },
-        {
-            className: ['bg-gray-100/40', 'black:bg-gray-500/5'],
-            priority: 'low',
-            themeColor: 'neutral',
-        },
-        {
-            className: ['bg-gray-200/30', 'black:bg-gray-500/20'],
-            priority: 'medium',
-            themeColor: 'neutral',
-        },
-        {
-            className: ['bg-gray-300/70', 'black:bg-gray-500/50'],
-            priority: 'high',
-            themeColor: 'neutral',
-        },
-        {
-            className: ['bg-olive-300/20', 'black:bg-olive-500/20'],
-            priority: 'low',
-            themeColor: 'olive',
-        },
-        {
-            className: ['bg-olive-300/50', 'black:bg-olive-500/50'],
-            priority: 'medium',
-            themeColor: 'olive',
-        },
-        {
-            className: ['bg-olive-300/90', 'black:bg-olive-500/80'],
-            priority: 'high',
-            themeColor: 'olive',
-        },
-        {
-            className: ['bg-orange-300/20', 'black:bg-orange-500/20'],
-            priority: 'low',
-            themeColor: 'orange',
-        },
-        {
-            className: ['bg-orange-300/50', 'black:bg-orange-500/50'],
-            priority: 'medium',
-            themeColor: 'orange',
-        },
-        {
-            className: ['bg-orange-300/90', 'black:bg-orange-500/80'],
-            priority: 'high',
-            themeColor: 'orange',
-        },
-        {
-            className: ['bg-pink-300/20', 'black:bg-pink-500/20'],
-            priority: 'low',
-            themeColor: 'pink',
-        },
-        {
-            className: ['bg-pink-300/50', 'black:bg-pink-500/50'],
-            priority: 'medium',
-            themeColor: 'pink',
-        },
-        {
-            className: ['bg-pink-300/90', 'black:bg-pink-500/80'],
-            priority: 'high',
-            themeColor: 'pink',
-        },
-        {
-            className: ['bg-purple-300/20', 'black:bg-purple-500/20'],
-            priority: 'low',
-            themeColor: 'purple',
-        },
-        {
-            className: ['bg-purple-300/50', 'black:bg-purple-500/50'],
-            priority: 'medium',
-            themeColor: 'purple',
-        },
-        {
-            className: ['bg-purple-300/90', 'black:bg-purple-500/80'],
-            priority: 'high',
-            themeColor: 'purple',
-        },
-        {
-            className: ['bg-red-300/20', 'black:bg-red-500/20'],
-            priority: 'low',
-            themeColor: 'red',
-        },
-        {
-            className: ['bg-red-300/50', 'black:bg-red-500/50'],
-            priority: 'medium',
-            themeColor: 'red',
-        },
-        {
-            className: ['bg-red-300/90', 'black:bg-red-500/80'],
-            priority: 'high',
-            themeColor: 'red',
-        },
-        {
-            className: ['bg-teal-300/20', 'black:bg-teal-500/20'],
-            priority: 'low',
-            themeColor: 'teal',
-        },
-        {
-            className: ['bg-teal-300/50', 'black:bg-teal-500/50'],
-            priority: 'medium',
-            themeColor: 'teal',
-        },
-        {
-            className: ['bg-teal-300/90', 'black:bg-teal-500/80'],
-            priority: 'high',
-            themeColor: 'teal',
-        },
-        {
-            className: ['bg-yellow-300/20', 'black:bg-yellow-500/20'],
-            priority: 'low',
-            themeColor: 'yellow',
-        },
-        {
-            className: ['bg-yellow-300/50', 'black:bg-yellow-500/50'],
-            priority: 'medium',
-            themeColor: 'yellow',
-        },
-        {
-            className: ['bg-yellow-300/90', 'black:bg-yellow-500/80'],
-            priority: 'high',
-            themeColor: 'yellow',
-        },
-        {
-            className: ['bg-white/20', 'black:bg-white/20'],
-            priority: 'low',
-            themeColor: 'white',
-        },
-        {
-            className: ['bg-white/50', 'black:bg-white/50', 'black:text-black'],
-            priority: 'medium',
-            themeColor: 'white',
-        },
-        {
-            className: ['bg-white/90', 'black:bg-white/80', 'black:text-black'],
-            priority: 'high',
-            themeColor: 'white',
-        },
-    ],
-    defaultVariants: {
-        height: 1,
-        padding: 'default',
-        priority: 'medium',
-        themeColor: 'unstyled',
-        variant: 'primary',
-        width: 'full',
-    },
-    variants: {
-        height: height,
-        padding: paddingValues,
-        priority: priorities,
-        themeColor: themeColors,
-        variant: {
-            primary: [],
-            reset: ['bg-transparent', 'rounded-none'],
-            spacer: ['hidden'],
-            unstyled: [],
-        },
-        width: width,
+var width = {
+  full: ["col-span-12"],
+  lg: ["col-span-12", "@xs:col-span-8", "@md:col-span-8", "@xl:col-span-8"],
+  md: ["col-span-12", "@xs:col-span-6", "@md:col-span-6", "@xl:col-span-6"],
+  sm: ["col-span-6", "@xs:col-span-6", "@md:col-span-4", "@xl:col-span-4"],
+  xl: ["col-span-12", "@xs:col-span-8", "@md:col-span-9", "@xl:col-span-10"],
+  xs: ["col-span-6", "@xs:col-span-4", "@md:col-span-3", "@xl:col-span-2"]
+};
+var height = {
+  1: ["row-span-1"],
+  2: ["row-span-2"],
+  3: ["row-span-3"],
+  4: ["row-span-4"],
+  5: ["row-span-5"],
+  6: ["row-span-6"]
+};
+var themeColors = {
+  black: [],
+  blue: [],
+  coral: [],
+  cyan: [],
+  gray: [],
+  green: [],
+  lime: [],
+  neutral: [],
+  olive: [],
+  orange: [],
+  pink: [],
+  purple: [],
+  red: [],
+  teal: [],
+  unstyled: [],
+  white: [],
+  yellow: []
+};
+var item = cva({
+  base: ["relative"],
+  compoundVariants: [
+    {
+      className: ["bg-gray-300/20", "black:bg-black/20"],
+      priority: "low",
+      themeColor: "black"
+    },
+    {
+      className: ["bg-gray-300/50", "black:bg-black/50"],
+      priority: "medium",
+      themeColor: "black"
+    },
+    {
+      className: ["bg-gray-300/90", "black:bg-black/90"],
+      priority: "high",
+      themeColor: "black"
+    },
+    {
+      className: ["bg-blue-300/20", "black:bg-blue-500/20"],
+      priority: "low",
+      themeColor: "blue"
+    },
+    {
+      className: ["bg-blue-300/50", "black:bg-blue-500/50"],
+      priority: "medium",
+      themeColor: "blue"
+    },
+    {
+      className: ["bg-blue-300/90", "black:bg-blue-500/80"],
+      priority: "high",
+      themeColor: "blue"
+    },
+    {
+      className: ["bg-coral-300/20", "black:bg-coral-500/20"],
+      priority: "low",
+      themeColor: "coral"
+    },
+    {
+      className: ["bg-coral-300/50", "black:bg-coral-500/50"],
+      priority: "medium",
+      themeColor: "coral"
+    },
+    {
+      className: ["bg-coral-300/90", "black:bg-coral-500/80"],
+      priority: "high",
+      themeColor: "coral"
+    },
+    {
+      className: ["bg-cyan-300/20", "black:bg-cyan-500/20"],
+      priority: "low",
+      themeColor: "cyan"
+    },
+    {
+      className: ["bg-cyan-300/50", "black:bg-cyan-500/50"],
+      priority: "medium",
+      themeColor: "cyan"
+    },
+    {
+      className: ["bg-cyan-300/90", "black:bg-cyan-500/80"],
+      priority: "high",
+      themeColor: "cyan"
+    },
+    {
+      className: ["bg-green-300/20", "black:bg-green-500/20"],
+      priority: "low",
+      themeColor: "green"
+    },
+    {
+      className: ["bg-green-300/50", "black:bg-green-500/50"],
+      priority: "medium",
+      themeColor: "green"
+    },
+    {
+      className: ["bg-green-300/90", "black:bg-green-500/80"],
+      priority: "high",
+      themeColor: "green"
+    },
+    {
+      className: ["bg-lime-300/20", "black:bg-lime-500/20"],
+      priority: "low",
+      themeColor: "lime"
+    },
+    {
+      className: ["bg-lime-300/50", "black:bg-lime-500/50"],
+      priority: "medium",
+      themeColor: "lime"
+    },
+    {
+      className: ["bg-lime-300/90", "black:bg-lime-500/80"],
+      priority: "high",
+      themeColor: "lime"
+    },
+    {
+      className: ["bg-gray-100/40", "black:bg-gray-500/5"],
+      priority: "low",
+      themeColor: "neutral"
+    },
+    {
+      className: ["bg-gray-200/30", "black:bg-gray-500/20"],
+      priority: "medium",
+      themeColor: "neutral"
+    },
+    {
+      className: ["bg-gray-300/70", "black:bg-gray-500/50"],
+      priority: "high",
+      themeColor: "neutral"
+    },
+    {
+      className: ["bg-olive-300/20", "black:bg-olive-500/20"],
+      priority: "low",
+      themeColor: "olive"
+    },
+    {
+      className: ["bg-olive-300/50", "black:bg-olive-500/50"],
+      priority: "medium",
+      themeColor: "olive"
+    },
+    {
+      className: ["bg-olive-300/90", "black:bg-olive-500/80"],
+      priority: "high",
+      themeColor: "olive"
+    },
+    {
+      className: ["bg-orange-300/20", "black:bg-orange-500/20"],
+      priority: "low",
+      themeColor: "orange"
+    },
+    {
+      className: ["bg-orange-300/50", "black:bg-orange-500/50"],
+      priority: "medium",
+      themeColor: "orange"
+    },
+    {
+      className: ["bg-orange-300/90", "black:bg-orange-500/80"],
+      priority: "high",
+      themeColor: "orange"
+    },
+    {
+      className: ["bg-pink-300/20", "black:bg-pink-500/20"],
+      priority: "low",
+      themeColor: "pink"
+    },
+    {
+      className: ["bg-pink-300/50", "black:bg-pink-500/50"],
+      priority: "medium",
+      themeColor: "pink"
+    },
+    {
+      className: ["bg-pink-300/90", "black:bg-pink-500/80"],
+      priority: "high",
+      themeColor: "pink"
+    },
+    {
+      className: ["bg-purple-300/20", "black:bg-purple-500/20"],
+      priority: "low",
+      themeColor: "purple"
+    },
+    {
+      className: ["bg-purple-300/50", "black:bg-purple-500/50"],
+      priority: "medium",
+      themeColor: "purple"
+    },
+    {
+      className: ["bg-purple-300/90", "black:bg-purple-500/80"],
+      priority: "high",
+      themeColor: "purple"
+    },
+    {
+      className: ["bg-red-300/20", "black:bg-red-500/20"],
+      priority: "low",
+      themeColor: "red"
+    },
+    {
+      className: ["bg-red-300/50", "black:bg-red-500/50"],
+      priority: "medium",
+      themeColor: "red"
+    },
+    {
+      className: ["bg-red-300/90", "black:bg-red-500/80"],
+      priority: "high",
+      themeColor: "red"
+    },
+    {
+      className: ["bg-teal-300/20", "black:bg-teal-500/20"],
+      priority: "low",
+      themeColor: "teal"
+    },
+    {
+      className: ["bg-teal-300/50", "black:bg-teal-500/50"],
+      priority: "medium",
+      themeColor: "teal"
+    },
+    {
+      className: ["bg-teal-300/90", "black:bg-teal-500/80"],
+      priority: "high",
+      themeColor: "teal"
+    },
+    {
+      className: ["bg-yellow-300/20", "black:bg-yellow-500/20"],
+      priority: "low",
+      themeColor: "yellow"
+    },
+    {
+      className: ["bg-yellow-300/50", "black:bg-yellow-500/50"],
+      priority: "medium",
+      themeColor: "yellow"
+    },
+    {
+      className: ["bg-yellow-300/90", "black:bg-yellow-500/80"],
+      priority: "high",
+      themeColor: "yellow"
+    },
+    {
+      className: ["bg-white/20", "black:bg-white/20"],
+      priority: "low",
+      themeColor: "white"
+    },
+    {
+      className: ["bg-white/50", "black:bg-white/50", "black:text-black"],
+      priority: "medium",
+      themeColor: "white"
+    },
+    {
+      className: ["bg-white/90", "black:bg-white/80", "black:text-black"],
+      priority: "high",
+      themeColor: "white"
+    }
+  ],
+  defaultVariants: {
+    height: 1,
+    padding: "default",
+    priority: "medium",
+    themeColor: "unstyled",
+    variant: "primary",
+    width: "full"
+  },
+  variants: {
+    height,
+    padding: paddingValues,
+    priority: priorities,
+    themeColor: themeColors,
+    variant: {
+      primary: [],
+      reset: ["bg-transparent", "rounded-none"],
+      spacer: ["hidden"],
+      unstyled: []
     },
+    width
+  }
 });
-export const Item = ({ as: Component = 'div', children, className, height, link, padding, priority, themeColor, variant, width, ...props }) => {
-    return (_jsx(Component, { className: item({
-            className,
-            height,
-            padding,
-            priority,
-            themeColor,
-            variant,
-            width,
-        }), ...props, children: link ? _jsx(Link, { to: link, children: children }) : children }));
+var Item = ({
+  as: Component = "div",
+  children,
+  className,
+  height: height2,
+  link: link2,
+  padding,
+  priority,
+  themeColor,
+  variant,
+  width: width2,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: item({
+        className,
+        height: height2,
+        padding,
+        priority,
+        themeColor,
+        variant,
+        width: width2
+      }),
+      ...props,
+      children: link2 ? /* @__PURE__ */ jsx(Link, { to: link2, children }) : children
+    }
+  );
 };
+
+export { Item, height, paddingValues, priorities, themeColors, width };