odj-svelte-ui 0.2.6 → 0.4.0

package/dist/pagination/theme.d.ts

@@ -15,7 +15,7 @@ export declare const paginationItem: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "flex items-center font-medium w-full justify-center", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "flex items-center font-medium w-full justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
     size: {
         default: string;
         large: string;
@@ -83,7 +83,7 @@ export declare const paginationItem: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "flex items-center font-medium w-full justify-center", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "flex items-center font-medium w-full justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
     size: {
         default: string;
         large: string;
@@ -127,7 +127,7 @@ export declare const pagination: import("tailwind-variants").TVReturnType<{
         default: string;
         large: string;
     };
-}, undefined, "flex flex-row items-start -space-x-px rtl:space-x-reverse", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "flex flex-row items-start -space-x-px rtl:space-x-reverse", import("tailwind-variants/dist/config.js").TVConfig<{
     table: {
         true: string;
         false: string;
@@ -163,7 +163,7 @@ export declare const pagination: import("tailwind-variants").TVReturnType<{
         default: string;
         large: string;
     };
-}, undefined, "flex flex-row items-start -space-x-px rtl:space-x-reverse", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "flex flex-row items-start -space-x-px rtl:space-x-reverse", import("tailwind-variants/dist/config.js").TVConfig<{
     table: {
         true: string;
         false: string;

package/dist/popover/theme.d.ts

@@ -129,7 +129,7 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     title: string;
     h3: string;
     arrowBase: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
     color: {
         default: {
             base: string;
@@ -643,7 +643,7 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     title: string;
     h3: string;
     arrowBase: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
     color: {
         default: {
             base: string;

package/dist/progress/ProgressRadial.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import { cubicOut } from "svelte/easing";
+  import { Tween } from "svelte/motion";
+  import { twMerge } from "tailwind-merge";
+  import { progressRadial } from ".";
+  import type { ProgressRadialProps as Props } from ".";
+
+  let {
+    progress = 45,
+    radius = 42,
+    startingPosition = "top",
+    precision = 0,
+    tweenDuration = 400,
+    animate = false,
+    size = "h-24 w-24",
+    thickness = 4,
+    labelInside = false,
+    labelOutside = "",
+    easing = cubicOut,
+    color = "primary",
+
+    baseClass,
+    labelClass,
+    backgroundClass,
+    foregroundClass,
+    outsideClass,
+    spanClass,
+    progressClass,
+
+    class: className,
+    ...restProps
+  }: Props = $props();
+
+  const _progress = new Tween(0, {
+    duration: animate ? tweenDuration : 0,
+    easing
+  });
+
+  const { base, label, background, foreground, outside, span, progressCls } = $derived(
+    progressRadial({
+      color,
+      labelInside
+    })
+  );
+
+  $effect(() => {
+    _progress.set(Number(progress));
+  });
+
+  const circumference = $derived(2 * Math.PI * radius);
+
+  const strokeDashoffset = $derived(circumference - (_progress.current / 100) * circumference);
+
+  const rotationAngle = $derived(startingPosition === "top" ? -90 : startingPosition === "right" ? 0 : startingPosition === "bottom" ? 90 : startingPosition === "left" ? 180 : -90);
+
+  const formattedProgress = $derived(_progress.current.toFixed(precision));
+</script>
+
+<div class="flex flex-col items-center">
+  {#if labelOutside}
+    <div
+      class={outside({
+        class: outsideClass
+      })}
+    >
+      <span
+        class={span({
+          class: spanClass
+        })}
+      >
+        {labelOutside}
+      </span>
+
+      <span
+        class={progressCls({
+          class: progressClass
+        })}
+      >
+        {formattedProgress}%
+      </span>
+    </div>
+  {/if}
+
+  <div {...restProps} class={twMerge(base({ class: baseClass }), size, className?.toString())}>
+    <svg viewBox="0 0 100 100" class="h-full w-full" style="transform: rotate({rotationAngle}deg)">
+      <circle
+        cx="50"
+        cy="50"
+        r={radius}
+        fill="none"
+        stroke-width={thickness}
+        class={background({
+          class: backgroundClass
+        })}
+      />
+
+      <circle
+        cx="50"
+        cy="50"
+        r={radius}
+        fill="none"
+        stroke-width={thickness}
+        stroke-dasharray={circumference}
+        stroke-dashoffset={strokeDashoffset}
+        stroke-linecap="round"
+        class={foreground({
+          class: foregroundClass
+        })}
+      />
+    </svg>
+
+    {#if labelInside}
+      <div
+        class={label({
+          class: labelClass
+        })}
+      >
+        {formattedProgress}%
+      </div>
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Type
+ProgressRadialProps
+
+## Props
+@prop progress = 45
+@prop radius = 42
+@prop startingPosition = "top"
+@prop precision = 0
+@prop tweenDuration = 400
+@prop animate = false
+@prop size = "h-24 w-24"
+@prop thickness = 4
+@prop labelInside = false
+@prop labelOutside = ""
+@prop easing = cubicOut
+@prop color = "primary"
+
+## Class overrides
+@prop baseClass
+@prop labelClass
+@prop backgroundClass
+@prop foregroundClass
+@prop outsideClass
+@prop spanClass
+@prop progressClass
+
+@prop class: className
+@prop ...restProps
+-->

package/dist/progress/ProgressRadial.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { ProgressRadialProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Type
+ * ProgressRadialProps
+ *
+ * ## Props
+ * @prop progress = 45
+ * @prop radius = 42
+ * @prop startingPosition = "top"
+ * @prop precision = 0
+ * @prop tweenDuration = 400
+ * @prop animate = false
+ * @prop size = "h-24 w-24"
+ * @prop thickness = 4
+ * @prop labelInside = false
+ * @prop labelOutside = ""
+ * @prop easing = cubicOut
+ * @prop color = "primary"
+ *
+ * ## Class overrides
+ * @prop baseClass
+ * @prop labelClass
+ * @prop backgroundClass
+ * @prop foregroundClass
+ * @prop outsideClass
+ * @prop spanClass
+ * @prop progressClass
+ *
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const ProgressRadial: import("svelte").Component<Props, {}, "">;
+type ProgressRadial = ReturnType<typeof ProgressRadial>;
+export default ProgressRadial;

package/dist/progress/index.d.ts

@@ -1,4 +1,5 @@
-import type { ProgressbarProps } from "./type";
+import type { ProgressbarProps, ProgressRadialProps } from "./type";
 import Progressbar from "./Progressbar.svelte";
-import { progressbar } from "./theme";
-export { Progressbar, progressbar, type ProgressbarProps };
+import ProgressRadial from "./ProgressRadial.svelte";
+import { progressbar, progressRadial } from "./theme";
+export { Progressbar, progressbar, ProgressRadial, progressRadial, type ProgressRadialProps, type ProgressbarProps };

package/dist/progress/index.js

@@ -1,3 +1,4 @@
 import Progressbar from "./Progressbar.svelte";
-import { progressbar } from "./theme";
-export { Progressbar, progressbar };
+import ProgressRadial from "./ProgressRadial.svelte";
+import { progressbar, progressRadial } from "./theme";
+export { Progressbar, progressbar, ProgressRadial, progressRadial };