@balikjs/mobile 0.0.1 → 0.1.0

package/src/BottomSheet/BottomSheet.module.css

@@ -1,56 +0,0 @@
-.backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--b-z-index-modal);
-  background-color: rgba(0, 0, 0, 0.35);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-}
-
-.backdrop[data-open] {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.sheet {
-  position: fixed;
-  inset-inline: 0;
-  bottom: 0;
-  z-index: var(--b-z-index-modal);
-  background-color: var(--base-bg);
-  border-radius: 16px 16px 0 0;
-  max-height: 70vh;
-  display: flex;
-  flex-direction: column;
-  transform: translateY(100%);
-  pointer-events: none;
-  transition: transform 0.3s ease;
-}
-
-.sheet[data-open] {
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  border-bottom: 1px solid color-mix(in oklch, var(--base-fg) 6%, var(--base-bg));
-  flex-shrink: 0;
-}
-
-.title {
-  margin: 0;
-  font-size: var(--b-comp-font-size-lg);
-  font-weight: 600;
-  color: var(--base-fg);
-}
-
-.body {
-  overflow-y: auto;
-  padding: 16px;
-  flex: 1;
-  -webkit-overflow-scrolling: touch;
-}

package/src/BottomSheet/index.js

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

package/src/Button/Button.jsx

@@ -1,77 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { ark } from '@ark-ui/solid/factory'
-import { Loader2 } from 'lucide-solid'
-import styles from './Button.module.css'
-
-const roles = {
-  outline: styles.outline,
-  primary: styles.primary,
-}
-
-const intents = {
-  default: styles.intentDefault,
-  danger: styles.intentDanger,
-}
-
-const sizes = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-}
-
-const DEFAULT_PROPS = {
-  solid: false,
-  danger: false,
-  size: 'md',
-  disabled: false,
-  loading: false,
-}
-
-/**
- * @param {import('solid-js').JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   solid?: boolean
- *   danger?: boolean
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- *   loading?: boolean
- * }} props
- */
-export function Button(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['solid', 'danger', 'size', 'class', 'loading', 'disabled', 'children'],
-  )
-
-  const roleKey = local.solid ? 'primary' : 'outline'
-  const intentKey = local.danger ? 'danger' : 'default'
-
-  return (
-    <ark.button
-      {...rest}
-      disabled={local.disabled}
-      aria-disabled={local.loading || local.disabled}
-      class={[
-        'balik-button',
-        `balik-button--${roleKey}`,
-        `balik-button--${intentKey}`,
-        `balik-button--${local.size}`,
-        styles.base,
-        roles[roleKey],
-        intents[intentKey],
-        sizes[local.size],
-        local.loading && styles.loadingButton,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {local.children}
-      {local.loading && (
-        <span class={styles.loadingOverlay}>
-          <Loader2 class={styles.spinner} aria-hidden="true" />
-        </span>
-      )}
-    </ark.button>
-  )
-}

package/src/Button/Button.module.css

@@ -1,124 +0,0 @@
-.base {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  cursor: pointer;
-  font-family: inherit;
-  white-space: nowrap;
-  user-select: none;
-  touch-action: manipulation;
-  transition: background-color var(--b-transition-fast),
-    border-color var(--b-transition-fast),
-    opacity var(--b-transition-fast);
-
-  --_current-intent: var(--base-edge);
-}
-
-.base:disabled {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  color: var(--color-disabled-fg);
-  cursor: not-allowed;
-}
-
-.loadingOverlay {
-  position: absolute;
-  inset: -1px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: color-mix(in oklch, var(--base-bg) 50%, transparent);
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-.loadingButton {
-  pointer-events: none;
-}
-
-.outline {
-  background-color: var(--base-bg);
-  border-color: var(--_current-intent);
-  color: var(--base-fg);
-  --_spinner-color: var(--_current-intent);
-}
-
-.outline:active:not(:disabled) {
-  background-color: oklch(from var(--_current-intent) 0.96 0.03 h);
-  border-color: oklch(from var(--_current-intent) calc(l - 0.08) c h);
-}
-
-.primary {
-  background-color: var(--_current-intent);
-  border-color: var(--_current-intent);
-  color: var(--base-bg);
-  --_spinner-color: var(--_current-intent);
-}
-
-.primary:active:not(:disabled) {
-  background-color: oklch(from var(--_current-intent) calc(l + 0.08) calc(c - 0.02) h);
-  border-color: oklch(from var(--_current-intent) calc(l + 0.08) calc(c - 0.02) h);
-}
-
-.intentDefault {
-  --_current-intent: var(--base-edge);
-}
-
-.intentDanger {
-  --_current-intent: var(--color-danger);
-}
-
-.sizeXs {
-  height: var(--b-comp-height-xs);
-  line-height: var(--b-comp-line-height-xs);
-  padding: var(--b-comp-padding-y-xs) var(--b-comp-padding-x-xs);
-  font-size: var(--b-comp-font-size-xs);
-  border-radius: var(--b-radius-l1-xs);
-}
-
-.sizeSm {
-  height: var(--b-comp-height-sm);
-  line-height: var(--b-comp-line-height-sm);
-  padding: var(--b-comp-padding-y-sm) var(--b-comp-padding-x-sm);
-  font-size: var(--b-comp-font-size-sm);
-  border-radius: var(--b-radius-l1-sm);
-}
-
-.sizeMd {
-  height: var(--b-comp-height-md);
-  line-height: var(--b-comp-line-height-md);
-  padding: var(--b-comp-padding-y-md) var(--b-comp-padding-x-md);
-  font-size: var(--b-comp-font-size-md);
-  border-radius: var(--b-radius-l1-md);
-}
-
-.sizeLg {
-  height: var(--b-comp-height-lg);
-  line-height: var(--b-comp-line-height-lg);
-  padding: var(--b-comp-padding-y-lg) var(--b-comp-padding-x-lg);
-  font-size: var(--b-comp-font-size-lg);
-  border-radius: var(--b-radius-l1-lg);
-}
-
-.sizeXl {
-  height: var(--b-comp-height-xl);
-  line-height: var(--b-comp-line-height-xl);
-  padding: var(--b-comp-padding-y-xl) var(--b-comp-padding-x-xl);
-  font-size: var(--b-comp-font-size-xl);
-  border-radius: var(--b-radius-l1-xl);
-}
-
-.spinner {
-  width: 1em;
-  height: 1em;
-  color: var(--_spinner-color);
-  animation: balik-button-spin 0.6s linear infinite;
-}
-
-@keyframes balik-button-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/Button/index.js

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

package/src/Card/Card.jsx

@@ -1,31 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import styles from './Card.module.css'
-
-const DEFAULT_PROPS = {}
-
-/**
- * @param {import('solid-js').JSX.HTMLAttributes<HTMLDivElement> & {
- *   class?: string
- * }} props
- */
-export function Card(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['class', 'children'],
-  )
-
-  return (
-    <div
-      {...rest}
-      class={[
-        'balik-card',
-        styles.base,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {local.children}
-    </div>
-  )
-}

package/src/Card/Card.module.css

@@ -1,4 +0,0 @@
-.base {
-  background-color: var(--base-bg);
-  border-radius: var(--b-radius-l2-md);
-}

package/src/Card/index.js

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

package/src/Checkbox/Checkbox.jsx

@@ -1,64 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Checkbox as ArkCheckbox, useCheckboxContext } from '@ark-ui/solid'
-import { Minus, Check } from 'lucide-solid'
-import styles from './Checkbox.module.css'
-
-const sizes = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-  '2xl': styles.size2xl,
-}
-
-function IndicatorIcon() {
-  const api = useCheckboxContext()
-
-  return (
-    <>
-      {api().checked === 'indeterminate'
-        ? <Minus size="100%" aria-hidden="true" />
-        : <Check size="100%" aria-hidden="true" />}
-    </>
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').CheckboxRootProps & {
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- *   class?: string
- * }} props
- */
-export function Checkbox(props) {
-  const [local, rest] = splitProps(
-    mergeProps({ size: 'md' }, props),
-    ['class', 'children', 'size'],
-  )
-
-  return (
-    <ArkCheckbox.Root
-      {...rest}
-      class={[
-        'balik-checkbox',
-        styles.root,
-        sizes[local.size],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <ArkCheckbox.Control class={styles.control}>
-        <ArkCheckbox.Indicator indeterminate class={styles.indicator}>
-          <IndicatorIcon />
-        </ArkCheckbox.Indicator>
-      </ArkCheckbox.Control>
-      <ArkCheckbox.Label class={styles.label}>
-        {local.children}
-      </ArkCheckbox.Label>
-      <ArkCheckbox.HiddenInput />
-    </ArkCheckbox.Root>
-  )
-}
-
-Checkbox.Original = ArkCheckbox

package/src/Checkbox/Checkbox.module.css

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

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

package/src/Clipboard/Clipboard.jsx

@@ -1,82 +0,0 @@
-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>
-  )
-}