@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/feature-card/components.js

@@ -0,0 +1,48 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../lib/utils.js';
+import { useFeatureCardContext } from './context.js';
+import { getIconAlignClass, getIconRoundedClass, getIconSizeClasses, getTitleSizeClasses, getDescriptionSizeClasses } from './classNames.js';
+
+const Header = React.forwardRef(function Header(_a, ref) {
+    var { asChild, className } = _a, props = __rest(_a, ["asChild", "className"]);
+    const Comp = asChild ? Slot : 'div';
+    return (jsx(Comp, Object.assign({ ref: ref, className: cn('dh-feature-card__header', 'dhu-grid dhu-gap-1', className) }, props)));
+});
+const Icon = React.forwardRef(function Icon(_a, ref) {
+    var { asChild, className } = _a, props = __rest(_a, ["asChild", "className"]);
+    const Comp = asChild ? Slot : 'div';
+    const { size, iconVariant, align } = useFeatureCardContext();
+    const iconSizeClasses = getIconSizeClasses(size);
+    const iconRoundedClasses = getIconRoundedClass(iconVariant, size);
+    const iconAlignClass = getIconAlignClass(align);
+    return (jsx(Comp, Object.assign({ ref: ref, className: cn('dhu-overflow-hidden dhu-bg-blue-500/10 dhu-text-blue-500', iconSizeClasses, iconRoundedClasses, iconAlignClass, 'dhu-grid dhu-place-items-center', className) }, props)));
+});
+const Body = React.forwardRef(function Body(_a, ref) {
+    var { asChild, className } = _a, props = __rest(_a, ["asChild", "className"]);
+    const Comp = asChild ? Slot : 'div';
+    return (jsx(Comp, Object.assign({ ref: ref, className: cn('dh-feature-card__body', 'dhu-grid dhu-gap-1', className) }, props)));
+});
+const Title = React.forwardRef(function Title(_a, ref) {
+    var { asChild, className } = _a, props = __rest(_a, ["asChild", "className"]);
+    const Comp = asChild ? Slot : 'h3';
+    const { size } = useFeatureCardContext();
+    const titleSizeClasses = getTitleSizeClasses(size);
+    return (jsx(Comp, Object.assign({ ref: ref, className: cn('dhu-m-0 dhu-font-ali-75 dhu-font-semibold', titleSizeClasses, className) }, props)));
+});
+const Description = React.forwardRef(function Description(_a, ref) {
+    var { asChild, className } = _a, props = __rest(_a, ["asChild", "className"]);
+    const Comp = asChild ? Slot : 'div';
+    const { size } = useFeatureCardContext();
+    const descriptionSizeClasses = getDescriptionSizeClasses(size);
+    return (jsx(Comp, Object.assign({ ref: ref, className: cn('dhu-font-ali-55 dhu-font-normal dhu-text-gray-500', descriptionSizeClasses, 'dhu-line-clamp-3', className) }, props)));
+});
+const Content = React.forwardRef(function Content(_a, ref) {
+    var { asChild, className } = _a, props = __rest(_a, ["asChild", "className"]);
+    const Comp = asChild ? Slot : 'div';
+    return (jsx(Comp, Object.assign({ ref: ref, className: cn('dh-feature-card__content', 'dhu-text-gray-900', className) }, props)));
+});
+
+export { Body, Content, Description, Header, Icon, Title };

package/es/components/feature-card/context.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const FeatureCardContext = React.createContext(null);
+// Hook to consume FeatureCard context
+function useFeatureCardContext() {
+    const context = React.useContext(FeatureCardContext);
+    if (!context) {
+        throw new Error('FeatureCard components must be used within FeatureCard.Root');
+    }
+    return context;
+}
+
+export { FeatureCardContext, useFeatureCardContext };

package/es/components/feature-card/index.css.js

@@ -0,0 +1,655 @@
+var style = document.createElement('style');
+style.textContent = `@layer tailwind-base, antd;
+
+@layer tailwind-base {
+  *, ::before, ::after{
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
+    --tw-contain-size:  ;
+    --tw-contain-layout:  ;
+    --tw-contain-paint:  ;
+    --tw-contain-style:  ;
+  }
+  ::backdrop{
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
+    --tw-contain-size:  ;
+    --tw-contain-layout:  ;
+    --tw-contain-paint:  ;
+    --tw-contain-style:  ;
+  }
+}
+
+.dhu-absolute{
+  position: absolute;
+}
+
+.dhu-relative{
+  position: relative;
+}
+
+.dhu-right-0{
+  right: 0px;
+}
+
+.dhu-m-0{
+  margin: 0px;
+}
+
+.dhu-mx-auto{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.dhu-my-2\\.5{
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
+.dhu-mb-4{
+  margin-bottom: 1rem;
+}
+
+.dhu-mb-5{
+  margin-bottom: 1.25rem;
+}
+
+.dhu-ml-auto{
+  margin-left: auto;
+}
+
+.dhu-mr-1{
+  margin-right: 0.25rem;
+}
+
+.dhu-line-clamp-3{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.dhu-flex{
+  display: flex;
+}
+
+.dhu-grid{
+  display: grid;
+}
+
+.dhu-h-12{
+  height: 3rem;
+}
+
+.dhu-h-4{
+  height: 1rem;
+}
+
+.dhu-h-5{
+  height: 1.25rem;
+}
+
+.dhu-h-6{
+  height: 1.5rem;
+}
+
+.dhu-h-9{
+  height: 2.25rem;
+}
+
+.dhu-h-\\[60px\\]{
+  height: 60px;
+}
+
+.dhu-h-full{
+  height: 100%;
+}
+
+.dhu-max-h-72{
+  max-height: 18rem;
+}
+
+.dhu-w-12{
+  width: 3rem;
+}
+
+.dhu-w-4{
+  width: 1rem;
+}
+
+.dhu-w-40{
+  width: 10rem;
+}
+
+.dhu-w-5{
+  width: 1.25rem;
+}
+
+.dhu-w-6{
+  width: 1.5rem;
+}
+
+.dhu-w-9{
+  width: 2.25rem;
+}
+
+.dhu-w-\\[60px\\]{
+  width: 60px;
+}
+
+.dhu-w-full{
+  width: 100%;
+}
+
+.dhu-cursor-pointer{
+  cursor: pointer;
+}
+
+.dhu-place-items-center{
+  place-items: center;
+}
+
+.dhu-content-start{
+  align-content: flex-start;
+}
+
+.dhu-items-center{
+  align-items: center;
+}
+
+.dhu-justify-center{
+  justify-content: center;
+}
+
+.dhu-justify-between{
+  justify-content: space-between;
+}
+
+.dhu-gap-1{
+  gap: 0.25rem;
+}
+
+.dhu-gap-2{
+  gap: 0.5rem;
+}
+
+.dhu-gap-3{
+  gap: 0.75rem;
+}
+
+.dhu-gap-4{
+  gap: 1rem;
+}
+
+.dhu-justify-self-start{
+  justify-self: start;
+}
+
+.dhu-justify-self-end{
+  justify-self: end;
+}
+
+.dhu-justify-self-center{
+  justify-self: center;
+}
+
+.dhu-overflow-hidden{
+  overflow: hidden;
+}
+
+.dhu-overflow-y-auto{
+  overflow-y: auto;
+}
+
+.dhu-truncate{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dhu-rounded{
+  border-radius: 0.25rem;
+}
+
+.dhu-rounded-2xl{
+  border-radius: 1rem;
+}
+
+.dhu-rounded-\\[20px\\]{
+  border-radius: 20px;
+}
+
+.dhu-rounded-full{
+  border-radius: 9999px;
+}
+
+.dhu-rounded-lg{
+  border-radius: 0.5rem;
+}
+
+.dhu-rounded-none{
+  border-radius: 0px;
+}
+
+.dhu-rounded-xl{
+  border-radius: 0.75rem;
+}
+
+.dhu-border{
+  border-width: 1px;
+}
+
+.dhu-border-solid{
+  border-style: solid;
+}
+
+.dhu-border-\\[\\#1775FE\\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(23 117 254 / var(--tw-border-opacity, 1));
+}
+
+.dhu-border-gray-3{
+  --tw-border-opacity: 1;
+  border-color: rgb(217 224 237 / var(--tw-border-opacity, 1));
+}
+
+.dhu-border-purple-200{
+  --tw-border-opacity: 1;
+  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
+}
+
+.dhu-border-slate-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
+}
+
+.dhu-bg-\\[\\#F5F7FA\\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 247 250 / var(--tw-bg-opacity, 1));
+}
+
+.dhu-bg-blue-500\\/10{
+  background-color: rgb(59 130 246 / 0.1);
+}
+
+.dhu-bg-white{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
+.dhu-bg-gradient-to-br{
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+.dhu-from-purple-50{
+  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.dhu-from-purple-500{
+  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.dhu-to-blue-50{
+  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
+}
+
+.dhu-to-blue-500{
+  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
+}
+
+.dhu-object-contain{
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.dhu-p-2{
+  padding: 0.5rem;
+}
+
+.dhu-p-3{
+  padding: 0.75rem;
+}
+
+.dhu-p-4{
+  padding: 1rem;
+}
+
+.dhu-p-5{
+  padding: 1.25rem;
+}
+
+.dhu-text-center{
+  text-align: center;
+}
+
+.dhu-text-right{
+  text-align: right;
+}
+
+.dhu-font-ali-55{
+  font-family: AlibabaPuHuiTi-3-55-Regular;
+}
+
+.dhu-font-ali-75{
+  font-family: AlibabaPuHuiTi-3-75-SemiBold;
+}
+
+.dhu-font-ali-85{
+  font-family: AlibabaPuHuiTi-3-85-Bold;
+}
+
+.dhu-text-2xl{
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.dhu-text-\\[32px\\]{
+  font-size: 32px;
+}
+
+.dhu-text-\\[36px\\]{
+  font-size: 36px;
+}
+
+.dhu-text-\\[40px\\]{
+  font-size: 40px;
+}
+
+.dhu-text-base{
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.dhu-text-lg{
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.dhu-text-sm{
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.dhu-text-xl{
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.dhu-text-xs{
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.dhu-font-bold{
+  font-weight: 700;
+}
+
+.dhu-font-normal{
+  font-weight: 400;
+}
+
+.dhu-font-semibold{
+  font-weight: 600;
+}
+
+.dhu-leading-4{
+  line-height: 1rem;
+}
+
+.dhu-leading-5{
+  line-height: 1.25rem;
+}
+
+.dhu-leading-6{
+  line-height: 1.5rem;
+}
+
+.dhu-leading-7{
+  line-height: 1.75rem;
+}
+
+.dhu-leading-8{
+  line-height: 2rem;
+}
+
+.dhu-leading-\\[44px\\]{
+  line-height: 44px;
+}
+
+.dhu-leading-\\[50px\\]{
+  line-height: 50px;
+}
+
+.dhu-leading-\\[56px\\]{
+  line-height: 56px;
+}
+
+.dhu-text-blue-5{
+  --tw-text-opacity: 1;
+  color: rgb(23 117 254 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-blue-500{
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-gray-10{
+  --tw-text-opacity: 1;
+  color: rgb(34 36 39 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-gray-5{
+  --tw-text-opacity: 1;
+  color: rgb(135 144 158 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-gray-500{
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-gray-7{
+  --tw-text-opacity: 1;
+  color: rgb(84 91 100 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-gray-900{
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-green-green{
+  --tw-text-opacity: 1;
+  color: rgb(83 195 27 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-purple-700{
+  --tw-text-opacity: 1;
+  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-purple-900{
+  --tw-text-opacity: 1;
+  color: rgb(88 28 135 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-red-red{
+  --tw-text-opacity: 1;
+  color: rgb(254 77 79 / var(--tw-text-opacity, 1));
+}
+
+.dhu-text-white{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.dhu-opacity-0{
+  opacity: 0;
+}
+
+.dhu-shadow-md{
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.dhu-transition-opacity{
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dhu-transition-shadow{
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dhu-transition-transform{
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+@font-face {
+  /** 对应字重 700 */
+  font-family: 'AlibabaPuHuiTi-3-85-Bold';
+  src: url('https://haina-datahub.zero2x.org/ossRoute/frontend/resources/fonts/alibaba_puhuiti_3/AlibabaPuHuiTi-3-85-Bold.ttf')
+    format('truetype');
+}
+
+@font-face {
+  /** 对应字重 600 */
+  font-family: 'AlibabaPuHuiTi-3-75-SemiBold';
+  src: url('https://haina-datahub.zero2x.org/ossRoute/frontend/resources/fonts/alibaba_puhuiti_3/AlibabaPuHuiTi-3-75-SemiBold.ttf')
+    format('truetype');
+}
+
+@font-face {
+  /** 对应字重 400 */
+  font-family: 'AlibabaPuHuiTi-3-55-Regular';
+  src: url('https://haina-datahub.zero2x.org/ossRoute/frontend/resources/fonts/alibaba_puhuiti_3/AlibabaPuHuiTi-3-55-Regular.ttf')
+    format('truetype');
+}
+
+.hover\\:dhu-bg-assist-bg-blue:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 246 250 / var(--tw-bg-opacity, 1));
+}
+
+.hover\\:dhu-shadow-lg:hover{
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.dhu-group:hover .group-hover\\:dhu--translate-x-10{
+  --tw-translate-x: -2.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.dhu-group:hover .group-hover\\:dhu--translate-x-6{
+  --tw-translate-x: -1.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.dhu-group:hover .group-hover\\:dhu-opacity-100{
+  opacity: 1;
+}
+`;
+document.head.appendChild(style);