@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/{hero → src-astro/hero}/HeroAlignContainer.astro

@@ -1,5 +1,5 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import HeroAlignCenter from './HeroAlignCenter.astro';
 import HeroAlignLeft from './HeroAlignLeft.astro';
 import HeroAlignRight from './HeroAlignRight.astro';
@@ -9,15 +9,19 @@ import HeroAlignRightSourceCode from './HeroAlignRight.astro?raw';
 ---
 
 <CodeContainer
-	titles={['居中对齐', '左对齐', '右对齐']}
-	codes={[HeroAlignCenterSourceCode, HeroAlignLeftSourceCode, HeroAlignRightSourceCode]}>
-	<div id="tab-1">
-		<HeroAlignCenter />
-	</div>
-	<div id="tab-2">
-		<HeroAlignLeft />
-	</div>
-	<div id="tab-3">
-		<HeroAlignRight />
-	</div>
+  titles={['居中对齐', '左对齐', '右对齐']}
+  codes={[
+    HeroAlignCenterSourceCode,
+    HeroAlignLeftSourceCode,
+    HeroAlignRightSourceCode,
+  ]}>
+  <div id="tab-1">
+    <HeroAlignCenter />
+  </div>
+  <div id="tab-2">
+    <HeroAlignLeft />
+  </div>
+  <div id="tab-3">
+    <HeroAlignRight />
+  </div>
 </CodeContainer>

package/dist/src-astro/hero/HeroAlignLeft.astro

@@ -0,0 +1,13 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+  title="左对齐标题"
+  description="这是一个左对齐的Hero组件示例。"
+  align="left"
+  links={[
+    { text: '主要操作', href: '#' },
+    { text: '次要操作', href: '#' },
+  ]}
+/>

package/dist/src-astro/hero/HeroAlignRight.astro

@@ -0,0 +1,13 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+  title="右对齐标题"
+  description="这是一个右对齐的Hero组件示例。"
+  align="right"
+  links={[
+    { text: '主要操作', href: '#' },
+    { text: '次要操作', href: '#' },
+  ]}
+/>

package/dist/{hero → src-astro/hero}/HeroBackgroundContainer.astro

@@ -1,5 +1,5 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import HeroPlainBackground from './HeroPlainBackground.astro';
 import HeroGradientBackground from './HeroGradientBackground.astro';
 import HeroPlainBackgroundSourceCode from './HeroPlainBackground.astro?raw';
@@ -7,12 +7,12 @@ import HeroGradientBackgroundSourceCode from './HeroGradientBackground.astro?raw
 ---
 
 <CodeContainer
-	titles={['纯色背景', '渐变色背景']}
-	codes={[HeroPlainBackgroundSourceCode, HeroGradientBackgroundSourceCode]}>
-	<div id="tab-1">
-		<HeroPlainBackground />
-	</div>
-	<div id="tab-2">
-		<HeroGradientBackground />
-	</div>
+  titles={['纯色背景', '渐变色背景']}
+  codes={[HeroPlainBackgroundSourceCode, HeroGradientBackgroundSourceCode]}>
+  <div id="tab-1">
+    <HeroPlainBackground />
+  </div>
+  <div id="tab-2">
+    <HeroGradientBackground />
+  </div>
 </CodeContainer>

package/dist/src-astro/hero/HeroBackgroundImage.astro

@@ -0,0 +1,16 @@
+---
+import Hero from './Hero.astro';
+import { getLandscapeImage } from '../../index-astro';
+---
+
+<Hero
+  title="背景图片"
+  description="使用背景图片增强视觉效果。"
+  backgroundImage={getLandscapeImage({
+    width: 800,
+    height: 400,
+    provider: 'picsum',
+  })}
+  backgroundOverlay="dark"
+  links={[{ text: '了解更多', href: '/about' }]}
+/>

package/dist/{hero → src-astro/hero}/HeroBackgroundImageContainer.astro

@@ -1,11 +1,11 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import HeroBackgroundImage from './HeroBackgroundImage.astro';
 import HeroBackgroundImageSourceCode from './HeroBackgroundImage.astro?raw';
 ---
 
 <CodeContainer codes={[HeroBackgroundImageSourceCode]}>
-	<div id="tab-1">
-		<HeroBackgroundImage />
-	</div>
+  <div id="tab-1">
+    <HeroBackgroundImage />
+  </div>
 </CodeContainer>

package/dist/src-astro/hero/HeroBasic.astro

@@ -0,0 +1,12 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+  title="欢迎使用我们的产品"
+  description="这是一个简短的描述，介绍产品的主要特点和价值。"
+  links={[
+    { text: '开始使用', href: '/getting-started' },
+    { text: '了解更多', href: '/about' },
+  ]}
+/>

package/dist/{hero → src-astro/hero}/HeroBasicContainer.astro

@@ -1,11 +1,11 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import HeroBasic from './HeroBasic.astro';
 import HeroBasicSourceCode from './HeroBasic.astro?raw';
 ---
 
 <CodeContainer codes={[HeroBasicSourceCode]}>
-	<div id="tab-1">
-		<HeroBasic />
-	</div>
+  <div id="tab-1">
+    <HeroBasic />
+  </div>
 </CodeContainer>

package/dist/src-astro/hero/HeroGradientBackground.astro

@@ -0,0 +1,10 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+  title="渐变色背景"
+  description="这个例子使用了渐变色背景样式。"
+  background="gradient"
+  links={[{ text: '了解更多', href: '/about' }]}
+/>

package/dist/src-astro/hero/HeroPlainBackground.astro

@@ -0,0 +1,10 @@
+---
+import Hero from './Hero.astro';
+---
+
+<Hero
+  title="纯色背景"
+  description="这个例子使用了纯色背景样式。"
+  background="plain"
+  links={[{ text: '了解更多', href: '/about' }]}
+/>

package/dist/src-astro/hero/HeroWithButton.astro

@@ -0,0 +1,15 @@
+---
+import Hero from './Hero.astro';
+import Button from '../button/Button.astro';
+---
+
+<Hero
+  title="带自定义按钮的Hero"
+  description="这是一个带有自定义按钮的Hero组件示例。"
+  links={[]}
+>
+  <div slot="actions" class="cosy:flex cosy:gap-4">
+    <Button variant="primary">主要操作</Button>
+    <Button variant="secondary">次要操作</Button>
+  </div>
+</Hero>

package/dist/{hero → src-astro/hero}/HeroWithButtonContainer.astro

@@ -1,11 +1,11 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import HeroWithButton from './HeroWithButton.astro';
 import HeroWithButtonSourceCode from './HeroWithButton.astro?raw';
 ---
 
 <CodeContainer codes={[HeroWithButtonSourceCode]}>
-	<div id="tab-1">
-		<HeroWithButton />
-	</div>
+  <div id="tab-1">
+    <HeroWithButton />
+  </div>
 </CodeContainer>

package/dist/src-astro/hero/HeroWithImage.astro

@@ -0,0 +1,16 @@
+---
+import Hero from './Hero.astro';
+import { getExampleImage } from '../../index-astro';
+
+const image = {
+  src: getExampleImage({ width: 400, height: 300, provider: 'picsum' }),
+  alt: '示例图片',
+};
+---
+
+<Hero
+  title="带图片的Hero"
+  description="这是一个带有图片的Hero组件示例。"
+  image={image}
+  links={[{ text: '查看详情', href: '#' }]}
+/>

package/dist/{hero → src-astro/hero}/HeroWithImageContainer.astro

@@ -1,11 +1,11 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import HeroWithImage from './HeroWithImage.astro';
 import HeroWithImageSourceCode from './HeroWithImage.astro?raw';
 ---
 
 <CodeContainer codes={[HeroWithImageSourceCode]}>
-	<div id="tab-1">
-		<HeroWithImage />
-	</div>
+  <div id="tab-1">
+    <HeroWithImage />
+  </div>
 </CodeContainer>

package/dist/{hero → src-astro/hero}/index.ts

@@ -18,22 +18,22 @@ import HeroBackgroundImageContainer from './HeroBackgroundImageContainer.astro';
 export { Hero };
 
 export const HeroPackage = {
-    Hero,
-    HeroBasic,
-    HeroAlignCenter,
-    HeroAlignLeft,
-    HeroAlignRight,
-    HeroWithImage,
-    HeroWithButton,
-    HeroPlainBackground,
-    HeroGradientBackground,
-    HeroBackgroundImage,
-    HeroContainers: {
-        Basic: HeroBasicContainer,
-        Align: HeroAlignContainer,
-        WithImage: HeroWithImageContainer,
-        WithButton: HeroWithButtonContainer,
-        Background: HeroBackgroundContainer,
-        BackgroundImage: HeroBackgroundImageContainer
-    }
-};
+  Hero,
+  HeroBasic,
+  HeroAlignCenter,
+  HeroAlignLeft,
+  HeroAlignRight,
+  HeroWithImage,
+  HeroWithButton,
+  HeroPlainBackground,
+  HeroGradientBackground,
+  HeroBackgroundImage,
+  HeroContainers: {
+    Basic: HeroBasicContainer,
+    Align: HeroAlignContainer,
+    WithImage: HeroWithImageContainer,
+    WithButton: HeroWithButtonContainer,
+    Background: HeroBackgroundContainer,
+    BackgroundImage: HeroBackgroundImageContainer,
+  },
+};

package/dist/src-astro/icons/AlertTriangle.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="alertTriangle" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/AstroIcon.astro

@@ -0,0 +1,62 @@
+---
+import { iconData } from '../assets/iconData';
+
+interface Props {
+  /**
+   * 图标名称，必须在iconData中存在
+   */
+  name: string;
+
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+
+  /**
+   * 描边颜色
+   * @default "currentColor"
+   */
+  stroke?: string;
+
+  /**
+   * 自定义类名
+   */
+  class?: string;
+
+  /**
+   * 是否填充图标
+   * @default false
+   */
+  fill?: boolean;
+}
+
+const {
+  name,
+  size = '24px',
+  stroke = 'currentColor',
+  class: className = '',
+  fill = false,
+} = Astro.props;
+const icon = iconData[name];
+const viewBox = icon?.viewBox || '0 0 24 24';
+---
+
+{
+  icon && (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox={viewBox}
+      fill={fill ? 'currentColor' : 'none'}
+      stroke={stroke}
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={className}
+    >
+      <path d={icon.path} />
+    </svg>
+  )
+}

package/dist/src-astro/icons/CalendarIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="calendar" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/CheckCircle.astro

@@ -0,0 +1,27 @@
+---
+import AstroIcon from './AstroIcon.astro';
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="checkCircle" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/CheckIcon.astro

@@ -0,0 +1,31 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 检查图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="check" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/ChevronDownIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="chevronDown" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/ClipboardIcon.astro

@@ -0,0 +1,31 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 剪贴板图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="clipboard" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/CloseIcon.astro

@@ -0,0 +1,31 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 关闭图标组件
+ */
+interface Props {
+  /**
+   * 图标的大小
+   * @default "16px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '16px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="close" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/ErrorIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="error" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/GithubIcon.astro

@@ -0,0 +1,25 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { size = '24px', class: className = '' } = Astro.props;
+---
+
+<AstroIcon
+  name="github"
+  size={size}
+  fill={true}
+  stroke="none"
+  class={className}
+/>

package/dist/src-astro/icons/InboxArchive.astro

@@ -0,0 +1,27 @@
+---
+import AstroIcon from './AstroIcon.astro';
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="inboxArchive" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/InfoCircle.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="infoCircle" size={size} stroke={color} class={className} />