@balikjs/mobile 0.0.1 → 0.1.0

package/src/Toast/Toast.jsx

@@ -1,169 +0,0 @@
-import { createStore } from 'solid-js/store'
-import { onCleanup, createEffect, For, splitProps, mergeProps } from 'solid-js'
-import { CircleCheck, TriangleAlert, XCircle, Info } from 'lucide-solid'
-import { CloseButton } from '../CloseButton/CloseButton.jsx'
-import styles from './Toast.module.css'
-
-const positions = {
-  'top-left': styles.positionTopLeft,
-  'top-center': styles.positionTopCenter,
-  'top-right': styles.positionTopRight,
-  'bottom-left': styles.positionBottomLeft,
-  'bottom-center': styles.positionBottomCenter,
-  'bottom-right': styles.positionBottomRight,
-}
-
-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: () => <XCircle size={20} aria-hidden="true" />,
-  info: () => <Info size={20} aria-hidden="true" />,
-}
-
-let nextId = 0
-const [toasts, setToasts] = createStore([])
-
-/**
- * @param {string | {
- *   title: string
- *   description?: string
- *   intent?: 'info' | 'success' | 'warning' | 'danger'
- *   duration?: number
- * }} payload
- */
-export function toast(payload) {
-  const config = typeof payload === 'string' ? { title: payload } : payload
-
-  const id = ++nextId
-  const duration = config.duration ?? 5000
-
-  setToasts([...toasts, {
-    id,
-    title: config.title,
-    description: config.description ?? '',
-    intent: config.intent ?? 'info',
-    duration,
-    state: 'enter',
-  }])
-
-  if (duration > 0) {
-    setTimeout(() => dismiss(id), duration)
-  }
-
-  return id
-}
-
-function dismiss(id) {
-  setToasts(toast => toast.id === id, 'state', 'exit')
-}
-
-function remove(id) {
-  setToasts(toasts => toasts.filter(t => t.id !== id))
-}
-
-const REGION_DEFAULT_PROPS = {
-  position: 'top-right',
-}
-
-/**
- * @param {{
- *   position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
- *   class?: string
- * }} props
- */
-export function Toast(props) {
-  const [local, rest] = splitProps(
-    mergeProps(REGION_DEFAULT_PROPS, props),
-    ['position', 'class'],
-  )
-
-  return (
-    <section
-      {...rest}
-      aria-live="polite"
-      aria-label="Notifications"
-      class={[
-        'balik-toast-region',
-        styles.region,
-        positions[local.position],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <For each={toasts}>
-        {(item) => (
-          <ToastItem
-            id={item.id}
-            title={item.title}
-            description={item.description}
-            intent={item.intent}
-            state={item.state}
-          />
-        )}
-      </For>
-    </section>
-  )
-}
-
-/**
- * @param {{
- *   id: number
- *   title: string
- *   description: string
- *   intent: string
- *   state: string
- * }} props
- */
-function ToastItem(props) {
-  const [local] = splitProps(props, ['id', 'title', 'description', 'intent', 'state'])
-
-  const onTransitionEnd = (e) => {
-    if (e.target === e.currentTarget && local.state === 'exit') {
-      remove(local.id)
-    }
-  }
-
-  createEffect(() => {
-    if (local.state === 'enter') {
-      const raf = requestAnimationFrame(() => {
-        setToasts(toast => toast.id === local.id, 'state', 'visible')
-      })
-      onCleanup(() => cancelAnimationFrame(raf))
-    }
-  })
-
-  return (
-    <div
-      role="status"
-      class={[
-        'balik-toast',
-        styles.item,
-        intents[local.intent],
-        local.state === 'exit' && styles.itemExit,
-        local.state === 'visible' && styles.itemVisible,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      onTransitionEnd={onTransitionEnd}
-    >
-      <span class={styles.icon}>
-        {intentIcons[local.intent]()}
-      </span>
-      <div class={styles.body}>
-        <p class={styles.title}>{local.title}</p>
-        {local.description && (
-          <p class={styles.description}>{local.description}</p>
-        )}
-      </div>
-      <CloseButton size="xs" class={styles.close} onClick={() => dismiss(local.id)} />
-    </div>
-  )
-}

package/src/Toast/Toast.module.css

@@ -1,152 +0,0 @@
-.region {
-  position: fixed;
-  z-index: var(--b-z-index-toast);
-  display: flex;
-  flex-direction: column;
-  gap: var(--b-spacing-sm);
-  max-width: 420px;
-  width: 100%;
-  padding: var(--b-spacing-md);
-  pointer-events: none;
-}
-
-.positionTopLeft {
-  top: 0;
-  left: 0;
-  align-items: flex-start;
-}
-
-.positionTopCenter {
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-}
-
-.positionTopRight {
-  top: 0;
-  right: 0;
-  align-items: flex-end;
-}
-
-.positionBottomLeft {
-  bottom: 0;
-  left: 0;
-  align-items: flex-start;
-  flex-direction: column-reverse;
-}
-
-.positionBottomCenter {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-  flex-direction: column-reverse;
-}
-
-.positionBottomRight {
-  bottom: 0;
-  right: 0;
-  align-items: flex-end;
-  flex-direction: column-reverse;
-}
-
-.item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--b-spacing-sm);
-  width: 100%;
-  max-width: 380px;
-  padding: var(--b-container-padding-sm) var(--b-container-padding-md);
-  background-color: var(--base-bg);
-  border-radius: var(--b-radius-l2-sm);
-  box-shadow: var(--b-shadow-md);
-  pointer-events: auto;
-  opacity: 0;
-  transform: translateY(calc(var(--_toast-dir, -1) * -8px)) scale(0.96);
-  transition:
-    opacity var(--b-transition-normal),
-    transform var(--b-transition-normal);
-}
-
-.itemVisible {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
-
-.itemExit {
-  opacity: 0;
-  transform: translateY(calc(var(--_toast-dir, -1) * -8px)) scale(0.96);
-}
-
-.icon {
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  margin-top: 1px;
-}
-
-.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);
-  word-break: break-word;
-}
-
-.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) 65%, transparent);
-  word-break: break-word;
-}
-
-.close {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin: -2px -6px 0 0;
-  padding: 0;
-  border: none;
-  border-radius: var(--b-radius-l1-sm);
-  background: transparent;
-  color: color-mix(in oklch, var(--base-fg) 40%, transparent);
-  cursor: pointer;
-}
-
-.close svg {
-  display: block;
-  width: 16px;
-  height: 16px;
-}
-
-.intentSuccess .icon {
-  color: var(--color-success);
-}
-
-.intentWarning .icon {
-  color: var(--color-warning);
-}
-
-.intentDanger .icon {
-  color: var(--color-danger);
-}
-
-.intentInfo .icon {
-  color: var(--color-info);
-}

package/src/Toast/index.js

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

package/src/Tooltip/Tooltip.jsx

@@ -1,42 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Portal } from 'solid-js/web'
-import { Tooltip as ArkTooltip } from '@ark-ui/solid'
-import styles from './Tooltip.module.css'
-
-const DEFAULT_PROPS = {
-  openDelay: 300,
-  closeDelay: 100,
-}
-
-/**
- * @param {import('@ark-ui/solid').TooltipRootProps & {
- *   content: string
- *   class?: string
- * }} props
- */
-export function Tooltip(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['content', 'class', 'children'],
-  )
-
-  return (
-    <ArkTooltip.Root {...rest} openDelay={local.openDelay} closeDelay={local.closeDelay}>
-      <ArkTooltip.Trigger as="div" class={styles.trigger}>
-        {local.children}
-      </ArkTooltip.Trigger>
-      <Portal mount={document.body}>
-        <ArkTooltip.Positioner class={styles.positioner}>
-          <ArkTooltip.Content class={styles.content}>
-            <ArkTooltip.Arrow class={styles.arrow}>
-              <ArkTooltip.ArrowTip class={styles.arrowTip} />
-            </ArkTooltip.Arrow>
-            {local.content}
-          </ArkTooltip.Content>
-        </ArkTooltip.Positioner>
-      </Portal>
-    </ArkTooltip.Root>
-  )
-}
-
-Tooltip.Original = ArkTooltip

package/src/Tooltip/Tooltip.module.css

@@ -1,41 +0,0 @@
-.trigger {
-  display: inline-flex;
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: inherit;
-}
-
-.positioner {
-  z-index: calc(var(--b-z-index-modal) + 1);
-}
-
-.content {
-  padding: 4px 10px;
-  border-radius: 6px;
-  background-color: color-mix(in oklch, var(--base-fg) 90%, var(--base-bg));
-  color: var(--base-bg);
-  font-size: 12px;
-  line-height: 18px;
-  font-family: var(--b-font-family, inherit);
-  white-space: nowrap;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: tooltipIn 0.15s ease;
-}
-
-@keyframes tooltipIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.arrowTip {
-  --arrow-size: 6px;
-  --arrow-background: color-mix(in oklch, var(--base-fg) 90%, var(--base-bg));
-}

package/src/Tooltip/index.js

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

package/src/index.js

@@ -1,34 +0,0 @@
-export { Button } from './Button/Button.jsx'
-export { Input } from './Input/Input.jsx'
-export { Textarea } from './Textarea/Textarea.jsx'
-export { Select } from './Select/Select.jsx'
-export { SelectPc } from './SelectPc/Select.jsx'
-export { Checkbox } from './Checkbox/Checkbox.jsx'
-export { RadioGroup } from './RadioGroup/RadioGroup.jsx'
-export { Radio } from './RadioGroup/Radio.jsx'
-export { Switch } from './Switch/Switch.jsx'
-export { Toast, toast } from './Toast/Toast.jsx'
-export { Dialog } from './Dialog/Dialog.jsx'
-export { Confirm } from './Confirm/Confirm.jsx'
-export { Alert } from './Alert/Alert.jsx'
-export { Tabs } from './Tabs/Tabs.jsx'
-export { Skeleton } from './Skeleton/Skeleton.jsx'
-export { Divider } from './Divider/Divider.jsx'
-export { Badge } from './Badge/Badge.jsx'
-export { Avatar } from './Avatar/Avatar.jsx'
-export { CloseButton } from './CloseButton/CloseButton.jsx'
-export { SearchInput } from './SearchInput/SearchInput.jsx'
-export { Clipboard } from './Clipboard/Clipboard.jsx'
-export { Spinner } from './Spinner/Spinner.jsx'
-export { Empty } from './Empty/Empty.jsx'
-export { Tag } from './Tag/Tag.jsx'
-export { BottomSheet } from './BottomSheet/BottomSheet.jsx'
-export { Card } from './Card/Card.jsx'
-export { Slider } from './Slider/Slider.jsx'
-export { BottomNavigation } from './BottomNavigation/BottomNavigation.jsx'
-export { Link } from './Link/Link.jsx'
-export { Drawer } from './Drawer/Drawer.jsx'
-export { Tooltip } from './Tooltip/Tooltip.jsx'
-export { Popover } from './Popover/Popover.jsx'
-export { Fab } from './Fab/Fab.jsx'
-import './styles/index.css'

package/src/styles/index.css

@@ -1,90 +0,0 @@
-@import './tokens.css';
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  -webkit-tap-highlight-color: transparent;
-}
-
-body {
-  font-family: var(--b-font-family);
-  font-size: var(--b-font-size-md);
-  line-height: var(--b-line-height);
-  color: var(--base-fg);
-  background-color: var(--base-bg);
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-inline-size: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-  color: inherit;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-
-p {
-  text-wrap: pretty;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-wrap: balance;
-  font-weight: 600;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-:where(ul, ol) {
-  list-style: none;
-}
-
-:where(table) {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-:where(button) {
-  appearance: none;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-:where([hidden]) {
-  display: none;
-}