@balikjs/mobile 0.0.2 → 0.1.0

package/src/Clipboard/Clipboard.module.css

@@ -1,126 +0,0 @@
-.base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border: none;
-  border-radius: var(--_border-radius);
-  font-family: inherit;
-  cursor: pointer;
-  outline: none;
-  color: var(--color-disabled-fg);
-  background-color: transparent;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  transition: background-color var(--b-transition-fast),
-    color var(--b-transition-fast);
-}
-
-@media (hover: hover) {
-  .base:hover {
-    color: var(--base-fg);
-    background-color: color-mix(in oklch, var(--base-fg) 6%, var(--base-bg));
-  }
-}
-
-.base:focus {
-  outline: none;
-  background-color: transparent;
-}
-
-.base:focus-visible {
-  color: var(--base-fg);
-  outline: 2px solid var(--color-focus-border);
-  outline-offset: 2px;
-  background-color: transparent;
-}
-
-.base:active {
-  background-color: transparent;
-}
-
-.icon {
-  flex-shrink: 0;
-}
-
-.copied {
-  color: var(--color-success);
-}
-
-@media (hover: hover) {
-  .copied:hover {
-    color: var(--color-success);
-    background-color: color-mix(in oklch, var(--color-success) 10%, var(--base-bg));
-  }
-}
-
-.sizeXs {
-  height: 28px;
-  width: 28px;
-  min-width: 28px;
-  padding: 0;
-  --_border-radius: var(--b-radius-l1-xs);
-  --_icon-size: 14px;
-}
-
-.sizeXs .icon {
-  width: 14px;
-  height: 14px;
-}
-
-.sizeSm {
-  height: 32px;
-  width: 32px;
-  min-width: 32px;
-  padding: 0;
-  --_border-radius: var(--b-radius-l1-sm);
-  --_icon-size: 16px;
-}
-
-.sizeSm .icon {
-  width: 16px;
-  height: 16px;
-}
-
-.sizeMd {
-  height: 36px;
-  width: 36px;
-  min-width: 36px;
-  padding: 0;
-  --_border-radius: var(--b-radius-l1-md);
-  --_icon-size: 18px;
-}
-
-.sizeMd .icon {
-  width: 18px;
-  height: 18px;
-}
-
-.sizeLg {
-  height: 40px;
-  width: 40px;
-  min-width: 40px;
-  padding: 0;
-  --_border-radius: var(--b-radius-l1-lg);
-  --_icon-size: 20px;
-}
-
-.sizeLg .icon {
-  width: 20px;
-  height: 20px;
-}
-
-.sizeXl {
-  height: 44px;
-  width: 44px;
-  min-width: 44px;
-  padding: 0;
-  --_border-radius: var(--b-radius-l1-xl);
-  --_icon-size: 22px;
-}
-
-.sizeXl .icon {
-  width: 22px;
-  height: 22px;
-}

package/src/Clipboard/index.js

@@ -1 +0,0 @@
-export { Clipboard } from './Clipboard.jsx'

package/src/CloseButton/CloseButton.jsx

@@ -1,51 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { X } from 'lucide-solid'
-import styles from './CloseButton.module.css'
-
-const sizeMap = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-  '2xl': styles.size2xl,
-}
-
-const DEFAULT_PROPS = {
-  size: 'md',
-  rounded: false,
-}
-
-/**
- * @param {import('solid-js').JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- *   rounded?: boolean
- *   class?: string
- * }} props
- */
-export function CloseButton(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['size', 'rounded', 'class'],
-  )
-
-  return (
-    <button
-      {...rest}
-      type="button"
-      aria-label="Close"
-      class={[
-        'balik-close-button',
-        `balik-close-button--${local.size}`,
-        styles.base,
-        sizeMap[local.size],
-        local.rounded && styles.rounded,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <X aria-hidden="true" />
-    </button>
-  )
-}

package/src/CloseButton/CloseButton.module.css

@@ -1,94 +0,0 @@
-.base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: none;
-  border-radius: var(--b-radius-l1-md);
-  background: transparent;
-  color: color-mix(in oklch, var(--base-fg) 40%, transparent);
-  cursor: pointer;
-  transition:
-    color var(--b-transition-fast),
-    background-color var(--b-transition-fast);
-}
-
-.base:hover {
-  color: var(--base-fg);
-  background-color: color-mix(in oklch, var(--base-fg) 8%, transparent);
-}
-
-.base:focus-visible {
-  outline: 2px solid var(--base-edge);
-  outline-offset: 2px;
-}
-
-.base svg {
-  display: block;
-  pointer-events: none;
-}
-
-.sizeXs {
-  width: var(--b-comp-height-xs);
-  height: var(--b-comp-height-xs);
-  border-radius: var(--b-radius-l1-xs);
-}
-
-.sizeXs svg {
-  width: 16px;
-  height: 16px;
-}
-
-.sizeSm {
-  width: var(--b-comp-height-sm);
-  height: var(--b-comp-height-sm);
-}
-
-.sizeSm svg {
-  width: 18px;
-  height: 18px;
-}
-
-.sizeMd {
-  width: var(--b-comp-height-md);
-  height: var(--b-comp-height-md);
-}
-
-.sizeMd svg {
-  width: 20px;
-  height: 20px;
-}
-
-.sizeLg {
-  width: var(--b-comp-height-lg);
-  height: var(--b-comp-height-lg);
-}
-
-.sizeLg svg {
-  width: 22px;
-  height: 22px;
-}
-
-.sizeXl {
-  width: var(--b-comp-height-xl);
-  height: var(--b-comp-height-xl);
-}
-
-.sizeXl svg {
-  width: 24px;
-  height: 24px;
-}
-
-.size2xl {
-  width: var(--b-comp-height-2xl);
-  height: var(--b-comp-height-2xl);
-}
-
-.size2xl svg {
-  width: 32px;
-  height: 32px;
-}
-
-.rounded {
-  border-radius: 50%;
-}

package/src/Confirm/Confirm.jsx

@@ -1,52 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Dialog } from '../Dialog/Dialog.jsx'
-import { Button } from '../Button/Button.jsx'
-import styles from './Confirm.module.css'
-
-const DEFAULT_PROPS = {
-  closeable: false,
-  confirmLabel: 'Confirm',
-  cancelLabel: 'Cancel',
-  danger: false,
-  loading: false,
-}
-
-/**
- * @param {import('../Dialog/Dialog.jsx').DialogProps & {
- *   confirmLabel?: string
- *   cancelLabel?: string
- *   danger?: boolean
- *   loading?: boolean
- *   onConfirm?: () => void
- *   onCancel?: () => void
- * }} props
- */
-export function Confirm(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['confirmLabel', 'cancelLabel', 'danger', 'loading', 'closeable', 'onConfirm', 'onCancel', 'onOpenChange', 'class', 'children'],
-  )
-
-  const handleConfirm = () => {
-    local.onConfirm?.()
-  }
-
-  const handleCancel = () => {
-    local.onCancel?.()
-    local.onOpenChange?.({ open: false })
-  }
-
-  return (
-    <Dialog {...rest} closeable={local.closeable} onOpenChange={local.onOpenChange} class={local.class}>
-      {local.children}
-      <div class={styles.actions}>
-        <Button size="sm" onClick={handleCancel}>
-          {local.cancelLabel}
-        </Button>
-        <Button size="sm" solid danger={local.danger} loading={local.loading} onClick={handleConfirm}>
-          {local.confirmLabel}
-        </Button>
-      </div>
-    </Dialog>
-  )
-}

package/src/Confirm/Confirm.module.css

@@ -1,5 +0,0 @@
-.actions {
-  display: flex;
-  gap: var(--b-spacing-sm);
-  justify-content: flex-end;
-}

package/src/Confirm/index.js

@@ -1 +0,0 @@
-export { Confirm } from './Confirm.jsx'

package/src/DatePicker/DatePicker.jsx

@@ -1,276 +0,0 @@
-import {
-  splitProps,
-  mergeProps,
-  createSignal,
-  createMemo,
-  For,
-  onMount,
-  createEffect,
-} from 'solid-js'
-import { Portal } from 'solid-js/web'
-import styles from './DatePicker.module.css'
-
-const MONTHS = [
-  'January', 'February', 'March', 'April', 'May', 'June',
-  'July', 'August', 'September', 'October', 'November', 'December',
-]
-
-const ITEM_HEIGHT = 40
-const VISIBLE_ITEMS = 5
-
-function daysInMonth(year, month) {
-  return new Date(year, month + 1, 0).getDate()
-}
-
-function clamp(v, min, max) {
-  return Math.max(min, Math.min(max, v))
-}
-
-function scrollColumnTo(ref, index) {
-  if (!ref) return
-  ref.scrollTo({ top: index * ITEM_HEIGHT, behavior: 'instant' })
-}
-
-const DEFAULT_PROPS = {
-  open: false,
-  title: 'Select Date',
-  value: null,
-}
-
-/**
- * iOS-style date picker with three scrollable columns.
- *
- * @param {{
- *   open: boolean
- *   onOpenChange?: (open: boolean) => void
- *   value?: Date | null
- *   onConfirm?: (date: Date) => void
- *   onCancel?: () => void
- *   min?: Date
- *   max?: Date
- *   title?: string
- *   class?: string
- * }} props
- */
-export function DatePicker(props) {
-  const [local] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['open', 'onOpenChange', 'value', 'onConfirm', 'onCancel', 'min', 'max', 'title', 'class'],
-  )
-
-  const now = new Date()
-  const startDate = local.value || now
-  const minDate = local.min || new Date(now.getFullYear() - 100, 0, 1)
-  const maxDate = local.max || new Date(now.getFullYear() + 10, 11, 31)
-
-  const minYear = minDate.getFullYear()
-  const maxYear = maxDate.getFullYear()
-  const yearCount = maxYear - minYear + 1
-
-  const [selectedYear, setSelectedYear] = createSignal(startDate.getFullYear())
-  const [selectedMonth, setSelectedMonth] = createSignal(startDate.getMonth())
-  const [selectedDay, setSelectedDay] = createSignal(startDate.getDate())
-
-  let yearRef
-  let monthRef
-  let dayRef
-
-  const yearIndex = () => selectedYear() - minYear
-  const monthIndex = () => selectedMonth()
-  const dayIndex = () => selectedDay() - 1
-  const maxDay = createMemo(() => daysInMonth(selectedYear(), selectedMonth()))
-
-  function initScroll() {
-    scrollColumnTo(yearRef, yearIndex())
-    scrollColumnTo(monthRef, monthIndex())
-    requestAnimationFrame(() => {
-      scrollColumnTo(dayRef, clamp(dayIndex(), 0, maxDay() - 1))
-    })
-  }
-
-  onMount(() => {
-    createEffect(() => {
-      if (local.open) {
-        const d = local.value || now
-        setSelectedYear(d.getFullYear())
-        setSelectedMonth(d.getMonth())
-        setSelectedDay(d.getDate())
-        initScroll()
-      }
-    })
-  })
-
-  function handleYearScroll() {
-    const idx = Math.round(yearRef.scrollTop / ITEM_HEIGHT)
-    setSelectedYear(minYear + idx)
-  }
-
-  function handleMonthScroll() {
-    const idx = Math.round(monthRef.scrollTop / ITEM_HEIGHT)
-    setSelectedMonth(idx)
-  }
-
-  function handleDayScroll() {
-    const idx = Math.round(dayRef.scrollTop / ITEM_HEIGHT)
-    setSelectedDay(idx + 1)
-  }
-
-  createEffect(() => {
-    requestAnimationFrame(() => {
-      const maxD = maxDay()
-      const d = selectedDay()
-      if (d > maxD) {
-        setSelectedDay(maxD)
-        scrollColumnTo(dayRef, maxD - 1)
-      }
-    })
-  })
-
-  const weekday = createMemo(() => {
-    const d = new Date(selectedYear(), selectedMonth(), selectedDay())
-    return d.toLocaleDateString('en-US', { weekday: 'long' })
-  })
-
-  function confirm() {
-    const date = new Date(selectedYear(), selectedMonth(), selectedDay())
-    local.onConfirm?.(date)
-    local.onOpenChange?.(false)
-  }
-
-  function cancel() {
-    local.onCancel?.()
-    local.onOpenChange?.(false)
-  }
-
-  return (
-    <Portal mount={document.body}>
-      <div
-        class={styles.backdrop}
-        data-open={local.open ? '' : undefined}
-        onClick={cancel}
-      />
-      <div
-        class={[
-          'balik-date-picker',
-          styles.root,
-          local.class,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        data-open={local.open ? '' : undefined}
-        role="dialog"
-        aria-modal="true"
-        aria-label={local.title}
-      >
-        <div class={styles.header}>
-          <button
-            type="button"
-            class={styles.headerBtn}
-            onClick={cancel}
-          >
-            Cancel
-          </button>
-          <span class={styles.headerTitle}>{local.title}</span>
-          <button
-            type="button"
-            class={[styles.headerBtn, styles.headerBtnConfirm].join(' ')}
-            onClick={confirm}
-          >
-            Confirm
-          </button>
-        </div>
-
-        <div class={styles.pickerBody}>
-          <div class={styles.selectedBar} />
-
-          <div class={styles.columns}>
-            <div class={styles.column}>
-              <div
-                ref={yearRef}
-                class={[styles.scroller, styles.yearColumn].join(' ')}
-                onScroll={handleYearScroll}
-              >
-                <div style={{ height: `${(VISIBLE_ITEMS - 1) / 2 * ITEM_HEIGHT}px` }} />
-                <For each={Array.from({ length: yearCount }, (_, i) => minYear + i)}>
-                  {(year) => (
-                    <span
-                      class={[
-                        styles.item,
-                        styles.yearItem,
-                        year === selectedYear() && styles.itemSelected,
-                      ].filter(Boolean).join(' ')}
-                      style={{ height: `${ITEM_HEIGHT}px` }}
-                    >
-                      {year}
-                    </span>
-                  )}
-                </For>
-                <div style={{ height: `${(VISIBLE_ITEMS - 1) / 2 * ITEM_HEIGHT}px` }} />
-              </div>
-            </div>
-
-            <div class={styles.column}>
-              <div
-                ref={monthRef}
-                class={styles.scroller}
-                onScroll={handleMonthScroll}
-              >
-                <div style={{ height: `${(VISIBLE_ITEMS - 1) / 2 * ITEM_HEIGHT}px` }} />
-                <For each={MONTHS}>
-                  {(month, i) => {
-                    const disabled = (
-                      selectedYear() === minYear && i() < minDate.getMonth()
-                    ) || (
-                      selectedYear() === maxYear && i() > maxDate.getMonth()
-                    )
-                    return (
-                      <span
-                        class={[
-                          styles.item,
-                          styles.monthItem,
-                          i() === selectedMonth() && styles.itemSelected,
-                          disabled && styles.itemDisabled,
-                        ].filter(Boolean).join(' ')}
-                        style={{ height: `${ITEM_HEIGHT}px` }}
-                      >
-                        {month.slice(0, 3)}
-                      </span>
-                    )
-                  }}
-                </For>
-                <div style={{ height: `${(VISIBLE_ITEMS - 1) / 2 * ITEM_HEIGHT}px` }} />
-              </div>
-            </div>
-
-            <div class={styles.column}>
-              <div
-                ref={dayRef}
-                class={styles.scroller}
-                onScroll={handleDayScroll}
-              >
-                <div style={{ height: `${(VISIBLE_ITEMS - 1) / 2 * ITEM_HEIGHT}px` }} />
-                <For each={Array.from({ length: maxDay() }, (_, i) => i + 1)}>
-                  {(day) => (
-                    <span
-                      class={[
-                        styles.item,
-                        styles.dayItem,
-                        day === selectedDay() && styles.itemSelected,
-                      ].filter(Boolean).join(' ')}
-                      style={{ height: `${ITEM_HEIGHT}px` }}
-                    >
-                      {String(day).padStart(2, '0')}
-                    </span>
-                  )}
-                </For>
-                <div style={{ height: `${(VISIBLE_ITEMS - 1) / 2 * ITEM_HEIGHT}px` }} />
-              </div>
-            </div>
-          </div>
-
-          <p class={styles.weekday}>{weekday()}</p>
-        </div>
-      </div>
-    </Portal>
-  )
-}