feat: knobs

src/stories/Knob.stories.tsx

@@ -15,15 +15,22 @@ const meta = {
   },
   args: { defaultValue: 62, min: 0, max: 100, step: 0, accent: 'lime' },
   argTypes: {
-    defaultValue: { control: 'number', description: 'Uncontrolled starting value.' },
+    defaultValue: {
+      control: 'number',
+      description: 'Uncontrolled starting value.',
+    },
     min: { control: 'number' },
     max: { control: 'number' },
-    step: { control: 'number', description: '`0` = continuous; `> 0` adds detents + ticks.' },
+    step: {
+      control: 'number',
+      description: '`0` = continuous; `> 0` adds detents + ticks.',
+    },
     accent: { control: 'inline-radio', options: ['lime', 'ember'] },
     size: { control: 'number', description: 'Diameter in px (default 108).' },
     animated: {
       control: 'boolean',
-      description: 'Glide the fill/value between detents. Defaults to `true` when `step > 0`.',
+      description:
+        'Glide the fill/value between detents. Defaults to `true` when `step > 0`.',
     },
     disabled: { control: 'boolean' },
     className: { control: 'text' },
@@ -57,7 +64,14 @@ export const Disabled: Story = {
 const Readout = (args: React.ComponentProps<typeof Knob>) => {
   const [v, setV] = useState(62);
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 14,
+      }}
+    >
       <Knob {...args} value={v} onValueChange={setV} aria-label="Volume" />
       <span
         style={{
@@ -67,8 +81,10 @@ const Readout = (args: React.ComponentProps<typeof Knob>) => {
           fontVariantNumeric: 'tabular-nums',
         }}
       >
-        {v}
+        {v.toFixed(2)}
-        <span style={{ fontSize: 12, color: 'var(--fg-3)', marginLeft: 2 }}>%</span>
+        <span style={{ fontSize: 12, color: 'var(--fg-3)', marginLeft: 2 }}>
+          %
+        </span>
       </span>
     </div>
   );

src/styles/components.css

@@ -607,7 +607,7 @@ textarea.modern-sk-field {
   position: relative;
   display: flex;
   align-items: center;
-  width: 200px;
+  width: 100%;
   height: var(--ms-thumb);
   user-select: none;
   touch-action: none;