@hyvor/design 1.1.9 → 1.1.11

package/dist/components/CodeBlock/getCode.js

@@ -36,6 +36,13 @@ export default function getCode(code, language) {
     });
     ret = lines.join('\n');
     return language === null ?
-        ret :
+        encodeHtml(ret) :
         hljs.highlight(ret, { language }).value;
 }
+function encodeHtml(str) {
+    return str.replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}

package/dist/components/DetailCard/DetailCard.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+    interface Props {
+        label: string | Snippet;
+        content?: string;
+        children?: Snippet;
+    }
+
+    let { label, content,  children }: Props = $props();
+
+    const labelId = `detail-card-${Math.random().toString(36).substring(2, 15)}`;
+
+</script>
+
+<div class="detail-card" role="region" aria-labelledby={labelId}>
+
+    <div class="label" id={labelId}>
+        {#if typeof label === "string"}
+            {label}
+        {:else}
+            {@render label()}
+        {/if}
+    </div>
+
+    <div class="content">
+        {#if children}
+            {@render children()}
+        {:else if content}
+            {content}
+        {/if}
+    </div>
+
+</div>
+
+<style>
+    .detail-card {
+        background: var(--hover);
+        padding: 15px 20px;
+        border-radius: var(--box-radius);
+        border: 1px solid var(--border);
+    }
+    .label {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-light);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 6px;
+    }
+    .content {
+        font-size: 14px;
+        word-break: break-word;
+    }
+</style>

package/dist/components/DetailCard/DetailCard.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    label: string | Snippet;
+    content?: string;
+    children?: Snippet;
+}
+declare const DetailCard: import("svelte").Component<Props, {}, "">;
+type DetailCard = ReturnType<typeof DetailCard>;
+export default DetailCard;

package/dist/components/DetailCard/DetailCards.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+    interface Props {
+        children?: Snippet
+        min?: number;
+    }
+
+    let { 
+        children,
+        min = 300
+    }: Props = $props();
+</script>
+
+<div class="cards" style="--min: {min}px">
+    {@render children?.()}
+</div>
+
+<style>
+    .cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
+        gap: 10px;
+    }
+</style>

package/dist/components/DetailCard/DetailCards.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children?: Snippet;
+    min?: number;
+}
+declare const DetailCards: import("svelte").Component<Props, {}, "">;
+type DetailCards = ReturnType<typeof DetailCards>;
+export default DetailCards;

package/dist/components/index.d.ts

@@ -15,6 +15,8 @@ export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
+export { default as DetailCard } from './DetailCard/DetailCard.svelte';
+export { default as DetailCards } from './DetailCard/DetailCards.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 export { default as Divider } from './Divider/Divider.svelte';
 export { default as Caption } from './FormControl/Caption.svelte';

package/dist/components/index.js

@@ -15,6 +15,8 @@ export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
+export { default as DetailCard } from './DetailCard/DetailCard.svelte';
+export { default as DetailCards } from './DetailCard/DetailCards.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 export { default as Divider } from './Divider/Divider.svelte';
 export { default as Caption } from './FormControl/Caption.svelte';

package/package.json

@@ -59,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.9"
+	"version": "1.1.11"
 }