margo-ui 3.0.1 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/checkbox/style.ts +1 -1
  3. package/src/components/input/style.ts +7 -5
  4. package/src/components/select/style.ts +4 -4
  5. package/src/components/toggle/style.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "margo-ui",
3
- "version": "3.0.1",
3
+ "version": "3.0.2",
4
4
  "description": "React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
5
5
  "keywords": [
6
6
  "react",
package/src/components/checkbox/style.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export const checkboxBaseClassName = `margo-checkbox size-5 flex-none cursor-pointer rounded-md border-2 border-border
2
2
  bg-main p-1 text-on-main enabled:hover:border-on-main focus-visible:border-primary focus-visible:outline
3
3
  focus-visible:outline-offset-1 focus-visible:outline-on-main checked:border-primary indeterminate:border-primary
4
- select-none origin-center transition-transform duration-[120ms] ease-out active:scale-[0.95] disabled:cursor-auto
4
+ select-none origin-center transition-transform duration-[120ms] ease-out active:scale-[0.92] disabled:cursor-auto
5
5
  disabled:opacity-40`;
package/src/components/input/style.ts CHANGED
@@ -1,13 +1,15 @@
1
- export const inputBaseClassName = `group/input flex w-full cursor-text items-center gap-1 rounded-lg border-2 px-3 py-2 text-on-main
2
- text-sm select-none min-h-[2.5rem] bg-low
1
+ export const inputBaseClassName = `group/input flex h-10 w-full cursor-text items-center rounded-lg border-2 text-on-main
2
+ text-sm select-none bg-low
3
3
  border-transparent text-medium hover:border-on-main hover:text-on-main hover:shadow-item
4
4
  focus-within:border-primary focus-within:text-on-main
5
5
  has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-auto has-[input:disabled]:opacity-40`;
6
6
 
7
7
  export const inputActiveClassName = "border-primary";
8
8
 
9
- export const inputIconClassName = `ml-auto flex size-4 flex-none shrink-0 items-center justify-center first:ml-0
9
+ export const inputIconClassName = `ml-auto flex h-full w-8 flex-none shrink-0 items-center justify-center pr-3 pl-1
10
+ first:ml-0 first:pr-1 first:pl-3
10
11
  [[data-margo-input-slot]+&]:ml-0`;
11
12
 
12
- export const inputTextClassName = `min-w-0 flex-1 truncate border-none bg-transparent text-left text-on-main outline-none
13
- placeholder:text-medium disabled:cursor-auto`;
13
+ export const inputTextClassName = `h-full min-w-0 flex-1 truncate border-none bg-transparent px-3 text-left text-on-main
14
+ outline-none placeholder:text-medium disabled:cursor-auto
15
+ [[data-margo-input-slot]+&]:pl-0 [&:has(+[data-margo-input-slot])]:pr-0`;
package/src/components/select/style.ts CHANGED
@@ -1,4 +1,4 @@
1
- export const selectBaseClassName = `group/select relative flex min-h-[2.5rem] w-full items-center gap-1 rounded-lg
1
+ export const selectBaseClassName = `group/select relative flex h-10 w-full items-center rounded-lg
2
2
  border-2 border-transparent bg-low text-sm text-medium select-none
3
3
  hover:border-on-main hover:text-on-main hover:shadow-item
4
4
  focus-within:border-primary focus-within:text-on-main
@@ -6,10 +6,10 @@ has-[select:disabled]:pointer-events-none has-[select:disabled]:opacity-40`;
6
6
 
7
7
  export const selectActiveClassName = "border-primary";
8
8
 
9
- export const selectControlClassName = `min-w-0 flex-1 cursor-pointer appearance-none truncate rounded-lg
10
- bg-transparent px-3 py-2 text-left text-on-main outline-none disabled:cursor-auto
9
+ export const selectControlClassName = `h-full min-w-0 flex-1 cursor-pointer appearance-none truncate rounded-lg
10
+ bg-transparent pl-3 text-left text-on-main outline-none disabled:cursor-auto
11
11
  has-[option[value='']:checked]:text-medium
12
12
  [&>option]:bg-main [&>option]:text-on-main
13
13
  [&>option:checked]:bg-primary-darken [&>option:checked]:text-on-main`;
14
14
 
15
- export const selectIconClassName = "pointer-events-none mr-3 flex size-4 flex-none items-center justify-center";
15
+ export const selectIconClassName = `pointer-events-none flex h-full w-8 flex-none items-center justify-center pr-3 pl-1`;
package/src/components/toggle/style.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export const toggleBaseClassName = `margo-toggle h-5 w-9 flex-none cursor-pointer rounded-full border-2 border-border
2
2
  bg-main p-0.5 text-on-main enabled:hover:border-on-main focus-visible:border-primary focus-visible:outline
3
3
  focus-visible:outline-offset-1 focus-visible:outline-on-main checked:border-primary select-none origin-center
4
- transition-transform duration-[160ms] ease-out active:scale-[0.98] disabled:cursor-auto disabled:opacity-40`;
4
+ transition-transform duration-[160ms] ease-out active:scale-[0.92] disabled:cursor-auto disabled:opacity-40`;