@balikjs/mobile 0.0.1

package/src/Checkbox/Checkbox.module.css

@@ -0,0 +1,146 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_ctrl-gap, 10px);
+  min-height: var(--_ctrl-min-height, var(--b-comp-height-md));
+  cursor: pointer;
+  font-family: inherit;
+  user-select: none;
+  touch-action: manipulation;
+}
+
+.root[data-disabled] {
+  cursor: not-allowed;
+}
+
+.control {
+  width: var(--_ctrl-size, var(--b-comp-secondary-height-md));
+  height: var(--_ctrl-size, var(--b-comp-secondary-height-md));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--_ctrl-radius, var(--b-radius-l1-md));
+  border: 1px solid var(--base-edge);
+  background-color: var(--base-bg);
+  color: transparent;
+  transition: background-color var(--b-transition-fast),
+    border-color var(--b-transition-fast),
+    color var(--b-transition-fast);
+}
+
+.control[data-state="checked"],
+.control[data-state="indeterminate"] {
+  background-color: var(--base-edge);
+  border-color: var(--base-edge);
+  color: var(--base-bg);
+}
+
+.root[data-disabled] .control {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  color: var(--base-bg);
+}
+
+.root[data-disabled] .control[data-state="checked"],
+.root[data-disabled] .control[data-state="indeterminate"] {
+  color: var(--color-disabled-fg);
+}
+
+.root[data-invalid] .control {
+  border-color: var(--color-danger);
+}
+
+.root[data-invalid] .control[data-state="checked"],
+.root[data-invalid] .control[data-state="indeterminate"] {
+  background-color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+.control:active:not([data-disabled]) {
+  transform: scale(0.88);
+}
+
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--_ctrl-icon-size, 12px);
+}
+
+.indicator svg {
+  width: 1em;
+  height: 1em;
+}
+
+.label {
+  font-size: var(--_ctrl-font-size, var(--b-comp-font-size-md));
+  line-height: var(--_ctrl-line-height, var(--b-comp-line-height-md));
+  color: var(--base-fg);
+}
+
+.root[data-disabled] .label {
+  color: var(--color-disabled-fg);
+}
+
+/* ─── Size Overrides ─── */
+
+.sizeXs {
+  --_ctrl-size: var(--b-comp-secondary-height-xs);
+  --_ctrl-radius: var(--b-radius-l1-xs);
+  --_ctrl-gap: 8px;
+  --_ctrl-min-height: var(--b-comp-height-xs);
+  --_ctrl-font-size: var(--b-comp-font-size-xs);
+  --_ctrl-line-height: var(--b-comp-line-height-xs);
+  --_ctrl-icon-size: 10px;
+}
+
+.sizeSm {
+  --_ctrl-size: var(--b-comp-secondary-height-sm);
+  --_ctrl-radius: var(--b-radius-l1-sm);
+  --_ctrl-gap: 9px;
+  --_ctrl-min-height: var(--b-comp-height-sm);
+  --_ctrl-font-size: var(--b-comp-font-size-sm);
+  --_ctrl-line-height: var(--b-comp-line-height-sm);
+  --_ctrl-icon-size: 11px;
+}
+
+.sizeMd {
+  --_ctrl-size: var(--b-comp-secondary-height-md);
+  --_ctrl-radius: var(--b-radius-l1-md);
+  --_ctrl-gap: 10px;
+  --_ctrl-min-height: var(--b-comp-height-md);
+  --_ctrl-font-size: var(--b-comp-font-size-md);
+  --_ctrl-line-height: var(--b-comp-line-height-md);
+  --_ctrl-icon-size: 12px;
+}
+
+.sizeLg {
+  --_ctrl-size: var(--b-comp-secondary-height-lg);
+  --_ctrl-radius: var(--b-radius-l1-lg);
+  --_ctrl-gap: 11px;
+  --_ctrl-min-height: var(--b-comp-height-lg);
+  --_ctrl-font-size: var(--b-comp-font-size-lg);
+  --_ctrl-line-height: var(--b-comp-line-height-lg);
+  --_ctrl-icon-size: 13px;
+}
+
+.sizeXl {
+  --_ctrl-size: var(--b-comp-secondary-height-xl);
+  --_ctrl-radius: var(--b-radius-l1-xl);
+  --_ctrl-gap: 12px;
+  --_ctrl-min-height: var(--b-comp-height-xl);
+  --_ctrl-font-size: var(--b-comp-font-size-xl);
+  --_ctrl-line-height: var(--b-comp-line-height-xl);
+  --_ctrl-icon-size: 14px;
+}
+
+.size2xl {
+  --_ctrl-size: var(--b-comp-secondary-height-2xl);
+  --_ctrl-radius: var(--b-radius-l1-2xl);
+  --_ctrl-gap: 16px;
+  --_ctrl-min-height: var(--b-comp-height-2xl);
+  --_ctrl-font-size: var(--b-comp-font-size-2xl);
+  --_ctrl-line-height: var(--b-comp-line-height-2xl);
+  --_ctrl-icon-size: 18px;
+}

package/src/Checkbox/index.js

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

package/src/Clipboard/Clipboard.jsx

@@ -0,0 +1,82 @@
+import { splitProps, mergeProps, createSignal, onCleanup } from 'solid-js'
+import { Copy, Check } from 'lucide-solid'
+import styles from './Clipboard.module.css'
+
+const sizes = {
+  xs: styles.sizeXs,
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+  xl: styles.sizeXl,
+}
+
+const DEFAULT_PROPS = {
+  size: 'md',
+  copiedDuration: 2000,
+  toastOnCopy: false,
+}
+
+/**
+ * @param {import('solid-js').JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   value: string
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ *   copiedDuration?: number
+ *   toastOnCopy?: boolean
+ *   class?: string
+ * }} props
+ */
+export function Clipboard(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['value', 'size', 'class', 'copiedDuration', 'toastOnCopy', 'children'],
+  )
+
+  const [copied, setCopied] = createSignal(false)
+  let timer = null
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(local.value)
+    } catch {
+      const textarea = document.createElement('textarea')
+      textarea.value = local.value
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+    }
+
+    setCopied(true)
+    clearTimeout(timer)
+    timer = setTimeout(() => setCopied(false), local.copiedDuration)
+  }
+
+  onCleanup(() => clearTimeout(timer))
+
+  return (
+    <button
+      {...rest}
+      type="button"
+      onClick={handleCopy}
+      class={[
+        'balik-clipboard',
+        `balik-clipboard--${local.size}`,
+        styles.base,
+        sizes[local.size],
+        copied() && styles.copied,
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {copied() ? (
+        <Check aria-hidden="true" class={styles.icon} />
+      ) : (
+        <Copy aria-hidden="true" class={styles.icon} />
+      )}
+      {local.children}
+    </button>
+  )
+}

package/src/Clipboard/Clipboard.module.css

@@ -0,0 +1,126 @@
+.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

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

package/src/CloseButton/CloseButton.jsx

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,94 @@
+.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

@@ -0,0 +1,52 @@
+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

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

package/src/Confirm/index.js

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

package/src/Dialog/Dialog.jsx

@@ -0,0 +1,63 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import { Dialog as ArkDialog } from '@ark-ui/solid'
+import { CloseButton } from '../CloseButton/CloseButton.jsx'
+import styles from './Dialog.module.css'
+
+const DEFAULT_PROPS = {
+  modal: true,
+  lazyMount: true,
+  unmountOnExit: true,
+  closeable: true,
+}
+
+/**
+ * @param {import('@ark-ui/solid').DialogRootProps & {
+ *   title?: string
+ *   description?: string
+ *   closeable?: boolean
+ *   class?: string
+ * }} props
+ */
+export function Dialog(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['title', 'description', 'class', 'children', 'modal', 'lazyMount', 'unmountOnExit', 'closeable'],
+  )
+
+  return (
+    <ArkDialog.Root {...rest} modal={local.modal} lazyMount={local.lazyMount} unmountOnExit={local.unmountOnExit}>
+      <Portal mount={document.body}>
+        <ArkDialog.Backdrop class={styles.backdrop} />
+        <ArkDialog.Positioner class={styles.positioner}>
+          <ArkDialog.Content
+            class={[
+              'balik-dialog',
+              styles.content,
+              local.class,
+            ]
+              .filter(Boolean)
+              .join(' ')}
+          >
+            {local.title && (
+              <ArkDialog.Title class={styles.title}>
+                {local.title}
+              </ArkDialog.Title>
+            )}
+            {local.description && (
+              <ArkDialog.Description class={styles.description}>
+                {local.description}
+              </ArkDialog.Description>
+            )}
+            <div class={styles.body}>{local.children}</div>
+            {local.closeable && (
+              <ArkDialog.CloseTrigger asChild={CloseButton} class={styles.close} />
+            )}
+          </ArkDialog.Content>
+        </ArkDialog.Positioner>
+      </Portal>
+    </ArkDialog.Root>
+  )
+}
+
+Dialog.Original = ArkDialog