@balikjs/mobile 0.0.1

package/src/Skeleton/Skeleton.jsx

@@ -0,0 +1,55 @@
+import { splitProps, mergeProps, createMemo, For } from 'solid-js'
+import styles from './Skeleton.module.css'
+
+const DEFAULT_PROPS = {
+  count: 1,
+  circle: false,
+}
+
+/**
+ * @param {import('solid-js').JSX.HTMLAttributes<HTMLDivElement> & {
+ *   width?: string
+ *   height?: string
+ *   circle?: boolean
+ *   count?: number
+ *   class?: string
+ * }} props
+ */
+export function Skeleton(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['width', 'height', 'circle', 'count', 'class'],
+  )
+
+  const items = createMemo(() =>
+    Array.from({ length: local.count }, (_, i) => i),
+  )
+
+  const lineClass = () =>
+    [
+      'balik-skeleton',
+      styles.base,
+      local.circle && styles.circle,
+      local.class,
+    ]
+      .filter(Boolean)
+      .join(' ')
+
+  return (
+    <div {...rest} class={local.count > 1 ? styles.wrapper : undefined}>
+      <For each={items()}>
+        {() => (
+          <span
+            role="presentation"
+            aria-hidden="true"
+            class={lineClass()}
+            style={{
+              width: local.width || undefined,
+              height: local.height || undefined,
+            }}
+          />
+        )}
+      </For>
+    </div>
+  )
+}

package/src/Skeleton/Skeleton.module.css

@@ -0,0 +1,33 @@
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.base {
+  display: block;
+  width: 100%;
+  height: 1em;
+  border-radius: var(--b-radius-l2-xs);
+  background: linear-gradient(
+    90deg,
+    color-mix(in oklch, var(--base-fg) 8%, var(--base-bg)) 25%,
+    color-mix(in oklch, var(--base-fg) 12%, var(--base-bg)) 50%,
+    color-mix(in oklch, var(--base-fg) 8%, var(--base-bg)) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--b-spacing-sm);
+}

package/src/Skeleton/index.js

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

package/src/Slider/Slider.jsx

@@ -0,0 +1,50 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { Slider as ArkSlider } from '@ark-ui/solid'
+import styles from './Slider.module.css'
+
+const DEFAULT_PROPS = {
+  min: 0,
+  max: 100,
+  step: 1,
+}
+
+/**
+ * @param {import('@ark-ui/solid').SliderRootProps & {
+ *   label?: string
+ *   class?: string
+ * }} props
+ */
+export function Slider(props) {
+  const [local, rest] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['label', 'class', 'children'],
+  )
+
+  return (
+    <ArkSlider.Root
+      {...rest}
+      class={[
+        'balik-slider',
+        styles.root,
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {local.label && (
+        <ArkSlider.Label class={styles.label}>{local.label}</ArkSlider.Label>
+      )}
+      <ArkSlider.Control class={styles.control}>
+        <ArkSlider.Track class={styles.track}>
+          <ArkSlider.Range class={styles.range} />
+        </ArkSlider.Track>
+        <ArkSlider.Thumb index={0} class={styles.thumb}>
+          <ArkSlider.DraggingIndicator class={styles.indicator} />
+          <ArkSlider.HiddenInput />
+        </ArkSlider.Thumb>
+      </ArkSlider.Control>
+    </ArkSlider.Root>
+  )
+}
+
+Slider.Original = ArkSlider

package/src/Slider/Slider.module.css

@@ -0,0 +1,77 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  font-family: inherit;
+}
+
+.label {
+  font-size: var(--b-comp-font-size-md);
+  font-weight: 500;
+  color: var(--base-fg);
+}
+
+.control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  touch-action: none;
+}
+
+.track {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background-color: color-mix(in oklch, var(--base-fg) 12%, var(--base-bg));
+}
+
+.range {
+  position: absolute;
+  height: 100%;
+  border-radius: 2px;
+  background-color: var(--base-edge);
+}
+
+.thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: var(--base-bg);
+  border: 2px solid var(--base-edge);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  outline: none;
+  transition: box-shadow var(--b-transition-fast);
+}
+
+.thumb:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--base-edge) 30%, transparent);
+}
+
+.indicator {
+  position: absolute;
+  top: -28px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 2px 6px;
+  border-radius: 4px;
+  background-color: var(--base-fg);
+  color: var(--base-bg);
+  font-size: 12px;
+  line-height: 18px;
+  font-family: var(--b-font-family, inherit);
+  white-space: nowrap;
+}
+
+.root[data-disabled] .thumb {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  cursor: not-allowed;
+}
+
+.root[data-disabled] .range {
+  background-color: var(--color-disabled-border);
+}

package/src/Slider/index.js

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

package/src/Spinner/Spinner.jsx

@@ -0,0 +1,45 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { Loader2 } from 'lucide-solid'
+import styles from './Spinner.module.css'
+
+const sizes = {
+  xs: styles.sizeXs,
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+  xl: styles.sizeXl,
+}
+
+const DEFAULT_PROPS = {
+  size: 'md',
+}
+
+/**
+ * @param {{
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ *   label?: string
+ *   class?: string
+ * }} props
+ */
+export function Spinner(props) {
+  const [local] = splitProps(
+    mergeProps(DEFAULT_PROPS, props),
+    ['size', 'label', 'class'],
+  )
+
+  return (
+    <Loader2
+      role="status"
+      aria-label={local.label || 'Loading'}
+      class={[
+        'balik-spinner',
+        `balik-spinner--${local.size}`,
+        styles.base,
+        sizes[local.size],
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    />
+  )
+}

package/src/Spinner/Spinner.module.css

@@ -0,0 +1,35 @@
+.base {
+  color: var(--base-edge);
+  animation: spinner-spin 0.6s linear infinite;
+}
+
+.sizeXs {
+  width: 14px;
+  height: 14px;
+}
+
+.sizeSm {
+  width: 18px;
+  height: 18px;
+}
+
+.sizeMd {
+  width: 24px;
+  height: 24px;
+}
+
+.sizeLg {
+  width: 32px;
+  height: 32px;
+}
+
+.sizeXl {
+  width: 40px;
+  height: 40px;
+}
+
+@keyframes spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/Spinner/index.js

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

package/src/Switch/Switch.jsx

@@ -0,0 +1,51 @@
+import { splitProps, mergeProps } from 'solid-js'
+import { Switch as ArkSwitch } from '@ark-ui/solid'
+import styles from './Switch.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').SwitchRootProps & {
+ *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+ *   class?: string
+ * }} props
+ */
+export function Switch(props) {
+  const [local, rest] = splitProps(
+    mergeProps({ size: 'md' }, props),
+    ['class', 'children', 'size'],
+  )
+
+  return (
+    <ArkSwitch.Root
+      {...rest}
+      class={[
+        'balik-switch',
+        styles.root,
+        sizes[local.size],
+        local.class,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <ArkSwitch.Control class={styles.control}>
+        <ArkSwitch.Thumb class={styles.thumb} />
+      </ArkSwitch.Control>
+      {local.children && (
+        <ArkSwitch.Label class={styles.label}>
+          {local.children}
+        </ArkSwitch.Label>
+      )}
+      <ArkSwitch.HiddenInput />
+    </ArkSwitch.Root>
+  )
+}
+
+Switch.Original = ArkSwitch

package/src/Switch/Switch.module.css

@@ -0,0 +1,156 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_sw-gap, 10px);
+  min-height: var(--_sw-min-height, var(--b-comp-height-md));
+  cursor: pointer;
+  font-family: inherit;
+  user-select: none;
+  touch-action: manipulation;
+}
+
+.root[data-disabled] {
+  cursor: not-allowed;
+}
+
+.control {
+  position: relative;
+  width: var(--_sw-track-width, calc(2 * var(--b-comp-secondary-height-md)));
+  height: var(--_sw-track-height, var(--b-comp-secondary-height-md));
+  flex-shrink: 0;
+  border-radius: var(--_sw-track-radius, calc(var(--b-comp-secondary-height-md) / 2));
+  background-color: color-mix(in oklch, var(--base-fg) 14%, var(--base-bg));
+  transition: background-color var(--b-transition-fast);
+}
+
+.control[data-state="checked"] {
+  background-color: var(--base-edge);
+}
+
+.root[data-disabled] .control {
+  background-color: var(--color-disabled-bg);
+}
+
+.root[data-disabled] .control[data-state="checked"] {
+  background-color: var(--color-disabled-border);
+}
+
+.root[data-invalid] .control {
+  box-shadow: 0 0 0 1px var(--color-danger);
+}
+
+.thumb {
+  position: absolute;
+  top: var(--_sw-thumb-offset, 2px);
+  left: var(--_sw-thumb-offset, 2px);
+  width: var(--_sw-thumb-size, calc(var(--b-comp-secondary-height-md) - 4px));
+  height: var(--_sw-thumb-size, calc(var(--b-comp-secondary-height-md) - 4px));
+  border-radius: 50%;
+  background-color: var(--base-bg);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transform: translateX(0);
+  transition: transform var(--b-transition-fast);
+}
+
+.thumb[data-state="checked"] {
+  transform: translateX(var(--_sw-thumb-travel, calc(var(--b-comp-secondary-height-md) - 4px)));
+}
+
+.root[data-disabled] .thumb {
+  background-color: var(--color-disabled-border);
+  box-shadow: none;
+}
+
+.root[data-disabled] .thumb[data-state="checked"] {
+  background-color: var(--base-bg);
+}
+
+.label {
+  font-size: var(--_sw-font-size, var(--b-comp-font-size-md));
+  line-height: var(--_sw-line-height, var(--b-comp-line-height-md));
+  color: var(--base-fg);
+}
+
+.root[data-disabled] .label {
+  color: var(--color-disabled-fg);
+}
+
+/* ─── Size Overrides ─── */
+
+.sizeXs {
+  --_sw-track-height: var(--b-comp-secondary-height-xs);
+  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-xs));
+  --_sw-track-radius: calc(var(--b-comp-secondary-height-xs) / 2);
+  --_sw-thumb-size: calc(var(--b-comp-secondary-height-xs) - 4px);
+  --_sw-thumb-offset: 2px;
+  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-xs) - 4px);
+  --_sw-gap: 8px;
+  --_sw-min-height: var(--b-comp-height-xs);
+  --_sw-font-size: var(--b-comp-font-size-xs);
+  --_sw-line-height: var(--b-comp-line-height-xs);
+}
+
+.sizeSm {
+  --_sw-track-height: var(--b-comp-secondary-height-sm);
+  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-sm));
+  --_sw-track-radius: calc(var(--b-comp-secondary-height-sm) / 2);
+  --_sw-thumb-size: calc(var(--b-comp-secondary-height-sm) - 4px);
+  --_sw-thumb-offset: 2px;
+  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-sm) - 4px);
+  --_sw-gap: 9px;
+  --_sw-min-height: var(--b-comp-height-sm);
+  --_sw-font-size: var(--b-comp-font-size-sm);
+  --_sw-line-height: var(--b-comp-line-height-sm);
+}
+
+.sizeMd {
+  --_sw-track-height: var(--b-comp-secondary-height-md);
+  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-md));
+  --_sw-track-radius: calc(var(--b-comp-secondary-height-md) / 2);
+  --_sw-thumb-size: calc(var(--b-comp-secondary-height-md) - 4px);
+  --_sw-thumb-offset: 2px;
+  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-md) - 4px);
+  --_sw-gap: 10px;
+  --_sw-min-height: var(--b-comp-height-md);
+  --_sw-font-size: var(--b-comp-font-size-md);
+  --_sw-line-height: var(--b-comp-line-height-md);
+}
+
+.sizeLg {
+  --_sw-track-height: var(--b-comp-secondary-height-lg);
+  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-lg));
+  --_sw-track-radius: calc(var(--b-comp-secondary-height-lg) / 2);
+  --_sw-thumb-size: calc(var(--b-comp-secondary-height-lg) - 4px);
+  --_sw-thumb-offset: 2px;
+  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-lg) - 4px);
+  --_sw-gap: 11px;
+  --_sw-min-height: var(--b-comp-height-lg);
+  --_sw-font-size: var(--b-comp-font-size-lg);
+  --_sw-line-height: var(--b-comp-line-height-lg);
+}
+
+.sizeXl {
+  --_sw-track-height: var(--b-comp-secondary-height-xl);
+  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-xl));
+  --_sw-track-radius: calc(var(--b-comp-secondary-height-xl) / 2);
+  --_sw-thumb-size: calc(var(--b-comp-secondary-height-xl) - 4px);
+  --_sw-thumb-offset: 2px;
+  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-xl) - 4px);
+  --_sw-gap: 12px;
+  --_sw-min-height: var(--b-comp-height-xl);
+  --_sw-font-size: var(--b-comp-font-size-xl);
+  --_sw-line-height: var(--b-comp-line-height-xl);
+}
+
+.size2xl {
+  --_sw-track-height: var(--b-comp-secondary-height-2xl);
+  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-2xl));
+  --_sw-track-radius: calc(var(--b-comp-secondary-height-2xl) / 2);
+  --_sw-thumb-size: calc(var(--b-comp-secondary-height-2xl) - 4px);
+  --_sw-thumb-offset: 2px;
+  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-2xl) - 4px);
+  --_sw-gap: 16px;
+  --_sw-min-height: var(--b-comp-height-2xl);
+  --_sw-font-size: var(--b-comp-font-size-2xl);
+  --_sw-line-height: var(--b-comp-line-height-2xl);
+}

package/src/Switch/index.js

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

package/src/Tabs/Tabs.jsx

@@ -0,0 +1,75 @@
+import { splitProps } from 'solid-js'
+import { Tabs as ArkTabs } from '@ark-ui/solid'
+import styles from './Tabs.module.css'
+
+/**
+ * @param {import('@ark-ui/solid').TabsRootProps} props
+ */
+function TabsRoot(props) {
+  return (
+    <ArkTabs.Root
+      class="balik-tabs"
+      {...props}
+    />
+  )
+}
+
+/**
+ * @param {import('@ark-ui/solid').TabListProps & { class?: string }} props
+ */
+function TabsList(props) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <ArkTabs.List
+      class={['balik-tabs__list', styles.list, local.class].filter(Boolean).join(' ')}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * @param {import('@ark-ui/solid').TabTriggerProps & { class?: string }} props
+ */
+function TabsTrigger(props) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <ArkTabs.Trigger
+      class={['balik-tabs__trigger', styles.trigger, local.class].filter(Boolean).join(' ')}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * @param {import('@ark-ui/solid').TabContentProps & { class?: string }} props
+ */
+function TabsContent(props) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <ArkTabs.Content
+      class={['balik-tabs__content', styles.content, local.class].filter(Boolean).join(' ')}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * @param {import('@ark-ui/solid').TabIndicatorProps & { class?: string }} props
+ */
+function TabsIndicator(props) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <ArkTabs.Indicator
+      class={['balik-tabs__indicator', styles.indicator, local.class].filter(Boolean).join(' ')}
+      {...rest}
+    />
+  )
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+  Indicator: TabsIndicator,
+  Original: ArkTabs,
+})

package/src/Tabs/Tabs.module.css

@@ -0,0 +1,45 @@
+.list {
+  position: relative;
+  display: flex;
+  border-bottom: 1px solid color-mix(in oklch, var(--base-fg) 12%, var(--base-bg));
+}
+
+.trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: 0 var(--b-container-padding-md);
+  border: none;
+  border-bottom: 1px solid transparent;
+  background: transparent;
+  color: color-mix(in oklch, var(--base-fg) 55%, transparent);
+  font-size: var(--b-comp-font-size-md);
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: none;
+}
+
+.trigger[data-selected] {
+  color: var(--base-edge);
+  border-bottom-color: var(--base-edge);
+}
+
+.trigger[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.indicator {
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  background-color: var(--base-edge);
+  transition: transform var(--b-transition-normal), width var(--b-transition-normal);
+}
+
+.content {
+  padding-top: var(--b-container-padding-sm);
+}

package/src/Tabs/index.js

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