@balikjs/mobile 0.0.2 → 0.1.0

package/src/DatePicker/DatePicker.module.css

@@ -1,197 +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;
-}
-
-.root {
-  position: fixed;
-  inset-inline: 0;
-  bottom: 0;
-  z-index: var(--b-z-index-modal);
-  background-color: oklch(95% 0 0);
-  border-radius: 16px 16px 0 0;
-  display: flex;
-  flex-direction: column;
-  transform: translateY(100%);
-  pointer-events: none;
-  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
-  overflow: hidden;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.root[data-open] {
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 0.5px solid color-mix(in oklch, var(--base-fg) 10%, transparent);
-  flex-shrink: 0;
-  background-color: oklch(97% 0 0);
-}
-
-.headerTitle {
-  font-size: var(--b-comp-font-size-md);
-  font-weight: 600;
-  color: var(--base-fg);
-}
-
-.headerBtn {
-  font-size: var(--b-comp-font-size-md);
-  font-weight: 500;
-  color: var(--base-edge);
-  background: none;
-  border: none;
-  padding: 4px 8px;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  border-radius: var(--b-radius-l1-md);
-  transition: background-color var(--b-transition-fast);
-}
-
-.headerBtn:active {
-  background-color: color-mix(in oklch, var(--base-fg) 6%, transparent);
-}
-
-.headerBtnConfirm {
-  font-weight: 600;
-}
-
-.pickerBody {
-  position: relative;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 0 8px 16px;
-}
-
-.selectedBar {
-  position: absolute;
-  inset-inline: 24px;
-  top: 50%;
-  transform: translateY(calc(-50% + 8px));
-  height: 40px;
-  border-top: 1px solid color-mix(in oklch, var(--base-fg) 10%, transparent);
-  border-bottom: 1px solid color-mix(in oklch, var(--base-fg) 10%, transparent);
-  background-color: color-mix(in oklch, var(--base-fg) 2%, transparent);
-  border-radius: var(--b-radius-l2-xs);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.columns {
-  display: flex;
-  position: relative;
-  z-index: 1;
-  padding: 20px 0;
-}
-
-.column {
-  flex: 1;
-  overflow: hidden;
-}
-
-.column:first-child {
-  flex: 1.1;
-}
-
-.column:last-child {
-  flex: 0.9;
-}
-
-.scroller {
-  height: 200px;
-  overflow-y: auto;
-  scroll-snap-type: y mandatory;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  mask-image: linear-gradient(
-    to bottom,
-    transparent 0%,
-    rgba(0, 0, 0, 0.2) 15%,
-    rgba(0, 0, 0, 1) 30%,
-    rgba(0, 0, 0, 1) 70%,
-    rgba(0, 0, 0, 0.2) 85%,
-    transparent 100%
-  );
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    transparent 0%,
-    rgba(0, 0, 0, 0.2) 15%,
-    rgba(0, 0, 0, 1) 30%,
-    rgba(0, 0, 0, 1) 70%,
-    rgba(0, 0, 0, 0.2) 85%,
-    transparent 100%
-  );
-}
-
-.scroller::-webkit-scrollbar {
-  display: none;
-}
-
-.yearColumn {
-  align-items: flex-end;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  scroll-snap-align: center;
-  font-size: var(--b-comp-font-size-lg);
-  color: color-mix(in oklch, var(--base-fg) 40%, transparent);
-  transition: color 0.2s ease, font-weight 0.2s ease;
-  cursor: pointer;
-}
-
-.yearItem {
-  justify-content: flex-end;
-  padding-right: 8px;
-}
-
-.monthItem {
-  justify-content: center;
-  min-width: 80px;
-}
-
-.dayItem {
-  justify-content: flex-start;
-  padding-left: 8px;
-  min-width: 48px;
-  font-variant-numeric: tabular-nums;
-}
-
-.itemSelected {
-  color: var(--base-fg);
-  font-weight: 600;
-  font-size: var(--b-comp-font-size-xl);
-}
-
-.itemDisabled {
-  color: color-mix(in oklch, var(--base-fg) 15%, transparent);
-  pointer-events: none;
-}
-
-.weekday {
-  text-align: center;
-  font-size: var(--b-comp-font-size-xs);
-  color: color-mix(in oklch, var(--base-fg) 40%, transparent);
-  margin: 0;
-  padding: 8px 0 0;
-}

package/src/DatePicker/index.js

@@ -1 +0,0 @@
-export { DatePicker } from './DatePicker.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'

package/src/Empty/Empty.jsx

@@ -1,35 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import styles from './Empty.module.css'
-
-const DEFAULT_PROPS = {
-  title: 'No data',
-}
-
-/**
- * @param {{
- *   title?: string
- *   icon?: import('solid-js').JSX.Element
- *   class?: string
- * }} props
- */
-export function Empty(props) {
-  const [local] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['title', 'icon', 'class'],
-  )
-
-  return (
-    <div
-      class={[
-        'balik-empty',
-        styles.base,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {local.icon}
-      <p class={styles.title}>{local.title}</p>
-    </div>
-  )
-}

package/src/Empty/Empty.module.css

@@ -1,17 +0,0 @@
-.base {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  width: 100%;
-  padding: 40px 16px;
-  gap: 12px;
-}
-
-.title {
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--base-fg);
-}

package/src/Empty/index.js

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

package/src/Fab/Fab.jsx

@@ -1,91 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Popover } from '../Popover/Popover.jsx'
-import styles from './Fab.module.css'
-
-const DEFAULT_PROPS = {}
-
-/**
- * @param {import('solid-js').JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   icon: import('solid-js').JSX.Element
- *   class?: string
- * }} props
- */
-export function Fab(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['icon', 'class'],
-  )
-
-  return (
-    <button
-      {...rest}
-      type="button"
-      class={[
-        'balik-fab',
-        styles.base,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <span class={styles.icon}>{local.icon}</span>
-    </button>
-  )
-}
-
-/**
- * @param {import('solid-js').JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   icon: import('solid-js').JSX.Element
- *   label?: string
- *   class?: string
- * }} props
- */
-function FabItem(props) {
-  const [local, rest] = splitProps(props, ['icon', 'label', 'class'])
-
-  return (
-    <button
-      {...rest}
-      type="button"
-      class={[
-        styles.item,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <span class={styles.itemIcon}>{local.icon}</span>
-      {local.label && <span class={styles.itemLabel}>{local.label}</span>}
-    </button>
-  )
-}
-
-/**
- * @param {{
- *   icon: import('solid-js').JSX.Element
- *   'aria-label'?: string
- *   class?: string
- *   style?: string | import('solid-js').JSX.CSSProperties
- *   children?: import('solid-js').JSX.Element
- * }} props
- */
-function FabGroup(props) {
-  const [local] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['icon', 'aria-label', 'class', 'style', 'children'],
-  )
-
-  return (
-    <Popover positioning={{ placement: 'top-end', gutter: 16 }}>
-      <Popover.Trigger>
-        <Fab icon={local.icon} aria-label={local['aria-label']} class={styles.trigger} />
-      </Popover.Trigger>
-      <Popover.Content class={styles.groupContent}>
-        <div class={styles.items}>{local.children}</div>
-      </Popover.Content>
-    </Popover>
-  )
-}
-
-Fab.Group = FabGroup
-Fab.Group.Item = FabItem