svelte-comp 1.0.6 → 1.0.9

package/README.md

@@ -15,17 +15,15 @@ npm install svelte-comp
 
 ## 🔧 Setup TailwindCSS
 
-Install Tailwind and the Vite plugin:
-
 ```bash
 npm install tailwindcss @tailwindcss/vite
 ```
 
-Enable it in `vite.config.ts` / `vite.config.js`:
+`vite.config.ts`:
 
 ```ts
 import { defineConfig } from "vite";
-import svelte from "@vitejs/plugin-svelte";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
 import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
@@ -36,7 +34,7 @@ export default defineConfig({
 });
 ```
 
-Add global styles in `src/app.css` (or main stylesheet):
+Add to `src/app.css`:
 
 ```css
 @import "tailwindcss";
@@ -47,21 +45,48 @@ Add global styles in `src/app.css` (or main stylesheet):
 
 ## 📁 Components included
 
-Buttons • Cards • Tabs • Dialog • Menu • Form • Inputs
-Select • Checkbox • Radio • Slider • Splitter • Date/Time Pickers
-ColorPicker • Toast • Tooltip • Carousel • Pagination • Table
-ThemeToggle • CodeView • and more…
+Accordion • Button • Card • Carousel • CheckBox • CodeView • ColorPicker •
+DatePicker • Dialog • Field • FilePicker • Form • Hamburger • Menu •
+PaginatedCard • Pagination • ProgressBar • ProgressCircle • Radio • Select
+• Slider • Splitter • Switch • Tabs • Table • ThemeToggle • TimePicker
+Toast • Tooltip
 
 Full component list in repository.
 
 ---
 
+## 🚀 Quick example
+
+Accordion usage:
+
+```svelte
+<script lang="ts">
+  import { Accordion } from "svelte-comp";
+
+  const items = [
+    { title: "First", content: "This is the first item" },
+    { title: "Second", content: "This is the second item" },
+    { title: "Third", content: "This is the third item" }
+  ];
+
+  const handleToggle = (index: number, open: boolean) => {
+    console.log(index, open);
+  };
+</script>
+
+<Accordion {items} multiple defaultOpen={[0]} sz="md" onToggle={handleToggle} />
+```
+
+---
+
 ## 📄 License
 
-MIT License - See [LICENSE](LICENSE.md) for details.
+MIT License
 
 ---
 
 ## 🔗 Links
 
 GitHub: [https://github.com/MaestroFusion360/svelte-comp](https://github.com/MaestroFusion360/svelte-comp)
+
+Demo: [https://maestrofusion360.github.io/svelte-comp/](https://maestrofusion360.github.io/svelte-comp/)

package/dist/lib/ProgressCircle.svelte

@@ -0,0 +1,191 @@
+<!-- src/lib/ProgressCircle.svelte -->
+<script lang="ts">
+  /**
+   * @component ProgressCircle
+   * @description Circular progress indicator for visualizing completion or load state (0-100). Supports indeterminate mode.
+   * @prop value {number} - Current progress value
+   * @default 0
+   * @prop indeterminate {boolean} - Enables spinning infinite mode
+   * @default false
+   * @prop size {number} - Diameter in px
+   * @default 48
+   * @prop stroke {number} - Stroke width in px
+   * @default 4
+   * @prop variant {ComponentVariant} - Color/style variant
+   * @options default|neutral|success|warning|error
+   * @default default
+   * @prop label {string} - Optional text shown in center
+   * @default ""
+   * @prop max {number} - Max progress value for normalization
+   * @default 100
+   * @prop class {string} - Extra wrapper classes
+   * @default ""
+   * @note Clamps value between 0-max
+   * @note Uses SVG stroke-dashoffset animation
+   * @note Accessible role=progressbar with aria-valuenow
+   * @note Works in both determinate/indeterminate modes
+   */
+  import type { HTMLAttributes } from "svelte/elements";
+  import { type SizeKey, type ComponentVariant, TEXT } from "./types";
+  import { cx, clamp } from "../utils";
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    indeterminate?: boolean;
+    sz?: SizeKey;
+    variant?: ComponentVariant;
+    class?: string;
+    label?: string;
+    disabled?: boolean;
+  };
+
+  let {
+    value = 0,
+    indeterminate = false,
+    sz = "md",
+    variant = "default",
+    class: externalClass = "",
+    label = "",
+    disabled = false,
+    ...rest
+  }: Props = $props();
+
+  const sizes: Record<SizeKey, { diameter: number; stroke: number }> = {
+    xs: { diameter: 40, stroke: 4 },
+    sm: { diameter: 48, stroke: 5 },
+    md: { diameter: 56, stroke: 6 },
+    lg: { diameter: 64, stroke: 7 },
+    xl: { diameter: 72, stroke: 8 },
+  };
+
+  const pctValue = $derived(clamp(value, 0, 100));
+  const pctText = $derived(Math.round(pctValue));
+
+  const geometry = $derived(sizes[sz]);
+  const center = $derived(geometry.diameter / 2);
+  const radius = $derived(center - geometry.stroke / 2);
+  const circumference = $derived(2 * Math.PI * radius);
+
+  const dashOffset = $derived(((100 - pctValue) / 100) * circumference);
+  const dashArray = $derived(`${circumference} ${circumference}`);
+  const indeterminateDash = $derived(`${circumference * 0.3} ${circumference}`);
+
+  const strokeColor = $derived(
+    variant === "neutral"
+      ? "stroke-[var(--color-bg-secondary)]"
+      : "stroke-[var(--color-bg-primary)]"
+  );
+
+  const rootClass = $derived(
+    cx(
+      "inline-flex flex-col items-center gap-1 data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:cursor-not-allowed",
+      externalClass
+    )
+  );
+</script>
+
+<div
+  class={rootClass}
+  role="progressbar"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-valuenow={indeterminate ? undefined : pctText}
+  data-disabled={disabled ? "true" : undefined}
+  {...rest}
+>
+  {#if label}
+    <span class="text-[var(--color-text-muted)] select-none {TEXT[sz]}">
+      {label}
+    </span>
+  {/if}
+
+  <div
+    class="relative inline-flex items-center justify-center"
+    style={`width:${geometry.diameter}px;height:${geometry.diameter}px;`}
+  >
+    <svg
+      class="pc-svg"
+      viewBox={`0 0 ${geometry.diameter} ${geometry.diameter}`}
+      role="presentation"
+      aria-hidden="true"
+    >
+      <g class="pc-rot">
+        <circle
+          class="pc-track"
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke-width={geometry.stroke}
+        ></circle>
+
+        {#if indeterminate}
+          <circle
+            class={cx("pc-bar pc-indet", strokeColor)}
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke-width={geometry.stroke}
+            stroke-dasharray={indeterminateDash}
+          ></circle>
+        {:else}
+          <circle
+            class={cx("pc-bar", strokeColor)}
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke-width={geometry.stroke}
+            stroke-dasharray={dashArray}
+            stroke-dashoffset={dashOffset}
+          ></circle>
+        {/if}
+      </g>
+    </svg>
+
+    {#if !indeterminate}
+      <div
+        class="absolute inset-0 flex items-center justify-center text-[var(--color-text-muted)] font-medium select-none {TEXT[
+          sz
+        ]}"
+      >
+        {pctText}%
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .pc-svg {
+    width: 100%;
+    height: 100%;
+  }
+  .pc-rot {
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+  .pc-track {
+    fill: none;
+    stroke: var(--border-color-default);
+  }
+  .pc-bar {
+    fill: none;
+    stroke-linecap: round;
+    transition:
+      stroke-dashoffset 0.25s ease,
+      stroke 0.2s ease;
+    transform-origin: center;
+  }
+  .pc-indet {
+    animation: pc-spin 1.2s linear infinite;
+  }
+
+  :global {
+    @keyframes pc-spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+</style>

package/dist/lib/ProgressCircle.svelte.d.ts

@@ -0,0 +1,39 @@
+/**
+   * @component ProgressCircle
+   * @description Circular progress indicator for visualizing completion or load state (0-100). Supports indeterminate mode.
+   * @prop value {number} - Current progress value
+   * @default 0
+   * @prop indeterminate {boolean} - Enables spinning infinite mode
+   * @default false
+   * @prop size {number} - Diameter in px
+   * @default 48
+   * @prop stroke {number} - Stroke width in px
+   * @default 4
+   * @prop variant {ComponentVariant} - Color/style variant
+   * @options default|neutral|success|warning|error
+   * @default default
+   * @prop label {string} - Optional text shown in center
+   * @default ""
+   * @prop max {number} - Max progress value for normalization
+   * @default 100
+   * @prop class {string} - Extra wrapper classes
+   * @default ""
+   * @note Clamps value between 0-max
+   * @note Uses SVG stroke-dashoffset animation
+   * @note Accessible role=progressbar with aria-valuenow
+   * @note Works in both determinate/indeterminate modes
+   */
+import type { HTMLAttributes } from "svelte/elements";
+import { type SizeKey, type ComponentVariant } from "./types";
+type Props = HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    indeterminate?: boolean;
+    sz?: SizeKey;
+    variant?: ComponentVariant;
+    class?: string;
+    label?: string;
+    disabled?: boolean;
+};
+declare const ProgressCircle: import("svelte").Component<Props, {}, "">;
+type ProgressCircle = ReturnType<typeof ProgressCircle>;
+export default ProgressCircle;

package/dist/lib/index.d.ts

@@ -15,6 +15,7 @@ export { default as Menu } from "./Menu.svelte";
 export { default as PaginatedCard } from "./PaginatedCard.svelte";
 export { default as Pagination } from "./Pagination.svelte";
 export { default as ProgressBar } from "./ProgressBar.svelte";
+export { default as ProgressCircle } from "./ProgressCircle.svelte";
 export { default as Radio } from "./Radio.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as Slider } from "./Slider.svelte";

package/dist/lib/index.js

@@ -16,6 +16,7 @@ export { default as Menu } from "./Menu.svelte";
 export { default as PaginatedCard } from "./PaginatedCard.svelte";
 export { default as Pagination } from "./Pagination.svelte";
 export { default as ProgressBar } from "./ProgressBar.svelte";
+export { default as ProgressCircle } from "./ProgressCircle.svelte";
 export { default as Radio } from "./Radio.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as Slider } from "./Slider.svelte";

package/package.json

@@ -43,5 +43,5 @@
   "svelte": "./dist/lib/index.js",
   "type": "module",
   "types": "./dist/lib/index.d.ts",
-  "version": "1.0.6"
+  "version": "1.0.9"
 }