@balikjs/mobile 0.0.1 → 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/Dialog/Dialog.jsx

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

package/src/Dialog/Dialog.module.css

@@ -1,111 +0,0 @@
-.backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--b-z-index-modal);
-  background-color: rgba(0, 0, 0, 0.4);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--b-transition-normal);
-}
-
-.backdrop[data-state="open"] {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.backdrop[data-state="closed"] {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.positioner {
-  position: fixed;
-  inset: 0;
-  z-index: var(--b-z-index-modal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--b-spacing-lg);
-  pointer-events: none;
-}
-
-.content {
-  --_dialog-padding: 16px;
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100vh - var(--b-spacing-lg) * 2);
-  width: 100%;
-  max-width: 440px;
-  background-color: var(--base-bg);
-  border-radius: var(--b-radius-l3-md);
-  box-shadow: var(--b-shadow-lg);
-  pointer-events: auto;
-  opacity: 0;
-  transform: scale(0.95);
-  transition:
-    opacity var(--b-transition-normal),
-    transform var(--b-transition-normal);
-  overflow-y: auto;
-}
-
-.content[data-state="open"] {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.content[data-state="closed"] {
-  opacity: 0;
-  transform: scale(0.95);
-}
-
-.title {
-  margin: 0;
-  padding:
-    var(--_dialog-padding)
-    var(--_dialog-padding)
-    0;
-  font-size: var(--b-font-size-lg);
-  font-weight: 600;
-  color: var(--base-fg);
-}
-
-.description {
-  margin: 0;
-  padding:
-    var(--b-spacing-sm)
-    var(--_dialog-padding)
-    0;
-  font-size: var(--b-font-size-md);
-  line-height: var(--b-line-height);
-  color: color-mix(in oklch, var(--base-fg) 55%, transparent);
-}
-
-.body {
-  padding: var(--_dialog-padding);
-}
-
-.close {
-  position: absolute;
-  top: var(--_dialog-padding);
-  right: var(--_dialog-padding);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  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;
-}
-
-.close svg {
-  display: block;
-  width: 16px;
-  height: 16px;
-  pointer-events: none;
-}

package/src/Dialog/index.js

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

package/src/Divider/Divider.jsx

@@ -1,38 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import styles from './Divider.module.css'
-
-const orientations = {
-  horizontal: styles.horizontal,
-  vertical: styles.vertical,
-}
-
-const DEFAULT_PROPS = {
-  orientation: 'horizontal',
-}
-
-/**
- * @param {import('solid-js').JSX.HTMLAttributes<HTMLHRElement> & {
- *   orientation?: 'horizontal' | 'vertical'
- *   class?: string
- * }} props
- */
-export function Divider(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['orientation', 'class'],
-  )
-
-  return (
-    <hr
-      {...rest}
-      class={[
-        'balik-divider',
-        `balik-divider--${local.orientation}`,
-        orientations[local.orientation],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    />
-  )
-}

package/src/Divider/Divider.module.css

@@ -1,16 +0,0 @@
-.horizontal {
-  width: 100%;
-  height: 1px;
-  flex-shrink: 0;
-  border: none;
-  background-color: color-mix(in oklch, var(--base-fg) 10%, var(--base-bg));
-}
-
-.vertical {
-  width: 1px;
-  height: 100%;
-  min-height: 1em;
-  flex-shrink: 0;
-  border: none;
-  background-color: color-mix(in oklch, var(--base-fg) 10%, var(--base-bg));
-}

package/src/Divider/index.js

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

package/src/Drawer/Drawer.jsx

@@ -1,55 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Portal } from 'solid-js/web'
-import styles from './Drawer.module.css'
-
-const DEFAULT_PROPS = {
-  side: 'right',
-}
-
-/**
- * @param {{
- *   open: boolean
- *   onOpenChange?: (open: boolean) => void
- *   title?: string
- *   side?: 'left' | 'right'
- *   class?: string
- *   children?: import('solid-js').JSX.Element
- * }} props
- */
-export function Drawer(props) {
-  const [local] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['open', 'onOpenChange', 'title', 'side', 'class', 'children'],
-  )
-
-  return (
-    <Portal mount={document.body}>
-      <div
-        class={styles.backdrop}
-        data-open={local.open ? '' : undefined}
-        onClick={() => local.onOpenChange?.(false)}
-      />
-      <div
-        class={[
-          'balik-drawer',
-          styles.panel,
-          local.side === 'left' ? styles.sideLeft : styles.sideRight,
-          local.class,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        data-open={local.open ? '' : undefined}
-        role="dialog"
-        aria-modal="true"
-        aria-label={local.title || 'Drawer'}
-      >
-        {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/Drawer/Drawer.module.css

@@ -1,68 +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.25s ease;
-}
-
-.backdrop[data-open] {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.panel {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: var(--b-z-index-modal);
-  display: flex;
-  flex-direction: column;
-  width: 260px;
-  max-width: 80vw;
-  background-color: var(--base-bg);
-  overflow-y: auto;
-  transition: transform 0.25s ease;
-}
-
-.sideLeft {
-  left: 0;
-  border-right: 1px solid color-mix(in oklch, var(--base-fg) 8%, var(--base-bg));
-  transform: translateX(-100%);
-}
-
-.sideLeft[data-open] {
-  transform: translateX(0);
-}
-
-.sideRight {
-  right: 0;
-  border-left: 1px solid color-mix(in oklch, var(--base-fg) 8%, var(--base-bg));
-  transform: translateX(100%);
-}
-
-.sideRight[data-open] {
-  transform: translateX(0);
-}
-
-.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 {
-  padding: 16px;
-  flex: 1;
-}

package/src/Drawer/index.js

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