@ark-ui/react 3.4.0 → 3.6.0

package/dist/components/file-upload/file-upload.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';

package/dist/components/file-upload/index.cjs

@@ -18,7 +18,8 @@ const fileUploadRootProvider = require('./file-upload-root-provider.cjs');
 const fileUploadTrigger = require('./file-upload-trigger.cjs');
 const useFileUpload = require('./use-file-upload.cjs');
 const useFileUploadContext = require('./use-file-upload-context.cjs');
-const fileUpload = require('./file-upload.cjs');
+const fileUpload$1 = require('./file-upload.cjs');
+const fileUpload = require('@zag-js/file-upload');
 
 
 
@@ -38,4 +39,8 @@ exports.FileUploadRootProvider = fileUploadRootProvider.FileUploadRootProvider;
 exports.FileUploadTrigger = fileUploadTrigger.FileUploadTrigger;
 exports.useFileUpload = useFileUpload.useFileUpload;
 exports.useFileUploadContext = useFileUploadContext.useFileUploadContext;
-exports.FileUpload = fileUpload;
+exports.FileUpload = fileUpload$1;
+Object.defineProperty(exports, "fileUploadAnatomy", {
+  enumerable: true,
+  get: () => fileUpload.anatomy
+});

package/dist/components/file-upload/index.d.cts

@@ -15,4 +15,5 @@ export { FileUploadRootProvider, type FileUploadRootProviderProps, type FileUplo
 export { FileUploadTrigger, type FileUploadTriggerProps, type FileUploadTriggerBaseProps, } from './file-upload-trigger';
 export { useFileUpload, type UseFileUploadProps, type UseFileUploadReturn } from './use-file-upload';
 export { useFileUploadContext, type UseFileUploadContext } from './use-file-upload-context';
+export { fileUploadAnatomy } from './file-upload.anatomy';
 export * as FileUpload from './file-upload';

package/dist/components/file-upload/index.d.ts

@@ -15,4 +15,5 @@ export { FileUploadRootProvider, type FileUploadRootProviderProps, type FileUplo
 export { FileUploadTrigger, type FileUploadTriggerProps, type FileUploadTriggerBaseProps, } from './file-upload-trigger';
 export { useFileUpload, type UseFileUploadProps, type UseFileUploadReturn } from './use-file-upload';
 export { useFileUploadContext, type UseFileUploadContext } from './use-file-upload-context';
+export { fileUploadAnatomy } from './file-upload.anatomy';
 export * as FileUpload from './file-upload';

package/dist/components/file-upload/index.js

@@ -16,3 +16,4 @@ export { useFileUpload } from './use-file-upload.js';
 export { useFileUploadContext } from './use-file-upload-context.js';
 import * as fileUpload from './file-upload.js';
 export { fileUpload as FileUpload };
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';

package/dist/components/highlight/highlight.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const useHighlight = require('./use-highlight.cjs');
+
+const Highlight = (props) => {
+  if (typeof props.text !== "string") {
+    throw new Error("[ark-ui/highlight] text must be a string");
+  }
+  const [highlightProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "query",
+    "text",
+    "ignoreCase",
+    "matchAll"
+  ]);
+  const chunks = useHighlight.useHighlight(highlightProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: chunks.map(
+    ({ text, match }, i) => match ? /* @__PURE__ */ jsxRuntime.jsx("mark", { ...localProps, children: text }, i) : /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: text }, i)
+  ) });
+};
+
+exports.Highlight = Highlight;

package/dist/components/highlight/highlight.d.cts

@@ -0,0 +1,8 @@
+import { Assign } from '../../types';
+import { UseHighlightProps } from './use-highlight';
+
+export interface HighlightBaseProps extends UseHighlightProps {
+}
+export interface HighlightProps extends Assign<React.ComponentProps<'mark'>, HighlightBaseProps> {
+}
+export declare const Highlight: (props: HighlightProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/highlight/highlight.d.ts

@@ -0,0 +1,8 @@
+import { Assign } from '../../types';
+import { UseHighlightProps } from './use-highlight';
+
+export interface HighlightBaseProps extends UseHighlightProps {
+}
+export interface HighlightProps extends Assign<React.ComponentProps<'mark'>, HighlightBaseProps> {
+}
+export declare const Highlight: (props: HighlightProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/highlight/highlight.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { useHighlight } from './use-highlight.js';
+
+const Highlight = (props) => {
+  if (typeof props.text !== "string") {
+    throw new Error("[ark-ui/highlight] text must be a string");
+  }
+  const [highlightProps, localProps] = createSplitProps()(props, [
+    "query",
+    "text",
+    "ignoreCase",
+    "matchAll"
+  ]);
+  const chunks = useHighlight(highlightProps);
+  return /* @__PURE__ */ jsx(Fragment, { children: chunks.map(
+    ({ text, match }, i) => match ? /* @__PURE__ */ jsx("mark", { ...localProps, children: text }, i) : /* @__PURE__ */ jsx(Fragment, { children: text }, i)
+  ) });
+};
+
+export { Highlight };

package/dist/components/highlight/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const highlight = require('./highlight.cjs');
+const useHighlight = require('./use-highlight.cjs');
+
+
+
+exports.Highlight = highlight.Highlight;
+exports.useHighlight = useHighlight.useHighlight;

package/dist/components/highlight/index.d.cts

@@ -0,0 +1,2 @@
+export { Highlight, type HighlightProps } from './highlight';
+export { useHighlight, type UseHighlightProps } from './use-highlight';

package/dist/components/highlight/index.d.ts

@@ -0,0 +1,2 @@
+export { Highlight, type HighlightProps } from './highlight';
+export { useHighlight, type UseHighlightProps } from './use-highlight';

package/dist/components/highlight/index.js

@@ -0,0 +1,2 @@
+export { Highlight } from './highlight.js';
+export { useHighlight } from './use-highlight.js';

package/dist/components/highlight/use-highlight.cjs

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+const escapeRegexp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
+const buildRegex = (queryProp, flags) => {
+  const query = queryProp.filter(Boolean).map((text) => escapeRegexp(text));
+  return new RegExp(`(${query.join("|")})`, flags);
+};
+const getRegexFlags = (ignoreCase = true, matchAll = true) => `${ignoreCase ? "i" : ""}${matchAll ? "g" : ""}`;
+const normalizeSpan = (spans, len) => {
+  const result = [];
+  const append = (start, end, match) => {
+    if (end - start > 0) result.push({ start, end, match });
+  };
+  if (spans.length === 0) {
+    append(0, len, false);
+  } else {
+    let lastIndex = 0;
+    for (const chunk of spans) {
+      append(lastIndex, chunk.start, false);
+      append(chunk.start, chunk.end, true);
+      lastIndex = chunk.end;
+    }
+    append(lastIndex, len, false);
+  }
+  return result;
+};
+const highlightWords = (props) => {
+  const flags = getRegexFlags(props.ignoreCase, props.matchAll);
+  const regex = buildRegex(Array.isArray(props.query) ? props.query : [props.query], flags);
+  const spans = [...props.text.matchAll(regex)].map((match) => ({
+    start: match.index || 0,
+    end: (match.index || 0) + match[0].length
+  }));
+  return normalizeSpan(spans, props.text.length).map((chunk) => ({
+    text: props.text.slice(chunk.start, chunk.end),
+    match: !!chunk.match
+  }));
+};
+const useHighlight = (props) => {
+  const { text, query } = props;
+  return react.useMemo(() => highlightWords({ text, query }), [text, query]);
+};
+
+exports.useHighlight = useHighlight;

package/dist/components/highlight/use-highlight.d.cts

@@ -0,0 +1,30 @@
+export interface RegexOptions {
+    /**
+     * Whether to ignore case while matching
+     */
+    ignoreCase?: boolean;
+    /**
+     * Whether to match multiple instances of the query
+     */
+    matchAll?: boolean;
+}
+export interface UseHighlightProps extends RegexOptions {
+    /**
+     * The text to highlight
+     */
+    text: string;
+    /**
+     * The query to highlight in the text
+     */
+    query: string | string[];
+}
+export interface HighlightChunk {
+    text: string;
+    match: boolean;
+}
+export interface HighlightSpan {
+    start: number;
+    end: number;
+    match?: boolean;
+}
+export declare const useHighlight: (props: UseHighlightProps) => HighlightChunk[];

package/dist/components/highlight/use-highlight.d.ts

@@ -0,0 +1,30 @@
+export interface RegexOptions {
+    /**
+     * Whether to ignore case while matching
+     */
+    ignoreCase?: boolean;
+    /**
+     * Whether to match multiple instances of the query
+     */
+    matchAll?: boolean;
+}
+export interface UseHighlightProps extends RegexOptions {
+    /**
+     * The text to highlight
+     */
+    text: string;
+    /**
+     * The query to highlight in the text
+     */
+    query: string | string[];
+}
+export interface HighlightChunk {
+    text: string;
+    match: boolean;
+}
+export interface HighlightSpan {
+    start: number;
+    end: number;
+    match?: boolean;
+}
+export declare const useHighlight: (props: UseHighlightProps) => HighlightChunk[];

package/dist/components/highlight/use-highlight.js

@@ -0,0 +1,45 @@
+'use client';
+import { useMemo } from 'react';
+
+const escapeRegexp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
+const buildRegex = (queryProp, flags) => {
+  const query = queryProp.filter(Boolean).map((text) => escapeRegexp(text));
+  return new RegExp(`(${query.join("|")})`, flags);
+};
+const getRegexFlags = (ignoreCase = true, matchAll = true) => `${ignoreCase ? "i" : ""}${matchAll ? "g" : ""}`;
+const normalizeSpan = (spans, len) => {
+  const result = [];
+  const append = (start, end, match) => {
+    if (end - start > 0) result.push({ start, end, match });
+  };
+  if (spans.length === 0) {
+    append(0, len, false);
+  } else {
+    let lastIndex = 0;
+    for (const chunk of spans) {
+      append(lastIndex, chunk.start, false);
+      append(chunk.start, chunk.end, true);
+      lastIndex = chunk.end;
+    }
+    append(lastIndex, len, false);
+  }
+  return result;
+};
+const highlightWords = (props) => {
+  const flags = getRegexFlags(props.ignoreCase, props.matchAll);
+  const regex = buildRegex(Array.isArray(props.query) ? props.query : [props.query], flags);
+  const spans = [...props.text.matchAll(regex)].map((match) => ({
+    start: match.index || 0,
+    end: (match.index || 0) + match[0].length
+  }));
+  return normalizeSpan(spans, props.text.length).map((chunk) => ({
+    text: props.text.slice(chunk.start, chunk.end),
+    match: !!chunk.match
+  }));
+};
+const useHighlight = (props) => {
+  const { text, query } = props;
+  return useMemo(() => highlightWords({ text, query }), [text, query]);
+};
+
+export { useHighlight };

package/dist/components/hover-card/hover-card.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';

package/dist/components/hover-card/hover-card.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';

package/dist/components/hover-card/index.cjs

@@ -12,7 +12,8 @@ const hoverCardRootProvider = require('./hover-card-root-provider.cjs');
 const hoverCardTrigger = require('./hover-card-trigger.cjs');
 const useHoverCard = require('./use-hover-card.cjs');
 const useHoverCardContext = require('./use-hover-card-context.cjs');
-const hoverCard = require('./hover-card.cjs');
+const hoverCard$1 = require('./hover-card.cjs');
+const hoverCard = require('@zag-js/hover-card');
 
 
 
@@ -26,4 +27,8 @@ exports.HoverCardRootProvider = hoverCardRootProvider.HoverCardRootProvider;
 exports.HoverCardTrigger = hoverCardTrigger.HoverCardTrigger;
 exports.useHoverCard = useHoverCard.useHoverCard;
 exports.useHoverCardContext = useHoverCardContext.useHoverCardContext;
-exports.HoverCard = hoverCard;
+exports.HoverCard = hoverCard$1;
+Object.defineProperty(exports, "hoverCardAnatomy", {
+  enumerable: true,
+  get: () => hoverCard.anatomy
+});

package/dist/components/hover-card/index.d.cts

@@ -9,4 +9,5 @@ export { HoverCardRootProvider, type HoverCardRootProviderProps, type HoverCardR
 export { HoverCardTrigger, type HoverCardTriggerProps, type HoverCardTriggerBaseProps, } from './hover-card-trigger';
 export { useHoverCard, type UseHoverCardProps, type UseHoverCardReturn } from './use-hover-card';
 export { useHoverCardContext, type UseHoverCardContext } from './use-hover-card-context';
+export { hoverCardAnatomy } from './hover-card.anatomy';
 export * as HoverCard from './hover-card';

package/dist/components/hover-card/index.d.ts

@@ -9,4 +9,5 @@ export { HoverCardRootProvider, type HoverCardRootProviderProps, type HoverCardR
 export { HoverCardTrigger, type HoverCardTriggerProps, type HoverCardTriggerBaseProps, } from './hover-card-trigger';
 export { useHoverCard, type UseHoverCardProps, type UseHoverCardReturn } from './use-hover-card';
 export { useHoverCardContext, type UseHoverCardContext } from './use-hover-card-context';
+export { hoverCardAnatomy } from './hover-card.anatomy';
 export * as HoverCard from './hover-card';

package/dist/components/hover-card/index.js

@@ -10,3 +10,4 @@ export { useHoverCard } from './use-hover-card.js';
 export { useHoverCardContext } from './use-hover-card-context.js';
 import * as hoverCard from './hover-card.js';
 export { hoverCard as HoverCard };
+export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';