@tidbcloud/uikit 2.0.0-beta.64 → 2.0.0-beta.65

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.65
+
+### Patch Changes
+
+- add MediaQuery
+
 ## 2.0.0-beta.64
 
 ### Patch Changes

package/dist/primitive/MediaQuery/index.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const styles = require("./styles.cjs");
+const useProps = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.cjs");
+function MediaQuery(props) {
+  var _a;
+  const { children, smallerThan, largerThan, query, styles: styles$1, className } = useProps.useProps("MediaQuery", {}, props);
+  const { classes, cx } = styles.default({ smallerThan, largerThan, query, styles: styles$1 });
+  if (children === void 0) {
+    return void 0;
+  }
+  const child = React.Children.only(children);
+  if (typeof child === "object" && child !== null && "props" in child) {
+    return React.cloneElement(child, {
+      className: cx(classes.media, (_a = child.props) == null ? void 0 : _a.className, className)
+    });
+  }
+  return child;
+}
+exports.MediaQuery = MediaQuery;

package/dist/primitive/MediaQuery/index.d.cts

@@ -0,0 +1,18 @@
+import { MantineTheme } from '@mantine/core';
+import { CSSObject } from '@mantine/emotion';
+import { default as React } from 'react';
+import { MediaQueryNumberSize } from './styles.js';
+export interface MediaQueryProps {
+    className?: string;
+    /** Child that should be shown at given breakpoint, it must accept className prop */
+    children: React.ReactNode;
+    /** Styles applied to child when viewport is smaller than given breakpoint */
+    smallerThan?: MediaQueryNumberSize;
+    /** Styles applied to child when viewport is larger than given breakpoint */
+    largerThan?: MediaQueryNumberSize;
+    /** Any other media query */
+    query?: string;
+    /** Styles applied to child when breakpoint matches */
+    styles: CSSObject | ((theme: MantineTheme) => CSSObject);
+}
+export declare function MediaQuery(props: MediaQueryProps): string | number | boolean | Iterable<React.ReactNode> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;

package/dist/primitive/MediaQuery/index.d.ts

@@ -0,0 +1,18 @@
+import { MantineTheme } from '@mantine/core';
+import { CSSObject } from '@mantine/emotion';
+import { default as React } from 'react';
+import { MediaQueryNumberSize } from './styles.js';
+export interface MediaQueryProps {
+    className?: string;
+    /** Child that should be shown at given breakpoint, it must accept className prop */
+    children: React.ReactNode;
+    /** Styles applied to child when viewport is smaller than given breakpoint */
+    smallerThan?: MediaQueryNumberSize;
+    /** Styles applied to child when viewport is larger than given breakpoint */
+    largerThan?: MediaQueryNumberSize;
+    /** Any other media query */
+    query?: string;
+    /** Styles applied to child when breakpoint matches */
+    styles: CSSObject | ((theme: MantineTheme) => CSSObject);
+}
+export declare function MediaQuery(props: MediaQueryProps): string | number | boolean | Iterable<React.ReactNode> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;

package/dist/primitive/MediaQuery/index.js

@@ -0,0 +1,21 @@
+import React__default, { Children } from "react";
+import useStyles from "./styles.js";
+import { useProps } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.js";
+function MediaQuery(props) {
+  var _a;
+  const { children, smallerThan, largerThan, query, styles, className } = useProps("MediaQuery", {}, props);
+  const { classes, cx } = useStyles({ smallerThan, largerThan, query, styles });
+  if (children === void 0) {
+    return void 0;
+  }
+  const child = Children.only(children);
+  if (typeof child === "object" && child !== null && "props" in child) {
+    return React__default.cloneElement(child, {
+      className: cx(classes.media, (_a = child.props) == null ? void 0 : _a.className, className)
+    });
+  }
+  return child;
+}
+export {
+  MediaQuery
+};

package/dist/primitive/MediaQuery/styles.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const createStyles = require("../../node_modules/.pnpm/@mantine_emotion@7.13.2_@emotion_cache@11.13.1_@emotion_react@11.13.3_@types_react@18.3.11_re_v5yho7ri2fgh4vhey6nnpomqsu/node_modules/@mantine/emotion/esm/create-styles.cjs");
+const rem = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/rem.cjs");
+const px = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/px.cjs");
+function getBreakpointValue(theme, breakpoint) {
+  return breakpoint in theme.breakpoints && typeof breakpoint !== "number" ? px.px(theme.breakpoints[breakpoint]) : px.px(breakpoint);
+}
+const useStyles = createStyles.createStyles((theme, { smallerThan, largerThan, query, styles }, u) => {
+  const media = {};
+  const _styles = typeof styles === "function" ? styles(theme) : styles;
+  if (largerThan !== void 0 && smallerThan !== void 0) {
+    media[`@media (min-width: ${rem.em(getBreakpointValue(theme, largerThan))}) and (max-width: ${rem.em(
+      getBreakpointValue(theme, smallerThan) - 0.1
+    )})`] = _styles;
+  } else {
+    if (largerThan !== void 0) {
+      media[u.largerThan(largerThan)] = _styles;
+    }
+    if (smallerThan !== void 0) {
+      media[u.smallerThan(smallerThan)] = _styles;
+    }
+  }
+  if (query) {
+    media[`@media ${query}`] = _styles;
+  }
+  return { media };
+});
+exports.default = useStyles;

package/dist/primitive/MediaQuery/styles.d.cts

@@ -0,0 +1,15 @@
+import { MantineTheme, MantineSize } from '@mantine/core';
+import { CSSObject } from '@mantine/emotion';
+export type MediaQueryNumberSize = MantineSize | number | (string & {});
+export interface MediaQueryStylesParams {
+    smallerThan?: MediaQueryNumberSize;
+    largerThan?: MediaQueryNumberSize;
+    styles?: CSSObject | ((theme: MantineTheme) => CSSObject);
+    query?: string;
+}
+declare const _default: (params: MediaQueryStylesParams) => {
+    classes: Record<"media", string>;
+    cx: (...args: any) => string;
+    theme: MantineTheme;
+};
+export default _default;

package/dist/primitive/MediaQuery/styles.d.ts

@@ -0,0 +1,15 @@
+import { MantineTheme, MantineSize } from '@mantine/core';
+import { CSSObject } from '@mantine/emotion';
+export type MediaQueryNumberSize = MantineSize | number | (string & {});
+export interface MediaQueryStylesParams {
+    smallerThan?: MediaQueryNumberSize;
+    largerThan?: MediaQueryNumberSize;
+    styles?: CSSObject | ((theme: MantineTheme) => CSSObject);
+    query?: string;
+}
+declare const _default: (params: MediaQueryStylesParams) => {
+    classes: Record<"media", string>;
+    cx: (...args: any) => string;
+    theme: MantineTheme;
+};
+export default _default;

package/dist/primitive/MediaQuery/styles.js

@@ -0,0 +1,29 @@
+import { createStyles } from "../../node_modules/.pnpm/@mantine_emotion@7.13.2_@emotion_cache@11.13.1_@emotion_react@11.13.3_@types_react@18.3.11_re_v5yho7ri2fgh4vhey6nnpomqsu/node_modules/@mantine/emotion/esm/create-styles.js";
+import { em } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/rem.js";
+import { px } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/px.js";
+function getBreakpointValue(theme, breakpoint) {
+  return breakpoint in theme.breakpoints && typeof breakpoint !== "number" ? px(theme.breakpoints[breakpoint]) : px(breakpoint);
+}
+const useStyles = createStyles((theme, { smallerThan, largerThan, query, styles }, u) => {
+  const media = {};
+  const _styles = typeof styles === "function" ? styles(theme) : styles;
+  if (largerThan !== void 0 && smallerThan !== void 0) {
+    media[`@media (min-width: ${em(getBreakpointValue(theme, largerThan))}) and (max-width: ${em(
+      getBreakpointValue(theme, smallerThan) - 0.1
+    )})`] = _styles;
+  } else {
+    if (largerThan !== void 0) {
+      media[u.largerThan(largerThan)] = _styles;
+    }
+    if (smallerThan !== void 0) {
+      media[u.smallerThan(smallerThan)] = _styles;
+    }
+  }
+  if (query) {
+    media[`@media ${query}`] = _styles;
+  }
+  return { media };
+});
+export {
+  useStyles as default
+};

package/dist/primitive/index.cjs

@@ -10,6 +10,7 @@ const useColorScheme = require("../hooks/useColorScheme.cjs");
 const index = require("../node_modules/.pnpm/@mantine_dropzone@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine__qr3rnaubensmzqdmx5ctws3cmy/node_modules/@mantine/dropzone/esm/index.cjs");
 const index$1 = require("./notifier/index.cjs");
 const index$2 = require("./Typography/index.cjs");
+const index$3 = require("./MediaQuery/index.cjs");
 const AppShell = require("../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/AppShell/AppShell.cjs");
 const AspectRatio = require("../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.cjs");
 const Center = require("../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Center/Center.cjs");
@@ -136,6 +137,7 @@ exports.Dropzone = index.Dropzone;
 exports.notifier = index$1.notifier;
 exports.TYPOGRAPHY_STYLES_MAP = index$2.TYPOGRAPHY_STYLES_MAP;
 exports.Typography = index$2.Typography;
+exports.MediaQuery = index$3.MediaQuery;
 exports.AppShell = AppShell.AppShell;
 exports.AspectRatio = AspectRatio.AspectRatio;
 exports.Center = Center.Center;

package/dist/primitive/index.d.cts

@@ -43,3 +43,4 @@ export type { CalendarProps, CalendarBaseProps, DatePickerType, DatePickerProps,
 export { TextInput, type TextInputProps } from './TextInput/index.js';
 export { notifier } from './notifier/index.js';
 export { Typography, TYPOGRAPHY_STYLES_MAP, type TypographyProps } from './Typography/index.js';
+export { MediaQuery, type MediaQueryProps } from './MediaQuery/index.js';

package/dist/primitive/index.d.ts

@@ -43,3 +43,4 @@ export type { CalendarProps, CalendarBaseProps, DatePickerType, DatePickerProps,
 export { TextInput, type TextInputProps } from './TextInput/index.js';
 export { notifier } from './notifier/index.js';
 export { Typography, TYPOGRAPHY_STYLES_MAP, type TypographyProps } from './Typography/index.js';
+export { MediaQuery, type MediaQueryProps } from './MediaQuery/index.js';

package/dist/primitive/index.js

@@ -8,6 +8,7 @@ import { useColorScheme } from "../hooks/useColorScheme.js";
 import { Dropzone } from "../node_modules/.pnpm/@mantine_dropzone@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine__qr3rnaubensmzqdmx5ctws3cmy/node_modules/@mantine/dropzone/esm/index.js";
 import { notifier } from "./notifier/index.js";
 import { TYPOGRAPHY_STYLES_MAP, Typography } from "./Typography/index.js";
+import { MediaQuery } from "./MediaQuery/index.js";
 import { AppShell } from "../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/AppShell/AppShell.js";
 import { AspectRatio } from "../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.js";
 import { Center } from "../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Center/Center.js";
@@ -196,6 +197,7 @@ export {
   MS_POWERPOINT_MIME_TYPE,
   MS_WORD_MIME_TYPE,
   Mark,
+  MediaQuery,
   Menu,
   Modal,
   ModalsProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.64",
+  "version": "2.0.0-beta.65",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",