@balikjs/mobile 0.0.1

package/src/Link/Link.jsx

@@ -0,0 +1,31 @@
+import { splitProps, mergeProps } from 'solid-js'
+import styles from './Link.module.css'
+
+const DEFAULT_PROPS = {}
+
+/**
+ * @param {import('solid-js').JSX.AnchorHTMLAttributes<HTMLAnchorElement> & {
+ *   class?: string
+ * }} props
+ */
+export function Link(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['class', 'children'],
+  )
+
+  return (
+    <a
+      {...rest}
+      class={[
+        'balik-link',
+        styles.base,
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {local.children}
+    </a>
+  )
+}

package/src/Link/Link.module.css

@@ -0,0 +1,18 @@
+.base {
+  color: var(--base-edge);
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: color var(--b-transition-fast), text-decoration-color var(--b-transition-fast);
+}
+
+.base:hover {
+  text-decoration: underline;
+  text-decoration-color: color-mix(in oklch, var(--base-edge) 60%, transparent);
+}
+
+.base:focus-visible {
+  outline: 2px solid var(--color-focus-border);
+  outline-offset: 2px;
+  border-radius: 2px;
+}

package/src/Link/index.js

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

package/src/Popover/Popover.jsx

@@ -0,0 +1,162 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import { Popover as ArkPopover } from '@ark-ui/solid'
+import styles from './Popover.module.css'
+
+/**
+ * @param {import('@ark-ui/solid').PopoverRootProps & {
+ *   class?: string
+ * }} props
+ */
+function PopoverRoot(props) {
+  const [local, rest] = splitProps(
+    mergeProps({}, props),
+    ['class', 'children'],
+  )
+
+  return (
+    <ArkPopover.Root {...rest} lazyMount unmountOnExit>
+      {local.children}
+    </ArkPopover.Root>
+  )
+}
+
+/**
+ * @param {import('@ark-ui/solid').PopoverTriggerProps & {
+ *   class?: string
+ * }} props
+ */
+function PopoverTrigger(props) {
+  const [local, rest] = splitProps(
+    mergeProps({}, props),
+    ['class', 'children'],
+  )
+
+  return (
+    <ArkPopover.Trigger
+      {...rest}
+      as="div"
+      class={[
+        'balik-popover-trigger',
+        local.class,
+      ].filter(Boolean).join(' ')}
+    >
+      {local.children}
+    </ArkPopover.Trigger>
+  )
+}
+
+/**
+ * @param {import('@ark-ui/solid').PopoverContentProps & {
+ *   class?: string
+ * }} props
+ */
+function PopoverContent(props) {
+  const [local, rest] = splitProps(
+    mergeProps({}, props),
+    ['class', 'children'],
+  )
+
+  return (
+    <Portal mount={document.body}>
+      <ArkPopover.Positioner class={styles.positioner}>
+        <ArkPopover.Content
+          {...rest}
+          class={[
+            'balik-popover-content',
+            styles.content,
+            local.class,
+          ].filter(Boolean).join(' ')}
+        >
+          <ArkPopover.Arrow class={styles.arrow}>
+            <ArkPopover.ArrowTip class={styles.arrowTip} />
+          </ArkPopover.Arrow>
+          {local.children}
+        </ArkPopover.Content>
+      </ArkPopover.Positioner>
+    </Portal>
+  )
+}
+
+/**
+ * @param {import('@ark-ui/solid').PopoverCloseTriggerProps & {
+ *   class?: string
+ * }} props
+ */
+function PopoverCloseTrigger(props) {
+  const [local, rest] = splitProps(
+    mergeProps({}, props),
+    ['class', 'children'],
+  )
+
+  return (
+    <ArkPopover.CloseTrigger
+      {...rest}
+      class={[
+        styles.closeTrigger,
+        local.class,
+      ].filter(Boolean).join(' ')}
+    >
+      {local.children}
+    </ArkPopover.CloseTrigger>
+  )
+}
+
+/**
+ * @param {import('@ark-ui/solid').PopoverTitleProps & {
+ *   class?: string
+ * }} props
+ */
+function PopoverTitle(props) {
+  const [local, rest] = splitProps(
+    mergeProps({}, props),
+    ['class', 'children'],
+  )
+
+  return (
+    <ArkPopover.Title
+      {...rest}
+      class={[
+        styles.title,
+        local.class,
+      ].filter(Boolean).join(' ')}
+    >
+      {local.children}
+    </ArkPopover.Title>
+  )
+}
+
+/**
+ * @param {import('@ark-ui/solid').PopoverDescriptionProps & {
+ *   class?: string
+ * }} props
+ */
+function PopoverDescription(props) {
+  const [local, rest] = splitProps(
+    mergeProps({}, props),
+    ['class', 'children'],
+  )
+
+  return (
+    <ArkPopover.Description
+      {...rest}
+      class={[
+        styles.description,
+        local.class,
+      ].filter(Boolean).join(' ')}
+    >
+      {local.children}
+    </ArkPopover.Description>
+  )
+}
+
+export function Popover(props) {
+  return <PopoverRoot {...props} />
+}
+
+Popover.Trigger = PopoverTrigger
+Popover.Content = PopoverContent
+Popover.Title = PopoverTitle
+Popover.Description = PopoverDescription
+Popover.CloseTrigger = PopoverCloseTrigger
+Popover.Original = ArkPopover

package/src/Popover/Popover.module.css

@@ -0,0 +1,63 @@
+.positioner {
+  z-index: var(--b-z-index-dropdown);
+}
+
+.content {
+  padding: 12px;
+  background-color: var(--base-bg);
+  border-radius: var(--b-radius-l2-md);
+  box-shadow: var(--b-shadow-lg);
+  border: 1px solid color-mix(in oklch, var(--base-fg) 8%, var(--base-bg));
+  outline: none;
+  animation: popoverIn 0.15s ease;
+}
+
+@keyframes popoverIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.arrowTip {
+  --arrow-size: 8px;
+  --arrow-background: var(--base-bg);
+}
+
+.closeTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  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;
+  touch-action: manipulation;
+}
+
+.title {
+  margin: 0;
+  padding-right: 24px;
+  font-size: var(--b-comp-font-size-md);
+  font-weight: 600;
+  color: var(--base-fg);
+}
+
+.description {
+  margin: 0;
+  margin-top: 4px;
+  font-size: var(--b-comp-font-size-sm);
+  color: color-mix(in oklch, var(--base-fg) 55%, transparent);
+  line-height: 1.5;
+}

package/src/Popover/index.js

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

package/src/RadioGroup/Radio.jsx

@@ -0,0 +1,52 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { RadioGroup as ArkRadioGroup } from '@ark-ui/solid'
+import styles from './Radio.module.css'
+
+const sizes = {
+  xs: styles.sizeXs,
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+  xl: styles.sizeXl,
+  '2xl': styles.size2xl,
+}
+
+/**
+ * @param {import('@ark-ui/solid').RadioGroupItemProps & {
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+ *   class?: string
+ * }} props
+ */
+export function Radio(props) {
+  const [local, rest] = splitProps(
+    mergeProps({ size: 'md' }, props),
+    ['class', 'children', 'size'],
+  )
+
+  return (
+    <ArkRadioGroup.Item
+      {...rest}
+      class={[
+        'balik-radio',
+        styles.item,
+        sizes[local.size],
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <ArkRadioGroup.ItemControl class={styles.control} />
+      <ArkRadioGroup.ItemText class={styles.text}>
+        {local.children}
+      </ArkRadioGroup.ItemText>
+      <ArkRadioGroup.ItemHiddenInput />
+    </ArkRadioGroup.Item>
+  )
+}
+
+Radio.Original = {
+  Item: ArkRadioGroup.Item,
+  ItemControl: ArkRadioGroup.ItemControl,
+  ItemText: ArkRadioGroup.ItemText,
+  ItemHiddenInput: ArkRadioGroup.ItemHiddenInput,
+}

package/src/RadioGroup/Radio.module.css

@@ -0,0 +1,133 @@
+.item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_ctrl-gap, 10px);
+  min-height: var(--_ctrl-min-height, var(--b-comp-height-md));
+  cursor: pointer;
+  font-family: inherit;
+  user-select: none;
+  touch-action: manipulation;
+}
+
+.item[data-disabled] {
+  cursor: not-allowed;
+}
+
+.control {
+  width: var(--_ctrl-size, var(--b-comp-secondary-height-md));
+  height: var(--_ctrl-size, var(--b-comp-secondary-height-md));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: 1px solid var(--base-edge);
+  background-color: var(--base-bg);
+  transition: border-color var(--b-transition-fast);
+}
+
+.control::after {
+  content: '';
+  display: block;
+  width: var(--_ctrl-dot-size, calc(var(--b-comp-secondary-height-md) / 2));
+  height: var(--_ctrl-dot-size, calc(var(--b-comp-secondary-height-md) / 2));
+  border-radius: 50%;
+  background-color: var(--base-edge);
+  transform: scale(0);
+  transition: transform var(--b-transition-fast);
+}
+
+.control[data-state="checked"] {
+  border-color: var(--base-edge);
+}
+
+.control[data-state="checked"]::after {
+  transform: scale(1);
+}
+
+.item[data-disabled] .control {
+  border-color: var(--color-disabled-border);
+  background-color: var(--color-disabled-bg);
+}
+
+.item[data-disabled] .control[data-state="checked"]::after {
+  background-color: var(--color-disabled-fg);
+}
+
+.item[data-invalid] .control {
+  border-color: var(--color-danger);
+}
+
+.item[data-invalid] .control[data-state="checked"]::after {
+  background-color: var(--color-danger);
+}
+
+.control:active:not([data-disabled]) {
+  transform: scale(0.88);
+}
+
+.text {
+  font-size: var(--_ctrl-font-size, var(--b-comp-font-size-md));
+  line-height: var(--_ctrl-line-height, var(--b-comp-line-height-md));
+  color: var(--base-fg);
+}
+
+.item[data-disabled] .text {
+  color: var(--color-disabled-fg);
+}
+
+/* ─── Size Overrides ─── */
+
+.sizeXs {
+  --_ctrl-size: var(--b-comp-secondary-height-xs);
+  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-xs) / 2);
+  --_ctrl-gap: 8px;
+  --_ctrl-min-height: var(--b-comp-height-xs);
+  --_ctrl-font-size: var(--b-comp-font-size-xs);
+  --_ctrl-line-height: var(--b-comp-line-height-xs);
+}
+
+.sizeSm {
+  --_ctrl-size: var(--b-comp-secondary-height-sm);
+  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-sm) / 2);
+  --_ctrl-gap: 9px;
+  --_ctrl-min-height: var(--b-comp-height-sm);
+  --_ctrl-font-size: var(--b-comp-font-size-sm);
+  --_ctrl-line-height: var(--b-comp-line-height-sm);
+}
+
+.sizeMd {
+  --_ctrl-size: var(--b-comp-secondary-height-md);
+  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-md) / 2);
+  --_ctrl-gap: 10px;
+  --_ctrl-min-height: var(--b-comp-height-md);
+  --_ctrl-font-size: var(--b-comp-font-size-md);
+  --_ctrl-line-height: var(--b-comp-line-height-md);
+}
+
+.sizeLg {
+  --_ctrl-size: var(--b-comp-secondary-height-lg);
+  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-lg) / 2);
+  --_ctrl-gap: 11px;
+  --_ctrl-min-height: var(--b-comp-height-lg);
+  --_ctrl-font-size: var(--b-comp-font-size-lg);
+  --_ctrl-line-height: var(--b-comp-line-height-lg);
+}
+
+.sizeXl {
+  --_ctrl-size: var(--b-comp-secondary-height-xl);
+  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-xl) / 2);
+  --_ctrl-gap: 12px;
+  --_ctrl-min-height: var(--b-comp-height-xl);
+  --_ctrl-font-size: var(--b-comp-font-size-xl);
+  --_ctrl-line-height: var(--b-comp-line-height-xl);
+}
+
+.size2xl {
+  --_ctrl-size: var(--b-comp-secondary-height-2xl);
+  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-2xl) / 2);
+  --_ctrl-gap: 16px;
+  --_ctrl-min-height: var(--b-comp-height-2xl);
+  --_ctrl-font-size: var(--b-comp-font-size-2xl);
+  --_ctrl-line-height: var(--b-comp-line-height-2xl);
+}

package/src/RadioGroup/RadioGroup.jsx

@@ -0,0 +1,36 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { RadioGroup as ArkRadioGroup } from '@ark-ui/solid'
+import styles from './RadioGroup.module.css'
+
+/**
+ * @param {import('@ark-ui/solid').RadioGroupRootProps & {
+ *   label?: string
+ *   class?: string
+ * }} props
+ */
+export function RadioGroup(props) {
+  const [local, rest] = splitProps(
+    mergeProps({}, props),
+    ['label', 'class', 'children'],
+  )
+
+  return (
+    <ArkRadioGroup.Root
+      {...rest}
+      class={[
+        'balik-radio-group',
+        styles.root,
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {local.label && (
+        <ArkRadioGroup.Label class={styles.label}>
+          {local.label}
+        </ArkRadioGroup.Label>
+      )}
+      {local.children}
+    </ArkRadioGroup.Root>
+  )
+}

package/src/RadioGroup/RadioGroup.module.css

@@ -0,0 +1,23 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.root[data-orientation="horizontal"] {
+  flex-direction: row;
+  gap: 20px;
+}
+
+.label {
+  font-size: var(--b-comp-font-size-sm);
+  font-weight: 600;
+  color: var(--base-fg);
+  margin-bottom: 8px;
+}
+
+.root[data-orientation="horizontal"] .label {
+  margin-bottom: 0;
+  align-self: center;
+  margin-inline-end: 4px;
+}

package/src/RadioGroup/index.js

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup.jsx'
+export { Radio } from './Radio.jsx'

package/src/SearchInput/SearchInput.jsx

@@ -0,0 +1,89 @@
+import { splitProps, mergeProps, createSignal, onCleanup, on } from 'solid-js'
+import { ark } from '@ark-ui/solid/factory'
+import { Search } from 'lucide-solid'
+import styles from './SearchInput.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,
+  debounce: 300,
+}
+
+/**
+ * @param {import('solid-js').JSX.InputHTMLAttributes<HTMLInputElement> & {
+ *   variant?: 'solid' | 'outline' | 'singleline'
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ *   onKeywordChange?: (keyword: string) => void
+ *   debounce?: number
+ *   class?: string
+ * }} props
+ */
+export function SearchInput(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['variant', 'size', 'class', 'onKeywordChange', 'debounce', 'placeholder'],
+  )
+
+  const [keyword, setKeyword] = createSignal('')
+
+  on(keyword, (val) => {
+    const timer = setTimeout(() => {
+      local.onKeywordChange?.(val)
+    }, local.debounce)
+    onCleanup(() => clearTimeout(timer))
+  })
+
+  const handleInput = (e) => {
+    setKeyword(e.target.value)
+  }
+
+  return (
+    <div
+      class={[
+        'balik-search-input',
+        `balik-search-input--${local.variant}`,
+        `balik-search-input--${local.size}`,
+        styles.base,
+        variants[local.variant],
+        sizes[local.size],
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <Search
+        aria-hidden="true"
+        class={[
+          'balik-search-input__icon',
+          styles.icon,
+        ].join(' ')}
+      />
+      <ark.input
+        {...rest}
+        type="search"
+        autocomplete="off"
+        placeholder={local.placeholder}
+        onInput={handleInput}
+        class={[
+          'balik-search-input__input',
+          styles.input,
+        ].join(' ')}
+      />
+    </div>
+  )
+}