@balikjs/mobile 0.0.2 → 0.1.1

package/src/Alert/Alert.jsx

@@ -1,67 +0,0 @@
-import { splitProps, mergeProps, Show } from 'solid-js'
-import { CircleCheck, TriangleAlert, CircleAlert, Info } from 'lucide-solid'
-import { CloseButton } from '../CloseButton/CloseButton.jsx'
-import styles from './Alert.module.css'
-
-const intents = {
-  info: styles.intentInfo,
-  success: styles.intentSuccess,
-  warning: styles.intentWarning,
-  danger: styles.intentDanger,
-}
-
-const intentIcons = {
-  success: () => <CircleCheck size={20} aria-hidden="true" />,
-  warning: () => <TriangleAlert size={20} aria-hidden="true" />,
-  danger: () => <CircleAlert size={20} aria-hidden="true" />,
-  info: () => <Info size={20} aria-hidden="true" />,
-}
-
-const DEFAULT_PROPS = {
-  intent: 'info',
-  closeable: false,
-}
-
-/**
- * @param {{
- *   title: string
- *   description?: string
- *   intent?: 'info' | 'success' | 'warning' | 'danger'
- *   closeable?: boolean
- *   onClose?: () => void
- *   class?: string
- * }} props
- */
-export function Alert(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['title', 'description', 'intent', 'closeable', 'onClose', 'class'],
-  )
-
-  return (
-    <div
-      {...rest}
-      role="alert"
-      class={[
-        'balik-alert',
-        `balik-alert--${local.intent}`,
-        styles.base,
-        intents[local.intent],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <span class={styles.icon}>{intentIcons[local.intent]()}</span>
-      <div class={styles.body}>
-        <p class={styles.title}>{local.title}</p>
-        <Show when={local.description}>
-          <p class={styles.description}>{local.description}</p>
-        </Show>
-      </div>
-      <Show when={local.closeable}>
-        <CloseButton size="xs" class={styles.close} onClick={() => local.onClose?.()} />
-      </Show>
-    </div>
-  )
-}

package/src/Alert/Alert.module.css

@@ -1,87 +0,0 @@
-.base {
-  --_alert-tint: transparent;
-  --_alert-accent: transparent;
-
-  display: flex;
-  align-items: flex-start;
-  gap: var(--b-spacing-sm);
-  padding: var(--b-container-padding-sm) var(--b-container-padding-sm);
-  border-radius: var(--b-radius-l2-sm);
-  background-color: var(--_alert-tint);
-  border-left: 3px solid var(--_alert-accent);
-}
-
-.icon {
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  margin-top: 1px;
-  color: var(--_alert-accent);
-}
-
-.icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.body {
-  flex: 1;
-  min-width: 0;
-}
-
-.title {
-  margin: 0;
-  font-size: var(--b-comp-font-size-md);
-  line-height: var(--b-comp-line-height-md);
-  color: var(--base-fg);
-}
-
-.description {
-  margin: var(--b-spacing-xxs) 0 0;
-  font-size: var(--b-comp-font-size-sm);
-  line-height: var(--b-comp-line-height-sm);
-  color: color-mix(in oklch, var(--base-fg) 60%, transparent);
-}
-
-.close {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin: -1px -4px 0 0;
-  padding: 0;
-  border: none;
-  border-radius: var(--b-radius-l1-sm);
-  background: transparent;
-  color: color-mix(in oklch, var(--base-fg) 35%, transparent);
-  cursor: pointer;
-}
-
-.close svg {
-  display: block;
-  width: 14px;
-  height: 14px;
-}
-
-.intentInfo {
-  --_alert-tint: color-mix(in oklch, var(--color-info) 10%, var(--base-bg));
-  --_alert-accent: var(--color-info);
-}
-
-.intentSuccess {
-  --_alert-tint: color-mix(in oklch, var(--color-success) 10%, var(--base-bg));
-  --_alert-accent: var(--color-success);
-}
-
-.intentWarning {
-  --_alert-tint: color-mix(in oklch, var(--color-warning) 10%, var(--base-bg));
-  --_alert-accent: var(--color-warning);
-}
-
-.intentDanger {
-  --_alert-tint: color-mix(in oklch, var(--color-danger) 10%, var(--base-bg));
-  --_alert-accent: var(--color-danger);
-}

package/src/Alert/index.js

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

package/src/Avatar/Avatar.jsx

@@ -1,77 +0,0 @@
-import { splitProps, mergeProps, Show, createMemo } from 'solid-js'
-import styles from './Avatar.module.css'
-
-const sizes = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-  '2xl': styles.size2xl,
-}
-
-const genders = {
-  male: styles.male,
-  female: styles.female,
-}
-
-const DEFAULT_PROPS = {
-  size: 'md',
-  gender: 'male',
-}
-
-/**
- * @param {import('solid-js').JSX.HTMLAttributes<HTMLSpanElement> & {
- *   src?: string
- *   alt?: string
- *   name?: string
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- *   gender?: 'male' | 'female'
- *   class?: string
- * }} props
- */
-export function Avatar(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['src', 'alt', 'name', 'size', 'gender', 'class'],
-  )
-
-  const initials = createMemo(() => {
-    if (!local.name) return '?'
-    return local.name
-      .split(/\s+/)
-      .filter(Boolean)
-      .slice(0, 2)
-      .map((w) => w[0])
-      .join('')
-  })
-
-  return (
-    <span
-      {...rest}
-      role="img"
-      aria-label={local.alt || local.name || 'Avatar'}
-      class={[
-        'balik-avatar',
-        `balik-avatar--${local.size}`,
-        styles.base,
-        sizes[local.size],
-        genders[local.gender],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <Show
-        when={local.src}
-        fallback={
-          <span class={styles.fallback} aria-hidden="true">
-            {initials()}
-          </span>
-        }
-      >
-        <img class={styles.image} src={local.src} alt={local.alt || ''} />
-      </Show>
-    </span>
-  )
-}

package/src/Avatar/Avatar.module.css

@@ -1,74 +0,0 @@
-.base {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: 50%;
-  background-color: color-mix(in oklch, var(--base-edge) 15%, var(--base-bg));
-  color: var(--base-edge);
-  font-family: inherit;
-  font-weight: 600;
-  text-transform: uppercase;
-  overflow: hidden;
-  user-select: none;
-}
-
-.image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
-}
-
-.fallback {
-  line-height: 1;
-}
-
-.sizeXs {
-  width: var(--b-comp-height-xs);
-  height: var(--b-comp-height-xs);
-  font-size: 14px;
-}
-
-.sizeSm {
-  width: var(--b-comp-height-sm);
-  height: var(--b-comp-height-sm);
-  font-size: 16px;
-}
-
-.sizeMd {
-  width: var(--b-comp-height-md);
-  height: var(--b-comp-height-md);
-  font-size: 18px;
-}
-
-.sizeLg {
-  width: var(--b-comp-height-lg);
-  height: var(--b-comp-height-lg);
-  font-size: 20px;
-}
-
-.sizeXl {
-  width: var(--b-comp-height-xl);
-  height: var(--b-comp-height-xl);
-  font-size: 22px;
-}
-
-.size2xl {
-  width: var(--b-comp-height-2xl);
-  height: var(--b-comp-height-2xl);
-  font-size: 28px;
-}
-
-.male {
-  background-color: #e3f2fd;
-  color: #1976d2;
-}
-
-.female {
-  background-color: #fce4ec;
-  color: #c62828;
-}

package/src/Avatar/index.js

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

package/src/Badge/Badge.jsx

@@ -1,83 +0,0 @@
-import { splitProps, mergeProps, Show } from 'solid-js'
-import styles from './Badge.module.css'
-
-const sizes = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-  '2xl': styles.size2xl,
-}
-
-const solidIntents = {
-  default: styles.solidDefault,
-  danger: styles.solidDanger,
-  success: styles.solidSuccess,
-  warning: styles.solidWarning,
-  info: styles.solidInfo,
-  intent: styles.solidIntent,
-}
-
-const outlineIntents = {
-  default: styles.outlineDefault,
-  danger: styles.outlineDanger,
-  success: styles.outlineSuccess,
-  warning: styles.outlineWarning,
-  info: styles.outlineInfo,
-  intent: styles.outlineIntent,
-}
-
-const intentClasses = {
-  solid: solidIntents,
-  outline: outlineIntents,
-}
-
-const DEFAULT_PROPS = {
-  size: 'md',
-  intent: 'default',
-  solid: true,
-  dot: false,
-}
-
-/**
- * @param {import('solid-js').JSX.HTMLAttributes<HTMLSpanElement> & {
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- *   intent?: 'default' | 'danger' | 'success' | 'warning' | 'info' | 'intent'
- *   solid?: boolean
- *   dot?: boolean
- *   class?: string
- *   children?: import('solid-js').JSX.Element
- * }} props
- */
-export function Badge(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['size', 'intent', 'solid', 'dot', 'class', 'children'],
-  )
-
-  const variant = local.solid ? 'solid' : 'outline'
-
-  return (
-    <span
-      {...rest}
-      class={[
-        'balik-badge',
-        `balik-badge--${variant}`,
-        `balik-badge--${local.intent}`,
-        `balik-badge--${local.size}`,
-        styles.base,
-        sizes[local.size],
-        intentClasses[variant][local.intent],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <Show when={local.dot}>
-        <span class={styles.dot} aria-hidden="true" />
-      </Show>
-      {local.children}
-    </span>
-  )
-}

package/src/Badge/Badge.module.css

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

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

package/src/BottomNavigation/BottomNavigation.jsx

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

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

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

package/src/BottomSheet/BottomSheet.jsx

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