@quen-ui/components 0.0.14 → 1.0.0

package/dist/Highlight/helpers.es.js

@@ -0,0 +1,147 @@
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function normalizeRanges(ranges, textLength) {
+  const cleaned = ranges.map((r) => ({
+    start: Math.max(0, Math.min(textLength, r.start)),
+    end: Math.max(0, Math.min(textLength, r.end))
+  })).filter((r) => r.end > r.start).sort((a, b) => a.start - b.start);
+  if (cleaned.length === 0) return [];
+  const merged = [];
+  let prev = cleaned[0];
+  for (let i = 1; i < cleaned.length; i++) {
+    const cur = cleaned[i];
+    if (cur.start <= prev.end) {
+      prev.end = Math.max(prev.end, cur.end);
+    } else {
+      merged.push({ ...prev, text: "" });
+      prev = cur;
+    }
+  }
+  merged.push({ ...prev, text: "" });
+  return merged;
+}
+function buildChunksFromRanges(text, ranges, maxChunks) {
+  const chunks = [];
+  let cursor = 0;
+  let matchesUsed = 0;
+  for (const r of ranges) {
+    if (cursor < r.start) {
+      chunks.push({ type: "text", text: text.slice(cursor, r.start) });
+    }
+    if (matchesUsed < maxChunks) {
+      chunks.push({
+        type: "match",
+        text: text.slice(r.start, r.end),
+        start: r.start,
+        end: r.end
+      });
+      matchesUsed++;
+    } else {
+      chunks.push({ type: "text", text: text.slice(r.start, text.length) });
+      cursor = text.length;
+      break;
+    }
+    cursor = r.end;
+  }
+  if (cursor < text.length) {
+    chunks.push({ type: "text", text: text.slice(cursor) });
+  }
+  return chunks;
+}
+function buildRegexFromQuery(query, {
+  caseSensitive = false,
+  escapeQuery = true,
+  splitByWords = false
+}) {
+  if (!query) return null;
+  if (query instanceof RegExp) {
+    const flags = query.flags || "";
+    const finalFlags = caseSensitive ? flags.replace("i", "") : flags.includes("i") ? flags : flags + "i";
+    try {
+      return new RegExp(query.source, finalFlags);
+    } catch {
+      return null;
+    }
+  }
+  const arr = Array.isArray(query) ? query.filter(Boolean) : [query];
+  const tokens = arr.map((t) => escapeQuery ? escapeRegExp(t) : t).filter((t) => t.length > 0).map((t) => splitByWords ? `\\b${t}\\b` : t);
+  if (tokens.length === 0) return null;
+  const pattern = tokens.join("|");
+  try {
+    return new RegExp(pattern, caseSensitive ? "g" : "gi");
+  } catch {
+    return null;
+  }
+}
+function resolveOverlaps(matches) {
+  const sorted = matches.slice().sort((a, b) => a.start - b.start || b.end - b.end);
+  sorted.sort((a, b) => a.start - b.start || b.end - b.start - (a.end - a.start));
+  const kept = [];
+  for (const m of sorted) {
+    if (kept.length === 0) {
+      kept.push(m);
+      continue;
+    }
+    const last = kept[kept.length - 1];
+    if (m.start >= last.end) {
+      kept.push(m);
+    } else {
+      if (m.end > last.end) {
+        continue;
+      }
+    }
+  }
+  kept.sort((a, b) => a.start - b.start);
+  return kept;
+}
+function collectMatches(subject, regex) {
+  if (!regex.global) {
+    const flags = regex.flags.includes("g") ? regex.flags : regex.flags + "g";
+    regex = new RegExp(regex.source, flags);
+  }
+  const matches = [];
+  let m;
+  regex.lastIndex = 0;
+  while ((m = regex.exec(subject)) !== null) {
+    const text = m[0];
+    if (!text) {
+      regex.lastIndex++;
+      continue;
+    }
+    const start = m.index;
+    const end = start + text.length;
+    matches.push({ start, end, text });
+  }
+  return resolveOverlaps(matches);
+}
+function buildChunks(subject, matches, maxChunks = Infinity) {
+  const chunks = [];
+  let cursor = 0;
+  let countMatches = 0;
+  for (const m of matches) {
+    if (m.start > cursor) {
+      chunks.push({ type: "text", text: subject.slice(cursor, m.start) });
+    }
+    if (countMatches < maxChunks) {
+      chunks.push({ type: "match", text: subject.slice(m.start, m.end), start: m.start, end: m.end });
+      countMatches++;
+    } else {
+      chunks.push({ type: "text", text: subject.slice(m.start, subject.length) });
+      cursor = subject.length;
+      break;
+    }
+    cursor = m.end;
+  }
+  if (cursor < subject.length) {
+    chunks.push({ type: "text", text: subject.slice(cursor) });
+  }
+  return chunks;
+}
+export {
+  buildChunks,
+  buildChunksFromRanges,
+  buildRegexFromQuery,
+  collectMatches,
+  normalizeRanges
+};

package/dist/Highlight/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Highlight } from './Highlight';
+export type { IHighlightProps } from './types';

package/dist/Highlight/styles.cjs.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const HighlightStyled = styled.mark`
+  padding: 0.05em 0.15em;
+  border-radius: 0.15rem;
+  background: ${({ color, theme }) => color && color in theme.colors ? theme.colors[color][3] : color};
+  color: inherit;
+  font-weight: 600;
+`;
+exports.HighlightStyled = HighlightStyled;

package/dist/Highlight/styles.d.ts

@@ -0,0 +1,4 @@
+import { IHighlightProps } from './types';
+export declare const HighlightStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {
+    color: IHighlightProps["color"];
+}>> & string;

package/dist/Highlight/styles.es.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+const HighlightStyled = styled.mark`
+  padding: 0.05em 0.15em;
+  border-radius: 0.15rem;
+  background: ${({ color, theme }) => color && color in theme.colors ? theme.colors[color][3] : color};
+  color: inherit;
+  font-weight: 600;
+`;
+export {
+  HighlightStyled
+};

package/dist/Highlight/types.d.ts

@@ -0,0 +1,53 @@
+import { JSX, CSSProperties, ReactNode, HTMLAttributes, ComponentType } from 'react';
+import { IQuenUITheme } from '../../../theme/src';
+export interface IHighlightProps {
+    /** Original text */
+    children?: string;
+    /** Request for highlighting */
+    query?: string | string[] | RegExp | null;
+    /** Case-sensitive */
+    caseSensitive?: boolean;
+    /** Escape special RegExp characters */
+    escapeQuery?: boolean;
+    /** Highlight only whole words */
+    splitByWords?: boolean;
+    /** Maximum number of highlighted fragments */
+    maxChunks?: number;
+    /** Tag for highlighting */
+    highlightTag?: keyof JSX.IntrinsicElements;
+    /** Additional class for the selected element */
+    highlightClassName?: string;
+    /** Inline styles for the selected element */
+    highlightStyle?: CSSProperties;
+    /** Color of highlighting */
+    color?: keyof IQuenUITheme["colors"] | string;
+    /** The ability to pass a custom component instead of a highlightTag */
+    highlightComponent?: ComponentType<{
+        children?: ReactNode;
+        className?: string;
+        style?: CSSProperties;
+    }>;
+    /** Additional HTML attributes for the root element */
+    rootProps?: HTMLAttributes<HTMLSpanElement>;
+    /** Highlight explicit ranges (start/end char indexes).
+     * If provided, takes precedence over query.
+     */
+    ranges?: Array<{
+        start: number;
+        end: number;
+    }>;
+}
+export type TMatchChunk = {
+    type: "text";
+    text: string;
+} | {
+    type: "match";
+    text: string;
+    start: number;
+    end: number;
+};
+export type TMatch = {
+    start: number;
+    end: number;
+    text: string;
+};

package/dist/Image/styles.cjs.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
-const polished = require("polished");
 const Button = require("../Button/Button.cjs.js");
 const ImageContainer = styled.div`
   position: relative;
@@ -22,7 +21,7 @@ const ImagePlaceholderWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f0f0f0;
+  background-color: ${({ theme }) => theme.components.Image.overlayBackground};
 `;
 const ImagePreviewOverlay = styled.div`
   position: absolute;
@@ -30,11 +29,11 @@ const ImagePreviewOverlay = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: ${({ theme }) => theme.components.Image.overlayBackground};
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: ${({ theme }) => theme.components.Image.color};
   font-size: 1.2rem;
   opacity: 0;
   transition: opacity 0.3s ease;
@@ -49,7 +48,7 @@ const ImageFullscreenOverlay = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${({ theme }) => polished.rgba(theme.colors.gray["2"], 0.5)};
+  background-color: ${({ theme }) => theme.components.Image.overlayBackground};
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/Image/styles.es.js

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { rgba } from "polished";
 import Button from "../Button/Button.es.js";
 const ImageContainer = styled.div`
   position: relative;
@@ -20,7 +19,7 @@ const ImagePlaceholderWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f0f0f0;
+  background-color: ${({ theme }) => theme.components.Image.overlayBackground};
 `;
 const ImagePreviewOverlay = styled.div`
   position: absolute;
@@ -28,11 +27,11 @@ const ImagePreviewOverlay = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: ${({ theme }) => theme.components.Image.overlayBackground};
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: ${({ theme }) => theme.components.Image.color};
   font-size: 1.2rem;
   opacity: 0;
   transition: opacity 0.3s ease;
@@ -47,7 +46,7 @@ const ImageFullscreenOverlay = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${({ theme }) => rgba(theme.colors.gray["2"], 0.5)};
+  background-color: ${({ theme }) => theme.components.Image.overlayBackground};
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/InputBase/InputBase.cjs.js

@@ -0,0 +1,32 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const InputBase = ({
+  label,
+  className,
+  size = "m",
+  id,
+  required,
+  style,
+  error,
+  disabled,
+  children,
+  leftContent,
+  rightContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.InputBaseWrapper, { className, style, ...props, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size, as: "label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "quen-ui__input-base--required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(styles.InputBaseContainer, { size, error, disabled, children: [
+      leftContent,
+      children,
+      rightContent
+    ] }),
+    typeof error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "quen-ui__input-base--error-message", size: "xs", children: error })
+  ] });
+};
+module.exports = InputBase;

package/dist/InputBase/InputBase.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { IInputBaseProps } from './types';
+declare const InputBase: ({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element;
+export default InputBase;

package/dist/InputBase/InputBase.es.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { InputBaseWrapper, InputBaseContainer } from "./styles.es.js";
+import Text from "../typography/Text/Text.es.js";
+const InputBase = ({
+  label,
+  className,
+  size = "m",
+  id,
+  required,
+  style,
+  error,
+  disabled,
+  children,
+  leftContent,
+  rightContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(InputBaseWrapper, { className, style, ...props, children: [
+    label && /* @__PURE__ */ jsxs(Text, { size, as: "label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "quen-ui__input-base--required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(InputBaseContainer, { size, error, disabled, children: [
+      leftContent,
+      children,
+      rightContent
+    ] }),
+    typeof error === "string" && /* @__PURE__ */ jsx(Text, { className: "quen-ui__input-base--error-message", size: "xs", children: error })
+  ] });
+};
+export {
+  InputBase as default
+};

package/dist/InputBase/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InputBase } from './InputBase';
+export type { IInputBaseProps } from './types';

package/dist/InputBase/styles.cjs.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const InputBaseContainer = styled.div.attrs({
+  className: "quen-ui__input-base__container"
+}).withConfig({
+  shouldForwardProp: (prop) => !["size", "error", "disabled"].includes(prop)
+})`
+  height: ${({ size, theme }) => theme.control.height[size]};
+  border-radius: ${({ theme }) => theme.control.radius};
+  border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
+  display: flex;
+  align-items: center;
+  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  gap: 0.5rem;
+
+  svg {
+    color: ${({ theme }) => theme.components.Input.iconColor};
+  }
+
+  &:hover {
+    ${({ theme }) => styled.css`
+        border-bottom: ${theme.control.borderWidth} solid
+          ${theme.colors[theme.primaryColor][9]};
+      `}
+  }
+
+  ${({ error, theme }) => error && styled.css`
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.components.Input.errorColor};
+    `};
+
+  ${({ disabled, theme }) => disabled && styled.css`
+      background: ${theme.components.Input.disabledBackground};
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.components.Input.disabledColor}!important;
+    `};
+`;
+const InputBaseWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+
+  .quen-ui__input-base--required {
+    color: ${({ theme }) => theme.components.Input.errorColor};
+  }
+
+  .quen-ui__input-base--error-message {
+    color: ${({ theme }) => theme.components.Input.errorColor};
+  }
+
+  &.quen-ui__input-base--focus-input {
+    ${InputBaseContainer} {
+      border-bottom: ${({ theme }) => `${polished.math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
+    }
+  }
+`;
+exports.InputBaseContainer = InputBaseContainer;
+exports.InputBaseWrapper = InputBaseWrapper;

package/dist/InputBase/styles.d.ts

@@ -0,0 +1,7 @@
+import { TQuenSize } from '../types/size';
+export declare const InputBaseContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, {
+    size: TQuenSize;
+    error?: string | boolean;
+    disabled?: boolean;
+}>> & string;
+export declare const InputBaseWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/InputBase/styles.es.js

@@ -0,0 +1,61 @@
+import styled, { css } from "styled-components";
+import { math } from "polished";
+const InputBaseContainer = styled.div.attrs({
+  className: "quen-ui__input-base__container"
+}).withConfig({
+  shouldForwardProp: (prop) => !["size", "error", "disabled"].includes(prop)
+})`
+  height: ${({ size, theme }) => theme.control.height[size]};
+  border-radius: ${({ theme }) => theme.control.radius};
+  border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
+  display: flex;
+  align-items: center;
+  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  gap: 0.5rem;
+
+  svg {
+    color: ${({ theme }) => theme.components.Input.iconColor};
+  }
+
+  &:hover {
+    ${({ theme }) => css`
+        border-bottom: ${theme.control.borderWidth} solid
+          ${theme.colors[theme.primaryColor][9]};
+      `}
+  }
+
+  ${({ error, theme }) => error && css`
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.components.Input.errorColor};
+    `};
+
+  ${({ disabled, theme }) => disabled && css`
+      background: ${theme.components.Input.disabledBackground};
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.components.Input.disabledColor}!important;
+    `};
+`;
+const InputBaseWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+
+  .quen-ui__input-base--required {
+    color: ${({ theme }) => theme.components.Input.errorColor};
+  }
+
+  .quen-ui__input-base--error-message {
+    color: ${({ theme }) => theme.components.Input.errorColor};
+  }
+
+  &.quen-ui__input-base--focus-input {
+    ${InputBaseContainer} {
+      border-bottom: ${({ theme }) => `${math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
+    }
+  }
+`;
+export {
+  InputBaseContainer,
+  InputBaseWrapper
+};

package/dist/InputBase/types.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TQuenSize } from '../types/size';
+export interface IInputBaseProps {
+    /** Disable input interaction */
+    disabled?: boolean;
+    /** Control input size */
+    size?: TQuenSize;
+    /** Input label text */
+    label?: string;
+    /** Mark as required field */
+    required?: boolean;
+    /** Error message or error state flag */
+    error?: string | boolean;
+    /** Left adornment (icon/prefix) */
+    leftContent?: ReactNode;
+    /** 	Right adornment (icon/suffix) */
+    rightContent?: ReactNode;
+    /** DOM ID for label association */
+    id?: string;
+    /** Container class name */
+    className?: string;
+    /** 	Show clear button */
+    style?: CSSProperties;
+    [key: string]: any;
+}