@regardio/react 0.4.7 → 0.5.1

package/dist/utils/is-route-active.d.ts

@@ -1,19 +0,0 @@
-/**
- * @name isRouteActive
- * @description A function to check if a route is active. This is used to
- * @param end
- * @param path
- * @param currentPath
- */
-declare function isRouteActive(path: string, currentPath: string, end?: boolean | ((path: string) => boolean) | undefined): boolean;
-/**
- * @name checkIfRouteIsActive
- * @description A function to check if a route is active. This is used to
- * highlight the active link in the navigation.
- * @param targetLink - The link to check against
- * @param currentRoute - the current route
- * @param depth - how far down should segments be matched?
- */
-declare function checkIfRouteIsActive(targetLink: string, currentRoute: string, depth?: number): boolean;
-
-export { checkIfRouteIsActive, isRouteActive };

package/dist/utils/is-route-active.js

@@ -1,56 +0,0 @@
-// src/utils/is-route-active.ts
-var ROOT_PATH = "/";
-function isRouteActive(path, currentPath, end) {
-  if (path === currentPath) {
-    return true;
-  }
-  if (typeof end === "function") {
-    return !end(currentPath);
-  }
-  const defaultEnd = end ?? true;
-  const oneLevelDeep = 1;
-  const threeLevelsDeep = 3;
-  const depth = defaultEnd ? oneLevelDeep : threeLevelsDeep;
-  return checkIfRouteIsActive(path, currentPath, depth);
-}
-function checkIfRouteIsActive(targetLink, currentRoute, depth = 1) {
-  const currentRoutePath = currentRoute.split("?")[0] ?? "";
-  if (!isRoot(currentRoutePath) && isRoot(targetLink)) {
-    return false;
-  }
-  if (!currentRoutePath.includes(targetLink)) {
-    return false;
-  }
-  const isSameRoute = targetLink === currentRoutePath;
-  if (isSameRoute) {
-    return true;
-  }
-  return hasMatchingSegments(targetLink, currentRoutePath, depth);
-}
-function splitIntoSegments(href) {
-  return href.split("/").filter(Boolean);
-}
-function hasMatchingSegments(targetLink, currentRoute, depth) {
-  const segments = splitIntoSegments(targetLink);
-  const matchingSegments = numberOfMatchingSegments(currentRoute, segments);
-  if (targetLink === currentRoute) {
-    return true;
-  }
-  return matchingSegments > segments.length - (depth - 1);
-}
-function numberOfMatchingSegments(href, segments) {
-  let count = 0;
-  for (const segment of splitIntoSegments(href)) {
-    if (segments.includes(segment)) {
-      count += 1;
-    } else {
-      return count;
-    }
-  }
-  return count;
-}
-function isRoot(path) {
-  return path === ROOT_PATH;
-}
-
-export { checkIfRouteIsActive, isRouteActive };

package/dist/utils/text.d.ts

@@ -1,24 +0,0 @@
-import react__default, { ReactNode } from 'react';
-
-declare const lowerCaseSzett: (text: ReactNode | string, _returnType?: "string") => ReactNode;
-declare function toBoolean(value: string | boolean | null | undefined): boolean;
-declare function shy(input: string | ReactNode | null): string | ReactNode | null;
-/**
- * Replace straight quotes with typographically correct quotes for the given locale.
- *
- * @param text - The text containing straight quotes
- * @param locale - The locale to use for quote style (e.g., 'en', 'de', 'fr')
- * @returns Text with typographic quotes
- *
- * @example
- * typographicQuotes('"Hello"', 'en') // → '"Hello"'
- * typographicQuotes('"Hello"', 'de') // → '„Hello"'
- * typographicQuotes('"Hello"', 'fr') // → '« Hello »'
- */
-declare function typographicQuotes(text: string, locale: string): string;
-/**
- * @deprecated Use `typographicQuotes` for quote replacement and `shy` separately
- */
-declare function replaceSpecialChars(text: string, locale: string): react__default.ReactNode;
-
-export { lowerCaseSzett, replaceSpecialChars, shy, toBoolean, typographicQuotes };

package/dist/utils/text.js

@@ -1,127 +0,0 @@
-import React, { isValidElement, cloneElement } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-// src/utils/text.tsx
-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;
-};
-function toBoolean(value) {
-  if (typeof value === "boolean") {
-    return value;
-  }
-  return value === "true" || value === "1";
-}
-function replaceShyInString(input) {
-  return input.replace(/­/g, "\xAD");
-}
-function replaceShyInReactNode(node) {
-  if (typeof node === "string") {
-    return node.replace(/\u00AD/g, "");
-  }
-  if (isValidElement(node)) {
-    const element = node;
-    const { children, ...props } = element.props;
-    return cloneElement(element, {
-      ...props,
-      children: replaceShyInReactNode(children)
-    });
-  }
-  if (Array.isArray(node)) {
-    return node.map((child, index) => /* @__PURE__ */ jsx(React.Fragment, { children: replaceShyInReactNode(child) }, index.toString()));
-  }
-  return node;
-}
-function shy(input) {
-  if (input === null) {
-    return null;
-  }
-  if (typeof input === "string") {
-    return replaceShyInString(input);
-  }
-  return replaceShyInReactNode(input);
-}
-var quoteStyles = {
-  cs: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
-  // Danish, Norwegian - » « › ‹
-  da: { close: "\xAB", closeSingle: "\u203A", open: "\xBB", openSingle: "\u2039" },
-  // German (Germany, Austria) - „ " ‚ '
-  de: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
-  // German (Switzerland) - « » ‹ ›
-  "de-ch": { close: "\xBB", closeSingle: "\u203A", open: "\xAB", openSingle: "\u2039" },
-  // English (US, UK, etc.) - " " ' '
-  en: { close: "\u201D", closeSingle: "\u2019", open: "\u201C", openSingle: "\u2018" },
-  // Spanish, Italian, Portuguese - « » " "
-  es: { close: "\xBB", closeSingle: "\u201D", open: "\xAB", openSingle: "\u201C" },
-  fi: { close: "\u201D", closeSingle: "\u2019", open: "\u201D", openSingle: "\u2019" },
-  // French - « » ‹ › (with spaces)
-  fr: { close: " \xBB", closeSingle: " \u203A", open: "\xAB ", openSingle: "\u2039 " },
-  hu: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
-  it: { close: "\xBB", closeSingle: "\u201D", open: "\xAB", openSingle: "\u201C" },
-  // Japanese - 「 」 『 』
-  ja: { close: "\u300D", closeSingle: "\u300F", open: "\u300C", openSingle: "\u300E" },
-  // Dutch - ' ' ' '
-  nl: { close: "\u2019", closeSingle: "\u2019", open: "\u2018", openSingle: "\u2018" },
-  no: { close: "\xAB", closeSingle: "\u203A", open: "\xBB", openSingle: "\u2039" },
-  // Polish, Czech, Hungarian - „ " ‚ '
-  pl: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
-  pt: { close: "\xBB", closeSingle: "\u201D", open: "\xAB", openSingle: "\u201C" },
-  // Russian - « » ‚ '
-  ru: { close: "\xBB", closeSingle: "\u2019", open: "\xAB", openSingle: "\u201A" },
-  // Swedish, Finnish - " " ' '
-  sv: { close: "\u201D", closeSingle: "\u2019", open: "\u201D", openSingle: "\u2019" },
-  // Chinese - 「 」 『 』
-  zh: { close: "\u300D", closeSingle: "\u300F", open: "\u300C", openSingle: "\u300E" }
-};
-function getQuoteStyle(locale) {
-  const normalized = locale.toLowerCase();
-  const exactMatch = quoteStyles[normalized];
-  if (exactMatch) {
-    return exactMatch;
-  }
-  const baseLanguage = normalized.split("-")[0];
-  if (baseLanguage) {
-    const baseMatch = quoteStyles[baseLanguage];
-    if (baseMatch) {
-      return baseMatch;
-    }
-  }
-  return quoteStyles.en;
-}
-function typographicQuotes(text, locale) {
-  const style = getQuoteStyle(locale);
-  let result = text.replace(/"([^"]*)"/g, `${style.open}$1${style.close}`);
-  result = result.replace(/'([^']*)'/g, `${style.openSingle}$1${style.closeSingle}`);
-  return result;
-}
-function replaceSpecialChars(text, locale) {
-  return shy(typographicQuotes(text, locale));
-}
-
-export { lowerCaseSzett, replaceSpecialChars, shy, toBoolean, typographicQuotes };

package/src/components/box.tsx

@@ -1,45 +0,0 @@
-import type { ComponentProps, ElementType } from 'react';
-
-import { cva, type VariantProps } from '../utils/cn';
-
-const box = cva({
-  defaultVariants: {
-    variant: 'primary',
-  },
-  variants: {
-    variant: {
-      aside: [],
-      code: ['font-monospace', 'overflow-scroll'],
-      container: ['u-container'],
-      flex: ['flex'],
-      grid: ['u-grid'],
-      main: [],
-      primary: [],
-      section: ['u-grid', 'content-start'],
-    },
-  },
-});
-
-export interface BoxProps extends ComponentProps<'div'>, VariantProps<typeof box> {
-  as?: ElementType;
-}
-
-export const Box = ({
-  as: Component = 'div',
-  children,
-  className,
-  variant,
-  ...props
-}: BoxProps) => {
-  return (
-    <Component
-      className={box({
-        className,
-        variant,
-      })}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-};

package/src/components/definition-list.tsx

@@ -1,90 +0,0 @@
-import type { ComponentProps } from 'react';
-import { cva, type VariantProps } from '../utils/cn';
-
-const dl = cva({
-  base: ['grid'],
-  defaultVariants: {
-    variant: 'primary',
-  },
-  variants: {
-    variant: {
-      primary: ['grid-cols-[auto,1fr]', 'gap-x-s', 'gap-y-2xs'], // Two-column grid with gap
-      unstyled: ['list-none', 'p-0', 'grid-cols-1'], // Unstyled, single column
-    },
-  },
-});
-
-const dt = cva({
-  base: [],
-  defaultVariants: {
-    variant: 'primary',
-  },
-  variants: {
-    variant: {
-      primary: ['uppercase', 'tracking-wide'],
-    },
-  },
-});
-
-const dd = cva({
-  base: ['mb-xs'],
-  defaultVariants: {
-    variant: 'primary',
-  },
-  variants: {
-    variant: {
-      primary: [],
-    },
-  },
-});
-
-export interface DefinitionListProps extends ComponentProps<'dl'>, VariantProps<typeof dl> {}
-
-export interface DtProps extends ComponentProps<'dt'>, VariantProps<typeof dt> {}
-
-export interface DdProps extends ComponentProps<'dd'>, VariantProps<typeof dd> {}
-
-export const DefinitionList = (props: DefinitionListProps) => {
-  const { children, className, variant } = props;
-
-  return (
-    <dl
-      className={dl({
-        className,
-        variant,
-      })}
-    >
-      {children}
-    </dl>
-  );
-};
-
-export const Dt = (props: DtProps) => {
-  const { children, className, variant } = props;
-
-  return (
-    <dt
-      className={dt({
-        className,
-        variant,
-      })}
-    >
-      {children}
-    </dt>
-  );
-};
-
-export const Dd = (props: DdProps) => {
-  const { children, className, variant } = props;
-
-  return (
-    <dd
-      className={dd({
-        className,
-        variant,
-      })}
-    >
-      {children}
-    </dd>
-  );
-};

package/src/components/item.tsx

@@ -1,340 +0,0 @@
-import type { ComponentProps, ElementType } from 'react';
-import { cva, type VariantProps } from '../utils/cn';
-import { Link } from './link';
-
-export const priorities = {
-  high: [],
-  low: [],
-  medium: [],
-};
-
-export const paddingValues = {
-  default: '',
-  gutter: 'p-grid-gutter',
-};
-
-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'],
-};
-
-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'],
-};
-
-export const themeColors = {
-  black: [],
-  blue: [],
-  coral: [],
-  cyan: [],
-  gray: [],
-  green: [],
-  lime: [],
-  neutral: [],
-  olive: [],
-  orange: [],
-  pink: [],
-  purple: [],
-  red: [],
-  teal: [],
-  unstyled: [],
-  white: [],
-  yellow: [],
-};
-
-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,
-  },
-});
-
-export interface ItemProps extends ComponentProps<'div'>, VariantProps<typeof item> {
-  as?: ElementType;
-  link?: string;
-}
-
-export const Item = ({
-  as: Component = 'div',
-  children,
-  className,
-  height,
-  link,
-  padding,
-  priority,
-  themeColor,
-  variant,
-  width,
-  ...props
-}: ItemProps) => {
-  return (
-    <Component
-      className={item({
-        className,
-        height,
-        padding,
-        priority,
-        themeColor,
-        variant,
-        width,
-      })}
-      {...props}
-    >
-      {link ? <Link to={link}>{children}</Link> : children}
-    </Component>
-  );
-};