@regardio/react 0.4.7 → 0.5.1

package/dist/grid/index.js

@@ -0,0 +1,239 @@
+import { tv } from '@regardio/tailwind/utils';
+import { forwardRef, createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var gridItem = tv({
+  defaultVariants: {
+    span: 12
+  },
+  slots: {
+    root: ["relative"]
+  },
+  variants: {
+    end: {
+      1: { root: "col-end-1" },
+      2: { root: "col-end-2" },
+      3: { root: "col-end-3" },
+      4: { root: "col-end-4" },
+      5: { root: "col-end-5" },
+      6: { root: "col-end-6" },
+      7: { root: "col-end-7" },
+      8: { root: "col-end-8" },
+      9: { root: "col-end-9" },
+      10: { root: "col-end-10" },
+      11: { root: "col-end-11" },
+      12: { root: "col-end-12" },
+      13: { root: "col-end-13" },
+      auto: { root: "col-end-auto" }
+    },
+    rowSpan: {
+      1: { root: "row-span-1" },
+      2: { root: "row-span-2" },
+      3: { root: "row-span-3" },
+      4: { root: "row-span-4" },
+      5: { root: "row-span-5" },
+      6: { root: "row-span-6" },
+      full: { root: "row-span-full" }
+    },
+    span: {
+      1: { root: "col-span-1" },
+      2: { root: "col-span-2" },
+      3: { root: "col-span-3" },
+      4: { root: "col-span-4" },
+      5: { root: "col-span-5" },
+      6: { root: "col-span-6" },
+      7: { root: "col-span-7" },
+      8: { root: "col-span-8" },
+      9: { root: "col-span-9" },
+      10: { root: "col-span-10" },
+      11: { root: "col-span-11" },
+      12: { root: "col-span-12" },
+      full: { root: "col-span-full" }
+    },
+    spanLg: {
+      1: { root: "@lg:col-span-1" },
+      2: { root: "@lg:col-span-2" },
+      3: { root: "@lg:col-span-3" },
+      4: { root: "@lg:col-span-4" },
+      5: { root: "@lg:col-span-5" },
+      6: { root: "@lg:col-span-6" },
+      7: { root: "@lg:col-span-7" },
+      8: { root: "@lg:col-span-8" },
+      9: { root: "@lg:col-span-9" },
+      10: { root: "@lg:col-span-10" },
+      11: { root: "@lg:col-span-11" },
+      12: { root: "@lg:col-span-12" },
+      full: { root: "@lg:col-span-full" }
+    },
+    spanMd: {
+      1: { root: "@md:col-span-1" },
+      2: { root: "@md:col-span-2" },
+      3: { root: "@md:col-span-3" },
+      4: { root: "@md:col-span-4" },
+      5: { root: "@md:col-span-5" },
+      6: { root: "@md:col-span-6" },
+      7: { root: "@md:col-span-7" },
+      8: { root: "@md:col-span-8" },
+      9: { root: "@md:col-span-9" },
+      10: { root: "@md:col-span-10" },
+      11: { root: "@md:col-span-11" },
+      12: { root: "@md:col-span-12" },
+      full: { root: "@md:col-span-full" }
+    },
+    spanSm: {
+      1: { root: "@sm:col-span-1" },
+      2: { root: "@sm:col-span-2" },
+      3: { root: "@sm:col-span-3" },
+      4: { root: "@sm:col-span-4" },
+      5: { root: "@sm:col-span-5" },
+      6: { root: "@sm:col-span-6" },
+      7: { root: "@sm:col-span-7" },
+      8: { root: "@sm:col-span-8" },
+      9: { root: "@sm:col-span-9" },
+      10: { root: "@sm:col-span-10" },
+      11: { root: "@sm:col-span-11" },
+      12: { root: "@sm:col-span-12" },
+      full: { root: "@sm:col-span-full" }
+    },
+    spanXl: {
+      1: { root: "@xl:col-span-1" },
+      2: { root: "@xl:col-span-2" },
+      3: { root: "@xl:col-span-3" },
+      4: { root: "@xl:col-span-4" },
+      5: { root: "@xl:col-span-5" },
+      6: { root: "@xl:col-span-6" },
+      7: { root: "@xl:col-span-7" },
+      8: { root: "@xl:col-span-8" },
+      9: { root: "@xl:col-span-9" },
+      10: { root: "@xl:col-span-10" },
+      11: { root: "@xl:col-span-11" },
+      12: { root: "@xl:col-span-12" },
+      full: { root: "@xl:col-span-full" }
+    },
+    spanXs: {
+      1: { root: "@xs:col-span-1" },
+      2: { root: "@xs:col-span-2" },
+      3: { root: "@xs:col-span-3" },
+      4: { root: "@xs:col-span-4" },
+      5: { root: "@xs:col-span-5" },
+      6: { root: "@xs:col-span-6" },
+      7: { root: "@xs:col-span-7" },
+      8: { root: "@xs:col-span-8" },
+      9: { root: "@xs:col-span-9" },
+      10: { root: "@xs:col-span-10" },
+      11: { root: "@xs:col-span-11" },
+      12: { root: "@xs:col-span-12" },
+      full: { root: "@xs:col-span-full" }
+    },
+    start: {
+      1: { root: "col-start-1" },
+      2: { root: "col-start-2" },
+      3: { root: "col-start-3" },
+      4: { root: "col-start-4" },
+      5: { root: "col-start-5" },
+      6: { root: "col-start-6" },
+      7: { root: "col-start-7" },
+      8: { root: "col-start-8" },
+      9: { root: "col-start-9" },
+      10: { root: "col-start-10" },
+      11: { root: "col-start-11" },
+      12: { root: "col-start-12" },
+      13: { root: "col-start-13" },
+      auto: { root: "col-start-auto" }
+    }
+  }
+});
+var GridItem = forwardRef(
+  ({
+    children,
+    className,
+    classNames,
+    span,
+    spanXs,
+    spanSm,
+    spanMd,
+    spanLg,
+    spanXl,
+    start,
+    end,
+    rowSpan,
+    ...props
+  }, ref) => {
+    const styles = gridItem({ end, rowSpan, span, spanLg, spanMd, spanSm, spanXl, spanXs, start });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.root({ className: classNames?.root ?? className }),
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+GridItem.displayName = "GridItem";
+var grid = tv({
+  defaultVariants: {
+    flow: "dense"
+  },
+  slots: {
+    root: [
+      "u-grid",
+      "grid",
+      "grid-cols-12",
+      "gap-[var(--spacing-grid-gutter)]",
+      "w-full",
+      "container-[grid]/inline-size"
+    ]
+  },
+  variants: {
+    align: {
+      center: { root: "content-center" },
+      end: { root: "content-end" },
+      start: { root: "content-start" },
+      stretch: { root: "content-stretch" }
+    },
+    flow: {
+      column: { root: "grid-auto-flow-col" },
+      dense: { root: "grid-auto-flow-dense" },
+      row: { root: "grid-auto-flow-row" }
+    }
+  }
+});
+var GridContext = createContext(null);
+function useGrid() {
+  const context = useContext(GridContext);
+  if (!context) {
+    throw new Error("useGrid must be used within a <Grid.Root />");
+  }
+  return context;
+}
+var GridRoot = forwardRef(
+  ({ children, className, classNames, flow, align, ...props }, ref) => {
+    const styles = grid({ align, flow });
+    return /* @__PURE__ */ jsx(GridContext.Provider, { value: { styles }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.root({ className: classNames?.root ?? className }),
+        ref,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+GridRoot.displayName = "GridRoot";
+
+// src/grid/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Item: () => GridItem,
+  Root: () => GridRoot
+});
+
+export { index_parts_exports as Grid, gridItem, useGrid };

package/dist/heading/index.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ElementType } from 'react';
+
+declare const levelVariants: {
+    readonly 1: readonly ["text-2xl"];
+    readonly 2: readonly ["text-xl"];
+    readonly 3: readonly ["text-lg"];
+    readonly 4: readonly ["text-md"];
+    readonly 5: readonly ["text-sm"];
+    readonly 6: readonly ["text-xs"];
+};
+type HeadingLevel = keyof typeof levelVariants;
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    as?: ElementType;
+    className?: string;
+    level?: HeadingLevel;
+    locale?: string;
+}
+declare const Heading: {
+    ({ as, children, className, level, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Heading, type HeadingLevel, type HeadingProps };

package/dist/{components/heading.js → heading/index.js}

@@ -1,17 +1,9 @@
-import { defineConfig, cx } from 'cva';
-import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { tv, cn } from '@regardio/tailwind/utils';
+import { replaceShyInString } from '@regardio/js/text';
 import React, { isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-// src/utils/cn.ts
-var { cva, compose } = defineConfig({
-  hooks: {
-    onComplete: (className) => {
-      return twMerge(className);
-    }
-  }
-});
-var cn = (...inputs) => twMerge(cx(inputs));
+// src/heading/heading.tsx
 var lowerCaseSzett = (text, _returnType) => {
   const processString = (str) => {
     const parts = str.split(/(ß)/g);
@@ -42,9 +34,6 @@ var lowerCaseSzett = (text, _returnType) => {
   }
   return text;
 };
-function replaceShyInString(input) {
-  return input.replace(/­/g, "\xAD");
-}
 function replaceShyInReactNode(node) {
   if (typeof node === "string") {
     return node.replace(/\u00AD/g, "");
@@ -71,31 +60,24 @@ function shy(input) {
   }
   return replaceShyInReactNode(input);
 }
-var heading = cva({
+var levelVariants = {
+  1: ["text-2xl"],
+  2: ["text-xl"],
+  3: ["text-lg"],
+  4: ["text-md"],
+  5: ["text-sm"],
+  6: ["text-xs"]
+};
+var heading = tv({
   base: [],
   defaultVariants: {
     level: 3
   },
   variants: {
-    level: {
-      1: ["text-2xl"],
-      2: ["text-xl"],
-      3: ["text-lg"],
-      4: ["text-md"],
-      5: ["text-sm"],
-      6: ["text-xs"]
-    },
-    variant: {}
+    level: levelVariants
   }
 });
-var Heading = ({
-  as,
-  children,
-  className,
-  level = 2,
-  variant,
-  ...props
-}) => {
+var Heading = ({ as, children, className, level = 2, ...props }) => {
   const word = lowerCaseSzett(shy(children));
   const Component = as || `h${level}`;
   return /* @__PURE__ */ jsx(
@@ -103,8 +85,7 @@ var Heading = ({
     {
       className: cn(
         heading({
-          level,
-          variant
+          level
         }),
         className
       ),

package/dist/highlight/index.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+declare const highlightVariants: {
+    readonly primary: readonly ["highlight"];
+};
+type HighlightVariant = keyof typeof highlightVariants;
+interface HighlightProps extends ComponentProps<'mark'> {
+    variant?: HighlightVariant;
+}
+declare const Highlight: ({ children, className, variant }: HighlightProps) => react_jsx_runtime.JSX.Element;
+
+export { Highlight, type HighlightProps };

package/dist/{components/highlight.js → highlight/index.js}

@@ -1,31 +1,23 @@
-import { defineConfig } from 'cva';
-import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { tv } from '@regardio/tailwind/utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/utils/cn.ts
-var { cva, compose } = defineConfig({
-  hooks: {
-    onComplete: (className) => {
-      return twMerge(className);
-    }
-  }
-});
-var li = cva({
+// src/highlight/highlight.tsx
+var highlightVariants = {
+  primary: ["highlight"]
+};
+var highlight = tv({
   defaultVariants: {
     variant: "primary"
   },
   variants: {
-    variant: {
-      primary: ["highlight"]
-    }
+    variant: highlightVariants
   }
 });
-var Highlight = (props) => {
-  const { children, className, variant } = props;
+var Highlight = ({ children, className, variant }) => {
   return /* @__PURE__ */ jsxs(
     "mark",
     {
-      className: li({
+      className: highlight({
         className,
         variant
       }),

package/dist/hooks/{use-current-route-data.js → use-current-route-data/index.js}

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useLocation, useMatches } from 'react-router';
 
-// src/hooks/use-current-route-data.ts
+// src/hooks/use-current-route-data/use-current-route-data.ts
 function useCurrentRouteData() {
   const location = useLocation();
   const matchingRoutes = useMatches();

package/dist/hooks/{use-focus-search.js → use-focus-search/index.js}

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-// src/hooks/use-focus-search.ts
+// src/hooks/use-focus-search/use-focus-search.ts
 function useFocusSearch(ref) {
   useEffect(() => {
     function handleKeyDown(event) {

package/dist/hooks/{use-matches-data.js → use-matches-data/index.js}

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useMatches } from 'react-router';
 
-// src/hooks/use-matches-data.ts
+// src/hooks/use-matches-data/use-matches-data.ts
 function useMatchesData(id) {
   const matchingRoutes = useMatches();
   const route = useMemo(() => {

package/dist/hooks/{use-media-query.js → use-media-query/index.js}

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-// src/hooks/use-media-query.ts
+// src/hooks/use-media-query/use-media-query.ts
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {

package/dist/hooks/{use-mobile.js → use-mobile/index.js}

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-// src/hooks/use-mobile.ts
+// src/hooks/use-mobile/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
   const [isMobile, setIsMobile] = useState(void 0);

package/dist/hooks/use-nonce/index.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+
+declare const NonceProvider: react.Provider<string>;
+declare const useNonce: () => string;
+
+export { NonceProvider, useNonce };

package/dist/hooks/use-nonce/index.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+// src/hooks/use-nonce/use-nonce.ts
+var NonceContext = createContext("");
+var NonceProvider = NonceContext.Provider;
+var useNonce = () => useContext(NonceContext);
+
+export { NonceProvider, useNonce };

package/dist/hooks/{use-orientation.d.ts → use-orientation/index.d.ts}

@@ -8,4 +8,4 @@ type Orientation = 'portrait' | 'landscape';
  */
 declare function useOrientation(): Orientation;
 
-export { type Orientation, useOrientation };
+export { useOrientation };

package/dist/hooks/{use-orientation.js → use-orientation/index.js}

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-// src/hooks/use-orientation.ts
+// src/hooks/use-orientation/use-orientation.ts
 function useOrientation() {
   const [orientation, setOrientation] = useState(() => {
     if (typeof window !== "undefined") {

package/dist/hooks/{use-user.js → use-user/index.js}

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-// src/hooks/use-user.tsx
+// src/hooks/use-user/use-user.tsx
 var defaultContextValue = {
   isLoading: false,
   user: null

package/dist/{components/icon-button.js → icon-button/index.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 
-// src/components/icon-button.tsx
+// src/icon-button/icon-button.tsx
 var IconButton = (props) => {
   const { className, icon } = props;
   const defaultClassName = "p-0";

package/dist/{components/if.js → if/index.js}

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-// src/components/if.tsx
+// src/if/if.tsx
 function If({
   condition,
   children,

package/dist/{components/iframe.js → iframe/index.js}

@@ -1,16 +1,7 @@
-import { defineConfig, cx } from 'cva';
-import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { cn } from '@regardio/tailwind/utils';
 import { jsx } from 'react/jsx-runtime';
 
-// src/utils/cn.ts
-var { cva, compose } = defineConfig({
-  hooks: {
-    onComplete: (className) => {
-      return twMerge(className);
-    }
-  }
-});
-var cn = (...inputs) => twMerge(cx(inputs));
+// src/iframe/iframe.tsx
 var Iframe = ({ src, title, className }) => /* @__PURE__ */ jsx(
   "iframe",
   {

package/dist/{components/link.d.ts → link/index.d.ts}

@@ -1,5 +1,3 @@
-import * as cva from 'cva';
-import { VariantProps } from 'cva';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { NavLinkProps } from 'react-router';
@@ -21,23 +19,31 @@ interface LinkBaseProps extends Omit<NavLinkProps, 'to'> {
     viewTransition?: boolean;
 }
 declare const LinkBase: ({ className, to, routeKey, children, onClick, viewTransition, ...props }: LinkBaseProps) => react_jsx_runtime.JSX.Element;
-declare const link: (props?: ({
-    arrow?: "darr" | "larr" | "rarr" | "uarr" | undefined;
-    variant?: "link" | "button" | "primary" | "code" | "navtitle" | "subtitle" | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
-interface LinkProps extends Omit<NavLinkProps, 'to'>, VariantProps<typeof link> {
+declare const arrowVariants: {
+    readonly darr: "darr";
+    readonly larr: "larr";
+    readonly rarr: "rarr";
+    readonly uarr: "uarr";
+};
+declare const linkVariants: {
+    readonly button: readonly ["block", "button", "mt-s", "relative", "rarr", "text-right", "text-sm", "tracking-wider", "uppercase"];
+    readonly code: readonly ["font-monospace"];
+    readonly link: readonly ["rarr", "!bg-transparent", "uppercase", "!tracking-wider"];
+    readonly navtitle: readonly ["block", "uppercase", "tracking-wider"];
+    readonly primary: readonly [];
+    readonly subtitle: readonly ["text-lg"];
+};
+type LinkArrow = keyof typeof arrowVariants;
+type LinkVariant = keyof typeof linkVariants;
+interface LinkProps extends Omit<NavLinkProps, 'to'> {
+    arrow?: LinkArrow;
     to?: string | Partial<{
         pathname?: string;
         search?: string;
         hash?: string;
     }>;
     routeKey?: string;
+    variant?: LinkVariant;
     viewTransition?: boolean;
 }
 declare const Link: ({ arrow, children, className, routeKey, to, variant, viewTransition, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;

package/dist/{components/link.js → link/index.js}

@@ -1,17 +1,10 @@
+import { tv } from '@regardio/tailwind/utils';
 import React, { createContext, useContext, useCallback, isValidElement, cloneElement } from 'react';
 import { NavLink } from 'react-router';
-import { defineConfig } from 'cva';
-import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import '@regardio/js/text';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-// src/components/link.tsx
-var { cva, compose } = defineConfig({
-  hooks: {
-    onComplete: (className) => {
-      return twMerge(className);
-    }
-  }
-});
+// src/link/link.tsx
 var lowerCaseSzett = (text, _returnType) => {
   const processString = (str) => {
     const parts = str.split(/(ß)/g);
@@ -125,36 +118,38 @@ var LinkBase = ({
     }
   );
 };
-var link = cva({
+var arrowVariants = {
+  darr: "darr",
+  larr: "larr",
+  rarr: "rarr",
+  uarr: "uarr"
+};
+var linkVariants = {
+  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 = tv({
   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"]
-    }
+    arrow: arrowVariants,
+    variant: linkVariants
   }
 });
 var Link = ({
@@ -173,7 +168,7 @@ var Link = ({
       ...props,
       className: link({
         arrow,
-        className,
+        className: typeof className === "string" ? className : void 0,
         variant
       }),
       routeKey,