@balikjs/mobile 0.0.1

package/src/SearchInput/SearchInput.module.css

@@ -0,0 +1,169 @@
+.base {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.icon {
+  position: absolute;
+  left: var(--_icon-offset);
+  height: var(--_icon-size);
+  width: var(--_icon-size);
+  color: var(--color-disabled-fg);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.input {
+  display: block;
+  width: 100%;
+  padding-left: var(--_input-padding-left);
+  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);
+}
+
+.input::placeholder {
+  color: var(--color-disabled-fg);
+}
+
+.input:disabled {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  color: var(--color-disabled-fg);
+}
+
+.input::-webkit-search-decoration,
+.input::-webkit-search-cancel-button,
+.input::-webkit-search-results-button,
+.input::-webkit-search-results-decoration {
+  display: none;
+}
+
+.solid {
+  --_contain-bg: color-mix(in oklch, var(--base-fg) 2%, var(--base-bg));
+}
+
+.solid .input {
+  background-color: var(--_contain-bg);
+  border-color: transparent;
+}
+
+.solid .input:focus {
+  background-color: var(--color-focus-bg);
+}
+
+.outline {
+  --_contain-bg: var(--base-bg);
+}
+
+.outline .input {
+  background-color: var(--_contain-bg);
+  border-color: var(--_current-intent);
+}
+
+.outline .input:focus {
+  background-color: var(--color-focus-bg);
+  border-color: var(--color-focus-border);
+}
+
+.singleline {
+  --_contain-bg: transparent;
+}
+
+.singleline .input {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: var(--_current-intent);
+  border-radius: 0;
+}
+
+.singleline .input:focus {
+  background-color: var(--color-focus-bg);
+  border-bottom-color: var(--color-focus-border);
+}
+
+.sizeXs {
+  --_border-radius: var(--b-radius-l1-xs);
+  --_icon-size: 14px;
+  --_icon-offset: 8px;
+  --_input-padding-left: 26px;
+}
+
+.sizeXs .input {
+  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);
+  padding-left: 26px;
+  font-size: var(--b-comp-font-size-xs);
+}
+
+.sizeSm {
+  --_border-radius: var(--b-radius-l1-sm);
+  --_icon-size: 16px;
+  --_icon-offset: 12px;
+  --_input-padding-left: 32px;
+}
+
+.sizeSm .input {
+  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);
+  padding-left: 32px;
+  font-size: var(--b-comp-font-size-sm);
+}
+
+.sizeMd {
+  --_border-radius: var(--b-radius-l1-md);
+  --_icon-size: 18px;
+  --_icon-offset: 14px;
+  --_input-padding-left: 38px;
+}
+
+.sizeMd .input {
+  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);
+  padding-left: 38px;
+  font-size: var(--b-comp-font-size-md);
+}
+
+.sizeLg {
+  --_border-radius: var(--b-radius-l1-lg);
+  --_icon-size: 20px;
+  --_icon-offset: 16px;
+  --_input-padding-left: 42px;
+}
+
+.sizeLg .input {
+  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);
+  padding-left: 42px;
+  font-size: var(--b-comp-font-size-lg);
+}
+
+.sizeXl {
+  --_border-radius: var(--b-radius-l1-xl);
+  --_icon-size: 22px;
+  --_icon-offset: 16px;
+  --_input-padding-left: 46px;
+}
+
+.sizeXl .input {
+  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);
+  padding-left: 46px;
+  font-size: var(--b-comp-font-size-xl);
+}

package/src/SearchInput/index.js

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

package/src/Select/Select.jsx

@@ -0,0 +1,101 @@
+import { splitProps, mergeProps, For } from 'solid-js'
+import { Select as ArkSelect, useSelectContext } from '@ark-ui/solid'
+import { ChevronDown } from 'lucide-solid'
+import styles from './Select.module.css'
+
+const triggerSizes = {
+  xs: styles.triggerSizeXs,
+  sm: styles.triggerSizeSm,
+  md: styles.triggerSizeMd,
+  lg: styles.triggerSizeLg,
+  xl: styles.triggerSizeXl,
+}
+
+function SelectSheet(props) {
+  const api = useSelectContext()
+  const isOpen = () => api().open
+
+  return (
+    <>
+      <div
+        class={styles.backdrop}
+        data-open={isOpen() ? '' : undefined}
+        onClick={() => api().setOpen(false)}
+      />
+      <div class={styles.sheet} data-open={isOpen() ? '' : undefined}>
+        <div class={styles.header}>
+          <span class={styles.title}>{props.title}</span>
+          <button
+            type="button"
+            class={styles.cancelBtn}
+            onClick={() => api().setOpen(false)}
+          >
+            Cancel
+          </button>
+        </div>
+        <div class={styles.list}>
+          <For each={api().collection.items}>
+            {(item) => (
+              <ArkSelect.Item item={item} class={styles.item}>
+                <ArkSelect.ItemText>{item.label}</ArkSelect.ItemText>
+              </ArkSelect.Item>
+            )}
+          </For>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const DEFAULT_PROPS = {
+  size: 'md',
+  disabled: false,
+}
+
+/**
+ * @param {import('solid-js').JSX.HTMLAttributes<HTMLDivElement> & {
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ *   collection?: import('@ark-ui/solid').ListCollection<{ label: string, value: string, disabled?: boolean }>
+ *   placeholder?: string
+ *   title?: string
+ * }} props
+ */
+export function Select(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['size', 'class', 'collection', 'placeholder', 'title', 'disabled'],
+  )
+
+  return (
+    <div class={styles.root}>
+    <ArkSelect.Root
+      collection={local.collection}
+      disabled={local.disabled}
+      {...rest}
+    >
+      <ArkSelect.Trigger
+        class={[
+          'balik-select',
+          `balik-select--${local.size}`,
+          styles.triggerBase,
+          triggerSizes[local.size],
+          local.class,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <ArkSelect.ValueText
+          placeholder={local.placeholder}
+        />
+        <span class={styles.indicator}>
+          <ChevronDown size="1em" aria-hidden="true" />
+        </span>
+      </ArkSelect.Trigger>
+      <SelectSheet title={local.title} />
+      <ArkSelect.HiddenSelect />
+    </ArkSelect.Root>
+    </div>
+  )
+}
+
+Select.Original = ArkSelect

package/src/Select/Select.module.css

@@ -0,0 +1,174 @@
+.root {
+  width: 100%;
+}
+
+.triggerBase {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--_trigger-border-color);
+  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);
+  cursor: pointer;
+  text-align: start;
+  color: var(--base-fg);
+
+  --_current-intent: var(--base-edge);
+  --_trigger-border-color: var(--_current-intent);
+}
+
+.triggerBase[data-placeholder-shown] {
+  color: var(--color-disabled-fg);
+}
+
+.triggerBase:disabled {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  color: var(--color-disabled-fg);
+}
+
+.triggerSizeXs {
+  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-l2-xs);
+}
+
+.triggerSizeSm {
+  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-l2-sm);
+}
+
+.triggerSizeMd {
+  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-l2-md);
+}
+
+.triggerSizeLg {
+  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-l2-lg);
+}
+
+.triggerSizeXl {
+  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-l2-xl);
+}
+
+.indicator {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  transition: transform var(--b-transition-fast);
+  color: var(--base-fg);
+}
+
+.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;
+}
+
+.sheet {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: var(--b-z-index-modal);
+  background-color: var(--base-bg);
+  border-radius: 16px 16px 0 0;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(100%);
+  transition: transform 0.3s ease;
+}
+
+.sheet[data-open] {
+  transform: translateY(0);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid color-mix(in oklch, var(--base-fg) 6%, var(--base-bg));
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: var(--b-comp-font-size-lg);
+  font-weight: 600;
+}
+
+.cancelBtn {
+  font-size: var(--b-comp-font-size-md);
+  color: var(--base-edge);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.list {
+  overflow-y: auto;
+  padding: 8px 0;
+  flex: 1;
+  -webkit-overflow-scrolling: touch;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  padding: 14px 20px;
+  font-size: var(--b-comp-font-size-lg);
+  cursor: pointer;
+  color: var(--base-fg);
+  transition: background-color 0.1s ease;
+}
+
+.item:active {
+  background-color: color-mix(in oklch, var(--base-fg) 4%, var(--base-bg));
+}
+
+.item[data-selected] {
+  color: var(--base-edge);
+  font-weight: 600;
+}
+
+.item[data-disabled] {
+  color: var(--color-disabled-fg);
+  pointer-events: none;
+}

package/src/Select/index.js

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

package/src/SelectPc/Select.jsx

@@ -0,0 +1,88 @@
+import { splitProps, mergeProps, For } from 'solid-js'
+import { Select as ArkSelect } from '@ark-ui/solid'
+import { ChevronDown } from 'lucide-solid'
+import styles from './SelectPc.module.css'
+
+const triggerVariants = {
+  outline: styles.triggerVariantOutline,
+}
+
+const triggerSizes = {
+  xs: styles.triggerSizeXs,
+  sm: styles.triggerSizeSm,
+  md: styles.triggerSizeMd,
+  lg: styles.triggerSizeLg,
+  xl: styles.triggerSizeXl,
+}
+
+const DEFAULT_PROPS = {
+  variant: 'outline',
+  size: 'md',
+  disabled: false,
+}
+
+/**
+ * @param {import('solid-js').JSX.HTMLAttributes<HTMLDivElement> & {
+ *   variant?: 'outline'
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ *   collection?: import('@ark-ui/solid').ListCollection<{ label: string, value: string, disabled?: boolean }>
+ *   placeholder?: string
+ * }} props
+ */
+export function SelectPc(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['variant', 'size', 'class', 'collection', 'placeholder', 'disabled'],
+  )
+
+  const items = () => local.collection?.items ?? []
+  const triggerBorderRadius = `var(--b-radius-l2-${local.size})`
+
+  return (
+    <ArkSelect.Root
+      collection={local.collection}
+      disabled={local.disabled}
+      {...rest}
+    >
+      <ArkSelect.Trigger
+        class={[
+          'balik-select',
+          `balik-select--${local.variant}`,
+          `balik-select--${local.size}`,
+          styles.triggerBase,
+          triggerVariants[local.variant],
+          triggerSizes[local.size],
+          local.class,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <ArkSelect.ValueText
+          placeholder={local.placeholder}
+        />
+        <span class={styles.indicator}>
+          <ChevronDown size="1em" aria-hidden="true" />
+        </span>
+      </ArkSelect.Trigger>
+      <ArkSelect.Positioner>
+        <ArkSelect.Content
+          class={styles.content}
+          style={{ '--_border-radius': triggerBorderRadius }}
+        >
+          <ArkSelect.List>
+            <For each={items()}>
+              {(item) => (
+                <ArkSelect.Item item={item} class={styles.item}>
+                  <ArkSelect.ItemText>{item.label}</ArkSelect.ItemText>
+                </ArkSelect.Item>
+              )}
+            </For>
+          </ArkSelect.List>
+        </ArkSelect.Content>
+      </ArkSelect.Positioner>
+      <ArkSelect.HiddenSelect />
+    </ArkSelect.Root>
+  )
+}
+
+SelectPc.Original = ArkSelect

package/src/SelectPc/SelectPc.module.css

@@ -0,0 +1,132 @@
+.triggerBase {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--_trigger-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);
+  cursor: pointer;
+  text-align: start;
+  color: var(--base-fg);
+
+  --_current-intent: var(--base-edge);
+}
+
+.triggerBase[data-placeholder-shown] {
+  color: var(--color-disabled-fg);
+}
+
+.triggerBase:disabled {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  color: var(--color-disabled-fg);
+}
+
+.triggerVariantOutline {
+  --_trigger-border-color: var(--_current-intent);
+  background-color: var(--base-bg);
+}
+
+.triggerVariantOutline:focus-visible {
+  background-color: var(--color-focus-bg);
+  border-color: var(--color-focus-border);
+}
+
+.triggerSizeXs {
+  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-l2-xs);
+}
+
+.triggerSizeSm {
+  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-l2-sm);
+}
+
+.triggerSizeMd {
+  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-l2-md);
+}
+
+.triggerSizeLg {
+  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-l2-lg);
+}
+
+.triggerSizeXl {
+  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-l2-xl);
+}
+
+.indicator {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  transition: transform var(--b-transition-fast);
+  color: var(--base-fg);
+}
+
+[data-state='open'] .indicator {
+  transform: rotate(180deg);
+}
+
+.content {
+  background-color: var(--base-bg);
+  border: 1px solid color-mix(in oklch, var(--base-fg) 10%, var(--base-bg));
+  border-radius: var(--_border-radius);
+  box-shadow: var(--b-shadow-md);
+  max-height: 256px;
+  overflow-y: auto;
+  padding: 4px;
+  z-index: var(--b-z-index-dropdown);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  padding: 10px 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);
+  cursor: pointer;
+  color: var(--base-fg);
+  transition: background-color 0.1s ease;
+}
+
+.item[data-highlighted] {
+  background-color: color-mix(in oklch, var(--base-edge) 8%, var(--base-bg));
+}
+
+.item[data-selected] {
+  color: var(--base-edge);
+  font-weight: 600;
+}
+
+.item[data-disabled] {
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+}

package/src/SelectPc/index.js

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