@karbonjs/ui-svelte 0.1.0

package/src/form/Slider.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  interface Props {
+    name: string
+    value?: number
+    min?: number
+    max?: number
+    step?: number
+    label?: string
+    showValue?: boolean
+    disabled?: boolean
+    class?: string
+    oninput?: (e: Event) => void
+  }
+
+  let {
+    name,
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    label = '',
+    showValue = true,
+    disabled = false,
+    class: className = '',
+    oninput
+  }: Props = $props()
+
+  const percent = $derived(((value - min) / (max - min)) * 100)
+</script>
+
+<div class="space-y-2 {className}">
+  {#if label || showValue}
+    <div class="flex items-center justify-between">
+      {#if label}
+        <label for={name} class="text-sm font-medium text-[var(--karbon-text,#1a1635)]">{label}</label>
+      {/if}
+      {#if showValue}
+        <span class="text-sm font-semibold text-[var(--karbon-primary)] tabular-nums">{value}</span>
+      {/if}
+    </div>
+  {/if}
+
+  <input
+    id={name}
+    {name}
+    type="range"
+    bind:value
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {oninput}
+    class="w-full h-2 rounded-full appearance-none cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed
+      bg-[linear-gradient(to_right,var(--karbon-primary)_{percent}%,var(--karbon-border,rgba(0,0,0,0.07))_{percent}%)]
+      [&::-webkit-slider-thumb]:appearance-none
+      [&::-webkit-slider-thumb]:w-4.5
+      [&::-webkit-slider-thumb]:h-4.5
+      [&::-webkit-slider-thumb]:rounded-full
+      [&::-webkit-slider-thumb]:bg-[var(--karbon-primary)]
+      [&::-webkit-slider-thumb]:border-2
+      [&::-webkit-slider-thumb]:border-white
+      [&::-webkit-slider-thumb]:shadow-md
+      [&::-webkit-slider-thumb]:transition-transform
+      [&::-webkit-slider-thumb]:duration-150
+      [&::-webkit-slider-thumb]:hover:scale-110
+      [&::-moz-range-thumb]:w-4
+      [&::-moz-range-thumb]:h-4
+      [&::-moz-range-thumb]:rounded-full
+      [&::-moz-range-thumb]:bg-[var(--karbon-primary)]
+      [&::-moz-range-thumb]:border-2
+      [&::-moz-range-thumb]:border-white
+      [&::-moz-range-thumb]:shadow-md"
+  />
+</div>

package/src/form/Textarea.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { FormVariant } from '@karbonjs/ui-core'
+
+  interface Props {
+    name: string
+    value?: string
+    placeholder?: string
+    label?: string
+    error?: string
+    rows?: number
+    maxlength?: number
+    showCount?: boolean
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    variant?: FormVariant
+    class?: string
+    oninput?: (e: Event) => void
+  }
+
+  let {
+    name,
+    value = $bindable(''),
+    placeholder = '',
+    label = '',
+    error = '',
+    rows = 4,
+    maxlength,
+    showCount = false,
+    required = false,
+    disabled = false,
+    readonly = false,
+    variant = 'dark',
+    class: className = '',
+    oninput
+  }: Props = $props()
+
+  const themes = {
+    dark: {
+      label: 'text-[11px] font-medium text-gray-500 uppercase tracking-wider',
+      input: 'border-white/8 bg-white/3 text-white placeholder-gray-700 focus:border-[var(--karbon-primary)]/50 focus:bg-white/5 focus:ring-[3px] focus:ring-[var(--karbon-primary)]/8',
+      error: 'text-red-400',
+      count: 'text-gray-600'
+    },
+    light: {
+      label: 'text-sm font-medium text-gray-700',
+      input: 'border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-[var(--karbon-primary)] focus:ring-2 focus:ring-[var(--karbon-primary)]/20',
+      error: 'text-[var(--karbon-danger)]',
+      count: 'text-gray-400'
+    }
+  } as const
+
+  const theme = $derived(themes[variant])
+  const charCount = $derived(value.length)
+</script>
+
+<div class="space-y-1.5 {className}">
+  {#if label}
+    <label for={name} class="{theme.label} block mb-1.5">{label}</label>
+  {/if}
+
+  <textarea
+    id={name}
+    {name}
+    bind:value
+    {placeholder}
+    {rows}
+    {maxlength}
+    {required}
+    {disabled}
+    {readonly}
+    {oninput}
+    class="w-full rounded-lg border px-3 py-2.5 text-[13px] md:text-sm focus:outline-none transition-all resize-y {theme.input} {error ? 'border-red-500/50' : ''}"
+  ></textarea>
+
+  <div class="flex items-center justify-between">
+    {#if error}
+      <p class="text-xs {theme.error}">{error}</p>
+    {:else}
+      <span></span>
+    {/if}
+    {#if showCount && maxlength}
+      <span class="text-xs {theme.count}">{charCount}/{maxlength}</span>
+    {/if}
+  </div>
+</div>

package/src/form/Toggle.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { ToggleSize } from '@karbonjs/ui-core'
+
+  interface Props {
+    name: string
+    checked?: boolean
+    label?: string
+    size?: ToggleSize
+    disabled?: boolean
+    class?: string
+    onchange?: (e: Event) => void
+  }
+
+  let {
+    name,
+    checked = $bindable(false),
+    label = '',
+    size = 'md',
+    disabled = false,
+    class: className = '',
+    onchange
+  }: Props = $props()
+
+  const sizes = {
+    sm: { track: 'w-8 h-[18px]', dot: 'h-3.5 w-3.5', translate: 'translate-x-3.5' },
+    md: { track: 'w-10 h-[22px]', dot: 'h-4.5 w-4.5', translate: 'translate-x-4.5' }
+  } as const
+
+  const s = $derived(sizes[size])
+
+  function toggle() {
+    if (!disabled) checked = !checked
+  }
+</script>
+
+<label class="inline-flex items-center gap-2.5 {disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} {className}">
+  <input type="checkbox" {name} bind:checked {disabled} {onchange} class="sr-only" />
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    onclick={toggle}
+    class="relative inline-flex shrink-0 items-center rounded-full transition-colors duration-200
+      {s.track}
+      {checked ? 'bg-[var(--karbon-primary)]' : 'bg-[var(--karbon-border,rgba(0,0,0,0.07))]'}"
+    role="switch"
+    aria-checked={checked}
+  >
+    <span
+      class="inline-block rounded-full bg-white shadow-sm transition-transform duration-200 {s.dot} {checked ? s.translate : 'translate-x-0.5'}"
+    ></span>
+  </div>
+  {#if label}
+    <span class="text-sm font-medium text-[var(--karbon-text,#1a1635)] select-none">{label}</span>
+  {/if}
+</label>

package/src/image/Image.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import type { ImageHover, ImageRounded, ImageAspect } from '@karbonjs/ui-core'
+  import ImgBox from '../overlay/ImgBox.svelte'
+
+  interface Props {
+    src: string
+    alt?: string
+    hover?: ImageHover
+    rounded?: ImageRounded
+    aspect?: ImageAspect
+    fallback?: string
+    imgbox?: boolean
+    class?: string
+    onclick?: () => void
+  }
+
+  let {
+    src,
+    alt = '',
+    hover = 'none',
+    rounded = 'md',
+    aspect = 'auto',
+    fallback = '',
+    imgbox = false,
+    class: className = '',
+    onclick
+  }: Props = $props()
+
+  let errored = $state(false)
+  let imgboxOpen = $state(false)
+
+  const hoverClasses: Record<string, string> = {
+    none: '',
+    zoom: 'group-hover:scale-110',
+    brightness: 'group-hover:brightness-110',
+    blur: 'group-hover:blur-sm'
+  }
+
+  const roundedClasses: Record<string, string> = {
+    none: 'rounded-none',
+    sm: 'rounded',
+    md: 'rounded-lg',
+    lg: 'rounded-xl',
+    full: 'rounded-full'
+  }
+
+  const aspectClasses: Record<string, string> = {
+    auto: '',
+    square: 'aspect-square',
+    video: 'aspect-video',
+    portrait: 'aspect-[3/4]'
+  }
+
+  const imgSrc = $derived(errored && fallback ? fallback : src)
+  const isClickable = $derived(imgbox || !!onclick)
+
+  function handleClick() {
+    if (imgbox) imgboxOpen = true
+    onclick?.()
+  }
+
+  function handleError() {
+    errored = true
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="group overflow-hidden {roundedClasses[rounded]} {aspectClasses[aspect]} {isClickable ? 'cursor-pointer' : ''} {className}"
+  onclick={isClickable ? handleClick : undefined}
+>
+  <img
+    src={imgSrc}
+    {alt}
+    onerror={handleError}
+    class="w-full h-full object-cover transition-all duration-300 {hoverClasses[hover]}"
+    loading="lazy"
+  />
+</div>
+
+{#if imgbox && imgboxOpen}
+  <ImgBox
+    images={[src]}
+    open={imgboxOpen}
+    backdrop="dark"
+    onclose={() => imgboxOpen = false}
+  />
+{/if}

package/src/image/ImgZoom.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { ImageRounded, ImgZoomTrigger } from '@karbonjs/ui-core'
+
+  interface Props {
+    src: string
+    zoomSrc?: string
+    alt?: string
+    zoom?: number
+    trigger?: ImgZoomTrigger
+    rounded?: ImageRounded
+    class?: string
+  }
+
+  let {
+    src,
+    zoomSrc,
+    alt = '',
+    zoom = 2,
+    trigger = 'hover',
+    rounded = 'md',
+    class: className = ''
+  }: Props = $props()
+
+  let container: HTMLDivElement
+  let zooming = $state(false)
+  let posX = $state(50)
+  let posY = $state(50)
+
+  const roundedClasses: Record<string, string> = {
+    none: 'rounded-none',
+    sm: 'rounded',
+    md: 'rounded-lg',
+    lg: 'rounded-xl',
+    full: 'rounded-full'
+  }
+
+  const zoomImage = $derived(zoomSrc || src)
+
+  function updatePosition(e: MouseEvent) {
+    const rect = container.getBoundingClientRect()
+    posX = ((e.clientX - rect.left) / rect.width) * 100
+    posY = ((e.clientY - rect.top) / rect.height) * 100
+  }
+
+  function handleMouseEnter(e: MouseEvent) {
+    if (trigger === 'hover') {
+      zooming = true
+      updatePosition(e)
+    }
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (zooming) updatePosition(e)
+  }
+
+  function handleMouseLeave() {
+    if (trigger === 'hover') zooming = false
+  }
+
+  function handleClick(e: MouseEvent) {
+    if (trigger === 'click') {
+      zooming = !zooming
+      if (zooming) updatePosition(e)
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  bind:this={container}
+  class="relative overflow-hidden {roundedClasses[rounded]} {trigger === 'click' ? 'cursor-zoom-in' : ''} {zooming && trigger === 'click' ? 'cursor-zoom-out' : ''} {className}"
+  onmouseenter={handleMouseEnter}
+  onmousemove={handleMouseMove}
+  onmouseleave={handleMouseLeave}
+  onclick={handleClick}
+>
+  <img
+    {src}
+    {alt}
+    class="w-full h-full object-cover block"
+    loading="lazy"
+  />
+
+  {#if zooming}
+    <div
+      class="absolute inset-0 pointer-events-none"
+      style="
+        background-image: url({zoomImage});
+        background-size: {zoom * 100}%;
+        background-position: {posX}% {posY}%;
+        background-repeat: no-repeat;
+      "
+    ></div>
+  {/if}
+</div>

package/src/index.ts

@@ -0,0 +1,71 @@
+// button
+export { default as Button } from './button/Button.svelte'
+
+// form
+export { default as FormInput } from './form/FormInput.svelte'
+export { default as Select } from './form/Select.svelte'
+export { default as Checkbox } from './form/Checkbox.svelte'
+export { default as Toggle } from './form/Toggle.svelte'
+export { default as Textarea } from './form/Textarea.svelte'
+export { default as Radio } from './form/Radio.svelte'
+export { default as Slider } from './form/Slider.svelte'
+export { default as DatePicker } from './form/DatePicker.svelte'
+export { default as ColorPicker } from './form/ColorPicker.svelte'
+
+// badge
+export { default as Badge } from './badge/Badge.svelte'
+
+// alert
+export { default as AlertMessage } from './alert/AlertMessage.svelte'
+
+// overlay
+export { default as Modal } from './overlay/Modal.svelte'
+export { default as Dialog } from './overlay/Dialog.svelte'
+export { default as Toast } from './overlay/Toast.svelte'
+export { default as ImgBox } from './overlay/ImgBox.svelte'
+
+// layout
+export { default as Card } from './layout/Card.svelte'
+export { default as PageHeader } from './layout/PageHeader.svelte'
+export { default as EmptyState } from './layout/EmptyState.svelte'
+
+// image
+export { default as Image } from './image/Image.svelte'
+export { default as ImgZoom } from './image/ImgZoom.svelte'
+
+// carousel
+export { default as Carousel } from './carousel/Carousel.svelte'
+
+// dropdown
+export { default as Dropdown } from './dropdown/Dropdown.svelte'
+
+// accordion
+export { default as Accordion } from './accordion/Accordion.svelte'
+
+// tabs
+export { default as Tabs } from './tabs/Tabs.svelte'
+
+// breadcrumb
+export { default as Breadcrumb } from './breadcrumb/Breadcrumb.svelte'
+
+// tooltip
+export { default as Tooltip } from './tooltip/Tooltip.svelte'
+
+// avatar
+export { default as Avatar } from './avatar/Avatar.svelte'
+
+// progress
+export { default as Progress } from './progress/Progress.svelte'
+
+// skeleton
+export { default as Skeleton } from './skeleton/Skeleton.svelte'
+
+// divider
+export { default as Divider } from './divider/Divider.svelte'
+
+// kbd
+export { default as Kbd } from './kbd/Kbd.svelte'
+
+// data
+export { default as DataTable } from './data/DataTable.svelte'
+export { default as Pagination } from './data/Pagination.svelte'

package/src/kbd/Kbd.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    keys: string[]
+    class?: string
+  }
+
+  let { keys, class: className = '' }: Props = $props()
+</script>
+
+<span class="inline-flex items-center gap-1 {className}">
+  {#each keys as key, i}
+    {#if i > 0}
+      <span class="text-[var(--karbon-text-4,#b5b2cc)] text-xs">+</span>
+    {/if}
+    <kbd class="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-1.5 rounded-md border border-[var(--karbon-border,rgba(0,0,0,0.07))] bg-[var(--karbon-bg-2,#e8e6f0)] text-[var(--karbon-text-2,#5a567e)] text-[11px] font-mono font-medium shadow-sm">
+      {key}
+    </kbd>
+  {/each}
+</span>

package/src/layout/Card.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { CardVariant, CardPadding } from '@karbonjs/ui-core'
+
+  interface Props {
+    variant?: CardVariant
+    padding?: CardPadding
+    hoverable?: boolean
+    title?: string
+    icon?: any
+    class?: string
+    children: Snippet
+    header?: Snippet
+    footer?: Snippet
+  }
+
+  let {
+    variant = 'default',
+    padding = 'md',
+    hoverable = false,
+    title = '',
+    icon: Icon,
+    class: className = '',
+    children,
+    header,
+    footer
+  }: Props = $props()
+
+  const variantClasses: Record<string, string> = {
+    default: 'bg-[var(--karbon-bg-card,#fff)] border border-[var(--karbon-border,rgba(0,0,0,0.07))]',
+    elevated: 'bg-[var(--karbon-bg-card,#fff)] shadow-lg',
+    outlined: 'border-2 border-[var(--karbon-border,rgba(0,0,0,0.07))]',
+    ghost: 'bg-transparent'
+  }
+
+  const paddingClasses: Record<string, string> = {
+    none: '',
+    sm: 'p-3',
+    md: 'p-5',
+    lg: 'p-8'
+  }
+</script>
+
+<div class="rounded-xl overflow-hidden {variantClasses[variant]} {hoverable ? 'transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5' : ''} {className}">
+  {#if header}
+    <div class="px-5 py-3.5 border-b border-[var(--karbon-border,rgba(0,0,0,0.07))]">
+      {@render header()}
+    </div>
+  {:else if title}
+    <div class="flex items-center gap-2 px-5 py-3.5 border-b border-[var(--karbon-border,rgba(0,0,0,0.07))] text-[var(--karbon-text-2,#5a567e)] text-[0.825rem] font-semibold">
+      {#if Icon}
+        <Icon class="w-4 h-4" />
+      {/if}
+      <span>{title}</span>
+    </div>
+  {/if}
+
+  <div class={paddingClasses[padding]}>
+    {@render children()}
+  </div>
+
+  {#if footer}
+    <div class="px-5 py-3.5 border-t border-[var(--karbon-border,rgba(0,0,0,0.07))]">
+      {@render footer()}
+    </div>
+  {/if}
+</div>

package/src/layout/EmptyState.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    title: string
+    description?: string
+    icon?: any
+  }
+
+  let {
+    title,
+    description = '',
+    icon: Icon
+  }: Props = $props()
+</script>
+
+<div class="text-center py-12 px-6">
+  {#if Icon}
+    <div class="w-14 h-14 rounded-2xl bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))] text-[var(--karbon-text-4,#b5b2cc)] flex items-center justify-center mx-auto mb-4">
+      <Icon class="w-8 h-8" />
+    </div>
+  {/if}
+  <p class="text-[var(--karbon-text-2,#5a567e)] font-semibold text-[0.95rem] m-0">{title}</p>
+  {#if description}
+    <p class="text-[var(--karbon-text-3,#8e8aae)] text-[0.8rem] mt-1.5 mx-auto max-w-[22rem]">{description}</p>
+  {/if}
+</div>

package/src/layout/PageHeader.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    title: string
+    description?: string
+    icon?: any
+    iconColor?: string
+  }
+
+  let {
+    title,
+    description = '',
+    icon: Icon,
+    iconColor = 'var(--karbon-primary, #cc1a1a)'
+  }: Props = $props()
+</script>
+
+<div class="flex items-start gap-3 pb-4 border-b border-[var(--karbon-border,rgba(0,0,0,0.07))] mb-1">
+  {#if Icon}
+    <Icon class="w-5 h-5 shrink-0" style="color: {iconColor}" />
+  {/if}
+  <div>
+    <h1 class="text-[var(--karbon-text,#1a1635)] text-[1.1rem] font-bold m-0">{title}</h1>
+    {#if description}
+      <p class="text-[var(--karbon-text-3,#8e8aae)] text-[0.8rem] mt-0.5">{description}</p>
+    {/if}
+  </div>
+</div>