@balikjs/mobile 0.0.1

package/src/Badge/Badge.module.css

@@ -0,0 +1,141 @@
+.base {
+  --_badge-bg: transparent;
+  --_badge-fg: transparent;
+  --_badge-border: transparent;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border: 1px solid var(--_badge-border);
+  border-radius: var(--b-radius-round);
+  background-color: var(--_badge-bg);
+  color: var(--_badge-fg);
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* ── Size ── */
+
+.sizeXs {
+  height: var(--b-comp-secondary-height-xs);
+  min-width: calc(2 * var(--b-comp-secondary-height-xs));
+  padding: 0 6px;
+  font-size: 10px;
+}
+
+.sizeSm {
+  height: var(--b-comp-secondary-height-sm);
+  min-width: calc(2 * var(--b-comp-secondary-height-sm));
+  padding: 0 7px;
+  font-size: 10px;
+}
+
+.sizeMd {
+  height: var(--b-comp-secondary-height-md);
+  min-width: calc(2 * var(--b-comp-secondary-height-md));
+  padding: 0 8px;
+  font-size: 11px;
+}
+
+.sizeLg {
+  height: var(--b-comp-secondary-height-lg);
+  min-width: calc(2 * var(--b-comp-secondary-height-lg));
+  padding: 0 9px;
+  font-size: 12px;
+}
+
+.sizeXl {
+  height: var(--b-comp-secondary-height-xl);
+  min-width: calc(2 * var(--b-comp-secondary-height-xl));
+  padding: 0 10px;
+  font-size: 13px;
+}
+
+.size2xl {
+  height: var(--b-comp-secondary-height-2xl);
+  min-width: calc(2 * var(--b-comp-secondary-height-2xl));
+  padding: 0 14px;
+  font-size: 16px;
+}
+
+/* ── Intent: solid ── */
+
+.solidDefault {
+  --_badge-bg: color-mix(in oklch, var(--base-fg) 10%, var(--base-bg));
+  --_badge-fg: var(--base-fg);
+  --_badge-border: color-mix(in oklch, var(--base-fg) 10%, var(--base-bg));
+}
+
+.solidDanger {
+  --_badge-bg: color-mix(in oklch, var(--color-danger) 12%, var(--base-bg));
+  --_badge-fg: var(--color-danger);
+  --_badge-border: color-mix(in oklch, var(--color-danger) 12%, var(--base-bg));
+}
+
+.solidSuccess {
+  --_badge-bg: color-mix(in oklch, var(--color-success) 12%, var(--base-bg));
+  --_badge-fg: var(--color-success);
+  --_badge-border: color-mix(in oklch, var(--color-success) 12%, var(--base-bg));
+}
+
+.solidWarning {
+  --_badge-bg: color-mix(in oklch, var(--color-warning) 12%, var(--base-bg));
+  --_badge-fg: var(--color-warning);
+  --_badge-border: color-mix(in oklch, var(--color-warning) 12%, var(--base-bg));
+}
+
+.solidInfo {
+  --_badge-bg: color-mix(in oklch, var(--color-info) 12%, var(--base-bg));
+  --_badge-fg: var(--color-info);
+  --_badge-border: color-mix(in oklch, var(--color-info) 12%, var(--base-bg));
+}
+
+.solidIntent {
+  --_badge-bg: color-mix(in oklch, var(--base-edge) 12%, var(--base-bg));
+  --_badge-fg: var(--base-edge);
+  --_badge-border: color-mix(in oklch, var(--base-edge) 12%, var(--base-bg));
+}
+
+/* ── Intent: outline ── */
+
+.outlineDefault {
+  --_badge-fg: color-mix(in oklch, var(--base-fg) 60%, transparent);
+  --_badge-border: color-mix(in oklch, var(--base-fg) 16%, var(--base-bg));
+}
+
+.outlineDanger {
+  --_badge-fg: var(--color-danger);
+  --_badge-border: color-mix(in oklch, var(--color-danger) 25%, var(--base-bg));
+}
+
+.outlineSuccess {
+  --_badge-fg: var(--color-success);
+  --_badge-border: color-mix(in oklch, var(--color-success) 25%, var(--base-bg));
+}
+
+.outlineWarning {
+  --_badge-fg: var(--color-warning);
+  --_badge-border: color-mix(in oklch, var(--color-warning) 25%, var(--base-bg));
+}
+
+.outlineInfo {
+  --_badge-fg: var(--color-info);
+  --_badge-border: color-mix(in oklch, var(--color-info) 25%, var(--base-bg));
+}
+
+.outlineIntent {
+  --_badge-fg: var(--base-edge);
+  --_badge-border: color-mix(in oklch, var(--base-edge) 25%, var(--base-bg));
+}
+
+/* ── Dot ── */
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+}

package/src/Badge/index.js

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

package/src/BottomNavigation/BottomNavigation.jsx

@@ -0,0 +1,61 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import styles from './BottomNavigation.module.css'
+
+/**
+ * @param {{
+ *   icon: import('solid-js').JSX.Element
+ *   label: string
+ *   active?: boolean
+ *   href?: string
+ *   onClick?: (e: MouseEvent) => void
+ * }} props
+ */
+export function BottomNavigationItem(props) {
+  const [local] = splitProps(props, ['icon', 'label', 'active', 'href', 'onClick'])
+
+  const tag = local.href ? 'a' : 'button'
+
+  return (
+    <Dynamic
+      component={tag}
+      {...(local.href ? { href: local.href } : { type: 'button' })}
+      class={styles.item}
+      data-active={local.active ? '' : undefined}
+      onClick={local.onClick}
+    >
+      <span class={styles.icon}>{local.icon}</span>
+      <span class={styles.label}>{local.label}</span>
+    </Dynamic>
+  )
+}
+
+const DEFAULT_PROPS = {}
+
+/**
+ * @param {import('solid-js').JSX.HTMLAttributes<HTMLElement> & {
+ *   class?: string
+ * }} props
+ */
+export function BottomNavigation(props) {
+  const [local] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['class', 'children'],
+  )
+
+  return (
+    <nav
+      class={[
+        'balik-bottom-navigation',
+        styles.root,
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {local.children}
+    </nav>
+  )
+}
+
+BottomNavigation.Item = BottomNavigationItem

package/src/BottomNavigation/BottomNavigation.module.css

@@ -0,0 +1,53 @@
+.root {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 56px;
+  padding-bottom: env(safe-area-inset-bottom);
+  background-color: var(--base-bg);
+  border-top: 1px solid color-mix(in oklch, var(--base-fg) 8%, var(--base-bg));
+  z-index: var(--b-z-index-base);
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 12px;
+  border: none;
+  background: none;
+  font-family: inherit;
+  color: color-mix(in oklch, var(--base-fg) 45%, var(--base-bg));
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  transition: color var(--b-transition-fast);
+}
+
+.item[data-active] {
+  color: var(--base-edge);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.label {
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 500;
+}

package/src/BottomNavigation/index.js

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

package/src/BottomSheet/BottomSheet.jsx

@@ -0,0 +1,51 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import styles from './BottomSheet.module.css'
+
+const DEFAULT_PROPS = {}
+
+/**
+ * @param {{
+ *   open: boolean
+ *   onOpenChange?: (open: boolean) => void
+ *   title?: string
+ *   class?: string
+ *   children?: import('solid-js').JSX.Element
+ * }} props
+ */
+export function BottomSheet(props) {
+  const [local] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['open', 'onOpenChange', 'title', 'class', 'children'],
+  )
+
+  return (
+    <Portal mount={document.body}>
+      <div
+        class={styles.backdrop}
+        data-open={local.open ? '' : undefined}
+        onClick={() => local.onOpenChange?.(false)}
+      />
+      <div
+        class={[
+          'balik-bottom-sheet',
+          styles.sheet,
+          local.class,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        data-open={local.open ? '' : undefined}
+        role="dialog"
+        aria-modal="true"
+        aria-label={local.title || 'BottomSheet'}
+      >
+        {local.title && (
+          <div class={styles.header}>
+            <h2 class={styles.title}>{local.title}</h2>
+          </div>
+        )}
+        <div class={styles.body}>{local.children}</div>
+      </div>
+    </Portal>
+  )
+}

package/src/BottomSheet/BottomSheet.module.css

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

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

package/src/Button/Button.jsx

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

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

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

package/src/Card/Card.jsx

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

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

package/src/Card/index.js

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

package/src/Checkbox/Checkbox.jsx

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