@balikjs/mobile 0.0.1

package/src/Tag/Tag.jsx

@@ -0,0 +1,74 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { CloseButton } from '../CloseButton/CloseButton.jsx'
+import styles from './Tag.module.css'
+
+const variants = {
+  solid: styles.solid,
+  outline: styles.outline,
+}
+
+const intents = {
+  default: styles.intentDefault,
+  success: styles.intentSuccess,
+  warning: styles.intentWarning,
+  danger: styles.intentDanger,
+  info: styles.intentInfo,
+}
+
+const sizes = {
+  xs: styles.sizeXs,
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+  xl: styles.sizeXl,
+  '2xl': styles.size2xl,
+}
+
+const DEFAULT_PROPS = {
+  variant: 'solid',
+  intent: 'default',
+  size: 'sm',
+  closable: false,
+}
+
+/**
+ * @param {import('solid-js').JSX.HTMLAttributes<HTMLSpanElement> & {
+ *   variant?: 'solid' | 'outline'
+ *   intent?: 'default' | 'success' | 'warning' | 'danger' | 'info'
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+ *   closable?: boolean
+ *   onClose?: () => void
+ *   class?: string
+ *   children?: import('solid-js').JSX.Element
+ * }} props
+ */
+export function Tag(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['variant', 'intent', 'size', 'closable', 'onClose', 'class', 'children'],
+  )
+
+  return (
+    <span
+      {...rest}
+      class={[
+        'balik-tag',
+        `balik-tag--${local.variant}`,
+        `balik-tag--${local.intent}`,
+        `balik-tag--${local.size}`,
+        styles.base,
+        variants[local.variant],
+        intents[local.intent],
+        sizes[local.size],
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {local.children}
+      {local.closable && (
+        <CloseButton size="xs" rounded class={styles.close} onClick={(e) => { e.stopPropagation(); local.onClose?.() }} />
+      )}
+    </span>
+  )
+}

package/src/Tag/Tag.module.css

@@ -0,0 +1,128 @@
+.base {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  user-select: none;
+  border-radius: var(--b-radius-round);
+  font-family: inherit;
+  line-height: 1;
+  transition: background-color var(--b-transition-fast),
+    color var(--b-transition-fast),
+    border-color var(--b-transition-fast);
+
+  --_current-bg: var(--base-edge);
+  --_current-fg: var(--base-edge);
+  --_current-border: var(--base-edge);
+}
+
+.solid {
+  background-color: var(--_current-bg);
+  color: var(--base-bg);
+  border: 1px solid transparent;
+}
+
+.outline {
+  background-color: transparent;
+  color: var(--_current-fg);
+  border: 1px solid var(--_current-border);
+}
+
+.intentDefault {
+  --_current-bg: color-mix(in oklch, var(--base-fg) 10%, var(--base-bg));
+  --_current-fg: var(--base-fg);
+  --_current-border: var(--base-edge);
+}
+
+.intentSuccess {
+  --_current-bg: var(--color-success);
+  --_current-fg: var(--color-success);
+  --_current-border: var(--color-success);
+}
+
+.intentWarning {
+  --_current-bg: var(--color-warning);
+  --_current-fg: var(--color-warning);
+  --_current-border: var(--color-warning);
+}
+
+.intentDanger {
+  --_current-bg: var(--color-danger);
+  --_current-fg: var(--color-danger);
+  --_current-border: var(--color-danger);
+}
+
+.intentInfo {
+  --_current-bg: var(--color-info);
+  --_current-fg: var(--color-info);
+  --_current-border: var(--color-info);
+}
+
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  margin-right: -2px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: var(--b-radius-round);
+  opacity: 0.6;
+  transition: opacity var(--b-transition-fast);
+}
+
+.close:hover {
+  opacity: 1;
+}
+
+.solid .close {
+  color: inherit;
+}
+
+.outline .close {
+  color: currentColor;
+}
+
+.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 8px;
+  font-size: 11px;
+}
+
+.sizeMd {
+  height: var(--b-comp-secondary-height-md);
+  min-width: calc(2 * var(--b-comp-secondary-height-md));
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.sizeLg {
+  height: var(--b-comp-secondary-height-lg);
+  min-width: calc(2 * var(--b-comp-secondary-height-lg));
+  padding: 0 12px;
+  font-size: 13px;
+}
+
+.sizeXl {
+  height: var(--b-comp-secondary-height-xl);
+  min-width: calc(2 * var(--b-comp-secondary-height-xl));
+  padding: 0 14px;
+  font-size: 14px;
+}
+
+.size2xl {
+  height: var(--b-comp-secondary-height-2xl);
+  min-width: calc(2 * var(--b-comp-secondary-height-2xl));
+  padding: 0 18px;
+  font-size: 16px;
+}

package/src/Tag/index.js

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

package/src/Textarea/Textarea.jsx

@@ -0,0 +1,52 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { ark } from '@ark-ui/solid/factory'
+import styles from './Textarea.module.css'
+
+const variants = {
+  solid: styles.solid,
+  outline: styles.outline,
+}
+
+const sizes = {
+  xs: styles.sizeXs,
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+  xl: styles.sizeXl,
+}
+
+const DEFAULT_PROPS = {
+  variant: 'outline',
+  size: 'md',
+  disabled: false,
+}
+
+/**
+ * @param {import('solid-js').JSX.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+ *   variant?: 'solid' | 'outline'
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ * }} props
+ */
+export function Textarea(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['variant', 'size', 'class'],
+  )
+
+  return (
+    <ark.textarea
+      {...rest}
+      class={[
+        'balik-textarea',
+        `balik-textarea--${local.variant}`,
+        `balik-textarea--${local.size}`,
+        styles.base,
+        variants[local.variant],
+        sizes[local.size],
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    />
+  )
+}

package/src/Textarea/Textarea.module.css

@@ -0,0 +1,89 @@
+.base {
+  display: block;
+  width: 100%;
+  min-height: var(--_min-height);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--_border-color, transparent);
+  border-radius: var(--_border-radius);
+  font-family: inherit;
+  outline: none;
+  box-shadow: none;
+  appearance: none;
+  touch-action: manipulation;
+  transition: background-color var(--b-transition-fast),
+    border-color var(--b-transition-fast),
+    color var(--b-transition-fast);
+  resize: vertical;
+
+  --_current-intent: var(--base-edge);
+}
+
+.base::placeholder {
+  color: var(--color-disabled-fg);
+}
+
+.base:disabled {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  color: var(--color-disabled-fg);
+}
+
+.solid {
+  --_border-color: transparent;
+  background-color: color-mix(in oklch, var(--base-fg) 2%, var(--base-bg));
+}
+
+.solid:focus {
+  background-color: var(--color-focus-bg);
+}
+
+.outline {
+  --_border-color: var(--_current-intent);
+  background-color: var(--base-bg);
+}
+
+.outline:focus {
+  background-color: var(--color-focus-bg);
+  border-color: var(--color-focus-border);
+}
+
+.sizeXs {
+  --_min-height: 72px;
+  padding: var(--b-comp-padding-y-xs) var(--b-comp-padding-x-xs);
+  font-size: var(--b-comp-font-size-xs);
+  line-height: var(--b-comp-line-height-xs);
+  --_border-radius: var(--b-radius-l1-xs);
+}
+
+.sizeSm {
+  --_min-height: 80px;
+  padding: var(--b-comp-padding-y-sm) var(--b-comp-padding-x-sm);
+  font-size: var(--b-comp-font-size-sm);
+  line-height: var(--b-comp-line-height-sm);
+  --_border-radius: var(--b-radius-l1-sm);
+}
+
+.sizeMd {
+  --_min-height: 88px;
+  padding: var(--b-comp-padding-y-md) var(--b-comp-padding-x-md);
+  font-size: var(--b-comp-font-size-md);
+  line-height: var(--b-comp-line-height-md);
+  --_border-radius: var(--b-radius-l1-md);
+}
+
+.sizeLg {
+  --_min-height: 96px;
+  padding: var(--b-comp-padding-y-lg) var(--b-comp-padding-x-lg);
+  font-size: var(--b-comp-font-size-lg);
+  line-height: var(--b-comp-line-height-lg);
+  --_border-radius: var(--b-radius-l1-lg);
+}
+
+.sizeXl {
+  --_min-height: 112px;
+  padding: var(--b-comp-padding-y-xl) var(--b-comp-padding-x-xl);
+  font-size: var(--b-comp-font-size-xl);
+  line-height: var(--b-comp-line-height-xl);
+  --_border-radius: var(--b-radius-l1-xl);
+}

package/src/Textarea/index.js

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

package/src/Toast/Toast.jsx

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

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

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

package/src/Tooltip/Tooltip.jsx

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