@anker-in/headless-ui 0.0.11 → 0.0.12

package/src/stories/text.stories.tsx

@@ -4,10 +4,15 @@ import { Text } from '../components/index'
 import React from 'react'
 
 const meta = {
-  title: 'Components/Text',
+  title: 'Typography/Text',
   component: Text,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: '文本组件, 简单封装了常用的样式字段，用于展示文本内容.',
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
@@ -16,12 +21,31 @@ const meta = {
         type: 'select',
       },
       options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      table: {
+        defaultValue: { summary: '3' },
+      },
     },
     weights: {
       control: {
         type: 'select',
       },
       options: ['light', 'normal', 'medium', 'bold'],
+      table: {
+        defaultValue: { summary: 'normal' },
+      },
+    },
+    color: {
+      control: 'color',
+    },
+    as: {
+      control: {
+        type: 'select',
+      },
+      description: 'html 标签类型',
+      options: ['div', 'label', 'p', 'span'],
+      table: {
+        defaultValue: { summary: 'span' },
+      },
     },
     html: {
       type: 'string',
@@ -46,17 +70,51 @@ export const Default: Story = {
   },
 }
 
-const sizes = new Array(9).fill(0).map((_, i) => i + 1)
-export const All: Story = {
+export const Sizes: Story = {
+  render() {
+    return (
+      <div className="ai-flex ai-flex-col">
+        <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>
+        <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>
+        <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>
+        <Text size={4}>The quick brown fox jumps over the lazy dog.</Text>
+        <Text size={5}>The quick brown fox jumps over the lazy dog.</Text>
+        <Text size={6}>The quick brown fox jumps over the lazy dog.</Text>
+        <Text size={7}>The quick brown fox jumps over the lazy dog.</Text>
+        <Text size={8}>The quick brown fox jumps over the lazy dog.</Text>
+        <Text size={9}>The quick brown fox jumps over the lazy dog.</Text>
+      </div>
+    )
+  },
+}
+
+export const Weights: Story = {
+  render() {
+    return (
+      <div className="ai-flex ai-flex-col">
+        <Text weights="light">The quick brown fox jumps over the lazy dog.</Text>
+        <Text weights="normal">The quick brown fox jumps over the lazy dog.</Text>
+        <Text weights="medium">The quick brown fox jumps over the lazy dog.</Text>
+        <Text weights="bold">The quick brown fox jumps over the lazy dog.</Text>
+      </div>
+    )
+  },
+}
+
+export const Html: Story = {
   render() {
     return (
-      <>
-        {sizes.map(size => (
-          <Text as="p" key={size} size={size as any}>
-            The quick brown fox jumps over the lazy dog.
-          </Text>
-        ))}
-      </>
+      <Text
+        html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
+      to right, 
+      #00ff00,   /* 绿色 */
+      #00ff99,   /* 浅绿色 */
+      #00ffff,   /* 青色 */
+      #0099ff,   /* 浅蓝色 */
+      #8000ff,   /* 紫色 */
+      #ff00ff    /* 粉色 */
+    );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}
+      />
     )
   },
 }

package/src/styles/global.css

@@ -154,17 +154,17 @@
   --brand-color-1: #e42d46;
 }
 
-/* TODO:   */
+
 :root[data-brand-theme='soundcore'] {
-  --btn-bg-color: #17bbef;
+  --btn-bg-color: #17BBEF;
   --btn-text-color: #ffffff;
   --btn-bg-color-active: #48cffa;
   --btn-bg-disabled-color: #ccdfe8;
 
   --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #333333;
-  --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-text-secondary-color: #17BBEF;
+  --btn-bg-secondary-active-color: #17BBEF;
+  --btn-bg-secondary-disabled-color: #17BBEF;
 
   --btn-radius: 30px;
 

package/style.css

@@ -512,6 +512,9 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
+.\!ai-pointer-events-none {
+  pointer-events: none !important;
+}
 .ai-fixed {
   position: fixed;
 }
@@ -564,22 +567,18 @@ video {
   width: 2.5rem;
   height: 2.5rem;
 }
-.ai-size-12 {
-  width: 3rem;
-  height: 3rem;
-}
-.ai-size-2 {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-.ai-size-2\.5 {
-  width: 0.625rem;
-  height: 0.625rem;
-}
 .ai-size-4 {
   width: 1rem;
   height: 1rem;
 }
+.ai-size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.ai-size-\[14px\] {
+  width: 14px;
+  height: 14px;
+}
 .ai-size-full {
   width: 100%;
   height: 100%;
@@ -637,9 +636,17 @@ video {
 .ai-animate-spin {
   animation: ai-spin 1s linear infinite;
 }
+.\!ai-cursor-default {
+  cursor: default !important;
+}
 .ai-cursor-not-allowed {
   cursor: not-allowed;
 }
+.\!ai-select-none {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+}
 .ai-flex-row {
   flex-direction: row;
 }
@@ -695,6 +702,9 @@ video {
 .ai-border-solid {
   border-style: solid;
 }
+.\!ai-border-none {
+  border-style: none !important;
+}
 .ai-border-primary {
   border-color: var(--brand-color-1);
 }
@@ -719,8 +729,15 @@ video {
 .ai-bg-skeleton {
   background-color: var(--tertiary-color);
 }
-.ai-fill-current {
-  fill: currentColor;
+.\!ai-bg-none {
+  background-image: none !important;
+}
+.\!ai-decoration-clone {
+  -webkit-box-decoration-break: clone !important;
+          box-decoration-break: clone !important;
+}
+.\!ai-bg-clip-border {
+  background-clip: border-box !important;
 }
 .ai-p-4 {
   padding: 1rem;
@@ -831,6 +848,9 @@ video {
 .ai-tracking-tight {
   letter-spacing: -0.025em;
 }
+.\!ai-text-transparent {
+  color: transparent !important;
+}
 .ai-text-badge-foreground {
   color: var(--brand-color-1);
 }
@@ -852,6 +872,11 @@ video {
 .ai-opacity-70 {
   opacity: 0.7;
 }
+.\!ai-shadow-none {
+  --tw-shadow: 0 0 #0000 !important;
+  --tw-shadow-colored: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
 .ai-shadow-lg {
   --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);
@@ -862,6 +887,10 @@ video {
   --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);
 }
+.\!ai-outline-none {
+  outline: 2px solid transparent !important;
+  outline-offset: 2px !important;
+}
 .ai-outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1035,17 +1064,17 @@ video {
   --brand-color-1: #e42d46;
 }
 
-/* TODO:   */
+
 :root[data-brand-theme='soundcore'] {
-  --btn-bg-color: #17bbef;
+  --btn-bg-color: #17BBEF;
   --btn-text-color: #ffffff;
   --btn-bg-color-active: #48cffa;
   --btn-bg-disabled-color: #ccdfe8;
 
   --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #333333;
-  --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-text-secondary-color: #17BBEF;
+  --btn-bg-secondary-active-color: #17BBEF;
+  --btn-bg-secondary-disabled-color: #17BBEF;
 
   --btn-radius: 30px;
 
@@ -1093,6 +1122,11 @@ video {
   font-weight: 500;
 }
 
+.before\:\!ai-invisible::before {
+  content: var(--tw-content);
+  visibility: hidden !important;
+}
+
 .before\:ai-absolute::before {
   content: var(--tw-content);
   position: absolute;
@@ -1157,6 +1191,15 @@ video {
   content: var(--tw-content);
 }
 
+.after\:\!ai-invisible::after {
+  content: var(--tw-content);
+  visibility: hidden !important;
+}
+
+.empty\:ai-block:empty {
+  display: block;
+}
+
 .hover\:\!ai-bg-btn-primary:hover {
   background-color: var(--btn-bg-color) !important;
 }
@@ -1261,6 +1304,10 @@ video {
   background-color: var(--brand-color-1);
 }
 
+.data-\[inline-skeleton\=true\]\:ai-leading-\[0\][data-inline-skeleton=true] {
+  line-height: 0;
+}
+
 .data-\[state\=checked\]\:ai-text-primary-foreground[data-state=checked] {
   color: var(--btn-text-color);
 }
@@ -1289,3 +1336,7 @@ video {
     text-align: left;
   }
 }
+
+.\[\&\>\*\]\:\!ai-invisible>* {
+  visibility: hidden !important;
+}