@balikjs/mobile 0.0.1

package/src/Dialog/Dialog.module.css

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

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

package/src/Divider/Divider.jsx

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

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

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

package/src/Drawer/Drawer.jsx

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

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

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

package/src/Empty/Empty.jsx

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

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

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

package/src/Fab/Fab.jsx

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

package/src/Fab/Fab.module.css

@@ -0,0 +1,94 @@
+.base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--base-edge);
+  color: var(--base-bg);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  transition: box-shadow var(--b-transition-fast);
+}
+
+.base:active {
+  transform: scale(0.95);
+}
+
+.base:focus-visible {
+  outline: 2px solid var(--color-focus-border);
+  outline-offset: 2px;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.groupContent {
+  padding: 8px;
+  border: none;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  background-color: transparent;
+  animation: none;
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 24px;
+  background-color: color-mix(in oklch, var(--base-fg) 90%, var(--base-bg));
+  color: var(--base-bg);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  transition: transform var(--b-transition-fast);
+}
+
+.item:active {
+  transform: scale(0.95);
+}
+
+.itemIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.itemIcon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.itemLabel {
+  font-size: 14px;
+  line-height: 20px;
+}

package/src/Fab/index.js

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

package/src/Input/Input.jsx

@@ -0,0 +1,53 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { ark } from '@ark-ui/solid/factory'
+import styles from './Input.module.css'
+
+const variants = {
+  solid: styles.solid,
+  outline: styles.outline,
+  singleline: styles.singleline,
+}
+
+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.InputHTMLAttributes<HTMLInputElement> & {
+ *   variant?: 'solid' | 'outline' | 'singleline'
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ * }} props
+ */
+export function Input(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['variant', 'size', 'class'],
+  )
+
+  return (
+    <ark.input
+      {...rest}
+      class={[
+        'balik-input',
+        `balik-input--${local.variant}`,
+        `balik-input--${local.size}`,
+        styles.base,
+        variants[local.variant],
+        sizes[local.size],
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    />
+  )
+}

package/src/Input/Input.module.css

@@ -0,0 +1,97 @@
+.base {
+  display: block;
+  width: 100%;
+  border: 1px solid 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);
+
+  --_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 {
+  background-color: color-mix(in oklch, var(--base-fg) 2%, var(--base-bg));
+  border-color: transparent;
+}
+
+.solid:focus {
+  background-color: var(--color-focus-bg);
+}
+
+.outline {
+  background-color: var(--base-bg);
+  border-color: var(--_current-intent);
+}
+
+.outline:focus {
+  background-color: var(--color-focus-bg);
+  border-color: var(--color-focus-border);
+}
+
+.singleline {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: var(--_current-intent);
+  border-radius: 0;
+}
+
+.singleline:focus {
+  background-color: var(--color-focus-bg);
+  border-bottom-color: var(--color-focus-border);
+}
+
+.sizeXs {
+  height: var(--b-comp-height-xs);
+  line-height: var(--b-comp-line-height-xs);
+  padding: var(--b-comp-padding-y-xs) var(--b-comp-padding-x-xs);
+  font-size: var(--b-comp-font-size-xs);
+  --_border-radius: var(--b-radius-l1-xs);
+}
+
+.sizeSm {
+  height: var(--b-comp-height-sm);
+  line-height: var(--b-comp-line-height-sm);
+  padding: var(--b-comp-padding-y-sm) var(--b-comp-padding-x-sm);
+  font-size: var(--b-comp-font-size-sm);
+  --_border-radius: var(--b-radius-l1-sm);
+}
+
+.sizeMd {
+  height: var(--b-comp-height-md);
+  line-height: var(--b-comp-line-height-md);
+  padding: var(--b-comp-padding-y-md) var(--b-comp-padding-x-md);
+  font-size: var(--b-comp-font-size-md);
+  --_border-radius: var(--b-radius-l1-md);
+}
+
+.sizeLg {
+  height: var(--b-comp-height-lg);
+  line-height: var(--b-comp-line-height-lg);
+  padding: var(--b-comp-padding-y-lg) var(--b-comp-padding-x-lg);
+  font-size: var(--b-comp-font-size-lg);
+  --_border-radius: var(--b-radius-l1-lg);
+}
+
+.sizeXl {
+  height: var(--b-comp-height-xl);
+  line-height: var(--b-comp-line-height-xl);
+  padding: var(--b-comp-padding-y-xl) var(--b-comp-padding-x-xl);
+  font-size: var(--b-comp-font-size-xl);
+  --_border-radius: var(--b-radius-l1-xl);
+}

package/src/Input/index.js

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